tweaks for admin: pages, entities, classes and portals html files

This commit is contained in:
Alex Martzios 2022-06-21 12:22:28 +03:00
parent b7f5f17b6a
commit 3559b7a7ca
5 changed files with 169 additions and 132 deletions

View File

@ -29,7 +29,12 @@
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div> <div>
<button class="uk-button uk-button-secondary">Bulk Actions</button> <button class="uk-button uk-button-secondary" [class]="getSelectedDivIds().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedDivIds().length == 0">
Bulk Actions
<span *ngIf="getSelectedDivIds().length > 0">
({{getSelectedDivIds().length}})
</span>
</button>
<div uk-dropdown="mode: click"> <div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav" <ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
@ -93,11 +98,11 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)"> [okDisabled]="classForm && (classForm.invalid || !classForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="classForm.get('name')" placeholder="Class Name"></div> <div input [formInput]="classForm.get('name')" placeholder="Class Name"></div>
<div input [formInput]="classForm.get('pages')" placeholder="Pages" [options]="allPages" type="chips"></div> <div input [formInput]="classForm.get('pages')" placeholder="Pages" [options]="allPages" type="chips"></div>
<div input [formInput]="classForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div> <div input [formInput]="classForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div>
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert> <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteDivIds($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -30,6 +30,38 @@
</div> </div>
<div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search entity" class="uk-width-expand"></div> <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search entity" class="uk-width-expand"></div>
<div>
<button utton class="uk-button uk-button-secondary" [class]="getSelectedEntities().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedEntities().length == 0">
Bulk Actions
<span *ngIf="getSelectedEntities().length > 0">
({{getSelectedEntities().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i>
Enable
</a>
</li>
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i>
Disable
</a>
</li>
<li *ngIf="isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator"> <div *ngIf="isPortalAdministrator">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newEntity()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newEntity()">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
@ -39,37 +71,11 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding">
<div
class="uk-display-inline"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedEntities().length}} entities selected </span>
<a class="uk-margin-left ">Actions </a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large"> <table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large">
<thead> <thead>
<tr> <tr>
<th class="uk-width-small"></th> <th><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox" [ngModel]="getSelectedEntities().length == checkboxes.length"/></th>
<th>Name</th> <th>Name</th>
<th *ngIf="!isPortalAdministrator">Status</th> <th *ngIf="!isPortalAdministrator">Status</th>
<th *ngIf="!isPortalAdministrator">Enable/Disable</th> <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
@ -111,11 +117,11 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)" <modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)"> [okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="entityForm.get('name')" placeholder="Entity Name"></div> <div input [formInput]="entityForm.get('name')" placeholder="Entity Name"></div>
<div input [formInput]="entityForm.get('pid')" placeholder="Entity Pid"></div> <div input [formInput]="entityForm.get('pid')" placeholder="Entity Pid"></div>
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #relatedPages [overflowBody]="false" (alertOutput)="continueToggling($event)"></modal-alert> <modal-alert #relatedPages [overflowBody]="false" (alertOutput)="continueToggling($event)" classTitle="uk-background-primary uk-light"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteEntities($event)"></modal-alert> <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteEntities($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -118,7 +118,7 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)"> [okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid> <form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name" <div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
placeholder="Write a name"></div> placeholder="Write a name"></div>
@ -164,4 +164,4 @@
</div> </div>
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert> <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -28,6 +28,38 @@
</div> </div>
<div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> <div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></div> <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></div>
<div>
<button utton class="uk-button uk-button-secondary" [class]="getSelectedPages().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedPages().length == 0">
Bulk Actions
<span *ngIf="getSelectedPages().length > 0">
({{getSelectedPages().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i>
Enable
</a>
</li>
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i>
Disable
</a>
</li>
<li *ngIf="isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator"> <div *ngIf="isPortalAdministrator">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()"> <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
@ -36,61 +68,47 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="checkboxes.length > 0" class="uk-section uk-section-small"> <div *ngIf="checkboxes.length > 0" class="uk-padding uk-padding-remove-bottom">
<div <div class="uk-display-inline">
class="uk-display-inline" <label>
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null" <input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedPages().length ==checkboxes.length"/> [ngModel]="getSelectedPages().length ==checkboxes.length"/>
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted"> <span class="uk-margin-medium-left uk-text-emphasis">Select all</span>
{{getSelectedPages().length}} pages selected </span> </label>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
</ul>
</div>
</div> </div>
</div> </div>
<ul *ngIf="checkboxes.length > 0" class="uk-list pages"> <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom"> <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class="top uk-padding uk-grid" uk-grid>
<div class="uk-grid uk-width-expand" uk-grid> <div class="inputDiv">
<div class=""><input id="{{check.page._id}}" class="uk-checkbox" type="checkbox" <input id="{{check.page._id}}" class="uk-checkbox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked"> name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
</div> </div>
<div class="uk-width-expand"> <div class="infoDiv uk-width-expand uk-text-small">
<div class="title uk-margin-medium-bottom">Name</div> <div class="uk-margin-bottom uk-text-large uk-text-bold">{{check.page.name}}</div>
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div> <div *ngIf="check.page.entities && check.page.entities.length > 0">
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span <span class="uk-text-meta">Entities: </span>{{getEntitiesAsString(check.page)}}
class="title">Entities: </span> </div>
{{getEntitiesAsString(check.page)}}</div> <div class=" uk-margin-small-bottom">
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div> <span class="uk-text-meta">Route: </span>{{check.page.route}}
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span </div>
class="title">Type: </span> {{check.page.type}}</div> <div *ngIf="!pagesType" class=" uk-margin-small-bottom">
<span class="uk-text-meta">Type: </span>{{check.page.type}}
</div>
<div *ngIf="!portal" class=" uk-margin-small-bottom"> <div *ngIf="!portal" class=" uk-margin-small-bottom">
<span class="title">Portal type: </span>{{check.page.portalType}} <span class="uk-text-meta">Portal type: </span>{{check.page.portalType}}
</div> </div>
<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom"> <div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
<span class="title">Portal PID: </span>{{check.page.portalPid}} <span class="uk-text-meta">Portal PID: </span>{{check.page.portalPid}}
</div> </div>
</div> </div>
</div>
<div class="bottom uk-card-footer uk-flex uk-flex-right">
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left || <div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4"> check.page.right) || pageWithDivIds.includes(check.page._id) )" class="">
<div class="title uk-margin-medium-bottom">Help texts</div> <div>
<div class=" uk-margin-small-bottom">
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right" <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
class="helpContents" class="uk-button uk-button-link uk-text-uppercase"
[queryParams]="{pageId: check.page._id}" [queryParams]="{pageId: check.page._id}"
routerLink="../helptexts"> routerLink="../helptexts">
Manage page help texts Manage page help texts
@ -98,39 +116,34 @@
</a> </a>
</div> </div>
<div> <div>
<a *ngIf="pageWithDivIds.includes(check.page._id)" <a *ngIf="pageWithDivIds.includes(check.page._id)" class="uk-button uk-button-link uk-text-uppercase"
[queryParams]="{ pageId: check.page._id}" [queryParams]="{ pageId: check.page._id}"
routerLink="../classContents">Manage class help texts routerLink="../classContents">Manage class help texts
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span> <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
</a> </a>
</div> </div>
</div> </div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4"> <div *ngIf="!isPortalAdministrator" class="uk-margin-medium-left uk-flex uk-flex-middle">
<div class="title uk-margin-medium-bottom">Enable/disable</div>
<mat-slide-toggle [checked]="check.page.isEnabled" <mat-slide-toggle [checked]="check.page.isEnabled"
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])" (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>"> uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
</mat-slide-toggle> </mat-slide-toggle>
<span class="uk-margin-small-left uk-text-small uk-text-emphasis">Enable</span>
</div> </div>
</div> <div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)">
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5"> <div class="uk-flex uk-flex-middle">
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-flex uk-flex-center">
<div class="actions">
<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)" <button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)"> class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="editPage(i)">
<icon name="edit" [flex]="true"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left"> Edit</span> <span class="uk-margin-xsmall-left"> Edit</span>
</button> </button>
<button class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)"> <button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-left" (click)="confirmDeletePage(check.page._id)">
<icon name="delete" [flex]="true"></icon> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left"> Delete</span> <span class="uk-margin-xsmall-left"> Delete</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</li> </li>
</ul> </ul>
@ -142,7 +155,7 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
[okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)"> [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input placeholder="Route" [formInput]="pageForm.get('route')"></div> <div input placeholder="Route" [formInput]="pageForm.get('route')"></div>
<div input placeholder="Name" [formInput]="pageForm.get('name')"></div> <div input placeholder="Name" [formInput]="pageForm.get('name')"></div>
@ -157,20 +170,28 @@
<div class="uk-form-label uk-text-bold uk-margin-bottom">Select if this page have helptext at:</div> <div class="uk-form-label uk-text-bold uk-margin-bottom">Select if this page have helptext at:</div>
<div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid> <div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
<div> <div>
<label class="uk-margin-small-right">Top</label> <label>
<input type="checkbox" class="uk-checkbox" formControlName="top"> <input type="checkbox" class="uk-checkbox" formControlName="top">
<span class="uk-margin-small-left">Top</span>
</label>
</div> </div>
<div> <div>
<label class="uk-margin-small-right">Right</label> <label>
<input type="checkbox" class="uk-checkbox" formControlName="right"> <input type="checkbox" class="uk-checkbox" formControlName="right">
<span class="uk-margin-small-left">Right</span>
</label>
</div> </div>
<div> <div>
<label class="uk-margin-small-right">Bottom</label> <label>
<input type="checkbox" class="uk-checkbox" formControlName="bottom"> <input type="checkbox" class="uk-checkbox" formControlName="bottom">
<span class="uk-margin-small-left">Bottom</span>
</label>
</div> </div>
<div> <div>
<label class="uk-margin-small-right">Left</label> <label>
<input type="checkbox" class="uk-checkbox" formControlName="left"> <input type="checkbox" class="uk-checkbox" formControlName="left">
<span class="uk-margin-small-left">Left</span>
</label>
</div> </div>
</div> </div>
<div class="uk-text-danger uk-margin-top"> <div class="uk-text-danger uk-margin-top">
@ -181,4 +202,4 @@
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)"></modal-alert> <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -30,7 +30,12 @@
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search portal" <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search portal"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div> [bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div> <div>
<button class="uk-button uk-button-secondary">Bulk Actions</button> <button class="uk-button uk-button-secondary" [class]="getSelectedPortals().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedPortals().length == 0">
Bulk Actions
<span *ngIf="getSelectedPortals().length > 0">
({{getSelectedPortals().length}})
</span>
</button>
<div uk-dropdown="mode: click"> <div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav" <ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPortals().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'" [attr.uk-tooltip]="getSelectedPortals().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
@ -87,7 +92,7 @@
</div> </div>
</div> </div>
<modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)" <modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)"
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)"> [okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid> <form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="portalForm.get('name')" placeholder="Portal Name"></div> <div input [formInput]="portalForm.get('name')" placeholder="Portal Name"></div>
<div input [formInput]="portalForm.get('type')" placeholder="Portal Type" <div input [formInput]="portalForm.get('type')" placeholder="Portal Type"
@ -98,4 +103,4 @@
</form> </form>
</modal-alert> </modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePortals($event)"></modal-alert> <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePortals($event)" classTitle="uk-background-primary uk-light"></modal-alert>