[develop | DONE | FIXED]: Fix sidebar in customization page.
This commit is contained in:
parent
66a0b038b6
commit
bc201a1ae8
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 3e656de39ca585a307b558e46c26de61afc35b96
|
Subproject commit 06a2ae16ee5576fec34cc1afad614eff45dc715d
|
|
@ -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',
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860
|
Subproject commit 6bb1e61b059bef1bff3bfb0611b0df46f7840426
|
|
@ -1 +1 @@
|
||||||
Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6
|
Subproject commit 5e8c1addb1ebfa508aac8cb9540a755940c95b79
|
Loading…
Reference in New Issue