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

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

@ -3,16 +3,25 @@
:host {
.core-user-menu-preferences {
--inner-border-width: 0;
--border-width: 1px 0 0 0;
--border-width: 1px 0 0 0;
}
}
.core-usermenu-siteinfo {
--padding-top: 10px;
--padding-bottom: 10px;
}
@if ($core-user-hide-siteinfo) {
.core-usermenu-siteinfo {
display: none;
}
}
.core-usermenu-sitename {
font-size: 16px;
}
@if ($core-user-hide-sitename) {
.core-usermenu-sitename {
display: none;
@ -24,3 +33,7 @@
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;
height: 100% !important;
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);
}
ion-backdrop {