MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

[develop | DONE | FIXED]: Fix sidebar in customization page.

This commit is contained in:
Konstantinos Triantafyllou 2023-11-03 16:53:39 +02:00
parent 66a0b038b6
commit bc201a1ae8
7 changed files with 127 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@ -5,9 +5,9 @@
<div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="connect-admin" [header]="menuHeader" [communityId]="community ? community.communityId : null"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user"></navbar>
<div class="sidebar_main_swipe uk-flex" [class.sidebar_main_active]="open && hasSidebar" [class.sidebar_mini]="!open && hasSidebar"
<div class="sidebar_main_swipe uk-flex" [class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar)" [class.sidebar_mini]="!open && (hasSidebar || hasInternalSidebar)"
[class.sidebar_hover]="hover">
<dashboard-sidebar *ngIf="hasSidebar" [items]="sideBarItems" [backItem]="backItem"></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasSidebar && !hasInternalSidebar" [items]="sideBarItems" [backItem]="backItem"></dashboard-sidebar>
<main class="uk-width-1-1">
<router-outlet></router-outlet>
</main>

5
src/app/app.component.ts
View File

@ -28,6 +28,7 @@ export class AppComponent implements OnInit {
params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
data: BehaviorSubject<Data> = new BehaviorSubject<Data>(null);
hasSidebar: boolean = false;
hasInternalSidebar: boolean = false;
hasHeader: boolean = true;
hasAdminMenu: boolean = false;
isFrontPage: boolean = false;
@ -81,6 +82,10 @@ export class AppComponent implements OnInit {
this.hasSidebar = hasSidebar;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasInternalSidebar.subscribe(hasInternalSidebar => {
this.hasInternalSidebar = hasInternalSidebar;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => {
this.hasHeader = hasHeader;
this.cdr.detectChanges();

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 3e656de39ca585a307b558e46c26de61afc35b96
Subproject commit 06a2ae16ee5576fec34cc1afad614eff45dc715d

2
src/app/pages/community-routing.module.ts
View File

@ -31,7 +31,7 @@ import {ConnectRIGuard} from "../openaireLibrary/connect/communityGuard/connectR
{
path: 'customize-layout',
loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule),
data: {hasSidebar: true, hasHeader: false}
data: {hasInternalSidebar: true, hasHeader: false}
},
{
path: 'user-info',

230
src/app/pages/customization/customization.component.html
View File

@ -1,134 +1,135 @@
<aside *ngIf="draftCustomizationOptions" id="sidebar_main">
<div id="sidebar_content">
<div class="back">
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon *ngIf="menuSelected.id != 'home'" name="west" ratio="1.3"
[flex]="true"></icon>
<icon *ngIf="menuSelected.id == 'home'" name="close" ratio="1.3"
[flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">{{menuSelected.name}}</span>
</a>
</div>
<div class="menu_section uk-margin-large-top uk-overflow-auto" style="max-height: 75vh">
<ul *ngIf="menuSelected.id == 'home'" class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id">
<a (click)="changeMenu(item)"
[title]="item.name">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="item.icon" class="uk-width-auto">
<icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">
<div *ngIf="draftCustomizationOptions" class="uk-flex">
<aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
<div sidebar-content>
<div class="back">
<a (click)="close()" class="uk-flex uk-flex-middle uk-flex-center">
<div class="uk-width-auto">
<icon *ngIf="menuSelected.id != 'home'" name="west" ratio="1.3"
[flex]="true"></icon>
<icon *ngIf="menuSelected.id == 'home'" name="close" ratio="1.3"
[flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">{{menuSelected.name}}</span>
</a>
</div>
<div class="menu_section uk-margin-large-top uk-overflow-auto" style="max-height: 75vh">
<ul *ngIf="menuSelected.id == 'home'" class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="sidebarItems" let-item let-i="index">
<li class="uk-visible-toggle" [class.uk-active]="menuSelected.id == item.id">
<a (click)="changeMenu(item)"
[title]="item.name">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="item.icon" class="uk-width-auto">
<icon class="menu-icon" [name]="item.icon" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">
{{item.name}}
</span>
<span uk-icon="triangle-right"></span>
</div>
</a>
</li>
</ng-template>
</ul>
<ng-container *ngIf="menuSelected.id == 'identity'">
<ng-container
*ngTemplateOutlet="identityOptions ; context: { }"></ng-container>
</ng-container>
<ng-container *ngIf="menuSelected.id == 'backgrounds'">
<ng-container
*ngTemplateOutlet="backgroundOptions ; context: { }"></ng-container>
</ng-container>
<ng-container *ngIf="menuSelected.id == 'buttons'">
<ng-container
*ngTemplateOutlet="buttonOptions ; context: { }"></ng-container>
</ng-container>
<span uk-icon="triangle-right"></span>
</div>
</a>
</li>
</ng-template>
</ul>
<ng-container *ngIf="menuSelected.id == 'identity'">
<ng-container
*ngTemplateOutlet="identityOptions ; context: { }"></ng-container>
</ng-container>
<ng-container *ngIf="menuSelected.id == 'backgrounds'">
<ng-container
*ngTemplateOutlet="backgroundOptions ; context: { }"></ng-container>
</ng-container>
<ng-container *ngIf="menuSelected.id == 'buttons'">
<ng-container
*ngTemplateOutlet="buttonOptions ; context: { }"></ng-container>
</ng-container>
</div>
</div>
</div>
</aside>
<div *ngIf="draftCustomizationOptions" page-content>
<div actions>
<div class="uk-section-small">
<ng-container *ngTemplateOutlet="applyResetButtons;"></ng-container>
</aside>
<div page-content class="uk-width-1-1">
<div actions>
<div class="uk-section-small">
<ng-container *ngTemplateOutlet="applyResetButtons;"></ng-container>
</div>
</div>
</div>
<div inner>
<div class="uk-section-small">
<div *ngIf="menuSelected.id == 'backgrounds'" class=" uk-padding-small ">
<div class="customizationMenuItems uk-margin-small">
<div class="uk-h4">Backgrounds</div>
<div>Note: Custom background style settings will override any identity settings that effect the
visualisation of a background.
</div>
<div inner>
<div class="uk-section-small">
<div *ngIf="menuSelected.id == 'backgrounds'" class=" uk-padding-small ">
<div class="customizationMenuItems uk-margin-small">
<div class="uk-h4">Backgrounds</div>
<div>Note: Custom background style settings will override any identity settings that effect the
visualisation of a background.
</div>
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
></quick-look-backgrounds>
</div>
</div>
<div *ngIf="menuSelected.id == 'buttons'" class=" uk-padding-small ">
<div class="customizationMenuItems uk-margin-small">
<div class="uk-h4">Buttons</div>
<div>Note: Custom background style settings will override any identity settings that effect the
visualisation of a background.
</div>
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
[buttonView]="true"
></quick-look-backgrounds>
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
></quick-look-backgrounds>
</div>
</div>
<div *ngIf="menuSelected.id == 'buttons'" class=" uk-padding-small ">
<div class="customizationMenuItems uk-margin-small">
<div class="uk-h4">Buttons</div>
<div>Note: Custom background style settings will override any identity settings that effect the
visualisation of a background.
</div>
<div *ngIf="menuSelected.id == 'identity'" class=" uk-padding-small ">
<div class=" customizationMenuItems uk-margin-small">
<div class="uk-margin-large-top uk-margin-small-bottom uk-h5"> Quick look
<div class="uk-h4">Identity</div>
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
</div>
<quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
[lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
[formBackgroundColor]="draftCustomizationOptions.backgrounds.form.color"
[primaryColor]="draftCustomizationOptions.identity.mainColor"
[secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
[buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
[buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
[buttonView]="true"
></quick-look-backgrounds>
</div>
</div>
<div *ngIf="menuSelected.id == 'identity'" class=" uk-padding-small ">
<div class=" customizationMenuItems uk-margin-small">
<div class="uk-h4">Identity</div>
<div>Note: Custom identity style settings will effect the visualisation of the whole gateway. That
includes <span class="uk-text-bold">buttons, links, tabs, backgrounds, etc.</span></div>
</div>
</div>
<div class="uk-padding-small">
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
<div id="container" class=" uk-flex uk-flex-center uk-flex-middle">
<div id="iframecontainer" class="">
<div class="uk-height-1-1">
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
class=" uk-width-1-1 refresh-indicator">
<div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
(click)="applyLayout()">
<div>
<icon name="refresh" ratio="2.5"></icon>
<div class="uk-padding-small">
<div class="uk-margin-top uk-margin-small-bottom uk-h5">See a preview</div>
<div id="container" class=" uk-flex uk-flex-center uk-flex-middle">
<div id="iframecontainer" class="">
<div class="uk-height-1-1">
<div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
class=" uk-width-1-1 refresh-indicator">
<div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
(click)="applyLayout()">
<div>
<icon name="refresh" ratio="2.5"></icon>
</div>
<div class="uk-margin-medium-top">Style has been changed.</div>
<div class="uk-margin-top"> Click to refresh the view.</div>
</div>
<div class="uk-margin-medium-top">Style has been changed.</div>
<div class="uk-margin-top"> Click to refresh the view.</div>
</div>
</div>
</div>
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
style=" border-radius: 10px;"
></iframe>
<iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
style=" border-radius: 10px;"
></iframe>
</div>
</div>
</div>
</div>
@ -136,6 +137,7 @@
</div>
</div>
</div>
<ng-template #identityOptions>
<div class="functionalities-container uk-text-small">
<div class="uk-margin-top">

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860
Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6
Subproject commit 5e8c1addb1ebfa508aac8cb9540a755940c95b79