Commit 1230d51e authored by Florent POITTEVIN's avatar Florent POITTEVIN
Browse files

feat: 1299 create shared icon component and mutualize icon

parent f9860059
import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {PageNotFoundPresentational} from "@app/components/presentationals/page-not-found/page-not-found.presentational";
import {IconAppRoutable} from "@app/components/routables/icon-app/icon-app.routable";
import {ApplicationRolePermissionEnum} from "@app/shared/enums/application-role-permission.enum";
import {AppRoutesEnum} from "@app/shared/enums/routes.enum";
import {ApplicationRoleGuardService} from "@app/shared/guards/application-role-guard.service";
import {DlcmRoutes} from "@app/shared/models/dlcm-route.model";
import {ApplicationDevGuardService} from "@shared/guards/application-dev-guard.service";
import {
isNullOrUndefined,
StringUtil,
......@@ -79,6 +81,11 @@ const routes: DlcmRoutes = [
},
canActivate: [ApplicationRoleGuardService],
},
{
path: AppRoutesEnum.icons,
component: IconAppRoutable,
canActivate: [ApplicationDevGuardService],
},
{
path: AppRoutesEnum.root,
redirectTo: "/" + AppRoutesEnum.homePage + getQueryParam(),
......
......@@ -51,14 +51,15 @@
[matTooltip]="'app.toolbar.cart' | translate"
class="cart"
>
<mat-icon class="icon"
[matBadge]="numberArchiveInCartObs | async"
matBadgeColor="primary"
matBadgeSize="small"
[matBadgeHidden]="(numberArchiveInCartObs | async) === 0"
matBadgeDescription="Counter of archive in the cart"
>shopping_cart
</mat-icon>
<dlcm-shared-icon class="icon"
[iconName]="iconNameEnum.cart"
[matBadge]="numberArchiveInCartObs | async"
matBadgeColor="primary"
matBadgeSize="small"
[matBadgeHidden]="(numberArchiveInCartObs | async) === 0"
matBadgeDescription="Counter of archive in the cart"
>
</dlcm-shared-icon>
</button>
</div>
......
......@@ -243,8 +243,8 @@ export class AppComponent extends SharedAbstractPresentational {
return;
}
if (url.startsWith(urlSeparator + RoutesEnum.preservation)) {
this.currentModule = RoutesEnum.preservation;
if (url.startsWith(urlSeparator + RoutesEnum.preservationPlanning)) {
this.currentModule = RoutesEnum.preservationPlanning;
return;
}
......
......@@ -37,6 +37,7 @@ import {MainToolbarMobilePresentational} from "@app/components/presentationals/m
import {MainToolbarPresentational} from "@app/components/presentationals/main-toolbar/main-toolbar/main-toolbar.presentational";
import {ThemeSelectorPresentational} from "@app/components/presentationals/theme-selector/theme-selector.presentational";
import {UserForm} from "@app/components/presentationals/user-form/user-form";
import {IconAppRoutable} from "@app/components/routables/icon-app/icon-app.routable";
import {InMemoryStorage} from "@app/in-memory.storage";
import {DlcmErrorsHandlerService} from "@app/shared/services/dlcm-errors-handler.service";
import {SharedModule} from "@app/shared/shared.module";
......@@ -104,6 +105,10 @@ const containers = [
FooterContainer,
];
const routables = [
IconAppRoutable,
];
const dialogs = [
TokenDialog,
UserDialog,
......@@ -145,6 +150,7 @@ export function hljsLanguages(): any {
declarations: [
...presentationals,
...containers,
...routables,
...dialogs,
],
imports: [
......
......@@ -4,7 +4,7 @@
[matTooltip]="('app.status.newVersionAvailable' | translate)"
(click)="update()"
>
<mat-icon>sync</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.update"></dlcm-shared-icon>
</div>
<div class="copyrights">All rights reserved by <a href="https://dlcm.ch/"
target="_blank"
......@@ -20,9 +20,9 @@
[quickStart]="userDocumentationObs | async"
(displaySidebarUserGuideChange)="displaySidebarUserGuide()"
></dlcm-shared-toc>
<fa-icon class="version"
icon="code-branch"
[matTooltip]="appUtil.getVersions()"
[matTooltipPosition]="'left'"
></fa-icon>
<dlcm-shared-icon class="version"
[iconName]="iconNameEnum.appVersion"
[matTooltip]="appUtil.getVersions()"
[matTooltipPosition]="'left'"
></dlcm-shared-icon>
</div>
......@@ -85,6 +85,12 @@
right: 0;
padding: 14px 14px 12px;
::ng-deep {
.icon {
position: relative;
}
}
@include respond-to-smaller-than-breakpoint('sm') {
display: none;
}
......
......@@ -25,7 +25,7 @@
(onEnter)="remove(archive.resId)"
(click)="remove(archive.resId)"
>
<mat-icon>delete</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.delete"></dlcm-shared-icon>
</button>
</div>
</mat-list-item>
......@@ -34,7 +34,9 @@
<ng-template #emptyCart>
<div class="empty-cart">
<mat-icon class="icon">archive</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.emptyCart"
class="xxxlg icon"
></dlcm-shared-icon>
<span>{{'app.cart.body.empty' | translate}}</span>
</div>
</ng-template>
......
@import "./src/sass/abstracts/variables";
@import "./src/sass/abstracts/mixins";
$size-icon: 50px;
:host {
.list ::ng-deep {
.mat-list-item .mat-list-item-content {
......@@ -28,10 +26,6 @@ $size-icon: 50px;
align-items: center;
.icon {
font-size: $size-icon;
line-height: $size-icon;
height: $size-icon;
width: $size-icon;
color: $light-grey;
margin-bottom: 10px;
}
......
......@@ -12,7 +12,7 @@
[matTooltip]="'app.token.copyToClipboard' | translate"
[matTooltipPosition]="'above'"
>
<mat-icon>filter_none</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.copyToClipboard"></dlcm-shared-icon>
</button>
</div>
</div>
......
......@@ -11,7 +11,7 @@
(onEnter)="profileInfo()"
(click)="profileInfo()"
>
<mat-icon>account_circle</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.profile"></dlcm-shared-icon>
<span>{{'app.toolbar.profileInfo' | translate}}</span>
</button>
<button mat-menu-item
......@@ -19,13 +19,13 @@
(onEnter)="displayToken()"
(click)="displayToken()"
>
<mat-icon>vpn_key</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.token"></dlcm-shared-icon>
<span>{{'app.toolbar.token' | translate}}</span>
</button>
<button mat-menu-item
(click)="logout()"
>
<mat-icon>power_settings_new</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.logout"></dlcm-shared-icon>
<span>{{'app.toolbar.logout' | translate}}</span>
</button>
</mat-menu>
......@@ -15,6 +15,7 @@ import {
import {ThemeEnum} from "@app/shared/enums/theme.enum";
import {PermissionUtil} from "@app/shared/utils/permission.util";
import {environment} from "@environments/environment";
import {IconNameEnum} from "@shared/enums/icon-name.enum";
import {UserExtended} from "@shared/models/business/user-extended.model";
import {
BehaviorSubject,
......@@ -108,48 +109,48 @@ export abstract class AbstractMainToolbarPresentational extends SharedAbstractPr
path: RoutesEnum.homePage,
labelToTranslate: TRANSLATE("app.toolbar.home"),
isVisible: () => true,
icon: "home",
icon: IconNameEnum.home,
},
{
click: (menu) => this.openOrder(),
path: RoutesEnum.order,
labelToTranslate: TRANSLATE("app.toolbar.order"),
isVisible: () => PermissionUtil.isUserHavePermission(this.logged, ApplicationRolePermissionEnum.userPermission, this.userRoles),
icon: "cash-register",
badgeCounter: () => "" + this.numberMyOrderReadyNew,
badgeDescription: "Counter of new order ready in my order",
badgeHidden: () => this.numberMyOrderReadyNew === 0,
icon: IconNameEnum.order,
// badgeCounter: () => "" + this.numberMyOrderReadyNew,
// badgeDescription: "Counter of new order ready in my order",
// badgeHidden: () => this.numberMyOrderReadyNew === 0,
},
{
click: (menu) => this.navigate(menu.path),
path: RoutesEnum.deposit,
labelToTranslate: TRANSLATE("app.toolbar.deposit"),
isVisible: () => PermissionUtil.isUserHavePermission(this.logged, ApplicationRolePermissionEnum.userPermission, this.userRoles),
icon: "file-upload",
icon: IconNameEnum.deposit,
},
{
click: (menu) => this.navigate(menu.path),
path: RoutesEnum.preservationSpace,
labelToTranslate: TRANSLATE("app.toolbar.preservation-space"),
isVisible: () => PermissionUtil.isUserHavePermission(this.logged, ApplicationRolePermissionEnum.userPermission, this.userRoles),
icon: "users",
icon: IconNameEnum.preservationSpace,
badgeCounter: () => "" + this.numberPendingRequestNotificationInbox,
badgeDescription: "Counter of pending request notification in inbox",
badgeHidden: () => this.numberPendingRequestNotificationInbox === 0,
},
{
click: (menu) => this.navigate(menu.path),
path: RoutesEnum.preservation,
path: RoutesEnum.preservationPlanning,
labelToTranslate: TRANSLATE("app.toolbar.preservation"),
isVisible: () => PermissionUtil.isUserHavePermission(this.logged, ApplicationRolePermissionEnum.adminPermission, this.userRoles),
icon: "boxes",
icon: IconNameEnum.preservationPlanning,
},
{
click: (menu) => this.navigate(menu.path),
path: RoutesEnum.admin,
labelToTranslate: TRANSLATE("app.toolbar.admin"),
isVisible: () => PermissionUtil.isUserHavePermission(this.logged, ApplicationRolePermissionEnum.adminPermission, this.userRoles),
icon: "cogs",
icon: IconNameEnum.administration,
},
];
......@@ -206,7 +207,7 @@ interface Menu {
path?: string;
click: (menu: Menu) => void;
labelToTranslate: string;
icon: string;
icon: IconNameEnum;
isVisible: () => boolean;
badgeCounter?: (() => string) | undefined;
badgeDescription?: string | undefined;
......
......@@ -28,11 +28,15 @@
[matBadgeHidden]="menu.badgeHidden()"
[matBadgeDescription]="menu.badgeDescription"
>
<fa-icon [icon]="menu.icon"></fa-icon>
<dlcm-shared-icon class="lg"
[iconName]="menu.icon"
></dlcm-shared-icon>
</span>
</ng-template>
<ng-template #simpleIcon>
<fa-icon [icon]="menu.icon"></fa-icon>
<dlcm-shared-icon class="lg"
[iconName]="menu.icon"
></dlcm-shared-icon>
</ng-template>
</li>
</ul>
......@@ -51,18 +55,22 @@
<ng-template [ngIf]="!logged"
[ngIfElse]="loggedOut"
>
<li data-test="login-vertical-input" class="login"
<li data-test="login-vertical-input"
class="login"
[matTooltip]="'app.toolbar.login' | translate"
[matTooltipPosition]="'right'"
(click)="login()"
>
<fa-icon icon="sign-in-alt"></fa-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.login"
class="lg"
></dlcm-shared-icon>
</li>
</ng-template>
<ng-template #loggedOut>
<li class="logout">
<dlcm-avatar data-test="logout-vertical-input" [user]="user"
<dlcm-avatar data-test="logout-vertical-input"
[user]="user"
(logoutChange)="logout()"
></dlcm-avatar>
</li>
......
......@@ -82,10 +82,6 @@ dlcm-theme-selector ::ng-deep {
font-size: 8px;
justify-content: center;
fa-icon {
font-size: 20px;
}
&:hover {
background-color: $grey;
cursor: pointer;
......
<mat-icon class="icon">mood_bad</mat-icon>
<dlcm-shared-icon class="icon xxxxlg"
[iconName]="iconNameEnum.notFound"
></dlcm-shared-icon>
<h1>{{'app.notFound.title' | translate}}</h1>
<button type="button"
mat-button
......@@ -7,6 +9,6 @@
(onEnter)="backToHome()"
(click)="backToHome()"
>
<mat-icon>home</mat-icon>
<dlcm-shared-icon [iconName]="iconNameEnum.home"></dlcm-shared-icon>
{{'app.notFound.button.backToHome' | translate}}
</button>
@import "src/sass/abstracts/variables";
$size-icon: 80px;
:host {
flex: 1;
display: flex;
......@@ -10,11 +8,7 @@ $size-icon: 80px;
flex-direction: column;
.icon {
font-size: $size-icon;
line-height: $size-icon;
height: $size-icon;
width: $size-icon;
color: $light-grey;
margin-bottom: 20px;
color: $light-grey;
}
}
<table>
<tr>
<th class="icon">default</th>
<th class="icon">xs</th>
<th class="icon">sm</th>
<th class="icon">md</th>
<th class="icon">lg</th>
<th class="icon">xlg</th>
<th class="icon">xxlg</th>
<th class="icon">xxxlg</th>
<th class="icon">xxxxlg</th>
<th class="name">Application icon name</th>
<th class="lib">Librairy</th>
<th class="icon-name-lib">Icon name in lib</th>
</tr>
<tr *ngFor="let icon of listIconApp">
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="xs"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="sm"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="md"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="lg"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="xlg"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="xxlg"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="xxxlg"
></dlcm-shared-icon>
</td>
<td valign="center">
<dlcm-shared-icon [iconName]="icon.name"
class="xxxxlg"
></dlcm-shared-icon>
</td>
<td valign="center">{{iconNameEnum[icon.name]}}</td>
<td valign="center">{{iconLibEnum[icon.lib]}}</td>
<td valign="center">{{icon.icon}}</td>
</tr>
</table>
:host {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
overflow-y: auto;
display: flex;
justify-content: center;
tr {
height: 40px;
}
.icon {
}
.name,
.lib,
.icon-name-lib {
padding: 20px;
}
}
\ No newline at end of file
import {
ChangeDetectionStrategy,
Component,
OnInit,
} from "@angular/core";
import {IconInfos} from "@shared/components/presentationals/shared-icon/shared-icon.presentational";
import {SharedAbstractRoutable} from "@shared/components/routables/shared-abstract/shared-abstract.routable";
import {IconLibEnum} from "@shared/enums/icon-lib.enum";
import {IconHelper} from "@shared/helpers/icon.helper";
@Component({
selector: "dlcm-home-browsing-routable",
templateUrl: "./icon-app.routable.html",
styleUrls: ["./icon-app.routable.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconAppRoutable extends SharedAbstractRoutable implements OnInit {
listIconApp: IconInfos[] = IconHelper.listIcon;
get iconLibEnum(): typeof IconLibEnum {
return IconLibEnum;
}
}
......@@ -17,13 +17,15 @@
solidifyShortCuts
(onEnter)="navigate(tile.path)"
(click)="navigate(tile.path)"
id="tile-card-{{tile.avatarIcon}}"
>
<mat-card-header class="card-header">
<div class="avatar"
mat-card-avatar
>
<fa-icon [icon]="tile.avatarIcon"></fa-icon>
id="tile-card-{{tile.avatarIcon}}"
>
<mat-card-header class="card-header">
<div class="avatar"
mat-card-avatar
>
<dlcm-shared-icon [iconName]="tile.avatarIcon"
class="xxlg"
></dlcm-shared-icon>
</div>
<mat-card-title>{{tile.titleToTranslate | translate}}</mat-card-title>
<mat-card-subtitle>{{tile.subtitleToTranslate | translate}}</mat-card-subtitle>
......
......@@ -10,6 +10,7 @@ import {
SharedAbstractHomeRoutable,
SharedHomeTileModel,
} from "@shared/components/routables/shared-abstract-home/shared-abstract-home.routable";
import {IconNameEnum} from "@shared/enums/icon-name.enum";
import {TRANSLATE} from "solidify-frontend";
@Component({
......@@ -21,112 +22,112 @@ import {TRANSLATE} from "solidify-frontend";
export class AdminHomeRoutable extends SharedAbstractHomeRoutable {
_tiles: SharedHomeTileModel[] = [
{
avatarIcon: "building",
avatarIcon: IconNameEnum.organizationalUnit,
titleToTranslate: TRANSLATE("admin.organizationalUnit.home.title"),
subtitleToTranslate: TRANSLATE("admin.organizationalUnit.home.subtitle"),
path: RoutesEnum.adminOrganizationalUnit,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "user-check",
avatarIcon: IconNameEnum.submissionPolicies,
titleToTranslate: TRANSLATE("admin.submissionPolicy.home.title"),
subtitleToTranslate: TRANSLATE("admin.submissionPolicy.home.subtitle"),
path: RoutesEnum.adminSubmissionPolicy,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "history",
avatarIcon: IconNameEnum.preservationPolicies,
titleToTranslate: TRANSLATE("admin.preservationPolicy.home.title"),
subtitleToTranslate: TRANSLATE("admin.preservationPolicy.home.subtitle"),
path: RoutesEnum.adminPreservationPolicy,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "cart-arrow-down",
avatarIcon: IconNameEnum.disseminationPolicies,
titleToTranslate: TRANSLATE("admin.disseminationPolicy.home.title"),
subtitleToTranslate: TRANSLATE("admin.disseminationPolicy.home.subtitle"),
path: RoutesEnum.adminDisseminationPolicy,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "copyright",
avatarIcon: IconNameEnum.licenses,
titleToTranslate: TRANSLATE("admin.license.home.title"),
subtitleToTranslate: TRANSLATE("admin.license.home.subtitle"),
path: RoutesEnum.adminLicense,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "university",
avatarIcon: IconNameEnum.institutions,
titleToTranslate: TRANSLATE("admin.institution.home.title"),
subtitleToTranslate: TRANSLATE("admin.institution.home.subtitle"),
path: RoutesEnum.adminInstitution,
permission: ApplicationRolePermissionEnum.noPermission,
},
{
avatarIcon: "microscope",
avatarIcon: IconNameEnum.researchDomains,
titleToTranslate: TRANSLATE("admin.researchDomain.home.title"),
subtitleToTranslate: TRANSLATE("admin.researchDomain.home.subtitle"),
path: RoutesEnum.adminResearchDomain,
permission: ApplicationRolePermissionEnum.noPermission,