CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 tabs: Reduce tabs layouts

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-31 10:14:41 +02:00
parent b2246a01c5
commit 73d5648cb0
3 changed files with 113 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/core/components/tabs-outlet/core-tabs-outlet.html
View File

@ -1,18 +1,17 @@
<ion-tabs class="hide-header"> <ion-tabs class="hide-header">
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar> <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner> <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
<ion-row *ngIf="hideUntil"> <ng-container *ngIf="hideUntil">
<ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton"> <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon> [attr.aria-label]="'core.previous' | translate">
</ion-col> <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
<ion-col class="ion-no-padding" size="10"> </ion-button>
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description"> <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
<ng-container *ngFor="let tab of tabs"> <ng-container *ngFor="let tab of tabs">
<ion-slide role="presentation" class="tab-slide" [id]=" tab.id! + '-tab'" tabindex="-1" <ion-slide role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id">
[class.selected]="selected == tab.id">
<ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)" <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
(keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" class="{{tab.class}}" (keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" class="{{tab.class}}" role="tab"
role="tab" [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id" [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
[tabindex]="selected == tab.id ? 0 : -1"> [tabindex]="selected == tab.id ? 0 : -1">
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon> <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
@ -28,10 +27,10 @@
</ion-slide> </ion-slide>
</ng-container> </ng-container>
</ion-slides> </ion-slides>
</ion-col> <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
<ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton"> [attr.aria-label]="'core.next' | translate">
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon> <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
</ion-col> </ion-button>
</ion-row> </ng-container>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>

28
src/core/components/tabs/core-tabs.html
View File

@ -1,18 +1,16 @@
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar> <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner> <ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
<ion-row *ngIf="hideUntil"> <ng-container *ngIf="hideUntil">
<ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton"> <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon> [attr.aria-label]="'core.previous' | translate">
</ion-col> <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
<ion-col class="ion-no-padding" size="10"> </ion-button>
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description"> <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
<ng-container *ngFor="let tab of tabs"> <ng-container *ngFor="let tab of tabs">
<ion-slide *ngIf="tab.enabled" role="presentation" class="tab-slide" [id]="tab.id! + '-tab'" <ion-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected == tab.id">
[class.selected]="selected == tab.id">
<ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)" <ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
(keyup)="tabAction.keyUp(tab.id, $event)" class="{{tab.class}}" [layout]="layout" role="tab" (keyup)="tabAction.keyUp(tab.id, $event)" class="{{tab.class}}" [layout]="layout" role="tab"
[attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id" [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
[tabindex]="selected == tab.id ? 0 : -1">
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon> <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
{{ tab.title | translate}} {{ tab.title | translate}}
@ -27,11 +25,11 @@
</ion-slide> </ion-slide>
</ng-container> </ng-container>
</ion-slides> </ion-slides>
</ion-col> <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
<ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton"> [attr.aria-label]="'core.next' | translate">
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon> <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
</ion-col> </ion-button>
</ion-row> </ng-container>
</ion-tab-bar> </ion-tab-bar>
<div class="core-tabs-content-container" #originalTabs> <div class="core-tabs-content-container" #originalTabs>
<ng-content></ng-content> <ng-content></ng-content>

44
src/core/components/tabs/tabs.scss
View File

@ -14,7 +14,7 @@
position: relative; position: relative;
} }
ion-tab-bar.core-tabs-bar { ion-tab-bar {
position: relative; position: relative;
background: var(--tabs-background); background: var(--tabs-background);
@include safe-area-padding-end(null, 0px); @include safe-area-padding-end(null, 0px);
@ -22,17 +22,37 @@
color: var(--tabs-color); color: var(--tabs-color);
border-bottom: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
display: flex; display: flex;
align-items: flex-end; flex-direction: row;
justify-content: space-between;
flex-shrink: 0; flex-shrink: 0;
ion-row { ion-spinner {
width: 100%; flex-grow: 1;
} }
.tab-slide { ion-button.arrow-button {
flex-shrink: 1;
margin: 0;
padding: 0;
--padding-start: 0;
--padding-end: 0;
min-width: 30px;
height: var(--height);
--border-radius: 0;
ion-icon {
font-size: 16px;
}
}
ion-slides {
text-align: center;
line-height: 1.6rem;
flex-grow: 1;
ion-slide {
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
min-width: 100px; min-width: 100px;
min-height: var(--height); height: var(--height);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
@ -47,8 +67,6 @@
word-wrap: break-word; word-wrap: break-word;
max-width: 100%; max-width: 100%;
line-height: 1.2em; line-height: 1.2em;
margin-top: 16px;
margin-bottom: 16px;
} }
} }
@ -64,16 +82,6 @@
} }
} }
} }
ion-col {
text-align: center;
line-height: 1.6rem;
&.col-with-arrow {
display: flex;
justify-content: center;
align-items: center;
}
} }
&.tabs-hidden { &.tabs-hidden {