Preferences page improvement

This commit is contained in:
Rajnikant Lodhi 2022-07-26 08:56:31 +05:30
parent cffd8d79a9
commit 17901e9ed2
5 changed files with 113 additions and 68 deletions

View File

@ -1,22 +1,26 @@
<div class="content"> <div class="content">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">Built-in preferences</h1> <div class="col-md-1">
<button class="top-button" class="cancel-button" routerLink="/controller/{{ controllerId }}/preferences" mat-button> <button class="top-button" class="cancel-button" routerLink="/controller/{{ controllerId }}/preferences" mat-button>
Back <mat-icon>arrow_back</mat-icon>
</button> </button>
</div>
<div class="col-md-11">
<h1 class="col">Built-in templates</h1>
</div>
</div> </div>
</div> </div>
<div class="default-content"> <div class="default-content">
<div class="listcontainer mat-elevation-z8"> <div class="listcontainer mat-elevation-z8">
<mat-nav-list> <mat-nav-list>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-hubs"> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-hubs">
Ethernet hubs Ethernet hub templates
</mat-list-item> </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-switches"> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/ethernet-switches">
Ethernet switches Ethernet switch templates
</mat-list-item> </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/cloud-nodes"> Cloud nodes </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin/cloud-nodes"> Cloud node templates </mat-list-item>
</mat-nav-list> </mat-nav-list>
</div> </div>
</div> </div>

View File

@ -1,26 +1,34 @@
<div class="content"> <div class="content">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">Cloud nodes templates</h1> <div class="col-md-1">
<button <button
*ngIf="controller" *ngIf="controller"
class="top-button" class="top-button"
class="cancel-button" class="cancel-button"
routerLink="/controller/{{ controller.id }}/preferences/builtin" routerLink="/controller/{{ controller.id }}/preferences/builtin"
mat-button mat-button
> >
Back <mat-icon>arrow_back</mat-icon>
</button> </button>
<button </div>
*ngIf="controller" <div class="col-md-10">
class="top-button" <h1 class="col">Cloud nodes templates</h1>
routerLink="/controller/{{ controller.id }}/preferences/builtin/cloud-nodes/addtemplate" </div>
mat-raised-button <div class="col-md-1">
color="primary" <button
> *ngIf="controller"
Add cloud node template class="top-button cancel-button"
</button> matTooltip=" Add cloud node template"
matTooltipClass="custom-tooltip"
routerLink="/controller/{{ controller.id }}/preferences/builtin/cloud-nodes/addtemplate"
mat-button
>
<mat-icon>add_circle_outline</mat-icon>
</button>
</div>
</div> </div>
</div> </div>
<app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list> <app-empty-templates-list *ngIf="!cloudNodesTemplates.length"></app-empty-templates-list>
<div class="default-content" *ngIf="cloudNodesTemplates.length"> <div class="default-content" *ngIf="cloudNodesTemplates.length">

View File

@ -1,25 +1,32 @@
<div class="content"> <div class="content">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">Ethernet hubs templates</h1> <div class="col-md-1">
<button <button
*ngIf="controller" *ngIf="controller"
class="top-button" class="top-button"
class="cancel-button" class="cancel-button"
routerLink="/controller/{{ controller.id }}/preferences/builtin" routerLink="/controller/{{ controller.id }}/preferences/builtin"
mat-button mat-button
> >
Back <mat-icon>arrow_back</mat-icon>
</button> </button>
<button </div>
*ngIf="controller" <div class="col-md-10">
class="top-button" <h1 class="col">Ethernet hubs templates</h1>
routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-hubs/addtemplate" </div>
mat-raised-button <div class="col-md-1">
color="primary" <button
> *ngIf="controller"
Add Ethernet hub template class="top-button cancel-button"
</button> matTooltip="Add Ethernet hub template"
matTooltipClass="custom-tooltip"
routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-hubs/addtemplate"
mat-button
>
<mat-icon>add_circle_outline</mat-icon>
</button>
</div>
</div> </div>
</div> </div>
<app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list> <app-empty-templates-list *ngIf="!ethernetHubsTemplates.length"></app-empty-templates-list>

View File

@ -1,26 +1,34 @@
<div class="content"> <div class="content">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">Ethernet switches templates</h1> <div class="col-md-1">
<button <button
*ngIf="controller" *ngIf="controller"
class="top-button" class="top-button"
class="cancel-button" class="cancel-button"
routerLink="/controller/{{ controller.id }}/preferences/builtin" routerLink="/controller/{{ controller.id }}/preferences/builtin"
mat-button mat-button
> >
Back <mat-icon>arrow_back</mat-icon>
</button> </button>
<button </div>
*ngIf="controller" <div class="col-md-10">
class="top-button" <h1 class="col">Ethernet switches templates</h1>
routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-switches/addtemplate" </div>
mat-raised-button <div class="col-md-1">
color="primary" <button
> *ngIf="controller"
Add Ethernet switch template class="top-button cancel-button"
</button> matTooltip="Add Ethernet switch template"
matTooltipClass="custom-tooltip"
routerLink="/controller/{{ controller.id }}/preferences/builtin/ethernet-switches/addtemplate"
mat-button
>
<mat-icon>add_circle_outline</mat-icon>
</button>
</div>
</div> </div>
</div> </div>
<app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list> <app-empty-templates-list *ngIf="!ethernetSwitchesTemplates.length"></app-empty-templates-list>
<div class="default-content" *ngIf="ethernetSwitchesTemplates.length"> <div class="default-content" *ngIf="ethernetSwitchesTemplates.length">

View File

@ -1,18 +1,36 @@
<div class="content"> <div class="content">
<div class="default-header"> <div class="default-header">
<div class="row"> <div class="row">
<h1 class="col">Preferences</h1> <div class="col-md-1">
<button
class="top-button"
class="cancel-button"
routerLink="/controller/{{ controllerId }}/projects"
mat-button
>
<mat-icon>arrow_back</mat-icon>
</button>
</div>
<div class="col-md-11">
<h1 class="col">Template preferences</h1>
</div>
</div> </div>
</div> </div>
<div class="default-content"> <div class="default-content">
<div class="listcontainer mat-elevation-z8"> <div class="listcontainer mat-elevation-z8">
<mat-nav-list> <mat-nav-list>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin"> Built-in </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/builtin"> Built-in </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/dynamips/templates"> Dynamips </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/dynamips/templates">
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/iou/templates"> IOS on Unix </mat-list-item> Dynamips
</mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/iou/templates">
IOS on Unix
</mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vpcs/templates"> VPCS </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vpcs/templates"> VPCS </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/qemu/templates"> QEMU </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/qemu/templates"> QEMU </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/virtualbox/templates"> VirtualBox </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/virtualbox/templates">
VirtualBox
</mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vmware/templates"> VMware </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/vmware/templates"> VMware </mat-list-item>
<mat-list-item routerLink="/controller/{{ controllerId }}/preferences/docker/templates"> Docker </mat-list-item> <mat-list-item routerLink="/controller/{{ controllerId }}/preferences/docker/templates"> Docker </mat-list-item>
</mat-nav-list> </mat-nav-list>