MOBILE-4362 user: Improve user pages look and feel

crazyserver · Oct 5, 2023 · db5b58d · db5b58d
1 parent 9f8d0ef
commit db5b58d
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 93 deletions.
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
@@ -4,6 +4,9 @@
     position: relative;
     width: var(--core-avatar-size);
     height: var(--core-avatar-size);
+    --contact-status-size: 14px;
+    --margin-end-on-item: 8px;
+    --margin-vertical-on-item: 8px;
 
     img {
         border-radius: var(--core-avatar-radius);
@@ -53,8 +56,8 @@
         position: absolute;
         right: 0;
         bottom: 0;
-        width: 14px;
-        height: 14px;
+        width: var(--contact-status-size);
+        height: var(--contact-status-size);
         border-radius: 50%;
         &.online {
             border: 1px solid white;
@@ -92,7 +95,7 @@
 }
 
 :host-context(ion-item) {
-    @include margin(6px, 8px, 6px, 0px);
+    @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
     img {
         min-width: var(--core-avatar-size);
         min-height: var(--core-avatar-size);

diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
@@ -23,9 +23,6 @@ <h1>{{ 'core.user.profile' | translate }}</h1>
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{ user.fullname }}</h2>
-                    <p *ngIf="user.address">
-                        <ion-icon name="fas-location-dot" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
-                    </p>
                 </ion-label>
             </ion-item>
 
@@ -43,6 +40,24 @@ <h2>{{ user.fullname }}</h2>
                             </a></p>
                     </ion-label>
                 </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="user.country">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.user.country' | translate}}</p>
+                        <p>{{ user.country }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="user.city">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.user.city' | translate}}</p>
+                        <p>{{ user.city }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="displayTimezone && user.timezone">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.timezone' | translate}}</p>
+                        <p>{{ user.timezone }}</p>
+                    </ion-label>
+                </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.phone1">
                     <ion-label>
                         <p class="item-heading">{{ 'core.user.phone1' | translate}}</p>
@@ -59,31 +74,9 @@ <h2>{{ user.fullname }}</h2>
                             </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.city">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.user.city' | translate}}</p>
-                        <p>{{ user.city }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.country">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.user.country' | translate}}</p>
-                        <p>{{ user.country }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="displayTimezone && user.timezone">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.timezone' | translate}}</p>
-                        <p>{{ user.timezone }}</p>
-                    </ion-label>
-                </ion-item>
+
+
                 <ng-container *ngIf="canShowDepartment">
-                    <ion-item class="ion-text-wrap" *ngIf="user.idnumber">
-                        <ion-label>
-                            <p class="item-heading">{{ 'core.user.idnumber' | translate }}</p>
-                            <p>{{ user.idnumber }}</p>
-                        </ion-label>
-                    </ion-item>
                     <ion-item class="ion-text-wrap" *ngIf="user.institution">
                         <ion-label>
                             <p class="item-heading">{{ 'core.user.institution' | translate }}</p>
@@ -96,6 +89,12 @@ <h2>{{ user.fullname }}</h2>
                             <p>{{ user.department }}</p>
                         </ion-label>
                     </ion-item>
+                    <ion-item class="ion-text-wrap" *ngIf="user.idnumber">
+                        <ion-label>
+                            <p class="item-heading">{{ 'core.user.idnumber' | translate }}</p>
+                            <p>{{ user.idnumber }}</p>
+                        </ion-label>
+                    </ion-item>
                 </ng-container>
             </ion-item-group>
             <ion-item-group *ngIf="hasDetails">

diff --git a/src/core/features/user/pages/about/about.scss b/src/core/features/user/pages/about/about.scss
@@ -1,41 +1,36 @@
 :host {
-
     .core-user-profile-maininfo::part(native) {
         flex-direction: column;
     }
-    ::ng-deep {
-        core-user-avatar {
-            display: block;
-            --core-avatar-size: var(--core-large-avatar-size);
-            height: calc(var(--core-avatar-size) + 16px);
+    core-user-avatar {
+        --core-avatar-size: var(--core-large-avatar-size);
+        --contact-status-size: 24px;
+        --margin-end-on-item: 0px;
+        --margin-vertical-on-item: 0px;
+
+        .contact-status {
+            right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
+        }
 
-            img {
-                margin: 8px auto;
-            }
+        .edit-avatar {
+            position: absolute;
+            right: calc(50% - 24px - var(--core-avatar-size) / 2);
+            bottom: -12px;
 
-            .contact-status {
-                width: 24px !important;
-                height: 24px !important;
-                right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
+            :host-context([dir="rtl"]) & {
+                left: 0;
+                right: unset;
             }
-
-            .edit-avatar {
-                position: absolute;
-                right: calc(50% - 15px - var(--core-avatar-size) / 2);
-                bottom: -12px;
-
-                :host-context([dir="rtl"]) & {
-                    left: 0;
-                    right: unset;
-                }
-                &::part(native) {
-                    border-radius: 50%;
-                    background: var(--ion-item-background);
-                }
+            &::part(native) {
+                border-radius: 50%;
+                background: var(--ion-item-background);
             }
         }
     }
 
+    h2 {
+        font-size: 24px;
+    }
     .core-user-profile-interests {
         ion-badge {
             cursor: pointer;
@@ -46,7 +41,7 @@
 
 }
 
-:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
+:host-context([dir="rtl"]) core-user-avatar .edit-avatar {
     left: -24px;
     right: unset;
 }
diff --git a/src/core/features/user/pages/about/about.ts b/src/core/features/user/pages/about/about.ts
@@ -26,7 +26,6 @@ import {
     USER_PROFILE_REFRESHED,
     USER_PROFILE_SERVER_TIMEZONE,
 } from '@features/user/services/user';
-import { CoreUserHelper } from '@features/user/services/user-helper';
 import { CoreNavigator } from '@services/navigator';
 import { CoreIonLoadingElement } from '@classes/ion-loading';
 import { CoreSite } from '@classes/site';
@@ -75,7 +74,6 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
             }
 
             this.user.email = data.user.email;
-            this.user.address = CoreUserHelper.formatAddress('', data.user.city, data.user.country);
         }, CoreSites.getCurrentSiteId());
     }
 
@@ -118,8 +116,6 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
             this.user = user;
             this.title = user.fullname;
 
-            this.user.address = CoreUserHelper.formatAddress('', user.city, user.country);
-
             this.fillTimezone();
 
             await this.checkUserImageUpdated();

diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
@@ -14,11 +14,11 @@ <h1>{{ user?.fullname }}</h1>
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
-            <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
-                <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
+            <ion-item class="core-user-profile-maininfo ion-text-wrap" collapsible>
+                <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true" slot="start">
                 </core-user-avatar>
                 <ion-label>
-                    <h2>{{ user.fullname }}</h2>
+                    <h1>{{ user.fullname }}</h1>
                     <p *ngIf="user.address">
                         <ion-icon name="fas-location-dot" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
                     </p>

diff --git a/src/core/features/user/pages/profile/profile.scss b/src/core/features/user/pages/profile/profile.scss
@@ -1,29 +1,10 @@
 :host {
-
-    .core-user-profile-maininfo::part(native) {
-        flex-direction: column;
-    }
-    ::ng-deep {
-        core-user-avatar {
-            display: block;
-            --core-avatar-size: var(--core-large-avatar-size);
-            height: calc(var(--core-avatar-size) + 16px);
-
-            img {
-                margin: 8px auto;
-            }
-
-            .contact-status {
-                width: 24px !important;
-                height: 24px !important;
-                right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
-            }
+    core-user-avatar {
+        --core-avatar-size: var(--core-large-avatar-size);
+        --contact-status-size: 24px;
+        --margin-end-on-item: 16px;
+        .contact-status {
+            right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
         }
     }
-
-}
-
-:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
-    left: -24px;
-    right: unset;
 }
diff --git a/src/core/features/user/pages/profile/profile.ts b/src/core/features/user/pages/profile/profile.ts
@@ -74,7 +74,6 @@ export class CoreUserProfilePage implements OnInit, OnDestroy {
             }
 
             this.user.email = data.user.email;
-            this.user.address = CoreUserHelper.formatAddress('', data.user.city, data.user.country);
         }, CoreSites.getCurrentSiteId());
 
         this.logView = CoreTime.once(async (user) => {
@@ -151,7 +150,6 @@ export class CoreUserProfilePage implements OnInit, OnDestroy {
         try {
             const user = await CoreUser.getProfile(this.userId, this.courseId);
 
-            user.address = CoreUserHelper.formatAddress('', user.city, user.country);
             this.rolesFormatted = 'roles' in user ? CoreUserHelper.formatRoleList(user.roles) : '';
 
             this.user = user;

diff --git a/src/core/features/user/services/user-helper.ts b/src/core/features/user/services/user-helper.ts
@@ -32,6 +32,7 @@ export class CoreUserHelperProvider {
      * @param city City.
      * @param country Country.
      * @returns Formatted address.
+     * @deprecated since 4.3 Not used anymore.
      */
     formatAddress(address?: string, city?: string, country?: string): string {
         const separator = Translate.instant('core.listsep');

diff --git a/...ser/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_21.png b/...ser/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_21.png