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

MOBILE-3814 user: Apply new UX to user menu

main
Pau Ferrer Ocaña 2022-01-19 15:57:03 +01:00
parent 6998c05d5c
commit a2a6c5d3f6
3 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/core/features/mainmenu/components/user-menu/user-menu.html
View File

@ -14,23 +14,21 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item button class="core-user-profile-maininfo" *ngIf="siteInfo" lines="full" (click)="switchAccounts($event)" detail="true" <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
[attr.aria-label]="'core.mainmenu.switchaccount' | translate"> core-link auto-login="yes">
<core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
<ion-label> <ion-label>
<h2>{{ siteInfo.fullname }}</h2> <p class="core-usermenu-sitename">
<p class="core-usermenu-siteinfo core-usermenu-sitename">
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true"> <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
</core-format-text> </core-format-text>
</p> </p>
<a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
<ion-item button class="ion-text-wrap core-usermenu-handler" (click)="openUserProfile($event)" detail="true" [attr.aria-label]="'core.user.profile' | translate">
[attr.aria-label]="'core.user.details' | translate" detail="true" lines="none"> <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
<ion-icon name="fas-user" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.user.profile' | translate }}</p> <h2>{{ siteInfo.fullname }}</h2>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -66,10 +64,18 @@
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
<ion-footer class="ion-padding"> <ion-footer>
<ion-button (click)="logout($event)" expand="block" color="danger" [attr.aria-label]="'core.mainmenu.logout' | translate" <ion-item button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">
class="ion-text-wrap"> <ion-icon name="fas-exchange-alt" slot="start" aria-hidden="true"></ion-icon>
<ion-icon name="fas-sign-out-alt" slot="start" aria-hidden="true"></ion-icon> <ion-label>
{{ 'core.mainmenu.logout' | translate }} <p class="item-heading">{{ 'core.mainmenu.switchaccount' | translate }}</p>
</ion-button> </ion-label>
</ion-item>
<div class="ion-padding">
<ion-button (click)="logout($event)" expand="block" color="danger" [attr.aria-label]="'core.mainmenu.logout' | translate"
class="ion-text-wrap">
<ion-icon name="fas-sign-out-alt" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.mainmenu.logout' | translate }}
</ion-button>
</div>
</ion-footer> </ion-footer>

13
src/core/features/mainmenu/components/user-menu/user-menu.scss
View File

@ -7,12 +7,21 @@
} }
} }
.core-usermenu-siteinfo {
--padding-top: 10px;
--padding-bottom: 10px;
}
@if ($core-user-hide-siteinfo) { @if ($core-user-hide-siteinfo) {
.core-usermenu-siteinfo { .core-usermenu-siteinfo {
display: none; display: none;
} }
} }
.core-usermenu-sitename {
font-size: 16px;
}
@if ($core-user-hide-sitename) { @if ($core-user-hide-sitename) {
.core-usermenu-sitename { .core-usermenu-sitename {
display: none; display: none;
@ -24,3 +33,7 @@
display: none; display: none;
} }
} }
ion-footer {
background: var(--contrast-background);
}

2
src/theme/theme.base.scss
View File

@ -554,7 +554,7 @@ body.core-iframe-fullscreen ion-router-outlet {
display: block; display: block;
height: 100% !important; height: 100% !important;
width: auto; width: auto;
min-width: #{$modal-lateral-width}; min-width: calc(#{$modal-lateral-width} - 16px);
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
} }
ion-backdrop { ion-backdrop {