focusable navbar, translations for alt texts, move all dashboard styles to dashboard.scss
This commit is contained in:
parent
f7456207ba
commit
0da19960db
|
@ -14,7 +14,7 @@
|
|||
<div class="row justify-content-center mt-4 mb-2">
|
||||
<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
|
||||
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
|
||||
alt="Add Question icon">
|
||||
aria-hidden>
|
||||
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -30,7 +30,7 @@
|
|||
<div class="action-list-item" (click)="onAddFieldSet()">
|
||||
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
|
||||
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
|
||||
alt="Add Question icon">
|
||||
aria-hidden>
|
||||
<span
|
||||
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
|
||||
| translate}}</span>
|
||||
|
@ -86,7 +86,7 @@
|
|||
<div class="action-list-item" (click)="onAddFieldSet()">
|
||||
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
|
||||
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
|
||||
alt="Add Question icon">
|
||||
aria-hidden>
|
||||
<span
|
||||
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
|
||||
| translate}}</span>
|
||||
|
@ -98,7 +98,7 @@
|
|||
<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
|
||||
<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
|
||||
<img src="/assets/images/editor/icons/clone.svg" class="input_icon"
|
||||
alt="Clone icon">
|
||||
aria-hidden>
|
||||
<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
|
||||
translate}}</span>
|
||||
</div>
|
||||
|
@ -120,7 +120,7 @@
|
|||
<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
|
||||
*ngIf="!viewOnly">
|
||||
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
|
||||
alt="Add Question icon">
|
||||
aria-hidden>
|
||||
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -68,8 +68,8 @@
|
|||
<ng-template #nameCellTemplate let-row="row" let-item>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" alt="user avatar">
|
||||
<img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" alt="user avatar">
|
||||
<img *ngIf="row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="row?.additionalInfo?.avatarUrl" (error)="this.setDefaultAvatar($event)" aria-hidden>
|
||||
<img *ngIf="!row?.additionalInfo?.avatarUrl" class="user-avatar" [src]="'assets/images/profile-placeholder.png'" aria-hidden>
|
||||
</div>
|
||||
<div class="col">{{row.name}}</div>
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<span class="new-releases-logo">
|
||||
<img src="../../../assets/images/new-releases-logo.png" alt="new releases icon">
|
||||
<img src="../../../assets/images/new-releases-logo.png" alt="{{'ALT-TEXT.NEW-RELEASES' | translate}}">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -54,7 +54,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<span class="col-auto ml-auto">
|
||||
<img class="laptop-img\6" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
|
||||
<img class="laptop-img\6" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -62,25 +62,25 @@
|
|||
<div *ngIf="this.hasPlans()" class="col">
|
||||
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
|
||||
<mat-tab-group dynamicHeight color="#00000" mat-stretch-tabs="false" mat-align-tabs="start" class="my-mat-tab remove-border-bottom" [selectedIndex]="indexFromCurrentType" (selectedTabChange)="currentType = $event.tab.ariaLabel">
|
||||
<mat-tab aria-label="recent" label="{{'DASHBOARD.ALL' | translate}}">
|
||||
<mat-tab aria-label="{{'DASHBOARD.ALL' | translate}}" label="{{'DASHBOARD.ALL' | translate}}">
|
||||
<app-recent-edited-activity
|
||||
[currentType]="currentType"
|
||||
[type]="ActivityListingType.Recent"
|
||||
></app-recent-edited-activity>
|
||||
</mat-tab>
|
||||
<mat-tab aria-label="drafts" label="{{'DASHBOARD.DRAFTS' | translate}}">
|
||||
<mat-tab aria-label="{{'DASHBOARD.DRAFTS' | translate}}" label="{{'DASHBOARD.DRAFTS' | translate}}">
|
||||
<app-recent-edited-activity
|
||||
[currentType]="currentType"
|
||||
[type]="ActivityListingType.Drafts"
|
||||
></app-recent-edited-activity>
|
||||
</mat-tab>
|
||||
<mat-tab aria-label="plans" label="{{'DASHBOARD.PLANS' | translate}}">
|
||||
<mat-tab aria-label="{{'DASHBOARD.PLANS' | translate}}" label="{{'DASHBOARD.PLANS' | translate}}">
|
||||
<app-recent-edited-activity
|
||||
[currentType]="currentType"
|
||||
[type]="ActivityListingType.Plans"
|
||||
></app-recent-edited-activity>
|
||||
</mat-tab>
|
||||
<mat-tab aria-label="descriptions" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
|
||||
<mat-tab aria-label="{{'DASHBOARD.DESCRIPTIONS' | translate}}" label="{{'DASHBOARD.DESCRIPTIONS' | translate}}">
|
||||
<app-recent-edited-activity
|
||||
[currentType]="currentType"
|
||||
[type]="ActivityListingType.Descriptions"
|
||||
|
@ -176,7 +176,7 @@
|
|||
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<img class="col-auto ml-auto laptop-img" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
|
||||
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
|
||||
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
|
||||
</button>
|
||||
<img class="col-auto ml-auto laptop-img" alt="colorful art of a person working on an oversized computer" src="../../../assets/images/dashboard-popup.png">
|
||||
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<!-- Status Filter-->
|
||||
<div class="col-10" *ngIf="!isPublic">
|
||||
<h6 class="category-title">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.NAME' | translate}}</h6>
|
||||
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row">
|
||||
<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
|
||||
<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.ANY' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="statuses.Draft" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.DRAFT' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="statuses.Finalized" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.STATUS.TYPES.FINALIZED' | translate }}</mat-radio-button>
|
||||
|
@ -63,7 +63,7 @@
|
|||
<!-- Role Filter -->
|
||||
<div class="col-10" *ngIf="isAuthenticated()">
|
||||
<h6 class="category-title">{{'DESCRIPTION-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
|
||||
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row">
|
||||
<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
|
||||
<mat-radio-button [value]="null" [checked]="formGroup.get('role').value == null" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.ANY' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="planRole.Owner" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.OWNER' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="planRole.Viewer" class="col-12">{{ 'DESCRIPTION-LISTING.FILTERS.ROLE.TYPES.VIEWER' | translate }}</mat-radio-button>
|
||||
|
|
|
@ -1,25 +1,25 @@
|
|||
<ng-container>
|
||||
<nav class="navbar navbar-expand-lg fixed-navbar">
|
||||
<div class="container-fluid h-100">
|
||||
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" aria-label="hide or show navigation sidebar">
|
||||
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
|
||||
<div class="icon-bar1"></div>
|
||||
<div class="icon-bar2"></div>
|
||||
<div class="icon-bar3"></div>
|
||||
</button>
|
||||
<h1 class="logo mr-auto" >
|
||||
<a [routerLink]="routerUtils.generateUrl(['home'])">
|
||||
<img class="logo-image" alt="go to homepage" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
|
||||
<img class="logo-image" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
|
||||
</a>
|
||||
</h1>
|
||||
@if(extraImageURL){
|
||||
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home">
|
||||
<img alt="logo image" class="extra-logo-image" [src]="extraImageURL">
|
||||
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
|
||||
<img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" >
|
||||
</a>
|
||||
}
|
||||
|
||||
<ul class="horizontal-list justify-content-end" id="navigation">
|
||||
<li class="navbar-item-sm ml-auto">
|
||||
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" aria-label="user options dropwdown">
|
||||
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
</li>
|
||||
|
@ -31,16 +31,16 @@
|
|||
<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
|
||||
</li>
|
||||
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select">
|
||||
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
|
||||
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang">
|
||||
<mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
|
||||
<mat-icon iconPositionEnd alt="{{'ALT-TEXT.LANGUAGE-SELECT' | translate}}">arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
|
||||
<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
|
||||
</mat-menu>
|
||||
</li>
|
||||
<li class="navbar-item-lg" *ngIf="isAuthenticated()">
|
||||
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="tenants">
|
||||
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" aria-label="{{'ALT-TEXT.TENANT-SELECT' | translate}}">
|
||||
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
|
||||
<mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
|
@ -52,16 +52,16 @@
|
|||
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
|
||||
<app-language (languageChange)="getLanguage($event)"></app-language>
|
||||
</mat-menu>
|
||||
<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" aria-label="notifications">
|
||||
<mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn">mail</mat-icon>
|
||||
<button mat-icon-button matTooltip="{{'NAV-BAR.INAPP-NOTIFICATIONS' | translate}}" (click)="toggleInAppNotifications()" [attr.aria-label]="'ALT-TEXT.NOTIFICATIONS' | translate">
|
||||
<mat-icon aria-hidden [matBadge]="inAppNotificationCount" [matBadgeHidden]="inAppNotificationCount <= 0" matBadgeColor="warn" aria-hidden>mail</mat-icon>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<!-- Login -->
|
||||
<li class="pl-2">
|
||||
@if(this.isAuthenticated()) {
|
||||
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;" aria-label="user profile">
|
||||
<img alt="user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
|
||||
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
|
||||
<img alt="{{'ALT-TEXT.USER-OPTIONS' | translate}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
|
||||
</button>
|
||||
}@else {
|
||||
<ng-container *ngTemplateOutlet="loginOptionTemplate"/>
|
||||
|
@ -78,17 +78,17 @@
|
|||
<ul class="list m-2">
|
||||
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
|
||||
<button mat-button class="faq-title" (click)="openFaqDialog()" aria-label="faq">{{ 'FAQ.TITLE' | translate }}</button>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" aria-label="language select" (click)="$event.stopPropagation();">
|
||||
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
|
||||
<mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
|
||||
<mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
|
||||
<mat-icon iconPositionEnd aria-hidden aria-hidden>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #languageMenu="matMenu" class="nav-mat-menu">
|
||||
<app-language (languageChange)="getLanguage($event)"></app-language>
|
||||
</mat-menu>
|
||||
<ng-container *ngIf="isAuthenticated()">
|
||||
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" aria-label="tenants">
|
||||
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon>
|
||||
<mat-icon class="m-0">arrow_drop_down</mat-icon>
|
||||
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
|
||||
<mat-icon class="m-0 material-symbols-outlined" aria-hidden>tenancy</mat-icon>
|
||||
<mat-icon class="m-0" aria-hidden>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
|
||||
<app-tenant-switch></app-tenant-switch>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<!-- Visibility Filter-->
|
||||
<div *ngIf="!isPublic" class="col-10">
|
||||
<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.STATUS.NAME' | translate }}</h6>
|
||||
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')" class="row">
|
||||
<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('status')" class="row">
|
||||
<mat-radio-button [value]="null" [checked]="formGroup.get('status')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.ANY' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="status.Draft" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.DRAFT' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="status.Finalized" class="col-12">{{ 'PLAN-LISTING.FILTERS.STATUS.TYPE.FINALIZED' | translate }}</mat-radio-button>
|
||||
|
@ -51,7 +51,7 @@
|
|||
<!-- Role Filter -->
|
||||
<div *ngIf="isAuthenticated()" class="col-10">
|
||||
<h6 class="category-title">{{ 'PLAN-LISTING.FILTERS.ROLE.NAME' | translate }}</h6>
|
||||
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')" class="row">
|
||||
<mat-radio-group aria-label="{{'ALT-TEXT.SELECT-OPTION' | translate}}" [formControl]="formGroup.get('role')" class="row">
|
||||
<mat-radio-button [value]="null" [checked]="formGroup.get('role')?.value == null" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.ANY' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="role.Owner" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.OWNER' | translate }}</mat-radio-button>
|
||||
<mat-radio-button [value]="role.Viewer" class="col-12">{{ 'PLAN-LISTING.FILTERS.ROLE.TYPE.VIEWER' | translate }}</mat-radio-button>
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': viewOnly}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto">
|
||||
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
|
||||
<mat-button-toggle-group name="fontStyle" aria-label="{{'ALT-TEXT.INTERNAL-EXTERNAL-USER' | translate}}" [formControl]="user.get('userType')" (change)="userTypeChange($event, userIndex)" class="w-100">
|
||||
<div *ngFor="let userType of planUserTypeEnumValues" class="col p-0">
|
||||
<mat-button-toggle class="lang-button w-100" [value]="userType">{{enumUtils.toPlanUserTypeString(userType)}}</mat-button-toggle>
|
||||
</div>
|
||||
|
|
|
@ -2,10 +2,8 @@
|
|||
@for(footerItems of nestedFooterItems; track footerItems){
|
||||
<ul class="row horizontal-list">
|
||||
@for(item of footerItems; track item; let index=$index){
|
||||
<li class="col-auto option" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
|
||||
<span [routerLink]="routerUtils.generateUrl(item.routerPath)">
|
||||
{{ item.title | translate}}
|
||||
</span>
|
||||
<li class="col-auto option" [routerLink]="routerUtils.generateUrl(item.routerPath)" [ngClass]="{'option-active': this.router.url === item.routerPath, 'ml-3': index%2==1}" tabindex="0">
|
||||
{{ item.title | translate}}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
|
|
@ -1,81 +0,0 @@
|
|||
.logo-img {
|
||||
width: 60px;
|
||||
display: block;
|
||||
max-height: none;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.logo-img img {
|
||||
width: 155px;
|
||||
top: 0px;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.sidebarSubtitle p {
|
||||
margin-left: 20px;
|
||||
color: rgb(166, 166, 166);
|
||||
}
|
||||
|
||||
.nav hr {
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #E1E1E1;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
background: white;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.8rem 0.5rem 1.2rem;
|
||||
text-align: left;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.nav-subrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.nav-row:hover {
|
||||
background-color: #ececec;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
color: #6B6B6B;
|
||||
}
|
||||
|
||||
.nav-row span {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.mat-list {
|
||||
padding-top: 0px !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.mat-list div {
|
||||
width: 100%;
|
||||
}
|
|
@ -1,5 +1,88 @@
|
|||
$mat-card-header-size: 30px !default;
|
||||
|
||||
.logo-img {
|
||||
width: 60px;
|
||||
display: block;
|
||||
max-height: none;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.logo-img img {
|
||||
width: 155px;
|
||||
top: 0px;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.sidebarSubtitle p {
|
||||
margin-left: 20px;
|
||||
color: rgb(166, 166, 166);
|
||||
}
|
||||
|
||||
.nav hr {
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #E1E1E1;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
background: white;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.8rem 0.5rem 1.2rem;
|
||||
text-align: left;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.nav-subrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.nav-row:hover, .nav-row:focus {
|
||||
background-color: #ececec;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
color: #6B6B6B;
|
||||
}
|
||||
|
||||
.nav-row span {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.mat-list {
|
||||
padding-top: 0px !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.mat-list div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.my-mat-card-avatar {
|
||||
height: $mat-card-header-size;
|
||||
width: $mat-card-header-size;
|
||||
|
|
|
@ -32,7 +32,7 @@ class GroupMenuItem {
|
|||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
templateUrl: './sidebar.component.html',
|
||||
styleUrls: ['./sidebar.component.css', './sidebar.component.scss']
|
||||
styleUrls: ['./sidebar.component.scss']
|
||||
})
|
||||
export class SidebarComponent implements OnInit {
|
||||
generalItems: GroupMenuItem;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<div class="col">
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="user avatar">
|
||||
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{''ALT-TEXT.USER-AVATAR' | translate}}">
|
||||
</div>
|
||||
<div class="col-auto d-flex flex-column justify-content-center main-info">
|
||||
<div class="name">{{formGroup.get('name').value}}</div>
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,19 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2575,5 +2575,18 @@
|
|||
},
|
||||
"copy": "Copy",
|
||||
"clone": "Clone",
|
||||
"new-version": "New Version"
|
||||
"new-version": "New Version",
|
||||
"ALT-TEXT": {
|
||||
"HAMBURGER": "hide or show navigation sidebar",
|
||||
"GO-TO-MAIN": "Go to home page",
|
||||
"DASHBOARD-POPUP-IMAGE": "colorful art of a person working on an oversized computer",
|
||||
"USER-OPTIONS": "Open user options",
|
||||
"NEW-RELEASES": "New releases",
|
||||
"LANGUAGE-SELECT": "Select Language",
|
||||
"TENANT-SELECT": "Select Tenant",
|
||||
"NOTIFICATIONS": "Notifications",
|
||||
"USER-AVATAR": "User avatar",
|
||||
"SELECT-OPTION": "Select an option",
|
||||
"INTERNAL-EXTERNAL-USER": "Select internal or external user"
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue