diff --git a/app/src/assets/svg/icons/avatar.svg b/app/src/assets/svg/icons/avatar.svg new file mode 100644 index 000000000..96f0cb29d --- /dev/null +++ b/app/src/assets/svg/icons/avatar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/src/assets/svg/icons/menu.svg b/app/src/assets/svg/icons/menu.svg new file mode 100644 index 000000000..f09df24f2 --- /dev/null +++ b/app/src/assets/svg/icons/menu.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/src/assets/svg/icons/settings.svg b/app/src/assets/svg/icons/settings.svg new file mode 100644 index 000000000..42035fd9a --- /dev/null +++ b/app/src/assets/svg/icons/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/src/assets/svg/icons/workspace.svg b/app/src/assets/svg/icons/workspace.svg new file mode 100644 index 000000000..5c63fd78e --- /dev/null +++ b/app/src/assets/svg/icons/workspace.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/aca-content/assets/app.extensions.json b/projects/aca-content/assets/app.extensions.json index 0dbb7ab99..dcc7d039a 100644 --- a/projects/aca-content/assets/app.extensions.json +++ b/projects/aca-content/assets/app.extensions.json @@ -242,32 +242,24 @@ "id": "app.navbar.primary", "items": [ { - "id": "app.navbar.personalFiles", + "id": "app.navbar.menu", "order": 100, "icon": "folder", - "title": "APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP", - "route": "personal-files", - "rules": { - "visible": "app.isContentServiceEnabled" - } - }, - { - "id": "app.navbar.libraries.menu", - "order": 200, - "icon": "library_books", - "title": "APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.LIBRARIES.SIDENAV_LINK.TOOLTIP", + "title": "APP.BROWSE.FILE.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.FILE.SIDENAV_LINK.TOOLTIP", "rules": { "visible": "app.isContentServiceEnabled" }, "children": [ { - "id": "app.navbar.libraries.favorite", + "id": "app.navbar.personalFiles", "order": 100, - "title": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.TOOLTIP", - "route": "favorite/libraries" + "title": "APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP", + "route": "personal-files", + "rules": { + "visible": "app.isContentServiceEnabled" + } }, { "id": "app.navbar.libraries.files", @@ -275,53 +267,45 @@ "title": "APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.SIDENAV_LINK.LABEL", "description": "APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.SIDENAV_LINK.TOOLTIP", "route": "libraries" + }, + { + "id": "app.navbar.libraries.favorite", + "order": 300, + "title": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.SIDENAV_LINK.TOOLTIP", + "route": "favorite/libraries" + }, + { + "id": "app.navbar.recentFiles", + "order": 400, + "title": "APP.BROWSE.RECENT.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP", + "route": "recent-files" + }, + { + "id": "app.navbar.favorites", + "order": 500, + "title": "APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP", + "route": "favorites" + }, + { + "id": "app.navbar.shared", + "order": 600, + "title": "APP.BROWSE.SHARED.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP", + "route": "shared" + }, + { + "id": "app.navbar.trashcan", + "order": 700, + "title": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL", + "description": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP", + "route": "trashcan" } ] } ] - }, - { - "id": "app.navbar.secondary", - "rules": { - "visible": "app.isContentServiceEnabled" - }, - "items": [ - { - "id": "app.navbar.shared", - "order": 100, - "icon": "people", - "title": "APP.BROWSE.SHARED.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP", - "route": "shared", - "rules": { - "visible": "repository.isQuickShareEnabled" - } - }, - { - "id": "app.navbar.recentFiles", - "order": 200, - "icon": "schedule", - "title": "APP.BROWSE.RECENT.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP", - "route": "recent-files" - }, - { - "id": "app.navbar.favorites", - "order": 300, - "icon": "star", - "title": "APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP", - "route": "favorites" - }, - { - "id": "app.navbar.trashcan", - "order": 400, - "icon": "delete", - "title": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL", - "description": "APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP", - "route": "trashcan" - } - ] } ], "toolbar": [ diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json index d9fedaece..98675b87b 100644 --- a/projects/aca-content/assets/i18n/en.json +++ b/projects/aca-content/assets/i18n/en.json @@ -1,6 +1,7 @@ { "APP": { "COPYRIGHT": "© 2017 - 2020 Alfresco Software, Inc. All rights reserved.", + "TITLE": "Workspace", "ABOUT": { "VERSION": "Version:", "PLUGINS": { @@ -103,6 +104,13 @@ } }, "BROWSE": { + "FILE": { + "TITLE": "Files", + "SIDENAV_LINK": { + "LABEL": "Files", + "TOOLTIP": "Files" + } + }, "PERSONAL": { "TITLE": "Personal Files", "SIDENAV_LINK": { @@ -409,7 +417,12 @@ "EXPAND": "Expand", "CLOSE_LIBRARY": "Close Library" } - } + }, + "TOOLTIPS": { + "COLLAPSE_NAVIGATION": "Collapse navigation menu", + "OPTIONS_SETTINGS": "Options and settings", + "MY_PROFILE": "My profile" + } }, "NODE_SELECTOR": { "COPY_ITEM": "Copy '{{ name }}' to...", diff --git a/projects/aca-content/src/lib/aca-content.module.ts b/projects/aca-content/src/lib/aca-content.module.ts index 3d6365c26..8623e7729 100644 --- a/projects/aca-content/src/lib/aca-content.module.ts +++ b/projects/aca-content/src/lib/aca-content.module.ts @@ -121,6 +121,7 @@ import { AppSharedLinkViewModule } from './components/shared-link-view/shared-li import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules'; import { TagsColumnComponent } from './components/dl-custom-components/tags-column/tags-column.component'; import { UserInfoComponent } from './components/common/user-info/user-info.component'; +import { CustomIconsModule } from './extensions/custom-icons.module'; registerLocaleData(localeFr); registerLocaleData(localeDe); @@ -169,7 +170,8 @@ registerLocaleData(localeSv); ViewProfileModule, AppTrashcanModule, AppSharedLinkViewModule, - AcaFolderRulesModule + AcaFolderRulesModule, + CustomIconsModule ], declarations: [ FilesComponent, diff --git a/projects/aca-content/src/lib/components/header/header.component.html b/projects/aca-content/src/lib/components/header/header.component.html index 6db2b8bf7..e69de29bb 100644 --- a/projects/aca-content/src/lib/components/header/header.component.html +++ b/projects/aca-content/src/lib/components/header/header.component.html @@ -1,19 +0,0 @@ - -
- - - - - - - - - diff --git a/projects/aca-content/src/lib/components/header/header.component.spec.ts b/projects/aca-content/src/lib/components/header/header.component.spec.ts index 9a4c8ddf7..62f75d19d 100644 --- a/projects/aca-content/src/lib/components/header/header.component.spec.ts +++ b/projects/aca-content/src/lib/components/header/header.component.spec.ts @@ -33,7 +33,6 @@ import { AppTestingModule } from '../../testing/app-testing.module'; import { AppExtensionService, SharedToolbarModule } from '@alfresco/aca-shared'; import { CoreModule } from '@alfresco/adf-core'; import { AppSearchInputModule } from '../search/search-input.module'; -import { By } from '@angular/platform-browser'; describe('AppHeaderComponent', () => { let component: AppHeaderComponent; @@ -94,29 +93,5 @@ describe('AppHeaderComponent', () => { tick(); expect(component.actions).toEqual(actions); })); - - describe('Search input', () => { - beforeEach(() => { - localStorage.clear(); - }); - - afterEach(() => { - localStorage.clear(); - }); - - it('should search be present when contentService is enabled', () => { - fixture.detectChanges(); - const searchInput = fixture.debugElement.query(By.css('.aca-search-input')); - - expect(searchInput).not.toBeNull(); - }); - - it('should search not be present when contentService is disabled', () => { - localStorage.setItem('contentService', 'false'); - fixture.detectChanges(); - const searchInput = fixture.debugElement.query(By.css('.aca-search-input')); - - expect(searchInput).toBeNull(); - }); - }); }); + diff --git a/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html b/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html index ed51d164f..93e39280a 100644 --- a/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html +++ b/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html @@ -10,7 +10,6 @@ mat-button class="action-button full-width" > - {{ item.title | translate }} @@ -18,28 +17,23 @@ - +
- + {{ item.title | translate }} +
diff --git a/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts b/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts index 1caace78f..bbc4d2019 100644 --- a/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts +++ b/projects/aca-content/src/lib/components/sidenav/directives/expansion-panel.directive.ts @@ -64,6 +64,26 @@ export class ExpansionPanelDirective implements OnInit, OnDestroy { return false; } + isRouteAbout(): boolean { + return this.router.url.includes('/about'); + } + + isRouteProfile(): boolean { + return this.router.url.includes('/profile'); + } + + isRouteSearch(): boolean { + return this.router.url.includes('/search'); + } + + isItemExpanded() { + if (this.isRouteAbout() || this.isRouteProfile() || this.isRouteSearch()) { + return !this.hasActiveLinks(); + } else { + return this.hasActiveLinks(); + } + } + ngOnInit() { this.hasActiveChildren = this.hasActiveLinks(); diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html new file mode 100644 index 000000000..4b5c9fc0e --- /dev/null +++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.html @@ -0,0 +1,35 @@ + + +
+ +
+
{{ userName }}
+
{{ userEmail }}
+
+
+ + + + + + + + + + diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss new file mode 100644 index 000000000..633c82c7b --- /dev/null +++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.scss @@ -0,0 +1,32 @@ +app-navigation-menu { + .app-menu-button { + height: 32px; + background: none; + line-height: 24px; + } +} + +.mat-menu-panel { + .app-menu-user-details { + display: flex; + height: 66px; + + &-button { + height: 32px; + padding: 0; + line-height: 24px; + background: none; + border: none; + margin-top: 14px; + transform: scale(1.2); + } + + &-name-mail { + line-height: 40px; + } + + &-name { + height: 24px; + } + } +} diff --git a/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts new file mode 100644 index 000000000..ee8f5506a --- /dev/null +++ b/projects/aca-content/src/lib/components/sidenav/navigation-menu/navigation-menu.component.ts @@ -0,0 +1,31 @@ +/* + * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved. + * + * License rights for this program may be obtained from Alfresco Software, Ltd. + * pursuant to a written agreement and any use of this program without such an + * agreement is prohibited. + */ + +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { ContentApiService } from '@alfresco/aca-shared'; + +@Component({ + selector: 'app-navigation-menu', + templateUrl: './navigation-menu.component.html', + styleUrls: ['./navigation-menu.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class NavigationMenuComponent implements OnInit { + userName = ''; + userEmail = ''; + + constructor(private contentApi: ContentApiService) {} + + ngOnInit() { + this.contentApi.getPerson('-me-').subscribe((person) => { + const personDetails = person?.entry; + this.userName = personDetails.displayName; + this.userEmail = personDetails.email; + }); + } +} diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html index 2c91866da..8b0a19915 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html @@ -1,10 +1,21 @@
-
- - +
+
+ +
{{ 'APP.TITLE' | translate }} +
+
+ +
+
+ +
+
-
@@ -12,9 +23,9 @@ - - + @@ -22,11 +33,12 @@
- + - + +
diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss index 03cd9fa71..dd5d5e535 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss @@ -1,150 +1,160 @@ -.app-sidenav { - display: flex; - flex: 1; - flex-direction: column; - height: 100%; - overflow-y: hidden; -} - -.aca-menu-panel { - .action-button--active { - color: var(--theme-accent-color) !important; - } - - .action-button { - color: var(--theme-primary-color); - } - - .action-button:hover { - color: var(--theme-accent-color); - } -} - .sidenav { + width: 289px; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--theme-sidenav-background-color); display: flex; - flex: 1; flex-direction: column; height: 100%; - background-color: var(--theme-background-color); + + &-header { + padding: 32px 0; + + &-title { + display: flex; + flex-direction: row; + align-items: center; + height: 32px; + padding: 0 24px; + + &-logo { + position: absolute; + transform: scale(0.8); + cursor: pointer; + } + + &-text { + color: var(--theme-selected-text-color); + padding-left: 32px; + letter-spacing: 0.25px; + font-style: normal; + font-weight: 400; + font-size: var(--theme-body-1-font-size); + cursor: pointer; + } + } + + &-menu-icon { + transform: scale(1.2); + } + + &-notification { + padding-left: 63px; + } + } .section:last-child { border-bottom: 0; } - .action-menu { - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - } - - .section.action-menu { - padding: 8px 14px; - position: sticky; - } - .section-sub-actions { overflow-y: auto; - } - .section { - padding: 8px 6px; - border-bottom: 1px solid var(--theme-divider-color); - } + .mat-expansion-panel { + width: 100%; + background-color: unset; + box-shadow: none; + border-radius: 0; - .section--collapsed { - display: flex; - flex-direction: column; - align-items: center; - } + &-header { + height: 32px; + padding: 0 32px 0 0; + display: flex; + align-items: center; + border: none; + } - .list-item { - padding: 12px 0; - display: flex; - align-items: center; - height: 24px; - } + &-header:hover { + background: var(--theme-hover-background-color); + } - .menu { - display: flex; - flex: 1; - flex-direction: row; - } + &-header-title { + display: flex; + flex-direction: row; + align-items: center; + } - .full-width { - display: flex; - width: 100%; - } + &-body { + padding: 0 0 16px; + font-size: var(--theme-body-1-font-size); - .action-button--active { - color: var(--theme-primary-color) !important; - } + .mat-button { + line-height: 32px; + } + } - .action-button { - color: var(--theme-text-color); - } + .mat-expansion-indicator { + display: flex; + align-content: center; + } - .action-button .action-button__label { - margin: 0 8px !important; - } + .mat-expansion-indicator::after { + transform: rotate(226deg); + } + } - .app-item, - .app-item .item { - display: flex; - flex: 1; - flex-direction: row; - } + .item { + flex-direction: row; + display: flex; + align-items: center; + text-decoration: none; + width: 100%; + user-select: none; + } - .item { - padding: 12px 0; - flex-direction: row; - display: flex; - align-items: center; - text-decoration: none; - height: 24px; - width: 100%; - user-select: none; - } + .action-button { + color: var(--theme-action-button-text-color); + height: 32px; + padding: 0 24px; + border-radius: 0; + } - .item:hover .action-button__label { - color: var(--theme-primary-color); - } + .full-width { + display: flex; + width: 100%; + } - .mat-expansion-panel-header { - padding: 0 8px 0 0 !important; - display: flex; - align-items: center; - font-size: 14px !important; - } + .action-button--active { + color: var(--theme-selected-text-color) !important; + background: var(--theme-selected-background-color); + } - .mat-expansion-panel { - width: 100%; - background-color: unset; - box-shadow: none !important; - } + .item:hover .action-button__label { + color: var(--theme-selected-text-color); + } - .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { - background: none !important; - } + .action-panel-header { + color: var(--theme-action-button-text-color); + padding: 0 24px; + } - .mat-expansion-indicator { - display: flex; - align-content: center; - } - - .mat-expansion-panel-body { - padding-bottom: 0; - } - - .mat-expansion-panel-header-title { - display: flex; - flex-direction: row; - align-items: center; + .action-panel-header__label { + font-size: var(--theme-caption-font-size); + } } } -[dir='rtl'] .sidenav { - .mat-expansion-panel-header { - padding: 0 0 0 8px !important; +.adf-sidenav-layout { + .mat-sidenav { + width: 0 !important; + } +} + +@media screen and (max-width: 587px) { + .adf-sidenav-layout { + .adf-container-full-width { + margin-left: 0px !important; + } + } +} + +@media screen and (min-width: 600px) { + .adf-sidenav-layout { + .adf-container-full-width { + margin-left: 289px !important; + } } } diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts index e47bdab22..01c8283f4 100644 --- a/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts +++ b/projects/aca-content/src/lib/components/sidenav/sidenav.module.ts @@ -39,6 +39,7 @@ import { ButtonMenuComponent } from './components/button-menu.component'; import { ActionDirective } from './directives/action.directive'; import { MainActionModule } from '../main-action/main-action.module'; import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.component'; +import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component'; @NgModule({ imports: [ @@ -58,7 +59,8 @@ import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.compo ExpandMenuComponent, ButtonMenuComponent, SidenavComponent, - SidenavWrapperComponent + SidenavWrapperComponent, + NavigationMenuComponent ], exports: [ MenuPanelDirective, diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html index 442a4b83e..bcbc0bdd4 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html @@ -4,7 +4,6 @@ arrow_back

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

-
diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss index 5b40d3808..ec9cee641 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss @@ -2,23 +2,30 @@ app-view-profile { letter-spacing: .5px; .app-profile-container { - margin-top: 1rem; overflow: scroll; - height:100%; + height: 100%; width: 100%; } .app-profile-row { width: 100%; + height: 32px; + padding: 32px 0; + border-bottom: 1px solid var(--theme-header-border-color); } .app-profile-title { display: flex; - margin-left: 2rem; + flex-direction: row; + align-items: center; + height: 32px; + padding: 0 24px; } .app-profile { cursor: pointer; + margin-top: 1rem; + } .app-profile-general-row { @@ -30,7 +37,6 @@ app-view-profile { .app-profile-icon { margin-right: 1rem; - margin-top: 1rem; cursor: pointer; } @@ -48,7 +54,7 @@ app-view-profile { } .app-profile-general-bottom-radius { - border-bottom-left-radius:0; + border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -66,7 +72,7 @@ app-view-profile { } .app-general-edit-btn { - width:60%; + width: 60%; text-align: end; } @@ -80,13 +86,12 @@ app-view-profile { .app-selected:focus { border: 2px solid var(--theme-blue-button-color) !important; border-radius: 6px; - outline : none !important; + outline: none !important; box-shadow: 0 0 2px (--theme-blue-button-color); } .app-profile-row { width: 100%; - margin: 2rem 0 0 0; } .app-general-edit { @@ -166,7 +171,7 @@ app-view-profile { height: 25px; border: none; margin-top: 1.3rem; - background-color: var(--theme-dropdown-color) ; + background-color: var(--theme-dropdown-color); } .app-profile-login-dropdown-heading-forgot { diff --git a/projects/aca-content/src/lib/extensions/custom-icons.module.ts b/projects/aca-content/src/lib/extensions/custom-icons.module.ts new file mode 100644 index 000000000..bf78629ea --- /dev/null +++ b/projects/aca-content/src/lib/extensions/custom-icons.module.ts @@ -0,0 +1,17 @@ +/* + * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved. + * + * License rights for this program may be obtained from Alfresco Software, Ltd. + * pursuant to a written agreement and any use of this program without such an + * agreement is prohibited. + */ + +import { NgModule } from '@angular/core'; +import { IconService } from '../services/icon.service'; + +@NgModule({}) +export class CustomIconsModule { + constructor(iconService: IconService) { + iconService.registerIcons(); + } +} diff --git a/projects/aca-content/src/lib/services/icon.service.ts b/projects/aca-content/src/lib/services/icon.service.ts new file mode 100644 index 000000000..8decd5cd3 --- /dev/null +++ b/projects/aca-content/src/lib/services/icon.service.ts @@ -0,0 +1,27 @@ +/* + * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved. + * + * License rights for this program may be obtained from Alfresco Software, Ltd. + * pursuant to a written agreement and any use of this program without such an + * agreement is prohibited. + */ + +import { Injectable } from '@angular/core'; +import { MatIconRegistry } from '@angular/material/icon'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Injectable({ + providedIn: 'root' +}) +export class IconService { + contentIcons: string[] = ['workspace', 'menu', 'avatar', 'settings']; + constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {} + public registerIcons(): void { + this.loadIcons(this.contentIcons, './assets/svg/icons'); + } + private loadIcons(iconKeys: string[], iconUrl: string): void { + iconKeys.forEach((key) => { + this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(`${iconUrl}/${key}.svg`)); + }); + } +} diff --git a/projects/aca-content/src/lib/ui/application.scss b/projects/aca-content/src/lib/ui/application.scss index d30f7fa7b..f76abbc95 100644 --- a/projects/aca-content/src/lib/ui/application.scss +++ b/projects/aca-content/src/lib/ui/application.scss @@ -44,6 +44,6 @@ ng-component { adf-layout-container, aca-search-results, ng-component { - height: 80vh; + height: 100vh; } } diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index 24dbd5068..0ad862d17 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/projects/aca-content/src/lib/ui/variables/variables.scss @@ -46,6 +46,11 @@ $datetimepicker-selected-date-background: #2254b2; $datetimepicker-cell-background-color: #ffffff; $datetimepicker-cell-focus-border-color: #1F74DB; $datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12); +$sidenav-background-color: #f8f8f8; +$selected-text-color: #212121; +$selected-background-color: rgba(31, 116, 219, 0.24); +$action-button-text-color: rgba(33, 35, 40, 0.7); +$tooltip-background-color: #ffffff; $defaults: ( --theme-primary-color: mat.get-color-from-palette($primary), @@ -83,6 +88,13 @@ $defaults: ( --theme-datetimepicker-cell-background: $datetimepicker-cell-background-color, --theme-datetimepicker-cell-focus-border: $datetimepicker-cell-focus-border-color, --theme-datetimepicker-cell-focus-background: $datetimepicker-cell-focus-background-color + --theme-sidenav-background-color: $sidenav-background-color, + --theme-selected-text-color: $selected-text-color, + --theme-selected-background-color: $selected-background-color, + --theme-hover-background-color: $grey-text-background, + --theme-action-button-text-color: $action-button-text-color, + --theme-header-border-color: $grey-background, + --theme-tooltip-background-color: $tooltip-background-color, ); // propagates SCSS variables into the CSS variables scope