MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 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> <div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="connect-admin" [header]="menuHeader" [communityId]="community ? community.communityId : null" <navbar *ngIf="hasHeader" portal="connect-admin" [header]="menuHeader" [communityId]="community ? community.communityId : null"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user"></navbar> [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"> [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"> <main class="uk-width-1-1">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </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); params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
data: BehaviorSubject<Data> = new BehaviorSubject<Data>(null); data: BehaviorSubject<Data> = new BehaviorSubject<Data>(null);
hasSidebar: boolean = false; hasSidebar: boolean = false;
hasInternalSidebar: boolean = false;
hasHeader: boolean = true; hasHeader: boolean = true;
hasAdminMenu: boolean = false; hasAdminMenu: boolean = false;
isFrontPage: boolean = false; isFrontPage: boolean = false;
@ -81,6 +82,10 @@ export class AppComponent implements OnInit {
this.hasSidebar = hasSidebar; this.hasSidebar = hasSidebar;
this.cdr.detectChanges(); 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.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => {
this.hasHeader = hasHeader; this.hasHeader = hasHeader;
this.cdr.detectChanges(); 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', path: 'customize-layout',
loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule), loadChildren: () => import('./customization/customization.module').then(m => m.CustomizationModule),
data: {hasSidebar: true, hasHeader: false} data: {hasInternalSidebar: true, hasHeader: false}
}, },
{ {
path: 'user-info', path: 'user-info',

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

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