tweaks for inputs, buttons and tables to match new theme

This commit is contained in:
Alex Martzios 2022-06-16 17:24:36 +03:00
parent 0bd6b3cfb1
commit fc73b55832
10 changed files with 39 additions and 47 deletions

View File

@ -48,10 +48,10 @@
</div> </div>
</div> </div>
<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 class="uk-card-header"> <thead>
<tr> <tr>
<th <th
class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" class="uk-checkbox"
(change)="toggleCheckBoxes($event)"></th> (change)="toggleCheckBoxes($event)"></th>
<th>Name</th> <th>Name</th>
<th *ngIf="!selectedCommunityPid">Portal Type</th> <th *ngIf="!selectedCommunityPid">Portal Type</th>
@ -61,7 +61,7 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let check of checkboxes; let i=index"> <tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.divId._id}}" class="checkBox" type="checkbox" <td><input id="{{check.divId._id}}" class="uk-checkbox" type="checkbox"
name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked"> name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
</td> </td>
<td> <td>

View File

@ -2,13 +2,9 @@
<div header> <div header>
<div class="uk-margin-top"> <div class="uk-margin-top">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" <a routerLink="../" [queryParams]=" { 'pageId': pageId }"
class="uk-text-secondary uk-text-uppercase uk-text-bold uk-text-small"> class="uk-button uk-button-link uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-icon-button uk-icon small uk-button-secondary"> <icon name="west" [flex]="true"></icon>
<icon name="west"></icon> <span class="uk-margin-small-left">Go back to class help texts list</span>
</span>
<span class="space">
Go back to class help texts list
</span>
</a> </a>
</div> </div>
</div> </div>

View File

@ -17,7 +17,7 @@
<div class="uk-grid uk-flex-middle uk-margin-top uk-margin-medium-bottom" uk-grid> <div class="uk-grid uk-flex-middle uk-margin-top uk-margin-medium-bottom" uk-grid>
<div> <div>
<a routerLink="../pages/" class="uk-button uk-button-link uk-text-uppercase uk-flex uk-flex-middle"> <a routerLink="../pages/" class="uk-button uk-button-link uk-text-uppercase uk-flex uk-flex-middle">
<icon name="west"></icon> <icon name="west" [flex]="true"></icon>
<span class="uk-margin-small-left">Back to pages</span> <span class="uk-margin-small-left">Back to pages</span>
</a> </a>
</div> </div>
@ -66,7 +66,7 @@
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5 uk-first-column "> <div class="uk-width-4-5 uk-first-column ">
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<div><input id="{{check.divHelpContent._id}}" class="checkBox" type="checkbox" <div><input id="{{check.divHelpContent._id}}" class="uk-checkbox" type="checkbox"
name="entitiescb[]" value="{{check.divHelpContent._id}}" name="entitiescb[]" value="{{check.divHelpContent._id}}"
[(ngModel)]="check.checked"> [(ngModel)]="check.checked">
</div> </div>
@ -95,13 +95,13 @@
<div class=" uk-flex-center uk-flex"> <div class=" uk-flex-center uk-flex">
<div class="actions" href="#"> <div class="actions" href="#">
<button (click)="editPageHelpContent(check.divHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle"> <button (click)="editPageHelpContent(check.divHelpContent._id)" class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle">
<icon name="edit"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left">Edit</span> <span class="uk-margin-small-left">Edit</span>
</button> </button>
<button (click)="confirmDeletePageHelpContent(check.divHelpContent._id)" <button (click)="confirmDeletePageHelpContent(check.divHelpContent._id)"
class="uk-button action uk-margin-top uk-flex uk-flex-middle"> class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle">
<icon name="delete"></icon> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left">Delete</span> <span class="uk-margin-small-left">Delete</span>
</button> </button>
</div> </div>

View File

@ -43,7 +43,7 @@
<div <div
class="uk-display-inline" class="uk-display-inline"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null" [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()" title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/> [ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted"> <span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedEntities().length}} entities selected </span> {{getSelectedEntities().length}} entities selected </span>
@ -66,8 +66,8 @@
</div> </div>
</div> </div>
<div *ngIf="!showLoading"> <div *ngIf="!showLoading">
<table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-hover uk-table-large"> <table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large">
<thead class="uk-card-header"> <thead>
<tr> <tr>
<th class="uk-width-small"></th> <th class="uk-width-small"></th>
<th>Name</th> <th>Name</th>
@ -78,7 +78,7 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let check of checkboxes; let i=index"> <tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.entity._id}}" class="checkBox" type="checkbox" <td><input id="{{check.entity._id}}" class="uk-checkbox" type="checkbox"
name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked"> name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
</td> </td>
<td> <td>

View File

@ -2,13 +2,9 @@
<div header> <div header>
<div class="uk-margin-top"> <div class="uk-margin-top">
<a routerLink="../" [queryParams]=" { 'pageId': pageId }" <a routerLink="../" [queryParams]=" { 'pageId': pageId }"
class="uk-text-secondary uk-text-uppercase uk-text-bold uk-text-small"> class="uk-button uk-button-link uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-icon-button uk-icon small uk-button-secondary"> <icon name="west" [flex]="true"></icon>
<icon name="west"></icon> <span class="uk-margin-small-left">Go back to page help texts list</span>
</span>
<span class="space">
Go back to page help texts list
</span>
</a> </a>
</div> </div>
</div> </div>

View File

@ -65,7 +65,7 @@
<div class="uk-grid uk-grid-divider uk-padding" uk-grid> <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-width-4-5 "> <div class="uk-width-4-5 ">
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<div><input id="{{check.pageHelpContent._id}}" class="checkBox" type="checkbox" <div><input id="{{check.pageHelpContent._id}}" class="uk-checkbox" type="checkbox"
name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked"> name="entitiescb[]" value="{{check.pageHelpContent._id}}" [(ngModel)]="check.checked">
</div> </div>
<div class="uk-width-expand uk-margin-medium-bottom"> <div class="uk-width-expand uk-margin-medium-bottom">
@ -96,12 +96,12 @@
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1"> <div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<div class="actions" href="#"> <div class="actions" href="#">
<button (click)="editPageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle"> <button (click)="editPageHelpContent(check.pageHelpContent._id)" class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle">
<icon name="edit"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left">Edit</span> <span class="uk-margin-small-left">Edit</span>
</button> </button>
<button (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)" class="uk-button action uk-margin-top uk-flex uk-flex-middle"> <button (click)="confirmDeletePageHelpContent(check.pageHelpContent._id)" class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle">
<icon name="delete"></icon> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left">Delete</span> <span class="uk-margin-small-left">Delete</span>
</button> </button>
</div> </div>

View File

@ -89,14 +89,14 @@
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1"> <div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<div class="actions"> <div class="actions">
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" <button class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle"
(click)="editMenuItem(child, true)"> (click)="editMenuItem(child, true)">
<icon name="edit"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left"> Edit</span> <span class="uk-margin-small-left"> Edit</span>
</button> </button>
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" <button class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle"
(click)="confirmDeleteMenuItem(child._id, true)"> (click)="confirmDeleteMenuItem(child._id, true)">
<icon name="delete"></icon> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left"> Delete</span> <span class="uk-margin-small-left"> Delete</span>
</button> </button>
</div> </div>

View File

@ -40,7 +40,7 @@
<div <div
class="uk-display-inline" class="uk-display-inline"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null" [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()" 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 *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedPages().length}} pages selected </span> {{getSelectedPages().length}} pages selected </span>
@ -66,7 +66,7 @@
<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="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-grid uk-width-expand" uk-grid> <div class="uk-grid uk-width-expand" uk-grid>
<div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox" <div class=""><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="uk-width-expand">
@ -118,12 +118,12 @@
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<div class="actions"> <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 action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)"> class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
<icon name="edit"></icon> <icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left"> Edit</span> <span class="uk-margin-small-left"> Edit</span>
</button> </button>
<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)"> <button class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
<icon name="delete"></icon> <icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left"> Delete</span> <span class="uk-margin-small-left"> Delete</span>
</button> </button>
</div> </div>

View File

@ -48,10 +48,10 @@
</div> </div>
</div> </div>
</div> </div>
<table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped uk-table-hover"> <table *ngIf="checkboxes.length > 0" class="uk-table uk-table-striped">
<thead class="uk-card-header"> <thead>
<tr> <tr>
<th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th> <th><input id="allCommunityCheckbox" type="checkbox" class="uk-checkbox" (change)="toggleCheckBoxes($event)"></th>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Actions</th> <th>Actions</th>
@ -59,7 +59,7 @@
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let check of checkboxes; let i=index"> <tr *ngFor="let check of checkboxes; let i=index">
<td><input id="{{check.portal._id}}" class="checkBox" type="checkbox" <td><input id="{{check.portal._id}}" class="uk-checkbox" type="checkbox"
name="communitiescb[]" value="{{check.portal._id}}" [(ngModel)]="check.checked"> name="communitiescb[]" value="{{check.portal._id}}" [(ngModel)]="check.checked">
</td> </td>
<td> <td>

View File

@ -14,7 +14,7 @@ declare var UIkit;
template: ` template: `
<form *ngIf="user && form" [formGroup]="form"> <form *ngIf="user && form" [formGroup]="form">
<ng-template [ngIf]="form.get('notify')"> <ng-template [ngIf]="form.get('notify')">
<label><input name="notify" type="checkbox" class="uk-checkbox" formControlName="notify"><span class="uk-margin-xsmall-left">{{label}}</span></label> <label><input name="notify" type="checkbox" class="uk-checkbox" formControlName="notify"><span class="uk-margin-small-left">{{label}}</span></label>
<div [class.uk-hidden]="!form.get('notify').value" class="uk-position-relative uk-margin-medium-top"> <div [class.uk-hidden]="!form.get('notify').value" class="uk-position-relative uk-margin-medium-top">
<div class="notification-user"> <div class="notification-user">
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user> <notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>