feat: add buttons icons and modified display

PolusAI · Jun 25, 2019 · 5d1474a · 5d1474a
1 parent 9dfed55
commit 5d1474a
Show file tree

Hide file tree

Showing 16 changed files with 187 additions and 119 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -3,23 +3,47 @@
     <img src="assets/img/logo-wipp.png">
   </div>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="#">WIPP</a>
+    <a class="navbar-brand" href="#">
+      <i class="fas fa-home " style="margin-right: 10px">
+        <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">WIPP</p>
+      </i>
+    </a>
+<!--rajoutr bouton-->
+    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item dropdown" routerLinkActive="active" ngbDropdown>
-          <a class="nav-link dropdown-toggle" id="dataDropdown" routerLinkActive="active" ngbDropdownToggle>Data</a>
+          <a class="nav-link dropdown-toggle" id="dataDropdown" routerLinkActive="active" ngbDropdownToggle>
+            <i class="fas fa-database " style="margin-right: 10px">
+              <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">
+                Data</p>
+            </i>
+          </a>
           <div class="dropdown-menu" aria-labelledby="dataDropdown" ngbDropdownMenu>
             <a class="dropdown-item" routerLink="/images-collections" ngbDropdownItem>Images collections</a>
             <a class="dropdown-item" routerLink="/stitching-vectors" ngbDropdownItem>Stitching vectors</a>
             <a class="dropdown-item" routerLink="/pyramids" ngbDropdownItem>Pyramids</a>
           </div>
         </li>
         <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/plugins">Plugins</a>
+          <a class="nav-link" routerLink="/plugins">
+            <i class="fas fa-cube" style="margin-right: 10px">
+              <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">
+                Plugins</p>
+            </i>
+          </a>
         </li>
         <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/workflows">Workflows</a>
+          <a class="nav-link" routerLink="/workflows">
+            <i class="fas fa-share-alt " style="margin-right: 10px">
+              <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">
+                Workflows</p>
+            </i>
+          </a>
         </li>
       </ul>
     </div>
@@ -29,4 +53,3 @@
 <div class="container-fluid">
   <router-outlet></router-outlet>
 </div>
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'WIPP';
+  isNavbarCollapsed = true;
 }
+
diff --git a/src/app/images-collection/images-collection-detail/images-collection-detail.component.html b/src/app/images-collection/images-collection-detail/images-collection-detail.component.html
@@ -1,4 +1,4 @@
-<h3>Collection detail</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Collection detail</h3>
 <div>
   <div class="row">
     <div class="col-md-9">

diff --git a/src/app/images-collection/images-collection-list/images-collection-list.component.html b/src/app/images-collection/images-collection-list/images-collection-list.component.html
@@ -1,9 +1,11 @@
-<h3>Image Collections</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Images Collections</h3>
 
 <div class="row">
   <div class="col-md-3">
-    <button class="btn btn-light btn-block" (click)="createNew();">
-      Create new collection
+    <button class="btn btn-primary" style="background-color: #f8f9fa; border-color: #bfbfbf; color: black" (click)="createNew();">
+      <i class="fas fa-plus-circle" style="margin-right: 10px">
+        <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">New images collection</p>
+      </i>
     </button>
   </div>
 </div>

diff --git a/src/app/images-collection/images-collection-new/images-collection-new.component.html b/src/app/images-collection/images-collection-new/images-collection-new.component.html
@@ -10,6 +10,7 @@ <h4 class="modal-title" id="modal-basic-title">
   <form name="imagesCollectionDialog">
     <div class="form-group">
       <label for="name">Name</label>
+      <span style="color: #e32"> * </span>
       <input type="text" [(ngModel)]="imagesCollection.name" id="name" class="form-control" name="name" autofocus
              required>
       <small class="form-text text-muted">Enter the collection name.</small>
@@ -35,10 +36,16 @@ <h4 class="modal-title" id="modal-basic-title">
   </form>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
-  <button type="button" class="btn btn-outline-dark" (click)="save()"
+  <button type="button" class="btn btn-danger" (click)="cancel()">
+    <i class="fas fa-times-circle" style="margin-right: 10px">
+      <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">Cancel</p>
+    </i>
+  </button>
+  <button type="button" class="btn btn-success" (click)="save()"
           [disabled]="!imagesCollection.name">
-    Save
+    <i class="fas fa-save" style="margin-right: 10px">
+      <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">Save</p>
+    </i>
   </button>
 </div>
 

diff --git a/src/app/plugin/plugin-detail/plugin-detail.component.html b/src/app/plugin/plugin-detail/plugin-detail.component.html
@@ -1,4 +1,4 @@
-<h3>Plugin detail</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Plugin detail</h3>
 
 <div style="height: 30px"></div>
 
@@ -66,82 +66,82 @@ <h3>Plugin detail</h3>
             <p style="color:dimgrey;" class="font-weight-bold  col-md-8">  Input {{i+1}}  / {{c}} </p>
             <dd class="col-md-12">
               <div class="row">
-                <dt class="col-md-12" *ngFor="let key of inputKeys[i];">
-                  <p style="display: inline" class="font-weight-bold" *ngIf="plugin.inputs[i][key] != null"> {{key}} : </p>
-                  <p style="display: inline" class="font-weight-normal" *ngIf="key.toString() != 'options'">{{plugin.inputs[i][key]}} </p>
-                  <div class="row" style="word-break: break-word" *ngIf="key.toString() == 'options' && plugin.inputs[i][key] != null">
-                    <dd class="col-md-12" *ngFor="let optKey of inputOptionsKeys">
-                      <h6 style="display: inline; margin-left: 15px" class="font-weight-bold"
-                          *ngIf="plugin.inputs[i]['options'] != null && plugin.inputs[i]['options'][optKey]!=null">
-                        {{optKey}} : </h6>
-                      <h6 style="display: inline;" class="font-weight-normal"
-                          *ngIf="plugin.inputs[i]['options'] != null && plugin.inputs[i]['options'][optKey]!=null">
-                        {{plugin.inputs[i]['options'][optKey]}} </h6>
-                    </dd>
-                  </div>
-                </dt>
-              </div>
+            <dt class="col-md-12" *ngFor="let key of inputKeys[i];">
+              <p style="display: inline" class="font-weight-bold" *ngIf="plugin.inputs[i][key] != null"> {{key}} : </p>
+              <p style="display: inline" class="font-weight-normal" *ngIf="key.toString() != 'options'">{{plugin.inputs[i][key]}} </p>
+              <div class="row" style="word-break: break-word" *ngIf="key.toString() == 'options' && plugin.inputs[i][key] != null">
+            <dd class="col-md-12" *ngFor="let optKey of inputOptionsKeys">
+              <h6 style="display: inline; margin-left: 15px" class="font-weight-bold"
+                  *ngIf="plugin.inputs[i]['options'] != null && plugin.inputs[i]['options'][optKey]!=null">
+                {{optKey}} : </h6>
+              <h6 style="display: inline;" class="font-weight-normal"
+                  *ngIf="plugin.inputs[i]['options'] != null && plugin.inputs[i]['options'][optKey]!=null">
+                {{plugin.inputs[i]['options'][optKey]}} </h6>
             </dd>
-          </tr>
-        </table>
       </div>
-    </td>
-  </tr>
-
-  <!--  Output List Line  -->
-  <tr class="pointer" (click)="showContent('output')">
-    <th class="th1"><dt ngbTooltip="Click to show Outputs">List of Outputs:</dt></th>
-    <td>
-      <div class="col-md-8 h" [hidden]="viewOutputs">Click to expand</div>
-      <div [hidden]="!viewOutputs">
-        <table>
-          <tr class="b2" *ngFor="let ui of plugin.outputs; let i = index; let c = count">
-            <p style="color:dimgrey;" class="font-weight-bold col-md-8">  Output {{i+1}}  / {{c}} </p>
-            <dd class="col-md-12">
-              <div class="row">
-                <dt class="col-md-12" *ngFor="let key of outputKeys[i];">
-                  <p style="display: inline" class="font-weight-bold" *ngIf="plugin.outputs[i][key] != null"> {{key}} : </p>
-                  <p style="display: inline" class="font-weight-normal" *ngIf="key.toString() != 'options'">{{plugin.outputs[i][key]}} </p>
-                  <div class="row" style="word-break: break-word" *ngIf="key.toString() == 'options' && plugin.outputs[i][key] != null">
-                    <dd class="col-md-12" *ngFor="let optKey of outputOptionsKeys">
-                      <h6 style="display: inline; margin-left: 15px" class="font-weight-bold"
-                          *ngIf="plugin.outputs[i]['options'] != null && plugin.outputs[i]['options'][optKey]!=null">
-                        {{optKey}} : </h6>
-                      <h6 style="display: inline" class="font-weight-normal"
-                          *ngIf="plugin.outputs[i]['options'] != null && plugin.outputs[i]['options'][optKey]!=null">
-                        {{plugin.outputs[i]['options'][optKey]}} </h6>
-                    </dd>
-                  </div>
-                </dt>
-              </div>
-            </dd>
-          </tr>
-        </table>
+      </dt>
       </div>
-    </td>
+      </dd>
   </tr>
+</table>
+</div>
+</td>
+</tr>
 
-  <!--  UI  Line  -->
-  <tr class="pointer" (click)="showContent('ui')">
-    <th class="th1"><dt  ngbTooltip=" Click to show UIs">UI Description:</dt></th>
-    <td>
-      <div class="col-md-8 h" [hidden]="viewUI">Click to expand</div>
-      <div [hidden]="!viewUI">
-        <table>
-          <tr  class="b" *ngFor="let ui of plugin.ui; let i = index; let c = count">
-            <p style="color:dimgrey;" class="font-weight-bold col-md-8">  UI {{i+1}}  / {{c}} </p>
-            <dd class="col-md-12">
-              <div class="row" style="word-break: break-word">
-                <dt  class="col-md-12" *ngFor="let key of uiKeys[i];">
-                  <h6 style="display: inline" class="font-weight-bold">{{key}} : </h6>
-                  <h6 style="display: inline"> {{plugin.ui[i][key]}}</h6>
-                </dt>
-              </div>
-            </dd>
-          </tr>
-        </table>
-      </div>
-    </td>
-  </tr>
+<!--  Output List Line  -->
+<tr class="pointer" (click)="showContent('output')">
+  <th class="th1"><dt ngbTooltip="Click to show Outputs">List of Outputs:</dt></th>
+  <td>
+    <div class="col-md-8 h" [hidden]="viewOutputs">Click to expand</div>
+    <div [hidden]="!viewOutputs">
+      <table>
+        <tr class="b2" *ngFor="let ui of plugin.outputs; let i = index; let c = count">
+          <p style="color:dimgrey;" class="font-weight-bold col-md-8">  Output {{i+1}}  / {{c}} </p>
+          <dd class="col-md-12">
+            <div class="row">
+          <dt class="col-md-12" *ngFor="let key of outputKeys[i];">
+            <p style="display: inline" class="font-weight-bold" *ngIf="plugin.outputs[i][key] != null"> {{key}} : </p>
+            <p style="display: inline" class="font-weight-normal" *ngIf="key.toString() != 'options'">{{plugin.outputs[i][key]}} </p>
+            <div class="row" style="word-break: break-word" *ngIf="key.toString() == 'options' && plugin.outputs[i][key] != null">
+          <dd class="col-md-12" *ngFor="let optKey of outputOptionsKeys">
+            <h6 style="display: inline; margin-left: 15px" class="font-weight-bold"
+                *ngIf="plugin.outputs[i]['options'] != null && plugin.outputs[i]['options'][optKey]!=null">
+              {{optKey}} : </h6>
+            <h6 style="display: inline" class="font-weight-normal"
+                *ngIf="plugin.outputs[i]['options'] != null && plugin.outputs[i]['options'][optKey]!=null">
+              {{plugin.outputs[i]['options'][optKey]}} </h6>
+          </dd>
+    </div>
+    </dt>
+    </div>
+    </dd>
+</tr>
+</table>
+</div>
+</td>
+</tr>
+
+<!--  UI  Line  -->
+<tr class="pointer" (click)="showContent('ui')">
+  <th class="th1"><dt  ngbTooltip=" Click to show UIs">UI Description:</dt></th>
+  <td>
+    <div class="col-md-8 h" [hidden]="viewUI">Click to expand</div>
+    <div [hidden]="!viewUI">
+      <table>
+        <tr  class="b" *ngFor="let ui of plugin.ui; let i = index; let c = count">
+          <p style="color:dimgrey;" class="font-weight-bold col-md-8">  UI {{i+1}}  / {{c}} </p>
+          <dd class="col-md-12">
+            <div class="row" style="word-break: break-word">
+          <dt  class="col-md-12" *ngFor="let key of uiKeys[i];">
+            <h6 style="display: inline" class="font-weight-bold">{{key}} : </h6>
+            <h6 style="display: inline"> {{plugin.ui[i][key]}}</h6>
+          </dt>
+    </div>
+    </dd>
+</tr>
+</table>
+</div>
+</td>
+</tr>
 
 </table>
diff --git a/src/app/plugin/plugin-list/plugin-list.template.html b/src/app/plugin/plugin-list/plugin-list.template.html
@@ -1,18 +1,22 @@
-<h3>Plugins</h3>
-
+<h3 style="margin-top: 2%; margin-bottom: 2%;">Plugins</h3>
+<!--<h3 style=" margin-top: 7%; margin-bottom: 3%; font-family: fantasy; font-size: 3em; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;">Plugins</h3>-->
 <div class="row">
   <div class="col-md-3">
-    <button class="btn btn-light btn-block" (click)="open(addPluginModal)">Add plugin</button>
+    <button class="btn btn-primary" style="background-color: #f8f9fa; border-color: #bfbfbf; color: black" (click)="open(addPluginModal)">
+      <i class="fas fa-plus-circle" style="margin-right: 10px">
+        <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">New plugin</p>
+      </i>
+    </button>
   </div>
 </div>
 
 <table mat-table class="table-hover" [dataSource]="plugins"
-           (matSortChange)="sortChanged($event)" matSort>
+       (matSortChange)="sortChanged($event)" matSort>
 
   <!-- Name Column -->
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-    <td mat-cell *matCellDef="let row">{{ row.name }}</td>
+    <td mat-cell *matCellDef="let row" style="color: #007bff">{{ row.name }}</td>
   </ng-container>
 
   <!-- Version Column -->
@@ -67,7 +71,10 @@ <h4 class="modal-title">New plugin</h4>
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="c(pluginDescriptor.value)">Register plugin</button>
+    <button type="button" class="btn btn-primary" style="background-color: #f8f9fa; border-color: #bfbfbf; color: black" (click)="c(pluginDescriptor.value)">
+      <i class="fas fa-save" style="margin-right: 10px">
+        <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">Register plugin</p>
+      </i></button>
   </div>
 </ng-template>
 

diff --git a/src/app/pyramid/pyramid-detail/pyramid-detail.component.html b/src/app/pyramid/pyramid-detail/pyramid-detail.component.html
@@ -1,4 +1,4 @@
-<h3>Pyramid Detail</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Pyramid Detail</h3>
 
 <div style="margin-top: 20px">
   <div class="row">

diff --git a/src/app/pyramid/pyramid-list/pyramid-list.component.html b/src/app/pyramid/pyramid-list/pyramid-list.component.html
@@ -1,4 +1,4 @@
-<h3>Pyramids</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Pyramids</h3>
 
 <table mat-table [dataSource]="pyramids"
        (matSortChange)="sortChanged($event)"

diff --git a/src/app/stitching-vector/stitching-vector-detail/stitching-vector-detail.component.html b/src/app/stitching-vector/stitching-vector-detail/stitching-vector-detail.component.html
@@ -1,4 +1,4 @@
-<h3>Stitching Vector Detail</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Stitching Vector Detail</h3>
 
 <div style="margin-top: 20px">
   <div class="row">

diff --git a/src/app/stitching-vector/stitching-vector-list/stitching-vector-list.component.html b/src/app/stitching-vector/stitching-vector-list/stitching-vector-list.component.html
@@ -1,9 +1,11 @@
-<h3>Stitching Vectors</h3>
+<h3 style="margin-top: 2%; margin-bottom: 2%">Stitching Vectors</h3>
 
 <div class="row">
   <div class="col-md-3">
-    <button class="btn btn-light btn-block" (click)="createNew();">
-      Create new stitching vector
+    <button class="btn btn-primary" style="background-color: #f8f9fa; border-color: #bfbfbf; color: black" (click)="createNew();">
+       <i class="fas fa-plus-circle" style="margin-right: 10px">
+            <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">New stitching vector</p>
+          </i>
     </button>
   </div>
 </div>

diff --git a/src/app/stitching-vector/stitching-vector-new/stitching-vector-new.component.html b/src/app/stitching-vector/stitching-vector-new/stitching-vector-new.component.html
@@ -25,17 +25,24 @@ <h4 class="modal-title" id="modal-basic-title">
 
       <label for="name">Stitching Vector File:</label>
       <span style="color: #e32"> * </span>
-      <input type="file" (change)="onFileSelected($event)" name="file" class="col-md-12" id="file" autofocus
+      <input type="file" (change)="onFileSelected($event)" name="file" class="col-md-12" id="file" accept="text/plain" autofocus
              required>
       <span class="asterisk_input"></span>
     </div>
   </form>
 </div>
 
 <div class="modal-footer">
-  <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
-  <button type="button" class="btn btn-outline-dark" (click)="upload()"
+  <!--<button type="button" class="btn btn-outline-dark" (click)="cancel()">-->
+  <button type="button" class="btn btn-danger" (click)="cancel()" >
+     <i class="fas fa-times-circle" style="margin-right: 10px">
+      <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">Cancel</p>
+    </i>
+  </button>
+  <button type="button" class="btn btn-success" (click)="upload()"
           [disabled]="!stitchingVector.name || !stitchingVector.file">
-    Submit
+    <i class="fas fa-save" style="margin-right: 10px">
+      <p style="margin-left: 10px; display: inline; font-family: 'Roboto', sans-serif ; font-weight: normal">Save</p>
+    </i>
   </button>
 </div>