ui changes to control panel and admin (#87)

src/app/administration/api-token/add-token/add-token.component.html

@@ -27,6 +27,6 @@ <h4 class="modal-title" id="modal-basic-title">Add new token</h4>
   </ng-template>
 
   <div class="settings">
-    <button class="btn btn-primary btn-sm" (click)="open(content)"> <i class="fas fa-plus-circle"></i>
+    <button class="btn jtl-btn-light jtl-no-glow btn-sm" (click)="open(content)">
       Add token</button>
   </div>

src/app/administration/projects/add-project/add-project-modal.component.html

@@ -27,6 +27,6 @@ <h4 class="modal-title" id="modal-basic-title">Add new project</h4>
 </ng-template>
 
 <div class="settings">
-  <button class="btn btn-primary btn-sm" (click)="open(content)"> <i class="fas fa-plus-circle"></i>
+  <button class="btn jtl-btn-light btn-sm jtl-no-glow" (click)="open(content)">
     Add project</button>
 </div>

src/app/administration/users/add-user/add-user.component.html

@@ -38,6 +38,6 @@ <h4 class="modal-title" id="modal-basic-title">Add new user</h4>
   </ng-template>
 
   <div class="settings">
-    <button class="btn btn-primary btn-sm" (click)="open(content)"> <i class="fas fa-plus-circle"></i>
+    <button class="btn jtl-btn-light btn-sm jtl-no-glow " (click)="open(content)">
       Add user</button>
   </div>

src/app/item-detail/attachements/attachements.component.html

@@ -14,4 +14,4 @@ <h4 class="modal-title" id="modal-basic-title">Additional test files</h4>
 
 </ng-template>
 
-<button class="edit btn btn-sm btn-primary" (click)="open(content)" *ngIf="attachements.length > 0"><i class="fas fa-paperclip"></i> Files</button>
+<button class="edit btn btn-sm" (click)="open(content)" *ngIf="attachements.length > 0" ngbDropdownItem> Files</button>

src/app/item-detail/delete-item/delete-item.component.html

@@ -26,6 +26,6 @@ <h4 class="modal-title" id="modal-basic-title">Delete test</h4>
 
 </ng-template>
 
-<button class="btn btn-sm btn-danger" (click)="open(content)">
-    <i class="fas fa-trash-alt"></i> delete
-</button>
+<button class="btn btn-sm" (click)="open(content)" ngbDropdownItem>
+  Delete
+</button>

src/app/item-detail/edit-item/edit-item.component.html

@@ -46,4 +46,4 @@ <h4 class="modal-title" id="modal-basic-title">Edit test item</h4>
 
 </ng-template>
 
-<button class="edit btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-pencil-alt"></i> edit</button>
+<button class="edit btn btn-sm" (click)="open(content)" ngbDropdownItem> Edit</button>

src/app/item-detail/item-detail.component.html

@@ -5,11 +5,20 @@
     </li>
   </ul>
   <div>
-    <app-edit-item *ngIf="itemData.environment"
-      [itemDetailData]="{note: itemData.note, environment: itemData.environment, hostname: itemData.hostname, isBase: itemData.isBase, params: itemParams}"
-      (itemDetailChange)="itemDetailChanged($event)"></app-edit-item>
-    <app-attachements [params]="itemParams" [attachements]="itemData.attachements"></app-attachements>
-    <app-delete-item *ngIf="itemData.reportStatus !== 'in_progress'" [itemData]="itemParams"></app-delete-item>
+
+    <div class="btn-group mr-3">
+      <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+        <button class="btn btn-sm jtl-no-glow jtl-control-menu" ngbDropdownToggle><i class="fas fa-bars"></i></button>
+        <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
+          <app-edit-item *ngIf="itemData.environment"
+          [itemDetailData]="{note: itemData.note, environment: itemData.environment, hostname: itemData.hostname, isBase: itemData.isBase, params: itemParams}"
+          (itemDetailChange)="itemDetailChanged($event)"></app-edit-item>
+        <app-attachements [params]="itemParams" [attachements]="itemData.attachements"></app-attachements>
+        <app-delete-item *ngIf="itemData.reportStatus !== 'in_progress'" [itemData]="itemParams"></app-delete-item>
+        </div>
+      </div>
+    </div>
+
   </div>
 </app-control-panel>
 

src/app/item-detail/item-detail.component.scss

@@ -252,4 +252,3 @@ thead .hd {
 .charts .card-header {
   border-bottom: 0px;
 }
-

src/app/scenario/add-new-item/add-new-item.component.css

@@ -1,8 +1,3 @@
-.plus-icon {
-  width: 10px;
-  height: 10px;
+.add-item {
+    margin-right: 10px;
 }
-
-.btn {
-  margin-right: 15px;
-}

src/app/scenario/add-new-item/add-new-item.component.html

@@ -78,5 +78,4 @@ <h4 class="modal-title" id="modal-basic-title">Add new test item</h4>
 
 </ng-template>
 
-<button class="btn btn-primary btn-sm" (click)="open(content)"><i class="fas fa-plus-circle"></i>
-  new test item</button>
+<button type="button" class="jtl-no-glow add-item jtl-btn-light btn btn-sm " (click)="open(content)"> Add Test Run</button>

src/app/scenario/add-new-item/add-new-item.component.ts

@@ -8,7 +8,6 @@ import { of } from 'rxjs';
 import { NotificationMessage } from '../../notification/notification-messages';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ItemsService } from 'src/app/items.service';
-import { ProjectService } from 'src/app/project.service';
 import { ItemStatus } from './add-new-item.model';
 import { ItemStatusValue } from 'src/app/item-detail/item-detail.model';
 import { ScenarioService } from 'src/app/scenario.service';

src/app/scenario/delete-scenario/delete-scenario.component.html

@@ -26,6 +26,6 @@ <h4 class="modal-title" id="modal-basic-title">Delete test</h4>
 
 </ng-template>
 
-<button class="btn btn-sm btn-danger" (click)="open(content)">
-    <i class="fas fa-trash-alt"></i> delete
-</button>
+<button type="button" class="btn btn-sm" (click)="open(content)" ngbDropdownItem>
+     Delete
+</button>

src/app/scenario/edit-scenario/edit-scenario.component.html

@@ -18,7 +18,7 @@ <h4 class="modal-title" id="modal-basic-title">Edit scenario</h4>
         <button type="submit" class="btn btn-primary">Submit</button>
       </div>
     </form>
-  
+
   </ng-template>
-  
-  <button class="edit btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-pencil-alt"></i> edit</button>
+
+  <button class="edit btn btn-sm btn-primary" (click)="open(content)" ngbDropdownItem> Edit</button>

src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html

@@ -41,4 +41,4 @@ <h4 class="modal-title" id="modal-basic-title">MS Teams Webhook</h4>
 
 </ng-template>
 
-<button class="notification btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-bell"></i> new MS Teams notification</button>
+<button class="notification btn btn-sm btn-outline-primary jtl-no-glow" (click)="open(content)">Add MS Teams notification</button>

src/app/scenario/external-notification/external-notification.component.html

@@ -60,4 +60,4 @@ <h4 class="modal-title" id="modal-basic-title">External notifications</h4>
 
 </ng-template>
 
-<button class="notification btn btn-sm btn-primary" (click)="open(content)"><i class="fas fa-bell"></i> notification</button>
+<button class="notification btn btn-sm btn-primary" (click)="open(content)" ngbDropdownItem> Notifications</button>

src/app/scenario/scenario.component.html

@@ -6,10 +6,18 @@
     </li>
   </ul>
   <div>
-    <app-add-new-item-modal></app-add-new-item-modal>
-    <app-edit-scenario [scenarioData]="items$"></app-edit-scenario>
-    <app-external-notification></app-external-notification>
-    <app-delete-scenario [scenarioData]="params"></app-delete-scenario>
+
+    <div class="btn-group mr-3">
+      <app-add-new-item-modal></app-add-new-item-modal>
+      <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+        <button class="btn btn-sm jtl-no-glow jtl-control-menu" ngbDropdownToggle><i class="fas fa-bars"></i></button>
+        <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
+          <app-edit-scenario [scenarioData]="items$"></app-edit-scenario>
+          <app-external-notification></app-external-notification>
+          <app-delete-scenario [scenarioData]="params"></app-delete-scenario>
+        </div>
+      </div>
+    </div>
   </div>
 
 </app-control-panel>
@@ -53,8 +61,12 @@ <h6 class="card-header bg-transparent">Error rate</h6>
       <div class="col" *ngIf="items$ | async; let items">
         <div class="card recent-runs">
           <h6 class="card-header bg-transparent">Test Runs
-            <span  title="Total ready items" class="text-secondary total">{{items.total}} <i class="far fa-check-circle"></i></span>
-            <span title="Items in progress" *ngIf="processingItems"><span *ngIf="processingItems.inprogress && processingItems.inprogress.length > 0" class="text-secondary in-progress">{{processingItems.inprogress?.length}} <i class="far fa-clock"></i></span></span>
+            <span title="Total ready items" class="text-secondary total">{{items.total}} <i
+                class="far fa-check-circle"></i></span>
+            <span title="Items in progress" *ngIf="processingItems"><span
+                *ngIf="processingItems.inprogress && processingItems.inprogress.length > 0"
+                class="text-secondary in-progress">{{processingItems.inprogress?.length}} <i
+                  class="far fa-clock"></i></span></span>
           </h6>
           <div class="card-body">
             <div class="table-responsive">

src/app/scenario/scenario.component.scss

@@ -150,3 +150,4 @@ tbody tr:hover {
 .status-icon {
   font-size: 19px;
 }
+

src/app/scenarios/new-scenario/add-new-scenario.component.html

@@ -28,5 +28,5 @@ <h4 class="modal-title" id="modal-basic-title">Create test item</h4>
 
 </ng-template>
 
-<button class="btn btn-sm btn-primary" (click)="open(content)"> <i class="fas fa-plus-circle"></i>
-  create new scenario</button>
+<button class="btn btn-sm jtl-btn-light jtl-no-glow" (click)="open(content)">
+  Add new scenario</button>

src/app/top-panel/top-panel.component.html

@@ -10,23 +10,24 @@
   <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <div  ngbDropdown class="d-inline-block">
+        <div ngbDropdown class="d-inline-block">
           <button class="btn text-white" id="dropdownBasic1" ngbDropdownToggle>{{selectedProject || "Project"}}</button>
-          <div class="drop-area drop-area-left dropdowncustom-area dropdown-static" ngbDropdownMenu aria-labelledby="dropdownBasic1"
-            *ngIf="projectsState$ | async; let projects">
-      <li *ngFor="let _ of projects">
-        <a ngbDropdownItem class="btn btn-block text-left" routerLink="/project/{{_.projectName}}/scenarios"
-          routerLinkActive="active" (click)="changeSelectedProject(_.projectName)">{{_.projectName}}</a>
+          <div class="drop-area drop-area-left dropdowncustom-area dropdown-static" ngbDropdownMenu
+            aria-labelledby="dropdownBasic1" *ngIf="projectsState$ | async; let projects">
+            <li *ngFor="let _ of projects">
+              <a ngbDropdownItem class="btn btn-block text-left" routerLink="/project/{{_.projectName}}/scenarios"
+                routerLinkActive="active" (click)="changeSelectedProject(_.projectName)">{{_.projectName}}</a>
+            </li>
+          </div>
+        </div>
       </li>
-  </div>
-  </div>
-  </li>
-  </ul>
+    </ul>
   <div>
     <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" ngbDropdown class="d-inline-block">
       <button class="btn text-white" id="dropdownSettings" ngbDropdownToggle> <i class="fas fa-user"></i> {{username}}
       </button>
-      <div class="drop-area drop-area-left dropdowncustom-area dropdown-dynamic" ngbDropdownMenu aria-labelledby="dropdownSettings">
+      <div class="drop-area drop-area-left dropdowncustom-area dropdown-dynamic" ngbDropdownMenu
+        aria-labelledby="dropdownSettings">
         <li>
           <a ngbDropdownItem class="btn btn-block text-left" [routerLink]="['/administration/projects']"><i
               class="fas fa-cog icon"></i>Administrate</a>

src/styles.scss

@@ -102,3 +102,28 @@ a:hover {
   height: 43px;
   color: #54545491;
 }
+
+.jtl-dropdown-control-menu {
+  box-shadow: #0c0c0d30 0px 5px 12px 4px;
+  border: none;
+}
+.jtl-control-menu::after {
+  display:none;
+}
+
+
+.jtl-no-glow,
+.jtl-no-glow:active{
+    box-shadow:none !important;
+    outline:0px !important;
+}
+
+.jtl-btn-light {
+  color: #4b7cf3;
+  background-color: #f2f4f8;
+}
+.jtl-btn-light:hover{
+  background-color: #dee3ed;
+  border-color: #dee3ed;
+  color: #4b7cf3;
+}