MOBILE-3749 style: Fix some button styles

2021-05-10 11:52:41 +02:00 · 2021-05-10 11:52:41 +02:00 · 7851a97e6d
commit 7851a97e6d
parent 3fe3083f22
21 changed files with 110 additions and 69 deletions
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@ -4,4 +4,8 @@
    .core-horizontal-scroll > div {
        @include horizontal_scroll_item(80%, 250px, 300px);
    }
+
+    .core-course-module-handler {
+        --inner-border-width: 0;
+    }
 }
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@ -146,8 +146,7 @@
    .core-module-icon {
        margin-right: 1px;
        margin-left: 1px;
-        width: 16px;
-        height: 16px;
+        --size: 16px;
        display: inline-block;
        vertical-align: bottom;
    }
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@ -43,8 +43,7 @@
                    </ng-container>
                    &nbsp;/&nbsp;
                    <span *ngFor="let ancestor of competency.competency.comppath.ancestors">
-                        <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)"
-                            class="core-clickable">
+                        <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)">
                            {{ ancestor.name }}
                        </a>
                        <ng-container *ngIf="!competency.competency.comppath.showlinks">{{ ancestor.name }}</ng-container>
@ -60,7 +59,7 @@
                    </div>
                    <div *ngIf="competency.competency.hasrelatedcompetencies">
                        <p *ngFor="let relatedcomp of competency.competency.relatedcompetencies">
-                            <a (click)="openCompetencySummary(relatedcomp.id)" class="core-clickable">
+                            <a (click)="openCompetencySummary(relatedcomp.id)">
                                {{ relatedcomp.shortname }} - {{ relatedcomp.idnumber }}
                            </a>
                        </p>
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@ -31,7 +31,7 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">

    <!-- Description and intro attachments. -->
-    <ion-card *ngIf="description" (click)="expandDescription($event)" class="core-clickable">
+    <ion-card *ngIf="description">
        <ion-item class="ion-text-wrap">
            <ion-label>
                <core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120"
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@ -5,11 +5,15 @@
        [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
    </iframe>

-    <div [hidden]="loading" class="ion-text-center ion-text-wrap core-iframe-help">
-        <ion-button fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog">
-            {{ 'core.iframehelp' | translate }}
-        </ion-button>
-    </div>
+    <ion-button
+        *ngIf="!loading"
+        color="dark" expand="block" fill="clear"
+        (click)="openIframeHelpModal()"
+        aria-haspopup="dialog"
+        class="core-button-as-link"
+    >
+        <ion-label>{{ 'core.iframehelp' | translate }}</ion-label>
+    </ion-button>

    <span class="core-loading-spinner">
        <ion-spinner *ngIf="loading"></ion-spinner>
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@ -1,7 +1,7 @@
 <ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
    <ion-row>
        <ion-col class="ion-text-start" size="4">
-            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" color="light"
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow"
                [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
                <ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
                <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
--- a/src/core/components/show-password/show-password.scss
+++ b/src/core/components/show-password/show-password.scss
@ -6,7 +6,6 @@
        padding: 0 calc(var(--padding-start) / 2);
        position: absolute;
        right: 0;
-        bottom: 8px;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 3;
--- a/src/core/components/user-avatar/core-user-avatar.html
+++ b/src/core/components/user-avatar/core-user-avatar.html
@ -1,8 +1,17 @@
-<img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
-    onError="this.src='assets/img/user-avatar.png'" (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile"
-    [attr.role]="linkProfile ? 'button' : null" (keydown)="buttonAction.keyDown($event)"
+<img
+    *ngIf="avatarUrl"
+    [src]="avatarUrl"
+    [alt]="'core.pictureof' | translate:{$a: fullname}"
+    core-external-content
+    onError="this.src='assets/img/user-avatar.png'"
+    (click)="gotoProfile($event)"
+    [attr.aria-hidden]="!linkProfile"
+    [attr.role]="linkProfile ? 'button' : null"
+    (keydown)="buttonAction.keyDown($event)"
    (keyup)="buttonAction.keyUp($event)"
-    [attr.tabindex]="linkProfile ? 0 : null">
+    [attr.tabindex]="linkProfile ? 0 : null"
+    [class.clickable]="linkProfile"
+>

 <img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
    (click)="gotoProfile($event)" [attr.aria-hidden]="!linkProfile" [attr.role]="linkProfile ? 'button' : null"
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@ -1,6 +1,9 @@
 :host {
    position: relative;
-    cursor: pointer;
+
+    .clickable {
+        cursor: pointer;
+    }
    img {
        border-radius: 50%;
        width: var(--core-avatar-size);
--- a/src/core/features/course/components/format/core-course-format.html
+++ b/src/core/features/course/components/format/core-course-format.html
@ -92,7 +92,7 @@

            <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" color="light" (click)="sectionChanged(previousSection)"
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
                    [attr.aria-label]="'core.previous' | translate">
                    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                    <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@ -63,11 +63,16 @@
        </form>

        <!-- Forgotten password option. -->
-        <ion-list lines="none" *ngIf="showForgottenPassword" class="core-login-forgotten-password ion-no-padding">
-            <ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
-                <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
-            </ion-item>
-        </ion-list>
+        <ion-button
+            *ngIf="showForgottenPassword"
+            expand="block"
+            fill="clear"
+            color="dark"
+            class="core-login-forgotten-password core-button-as-link"
+            (click)="forgottenPassword()"
+        >
+            <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+        </ion-button>

        <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
            <ion-item class="ion-text-wrap" lines="none">
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@ -71,13 +71,16 @@
    </form>

    <!-- Forgotten password option. -->
-    <ion-list lines="none" *ngIf="showForgottenPassword && !isOAuth" class="core-login-forgotten-password ion-no-padding">
-        <ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
-            <ion-label>
-                {{ 'core.login.forgotten' | translate }}
-            </ion-label>
-        </ion-item>
-    </ion-list>
+    <ion-button
+        *ngIf="showForgottenPassword && !isOAuth"
+        expand="block"
+        fill="clear"
+        color="dark"
+        class="core-login-forgotten-password core-button-as-link"
+        (click)="forgottenPassword()"
+    >
+        <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+    </ion-button>

    <!-- Identity providers. -->
    <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
@ -85,8 +88,8 @@
            <ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
        </ion-item>
        <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
-            (click)="oauthClicked(provider)" [attr.aria-label]="provider.name">
-            <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
+            (click)="oauthClicked(provider)">
+            <img [src]="provider.iconurl" alt="" role="presentation" width="32" height="32" slot="start">
            <ion-label>{{provider.name}}</ion-label>
        </ion-item>
    </ion-list>
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@ -109,12 +109,16 @@
    </ng-container>

    <!-- Help. -->
-    <ion-list lines="none" class="ion-margin-top">
-        <ion-item button class="ion-text-center ion-text-wrap core-login-need-help" (click)="showHelp()" detail="false"
-            aria-haspopup="dialog">
-            <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
-        </ion-item>
-    </ion-list>
+    <ion-button
+        class="ion-margin-top core-login-need-help core-button-as-link"
+        (click)="showHelp()"
+        aria-haspopup="dialog"
+        expand="block"
+        fill="clear"
+        color="dark"
+    >
+        <ion-label>{{ 'core.needhelp' | translate }}</ion-label>
+    </ion-button>
 </ion-content>

 <!-- Template site selector. -->
--- a/src/core/features/login/pages/site/site.scss
+++ b/src/core/features/login/pages/site/site.scss
@ -12,7 +12,6 @@

 .item {
    &.core-login-need-help {
-        text-decoration: underline;
        margin-top: 16px;
    }
    &.core-login-site-qrcode {
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@ -1,9 +1,10 @@
+@import "~theme/globals";
+
 :host{
    --menutabbar-size: 60px;

-    ion-tabs {
-        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
+    ion-tab-bar {
+        box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
    }

    ion-tab-button ion-icon {
@ -28,6 +29,10 @@
            width: var(--menutabbar-size);
            height: 100%;
            flex-direction: column;
+            @include border-end(var(--border));
+            box-shadow: 3px 0 3px rgba(var(--drop-shadow));
+            border-top: 0;
+
            ion-tab-button {
                width: 100%;
                ion-badge {
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@ -14,11 +14,16 @@
        <ion-list *ngIf="user && !isDeleted && isEnrolled">
            <ion-item class="ion-text-center core-user-profile-maininfo">
                <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
-                    <div class="core-icon-foreground" *ngIf="canChangeProfilePicture">
-                        <ion-icon name="fa-pen" (click)="changeProfilePicture()"
-                            [attr.aria-label]="'core.user.newpicture' | translate">
-                        </ion-icon>
-                    </div>
+                    <ion-button
+                        class="edit-avatar"
+                        *ngIf="canChangeProfilePicture"
+                        (click)="changeProfilePicture()"
+                        [attr.aria-label]="'core.user.newpicture' | translate"
+                        fill="clear"
+                        color="dark"
+                    >
+                        <ion-icon slot="icon-only" name="fa-pen" aria-hidden="true"></ion-icon>
+                    </ion-button>
                </core-user-avatar>
                <ion-label>
                    <h2>{{ user.fullname }}</h2>
--- a/src/core/features/user/pages/profile/profile.scss
+++ b/src/core/features/user/pages/profile/profile.scss
@ -17,16 +17,12 @@
                height: 24px !important;
            }

-            .core-icon-foreground {
+            .edit-avatar {
                position: absolute;
-                right: 0;
-                bottom: 0;
-                line-height: 30px;
-                text-align: center;
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                background-color:var(--background);
+                right: -24px;
+                bottom: -12px;
+                --border-radius: 50%;
+                --background: var(--ion-item-background);

                :host-context([dir="rtl"]) & {
                    left: 0;
@ -38,8 +34,7 @@

 }

-:host-context([dir="rtl"]) ::ng-deep core-user-avatar .core-icon-foreground {
-    left: 0;
+:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
+    left: -24px;
    right: unset;
 }
-
--- a/src/theme/globals.mixins.ionic.scss
+++ b/src/theme/globals.mixins.ionic.scss
@ -107,6 +107,7 @@
    $tint: map-get($value, tint);

    --ion-color-#{$color-name}: #{$base};
+    --ion-color-#{$color-name}-base: #{$base};
    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
    --ion-color-#{$color-name}-contrast: #{$contrast};
    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
@ -115,6 +116,7 @@

    .ion-color-#{$color-name} {
        --ion-color: #{$base};
+        --ion-color-base: #{$base};
        --ion-color-rgb: #{color-to-rgb-list($base)};
        --ion-color-contrast: #{$contrast};
        --ion-color-contrast-rgb: #{color-to-rgb-list($contrast)};
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@ -30,7 +30,7 @@
    }
 }

-@mixin border-start($px, $type, $color) {
+@mixin border-start($px, $type: null, $color: null) {
    @include ltr() {
        border-left: $px $type $color;
    }
@ -41,7 +41,7 @@
 }


-@mixin border-end($px, $type, $color) {
+@mixin border-end($px, $type: null, $color: null) {
    @include ltr() {
        border-right: $px $type $color;
    }
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@ -79,6 +79,7 @@ ion-toolbar .in-toolbar.button-clear {

 ion-header ion-toolbar .button.button-clear,
 ion-header ion-toolbar .button.button-solid {
+    --background: transparent;
    --color: var(--core-header-toolbar-color);
    --ion-color-primary: var(--core-header-toolbar-color);
 }
@ -130,7 +131,7 @@ ion-button.button-small ion-icon.faicon[slot] {
 }

 // Buttons.
-ion-button {
+ion-button, button, [role="button"] {
    min-height: var(--a11y-min-target-size);
    min-width: var(--a11y-min-target-size);
 }
@ -144,10 +145,13 @@ ion-button {
    }
 }

-.core-iframe-help ion-button {
+ion-button.core-button-as-link {
    text-transform: none;
    text-decoration: underline;
-    --color: initial;
+    font-size: inherit;
+    font-weight: normal;
+    letter-spacing: normal;
+    white-space: break-spaces;
 }

 // Ionic alert.
@ -363,7 +367,7 @@ img[alt] {

 // Activity modules
 .core-module-icon {
-    --size: 24px;
+    --size: var(--module-icon-size);
    width: var(--size);
    height: var(--size);
    max-width: var(--size);
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@ -65,6 +65,8 @@
    // Accessibility vars.
    --a11y-min-target-size: 44px;

+    --module-icon-size: 24px;
+
    --ion-text-color: #{$text-color};
    --ion-text-color-rgb: 58,58,58;
    --ion-card-color: var(--ion-text-color);
@ -215,10 +217,10 @@
    --addon-forum-border-color: #{$addon-forum-border-color};
    --addon-forum-highlight-color: #{$addon-forum-highlight-color};

-    --drop-shadow: 0, 0, 0, 0.2;
+    --drop-shadow: 0, 0, 0, 0.18;

-    --core-menu-box-shadow-end: -4px 0px 16px rgba(0, 0, 0, 0.18);
-    --core-menu-box-shadow-start: 4px 0px 16px rgba(0, 0, 0, 0.18);
+    --core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
+    --core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));

    --core-question-correct-color: var(--green-dark);
    --core-question-correct-color-bg: var(--green-light);