EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2365 from dpalou/MOBILE-3380 

MOBILE-3380 placeholder: Flip arrow based on language direction
main
Juan Leyva 2020-05-07 13:41:11 +02:00 committed by GitHub
parent d4e9134f41 26f9e6bda3
commit 197af83b7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/empty-box/core-empty-box.html
View File

@ -1,7 +1,7 @@
<div class="core-empty-box" [class.core-empty-box-inline]="(!image && !icon) || inline"> <div class="core-empty-box" [class.core-empty-box-inline]="(!image && !icon) || inline">
<div class="core-empty-box-content" padding> <div class="core-empty-box-content" padding>
<img *ngIf="image && !icon" [src]="image" role="presentation"> <img *ngIf="image && !icon" [src]="image" role="presentation">
<core-icon *ngIf="icon" [name]="icon"></core-icon> <core-icon *ngIf="icon" [name]="icon" [flipRtl]="flipIconRtl"></core-icon>
<p *ngIf="message" [class.padding-top]="image || icon">{{ message }}</p> <p *ngIf="message" [class.padding-top]="image || icon">{{ message }}</p>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

1
src/components/empty-box/empty-box.ts
View File

@ -32,6 +32,7 @@ export class CoreEmptyBoxComponent {
@Input() image?: string; // Image source. If an icon is provided, image won't be used. @Input() image?: string; // Image source. If an icon is provided, image won't be used.
@Input() inline?: boolean; // If this has to be shown inline instead of occupying whole page. @Input() inline?: boolean; // If this has to be shown inline instead of occupying whole page.
// If image or icon is not supplied, it's true by default. // If image or icon is not supplied, it's true by default.
@Input() flipIconRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false.
constructor() { constructor() {
// Nothing to do. // Nothing to do.

5
src/components/icon/icon.ts
View File

@ -40,6 +40,7 @@ export class CoreIconComponent implements OnChanges, OnDestroy {
@Input('fixed-width') fixedWidth: string; @Input('fixed-width') fixedWidth: string;
@Input('label') ariaLabel?: string; @Input('label') ariaLabel?: string;
@Input() flipRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false.
protected element: HTMLElement; protected element: HTMLElement;
protected newElement: HTMLElement; protected newElement: HTMLElement;
@ -106,6 +107,10 @@ export class CoreIconComponent implements OnChanges, OnDestroy {
this.newElement.classList.add('icon-slash'); this.newElement.classList.add('icon-slash');
} }
if (this.flipRtl) {
this.newElement.classList.add('core-icon-dir-flip');
}
oldElement.parentElement.replaceChild(this.newElement, oldElement); oldElement.parentElement.replaceChild(this.newElement, oldElement);
} }

2
src/components/split-view/placeholder/core-placeholder.html
View File

@ -5,5 +5,5 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<core-empty-box icon="arrow-dropleft" [message]="'core.emptysplit' | translate"></core-empty-box> <core-empty-box icon="arrow-dropleft" [message]="'core.emptysplit' | translate" [flipIconRtl]="true"></core-empty-box>
</ion-content> </ion-content>