From 73d5648cb09f74ef97f5f0d992b11b71d8d2b324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 31 Mar 2022 10:14:41 +0200
Subject: [PATCH] MOBILE-3833 tabs: Reduce tabs layouts

---
 .../tabs-outlet/core-tabs-outlet.html         | 65 +++++++------
 src/core/components/tabs/core-tabs.html       | 64 +++++++------
 src/core/components/tabs/tabs.scss            | 92 ++++++++++---------
 3 files changed, 113 insertions(+), 108 deletions(-)

diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index 7d0b9e925..ff4c3f825 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -1,37 +1,36 @@
 <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-row *ngIf="hideUntil">
-            <ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
-                <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
-            </ion-col>
-            <ion-col class="ion-no-padding" size="10">
-                <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
-                    <ng-container *ngFor="let tab of tabs">
-                        <ion-slide role="presentation" class="tab-slide" [id]=" tab.id! + '-tab'" tabindex="-1"
-                            [class.selected]="selected == tab.id">
-                            <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}}"
-                                role="tab" [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
-                                [tabindex]="selected == tab.id ? 0 : -1">
-                                <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
-                                <ion-label>
-                                    {{ tab.title | translate}}
-                                    <ion-badge *ngIf="tab.badge">
-                                        <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                        <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                            {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                        </span>
-                                    </ion-badge>
-                                </ion-label>
-                            </ion-tab-button>
-                        </ion-slide>
-                    </ng-container>
-                </ion-slides>
-            </ion-col>
-            <ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton">
-                <ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon>
-            </ion-col>
-        </ion-row>
+        <ng-container *ngIf="hideUntil">
+            <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
+                [attr.aria-label]="'core.previous' | translate">
+                <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
+            </ion-button>
+            <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
+                <ng-container *ngFor="let tab of tabs">
+                    <ion-slide role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id">
+                        <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}}" role="tab"
+                            [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
+                            [tabindex]="selected == tab.id ? 0 : -1">
+                            <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
+                            <ion-label>
+                                {{ tab.title | translate}}
+                                <ion-badge *ngIf="tab.badge">
+                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                    </span>
+                                </ion-badge>
+                            </ion-label>
+                        </ion-tab-button>
+                    </ion-slide>
+                </ng-container>
+            </ion-slides>
+            <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
+                [attr.aria-label]="'core.next' | translate">
+                <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
+            </ion-button>
+        </ng-container>
     </ion-tab-bar>
 </ion-tabs>
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index ced60ce60..89e426368 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -1,37 +1,35 @@
-<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-row *ngIf="hideUntil">
-        <ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
-            <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
-        </ion-col>
-        <ion-col class="ion-no-padding" size="10">
-            <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
-                <ng-container *ngFor="let tab of tabs">
-                    <ion-slide *ngIf="tab.enabled" role="presentation" class="tab-slide" [id]="tab.id! + '-tab'"
-                        [class.selected]="selected == tab.id">
-                        <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"
-                            [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
-                            [tabindex]="selected == tab.id ? 0 : -1">
-                            <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
-                            <ion-label>
-                                {{ tab.title | translate}}
-                                <ion-badge *ngIf="tab.badge">
-                                    <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
-                                    <span *ngIf="tab.badgeA11yText" class="sr-only">
-                                        {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
-                                    </span>
-                                </ion-badge>
-                            </ion-label>
-                        </ion-tab-button>
-                    </ion-slide>
-                </ng-container>
-            </ion-slides>
-        </ion-col>
-        <ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton">
-            <ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon>
-        </ion-col>
-    </ion-row>
+    <ng-container *ngIf="hideUntil">
+        <ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
+            [attr.aria-label]="'core.previous' | translate">
+            <ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
+        </ion-button>
+        <ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
+            <ng-container *ngFor="let tab of tabs">
+                <ion-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected == tab.id">
+                    <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"
+                        [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
+                        <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
+                        <ion-label>
+                            {{ tab.title | translate}}
+                            <ion-badge *ngIf="tab.badge">
+                                <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
+                                <span *ngIf="tab.badgeA11yText" class="sr-only">
+                                    {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
+                                </span>
+                            </ion-badge>
+                        </ion-label>
+                    </ion-tab-button>
+                </ion-slide>
+            </ng-container>
+        </ion-slides>
+        <ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
+            [attr.aria-label]="'core.next' | translate">
+            <ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
+        </ion-button>
+    </ng-container>
 </ion-tab-bar>
 <div class="core-tabs-content-container" #originalTabs>
     <ng-content></ng-content>
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 8aa6e50c8..69d09150f 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -14,7 +14,7 @@
         position: relative;
     }
 
-    ion-tab-bar.core-tabs-bar {
+    ion-tab-bar {
         position: relative;
         background: var(--tabs-background);
         @include safe-area-padding-end(null, 0px);
@@ -22,57 +22,65 @@
         color: var(--tabs-color);
         border-bottom: 1px solid var(--stroke);
         display: flex;
-        align-items: flex-end;
+        flex-direction: row;
+        justify-content: space-between;
         flex-shrink: 0;
 
-        ion-row {
-            width: 100%;
+        ion-spinner {
+            flex-grow: 1;
         }
 
-        .tab-slide {
-            border-bottom: 2px solid transparent;
-            min-width: 100px;
-            min-height: var(--height);
-            cursor: pointer;
-            overflow: hidden;
-
-            ion-tab-button {
-                max-width: 100%;
-                ion-label {
-                    font-size: 14px;
-                    font-weight: 400;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    word-wrap: break-word;
-                    max-width: 100%;
-                    line-height: 1.2em;
-                    margin-top: 16px;
-                    margin-bottom: 16px;
-                }
-            }
-
-            &[aria-selected=true],
-            &.selected {
-                color: var(--color-active);
-                border-bottom-color: var(--border-color-active);
-                ion-tab-button {
-                    color: var(--color-active);
-                    ion-label {
-                        font-weight: var(--font-weight-active);
-                    }
-                }
+        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-col {
+        ion-slides {
             text-align: center;
             line-height: 1.6rem;
+            flex-grow: 1;
 
-            &.col-with-arrow {
-                display: flex;
-                justify-content: center;
-                align-items: center;
+            ion-slide {
+                border-bottom: 2px solid transparent;
+                min-width: 100px;
+                height: var(--height);
+                cursor: pointer;
+                overflow: hidden;
+
+                ion-tab-button {
+                    max-width: 100%;
+                    ion-label {
+                        font-size: 14px;
+                        font-weight: 400;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        word-wrap: break-word;
+                        max-width: 100%;
+                        line-height: 1.2em;
+                    }
+                }
+
+                &[aria-selected=true],
+                &.selected {
+                    color: var(--color-active);
+                    border-bottom-color: var(--border-color-active);
+                    ion-tab-button {
+                        color: var(--color-active);
+                        ion-label {
+                            font-weight: var(--font-weight-active);
+                        }
+                    }
+                }
             }
         }