Improve UI according to the designer's commonts

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
AllForNothing 2020-11-02 17:17:35 +08:00
parent 9a38dca1a6
commit 58450c335f
5 changed files with 33 additions and 30 deletions

View File

@ -22,6 +22,12 @@
<clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn btn-link" clrDropdownTrigger>
<span id="action-scanner">{{'MEMBER.ACTION' | translate}}<clr-icon class="clr-icon" shape="caret down"></clr-icon></span>
<clr-dropdown-menu *clrIfOpen>
<button clrDropdownItem
(click)="editScanner()"
class="btn btn-secondary" [disabled]="!selectedRow">
<clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
<span class="margin-left-10">{{'BUTTON.EDIT' | translate}}</span>
</button>
<button clrDropdownItem
(click)="changeStat()"
[disabled]="!(selectedRow && !selectedRow.is_default)">
@ -34,12 +40,7 @@
<span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</span>
</button>
<button clrDropdownItem
(click)="editScanner()"
class="btn btn-secondary" [disabled]="!selectedRow">
<clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
<span class="margin-left-10">{{'BUTTON.EDIT' | translate}}</span>
</button>
<div class="dropdown-divider"></div>
<button clrDropdownItem
(click)="deleteScanners()"
class="btn btn-secondary" [disabled]="!selectedRow">

View File

@ -27,20 +27,20 @@
<button type="button" class="btn btn-secondary" (click)="editInstance()"
[disabled]="!(selectedRow && selectedRow.length === 1)">
<clr-icon shape="edit" size="16"></clr-icon>&nbsp;
<span id="distribution-edit">{{'DISTRIBUTION.EDIT_ACTION' | translate}}</span>
<span id="distribution-edit">{{'BUTTON.EDIT' | translate}}</span>
</button>
<button type="button" class="btn btn-secondary" (click)="operateInstances('enable', selectedRow)"
<button *ngIf="selectedRow && selectedRow.length === 1 && !selectedRow[0].enabled" type="button" class="btn btn-secondary" (click)="operateInstances('enable', selectedRow)"
[disabled]="!(selectedRow && selectedRow.length === 1 && !selectedRow[0].enabled)">
<clr-icon shape="connect" size="16"></clr-icon>&nbsp;
<span id="distribution-enable">{{'DISTRIBUTION.ENABLE_ACTION' | translate}}</span>
<span id="distribution-enable">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
</button>
<button
<button *ngIf="!(selectedRow && selectedRow.length === 1 && !selectedRow[0].enabled)"
type="button"
class="btn btn-secondary"
(click)="operateInstances('disable', selectedRow)"
[disabled]="!(selectedRow && selectedRow.length === 1 && selectedRow[0].enabled)">
<clr-icon shape="disconnect" size="16"></clr-icon>&nbsp;
<span id="distribution-disable">{{'DISTRIBUTION.DISABLE_ACTION' | translate}}</span>
<span id="distribution-disable">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</button>
<div class="dropdown-divider"></div>
<button
@ -49,7 +49,7 @@
(click)="operateInstances('delete', selectedRow)"
[disabled]="selectedRow.length < 1">
<clr-icon shape="window-close" size="16"></clr-icon>&nbsp;
<span id="distribution-delete">{{'DISTRIBUTION.DELETE_ACTION' | translate}}</span>
<span id="distribution-delete">{{'BUTTON.DELETE' | translate}}</span>
</button>
</clr-dropdown>
</clr-dropdown-menu>

View File

@ -31,6 +31,15 @@
class="margin-left-5px">{{'P2P_PROVIDER.EXECUTE' | translate}}</span>
</span>
</button>
<button clrDropdownItem
class="btn btn-secondary"
[disabled]="!selectedRow || !hasUpdatePermission"
(click)="editPolicy()">
<span>
<clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
<span id="edit-policy" class="margin-left-5px">{{'BUTTON.EDIT' | translate}}</span>
</span>
</button>
<button class="btn btn-secondary" clrDropdownItem (click)="switchStatus()"
[disabled]="!selectedRow || !hasUpdatePermission">
<span id="toggle-policy">
@ -44,15 +53,6 @@
</span>
</span>
</button>
<button clrDropdownItem
class="btn btn-secondary"
[disabled]="!selectedRow || !hasUpdatePermission"
(click)="editPolicy()">
<span>
<clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
<span id="edit-policy" class="margin-left-5px">{{'BUTTON.EDIT' | translate}}</span>
</span>
</button>
<div class="dropdown-divider"></div>
<button clrDropdownItem (click)="deletePolicy()"
class="btn btn-secondary"

View File

@ -13,20 +13,20 @@
<button type="button" class="btn btn-secondary" (click)="editRule(selectedRow)"
[disabled]="!selectedRow">
<clr-icon shape="edit" size="16"></clr-icon>&nbsp;
<span id="edit_replication_rule_id">{{'REPLICATION.EDIT_POLICY' | translate}}</span>
<span id="edit_replication_rule_id">{{'BUTTON.EDIT' | translate}}</span>
</button>
<button type="button" class="btn btn-secondary" (click)="operateRule('enable', selectedRow)"
<button *ngIf="selectedRow && !selectedRow.enabled" type="button" class="btn btn-secondary" (click)="operateRule('enable', selectedRow)"
[disabled]="!(selectedRow && !selectedRow.enabled)">
<clr-icon shape="connect" size="16"></clr-icon>&nbsp;
<span id="rule-enable">{{'DISTRIBUTION.ENABLE_ACTION' | translate}}</span>
<clr-icon size="16" shape="success-standard"></clr-icon>&nbsp;
<span id="rule-enable">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
</button>
<button
<button *ngIf="(!selectedRow) || (selectedRow && selectedRow.enabled)"
type="button"
class="btn btn-secondary"
(click)="operateRule('disable', selectedRow)"
[disabled]="!(selectedRow && selectedRow.enabled)">
<clr-icon shape="disconnect" size="16"></clr-icon>&nbsp;
<span id="rule-disable">{{'DISTRIBUTION.DISABLE_ACTION' | translate}}</span>
<clr-icon size="16" shape="ban"></clr-icon>&nbsp;
<span id="rule-disable">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</button>
<div class="dropdown-divider"></div>
<button
@ -35,7 +35,7 @@
(click)="deleteRule(selectedRow)"
[disabled]="!selectedRow">
<clr-icon shape="window-close" size="16"></clr-icon>&nbsp;
<span id="delete_replication_rule_id">{{'REPLICATION.DELETE_POLICY' | translate}}</span>
<span id="delete_replication_rule_id">{{'BUTTON.DELETE' | translate}}</span>
</button>
</clr-dropdown>
</clr-dropdown-menu>

View File

@ -154,7 +154,9 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
if (!state || !state.page || !this.executionId) {
return;
}
this.pageSize = state.page.size;
if (state && state.page && state.page.size) {
this.pageSize = state.page.size;
}
let params: RequestQueryParams = new RequestQueryParams();
params = params.set('page_size', this.pageSize + '').set('page', this.currentPage + '');
if (this.searchTask && this.searchTask !== "") {