diff --git a/resources/i18n/en.json b/resources/i18n/en.json index 73cf536496..019a0b5eda 100644 --- a/resources/i18n/en.json +++ b/resources/i18n/en.json @@ -210,6 +210,75 @@ "no-items": "No bitstream formats to show." } } + }, + "sidebar": { + "section": { + "new": { + "header": "New", + "subsections": { + "community": "Community", + "collection": "Collection", + "item": "Item", + "item_version": "Item Version" + } + }, + "edit": { + "header": "Edit", + "subsections": { + "community": "Community", + "collection": "Collection", + "item": "Item" + } + }, + "import": { + "header": "Import", + "subsections": { + "metadata": "Metadata", + "batch_import": "Batch Import (ZIP)" + } + }, + "export": { + "header": "Export", + "subsections": { + "community": "Community", + "collection": "Collection", + "item": "Item", + "metadata": "Metadata" + } + }, + "access_control": { + "header": "Access Control", + "subsections": { + "people": "People", + "groups": "Groups", + "authorizations": "Authorizations" + } + }, + "find": { + "header": "Find", + "subsections": { + "items": "Items", + "withdrawn_items": "Withdrawn Items", + "private_items": "Private Items" + } + }, + "registries": { + "header": "Registries", + "subsections": { + "metadata": "Metadata", + "format": "Format" + } + }, + "curation_task": { + "header": "Curation Task" + }, + "statistics": { + "header": "Statistics Task" + }, + "control_panel": { + "header": "Control Panel" + } + } } }, "loading": { diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss new file mode 100644 index 0000000000..88eb98509a --- /dev/null +++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss @@ -0,0 +1 @@ +@import '../../../../styles/variables.scss'; \ No newline at end of file diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html index a76dd9781e..af5e397d38 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html @@ -6,137 +6,58 @@
- - + Collapse
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss index b98caeb2de..67d8d3dc8f 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss @@ -16,50 +16,46 @@ overflow: auto; } } - .section-header-text, .fa-chevron-right { - display: none; - padding-left: $spacer/2; + + .admin-menu-header { + background-color: $admin-sidebar-header-bg; + .logo-wrapper { + text-align: center; + display: inline-block; + width: 1.25em; + img { + height: 1em; + vertical-align: text-bottom; + } + } + .section-header-text { + vertical-align: bottom; + } + } - .navbar-nav { - > li, > a { - padding: $spacer/2 $spacer; - &.active { - background-color: $admin-sidebar-dark; - } + ::ng-deep { - } - - .sidebar-sub-level-items { - list-style: disc; - color: $navbar-dark-color; - } - .fa-xxs { - font-size: 0.5rem; - line-height: 3; - } - .admin-menu-header { - background-color: $admin-sidebar-dark; - .logo-wrapper { - text-align: center; - display: inline-block; - width: 1.25em; - img { - height: 1em; - vertical-align: text-bottom; - } + .navbar-nav { + .sidebar-section { + padding: $spacer; } .section-header-text { - vertical-align: bottom; + display: none; + padding-left: $spacer/2; + } + #sidebar-collapse-toggle { + border-top: 2px solid rgba(255, 255, 255, 0.1); } - } } - &.active { - .section-header-text, .fa-chevron-right { - display: inline; + ::ng-deep { + .section-header-text, .fa-chevron-right { + display: inline; + } } } + } } \ No newline at end of file diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts index d310fcb5b9..68fce4d32f 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts @@ -1,59 +1,27 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/internal/Observable'; -import { MemoizedSelector, select, Store } from '@ngrx/store'; -import { AdminSidebarSectionState, AdminSidebarState, } from './admin-sidebar.reducer'; -import { hasValue } from '../../shared/empty.util'; -import { map } from 'rxjs/operators'; -import { - AdminSidebarSectionCollapseAllAction, - AdminSidebarSectionToggleAction, - AdminSidebarToggleAction -} from './admin-sidebar.actions'; -import { AppState, keySelector } from '../../app.reducer'; import { slideSidebar } from '../../shared/animations/slide'; import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service'; -import { rotateInOut } from '../../shared/animations/rotate'; - -const sidebarSectionStateSelector = (state: AppState) => state.adminSidebar.sections; -const sidebarStateSelector = (state) => state.adminSidebar; - -const sectionByNameSelector = (name: string): MemoizedSelector => { - return keySelector(name, sidebarSectionStateSelector); -}; +import { AdminSidebarService } from './admin-sidebar.service'; @Component({ selector: 'ds-admin-sidebar', templateUrl: './admin-sidebar.component.html', styleUrls: ['./admin-sidebar.component.scss'], - animations: [slideSidebar, rotateInOut] + animations: [slideSidebar] }) export class AdminSidebarComponent implements OnInit { sidebarCollapsed: Observable; sidebarWidth: Observable; sidebarActive = true; - constructor(private store: Store, + constructor(private sidebarService: AdminSidebarService, private variableService: CSSVariableService) { } ngOnInit(): void { - this.sidebarWidth = this.variableService.getVariable('adminSidebarWidth') - this.sidebarCollapsed = this.store.pipe( - select(sidebarStateSelector), - map((state: AdminSidebarState) => state.collapsed) - ); - } - - public active(name: string): Observable { - return this.store.pipe( - select(sectionByNameSelector(name)), - map((state: AdminSidebarSectionState) => hasValue(state) ? !state.sectionCollapsed : false) - ); - } - - toggleSection(event: Event, name: string) { - event.preventDefault(); - this.store.dispatch(new AdminSidebarSectionToggleAction(name)); + this.sidebarWidth = this.variableService.getVariable('adminSidebarWidth'); + this.sidebarCollapsed = this.sidebarService.isSidebarCollapsed(); } toggle(event: Event) { @@ -61,9 +29,9 @@ export class AdminSidebarComponent implements OnInit { // Is sidebar closing? if (this.sidebarActive) { this.sidebarActive = false; - this.store.dispatch(new AdminSidebarSectionCollapseAllAction()); + this.sidebarService.collapseAllSections(); } - this.store.dispatch(new AdminSidebarToggleAction()); + this.sidebarService.toggleSidebar(); } /** diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.service.ts b/src/app/+admin/admin-sidebar/admin-sidebar.service.ts new file mode 100644 index 0000000000..199ab86214 --- /dev/null +++ b/src/app/+admin/admin-sidebar/admin-sidebar.service.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { AppState, keySelector } from '../../app.reducer'; +import { MemoizedSelector, select, Store } from '@ngrx/store'; +import { AdminSidebarSectionState, AdminSidebarState } from './admin-sidebar.reducer'; +import { map } from 'rxjs/operators'; +import { Observable } from 'rxjs/internal/Observable'; +import { hasValue } from '../../shared/empty.util'; +import { + AdminSidebarSectionCollapseAllAction, + AdminSidebarSectionToggleAction, + AdminSidebarToggleAction +} from './admin-sidebar.actions'; + +const sidebarStateSelector = (state) => state.adminSidebar; +const sidebarSectionStateSelector = (state: AppState) => state.adminSidebar.sections; + +const sectionByNameSelector = (name: string): MemoizedSelector => { + return keySelector(name, sidebarSectionStateSelector); +}; + +/** + * Service that performs all actions that have to do with search the admin sidebar + */ +@Injectable() +export class AdminSidebarService { + + constructor(private store: Store) { + } + + isSidebarCollapsed(): Observable { + return this.store.pipe( + select(sidebarStateSelector), + map((state: AdminSidebarState) => state.collapsed) + ); + } + + toggleSidebar(): void { + this.store.dispatch(new AdminSidebarToggleAction()); + } + + toggleSection(name: string): void { + this.store.dispatch(new AdminSidebarSectionToggleAction(name)); + } + + collapseAllSections(): void { + this.store.dispatch(new AdminSidebarSectionCollapseAllAction()); + } + + isSectionCollapsed(name: string): Observable { + return this.store.pipe( + select(sectionByNameSelector(name)), + map((state: AdminSidebarSectionState) => hasValue(state) ? state.sectionCollapsed : true) + ); + } +} diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss new file mode 100644 index 0000000000..fd52475867 --- /dev/null +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -0,0 +1,19 @@ +@import '../../../../styles/variables.scss'; + +.fa-chevron-right { + display: none; + padding-left: $spacer/2; + font-size: 0.5rem; + line-height: 3; +} + +.sub-section-wrapper { + overflow: hidden; +} + +.sidebar-sub-level-items { + list-style: disc; + color: $navbar-dark-color; + /** To make sure animation is smooth */ + width: 0; +} diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-filter.component.html index 1013bf7e28..26b2543221 100644 --- a/src/app/+search-page/search-filters/search-filter/search-filter.component.html +++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.html @@ -1,7 +1,7 @@
{{'search.filters.filter.' + filter.name + '.head'| translate}}
-
+
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7188cfa0d4..41d2e9903d 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -34,6 +34,8 @@ import { SharedModule } from './shared/shared.module'; import { NavbarComponent } from './navbar/navbar.component'; import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component'; import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component'; +import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component'; +import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component'; export function getConfig() { return ENV_CONFIG; @@ -94,6 +96,8 @@ const DECLARATIONS = [ NavbarComponent, HeaderNavbarWrapperComponent, AdminSidebarComponent, + AdminSidebarSectionComponent, + ExpandableAdminSidebarSectionComponent, FooterComponent, PageNotFoundComponent, NotificationComponent, @@ -112,7 +116,7 @@ const EXPORTS = [ ...PROVIDERS ], declarations: [ - ...DECLARATIONS + ...DECLARATIONS, ], exports: [ ...EXPORTS diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index bf245b4f32..267e7c226f 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -65,6 +65,7 @@ import { UploaderService } from '../shared/uploader/uploader.service'; import { BrowseItemsResponseParsingService } from './data/browse-items-response-parsing-service'; import { DSpaceObjectDataService } from './data/dspace-object-data.service'; import { CSSVariableService } from '../shared/sass-helper/sass-helper.service'; +import { AdminSidebarService } from '../+admin/admin-sidebar/admin-sidebar.service'; const IMPORTS = [ CommonModule, @@ -130,6 +131,7 @@ const PROVIDERS = [ UUIDService, DSpaceObjectDataService, CSSVariableService, + AdminSidebarService, // register AuthInterceptor as HttpInterceptor { provide: HTTP_INTERCEPTORS, diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index dd63925e97..7d84cf821e 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -5,6 +5,8 @@