Relocate preview button from sidebar to header actions.
This commit is contained in:
parent
b07958c9e3
commit
191855d64d
|
|
@ -1,15 +1,15 @@
|
||||||
<aside *ngIf="stakeholder" id="sidebar_main">
|
<aside *ngIf="stakeholder" id="sidebar_main">
|
||||||
<div id="sidebar_content">
|
<div id="sidebar_content">
|
||||||
<div class="menu_section uk-margin-large-top">
|
<div class="menu_section uk-margin-large-top">
|
||||||
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-button uk-button-link uk-margin-left">
|
<a [routerLink]="'/admin/' + stakeholder.alias" class="uk-button uk-button-link uk-margin-left">
|
||||||
<h6 class="uk-flex uk-flex-middle uk-flex-center uk-margin-remove-bottom">
|
<h6 class="uk-flex uk-flex-middle uk-flex-center uk-margin-remove-bottom">
|
||||||
<div class="uk-width-auto">
|
<div class="uk-width-auto">
|
||||||
<icon class="menu-icon" name="west" [flex]="true" ratio="1.5"></icon>
|
<icon class="menu-icon" name="west" [flex]="true" ratio="1.5"></icon>
|
||||||
</div>
|
</div>
|
||||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
|
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
|
||||||
[class.uk-hidden]="!open">Indicators</span>
|
[class.uk-hidden]="!open">Indicators</span>
|
||||||
</h6>
|
</h6>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu_section uk-margin-large-top">
|
<div class="menu_section uk-margin-large-top">
|
||||||
<ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
|
<ul #topics class="uk-list uk-nav uk-nav-default" transition-group uk-nav>
|
||||||
|
|
@ -108,31 +108,6 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
|
|
||||||
<div class="uk-flex uk-flex-center">
|
|
||||||
<button class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
|
|
||||||
<icon name="visibility" [flex]="true"></icon>
|
|
||||||
</button>
|
|
||||||
<div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
|
|
||||||
class="uk-padding-remove-horizontal">
|
|
||||||
<ul class="uk-nav uk-dropdown-nav">
|
|
||||||
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
|
|
||||||
[queryParams]="{view: 'public'}"
|
|
||||||
(click)="hide(element)">Public view</a>
|
|
||||||
</li>
|
|
||||||
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
|
|
||||||
stakeholder.topics[topicIndex].alias"
|
|
||||||
[queryParams]="{view: 'restricted'}"
|
|
||||||
(click)="hide(element)">Restricted view</a>
|
|
||||||
</li>
|
|
||||||
<!--<li class="disabled"><a class="uk-disabled uk-text-muted"
|
|
||||||
uk-tooltip="Note: available only in administration dashboard"
|
|
||||||
(click)="hide(element)">Private view</a>
|
|
||||||
</li>-->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<div *ngIf="stakeholder && filters" page-content>
|
<div *ngIf="stakeholder && filters" page-content>
|
||||||
|
|
@ -174,7 +149,8 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories.length - 1" class="uk-nav-divider"></li>
|
<li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories.length - 1"
|
||||||
|
class="uk-nav-divider"></li>
|
||||||
<li *ngIf="i > 0">
|
<li *ngIf="i > 0">
|
||||||
<a (click)="hide(element);moveCategory(i)">
|
<a (click)="hide(element);moveCategory(i)">
|
||||||
<div class="uk-flex uk-flex-middle">
|
<div class="uk-flex uk-flex-middle">
|
||||||
|
|
@ -228,17 +204,19 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
|
<div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
|
||||||
#subCategories class="uk-subnav uk-subnav-pill uk-margin-medium-top" transition-group>
|
<div class="uk-width-expand">
|
||||||
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
|
<ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
|
||||||
let-subCategory let-i="index">
|
#subCategories class="uk-subnav uk-subnav-pill" transition-group>
|
||||||
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
|
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
|
||||||
<a (click)="chooseSubcategory(i);$event.preventDefault()" class="uk-margin-small-left">
|
let-subCategory let-i="index">
|
||||||
<span>{{subCategory.name}}</span>
|
<li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
|
||||||
</a>
|
<a (click)="chooseSubcategory(i);$event.preventDefault()" class="uk-margin-small-left">
|
||||||
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
|
<span>{{subCategory.name}}</span>
|
||||||
[class.uk-invisible-hover]="subCategoryIndex !== i"
|
</a>
|
||||||
(click)="$event.stopPropagation();$event.preventDefault()">
|
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
|
||||||
|
[class.uk-invisible-hover]="subCategoryIndex !== i"
|
||||||
|
(click)="$event.stopPropagation();$event.preventDefault()">
|
||||||
<a class="uk-link-reset uk-flex uk-flex-middle">
|
<a class="uk-link-reset uk-flex uk-flex-middle">
|
||||||
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
|
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
|
||||||
ratio="0.6"></icon>
|
ratio="0.6"></icon>
|
||||||
|
|
@ -255,7 +233,8 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length - 1" class="uk-nav-divider"></li>
|
<li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length - 1"
|
||||||
|
class="uk-nav-divider"></li>
|
||||||
<li *ngIf="i > 0">
|
<li *ngIf="i > 0">
|
||||||
<a (click)="hide(element);moveSubCategory(i)">
|
<a (click)="hide(element);moveSubCategory(i)">
|
||||||
<div class="uk-flex uk-flex-middle">
|
<div class="uk-flex uk-flex-middle">
|
||||||
|
|
@ -317,15 +296,44 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<li *ngIf="isCurator">
|
<li *ngIf="isCurator">
|
||||||
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
|
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
|
||||||
<icon name="add" [flex]="true"></icon>
|
<icon name="add" [flex]="true"></icon>
|
||||||
<span>Create new subcategory</span>
|
<span>Create new subcategory</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="stakeholder.topics.length > 0" class="uk-width-auto@m uk-width-1-1">
|
||||||
|
<div class="uk-flex uk-flex-center">
|
||||||
|
<button class="uk-button uk-button-primary uk-flex uk-flex-middle">
|
||||||
|
<icon name="visibility" [flex]="true"></icon>
|
||||||
|
<span class="uk-margin-small-left uk-margin-small-right">Preview</span>
|
||||||
|
<icon name="expand_more" [flex]="true"></icon>
|
||||||
|
</button>
|
||||||
|
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
|
||||||
|
<ul class="uk-nav uk-dropdown-nav">
|
||||||
|
<li><a target="_blank"
|
||||||
|
[routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
|
||||||
|
[queryParams]="{view: 'public'}"
|
||||||
|
(click)="hide(element)">Public view</a>
|
||||||
|
</li>
|
||||||
|
<li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
|
||||||
|
stakeholder.topics[topicIndex].alias"
|
||||||
|
[queryParams]="{view: 'restricted'}"
|
||||||
|
(click)="hide(element)">Restricted view</a>
|
||||||
|
</li>
|
||||||
|
<!--<li class="disabled"><a class="uk-disabled uk-text-muted"
|
||||||
|
uk-tooltip="Note: available only in administration dashboard"
|
||||||
|
(click)="hide(element)">Private view</a>
|
||||||
|
</li>-->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div inner>
|
<div inner>
|
||||||
|
|
@ -337,24 +345,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
|
<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
|
||||||
[overflowBody]="false">
|
[overflowBody]="false">
|
||||||
<div *ngIf="loading" class="uk-position-relative uk-height-medium">
|
<div *ngIf="loading" class="uk-position-relative uk-height-medium">
|
||||||
<loading class="uk-position-center"></loading>
|
<loading class="uk-position-center"></loading>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!loading">
|
<div *ngIf="!loading">
|
||||||
You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
|
You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
|
||||||
<div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">
|
<div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">
|
||||||
{{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
|
{{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
|
||||||
</div>
|
</div>
|
||||||
Are you sure you want to proceed?
|
Are you sure you want to proceed?
|
||||||
</div>
|
</div>
|
||||||
</modal-alert>
|
</modal-alert>
|
||||||
<modal-alert #editModal classTitle="uk-background-primary uk-light" (alertOutput)="saveElement()"
|
<modal-alert #editModal classTitle="uk-background-primary uk-light" (alertOutput)="saveElement()"
|
||||||
[okDisabled]="form && (form.invalid || form.pristine)">
|
[okDisabled]="form && (form.invalid || form.pristine)">
|
||||||
<div *ngIf="loading" class="uk-position-relative uk-height-large">
|
<div *ngIf="loading" class="uk-position-relative uk-height-large">
|
||||||
<loading class="uk-position-center"></loading>
|
<loading class="uk-position-center"></loading>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="form" [class.uk-hidden]="loading" class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form" uk-grid>
|
<div *ngIf="form" [class.uk-hidden]="loading"
|
||||||
|
class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form" uk-grid>
|
||||||
<div input [formInput]="form.get('name')" placeholder="Title"></div>
|
<div input [formInput]="form.get('name')" placeholder="Title"></div>
|
||||||
<div input [formInput]="form.get('description')" placeholder="Description" type="textarea" rows="4"></div>
|
<div input [formInput]="form.get('description')" placeholder="Description" type="textarea" rows="4"></div>
|
||||||
<div *ngIf="form.get('icon')" input [formInput]="form.get('icon')" placeholder="Icon(SVG)" type="textarea"></div>
|
<div *ngIf="form.get('icon')" input [formInput]="form.get('icon')" placeholder="Icon(SVG)" type="textarea"></div>
|
||||||
|
|
@ -364,27 +373,29 @@
|
||||||
</div>
|
</div>
|
||||||
</modal-alert>
|
</modal-alert>
|
||||||
<modal-alert #visibilityModal [large]="false" classTitle="uk-background-primary uk-light">
|
<modal-alert #visibilityModal [large]="false" classTitle="uk-background-primary uk-light">
|
||||||
<div class="">
|
<div class="">
|
||||||
You have the option to change the visibility status of your {{type}}, with or without applying the changed status to its contents.
|
You have the option to change the visibility status of your {{type}}, with or without applying the changed status to
|
||||||
</div>
|
its contents.
|
||||||
<div class="uk-flex uk-flex-center uk-margin-medium-top uk-margin-medium-bottom">
|
</div>
|
||||||
<button class="uk-button uk-button-primary" (click)="changeElementStatus()">
|
<div class="uk-flex uk-flex-center uk-margin-medium-top uk-margin-medium-bottom">
|
||||||
Change {{type}} status
|
<button class="uk-button uk-button-primary" (click)="changeElementStatus()">
|
||||||
</button>
|
Change {{type}} status
|
||||||
</div>
|
</button>
|
||||||
<div class="uk-flex uk-flex-center uk-margin-medium-bottom">
|
</div>
|
||||||
<button class="uk-button uk-button-primary" (click)="changeElementStatus(true)">
|
<div class="uk-flex uk-flex-center uk-margin-medium-bottom">
|
||||||
Change {{type}} and its contents' status
|
<button class="uk-button uk-button-primary" (click)="changeElementStatus(true)">
|
||||||
</button>
|
Change {{type}} and its contents' status
|
||||||
</div>
|
</button>
|
||||||
<div class="uk-text-small">
|
</div>
|
||||||
<p class="uk-text-bold uk-text-uppercase uk-margin-remove">Note:</p>
|
<div class="uk-text-small">
|
||||||
<div>
|
<p class="uk-text-bold uk-text-uppercase uk-margin-remove">Note:</p>
|
||||||
<span class="uk-text-bold uk-text-italic">The status of the {{type}} prevails the status of its contents.</span> For example, if a {{type}}'s status is private, while it has
|
<div>
|
||||||
<span *ngIf="type == 'topic'">a category, subcategory or an indicator</span>
|
<span class="uk-text-bold uk-text-italic">The status of the {{type}} prevails the status of its contents.</span>
|
||||||
<span *ngIf="type == 'category'">a subcategory or an indicator</span>
|
For example, if a {{type}}'s status is private, while it has
|
||||||
<span *ngIf="type == 'subcategory'">an indicator</span>
|
<span *ngIf="type == 'topic'">a category, subcategory or an indicator</span>
|
||||||
that is public, the private status of the {{type}} dominates.
|
<span *ngIf="type == 'category'">a subcategory or an indicator</span>
|
||||||
</div>
|
<span *ngIf="type == 'subcategory'">an indicator</span>
|
||||||
</div>
|
that is public, the private status of the {{type}} dominates.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</modal-alert>
|
</modal-alert>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue