Updates to the toolbar (#648)

* toolbar ui updates * updates to toolbar * added selction controls back * make subtechniques expansion into one button * cleaned up code and added display names * made ui changes * made positioning updates * update layer settings * cleanup * sonar cloud fixes 1 * fix console error * fixed and added tests * changelog updates --------- Co-authored-by: Charissa Miller <[email protected]>
mitre-attack · Aug 13, 2024 · 2c497db · 2c497db
1 parent b878644
commit 2c497db
Show file tree

Hide file tree

Showing 19 changed files with 1,322 additions and 858 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,8 +13,10 @@
 
 ## Improvements
 - Refactored the `layers/` directory structure to organize Layer File Formats into versioned subdirectories and removed outdated layer samples. See pull request [#649](https://github.com/mitre-attack/attack-navigator/pull/649).
+- Improved toolbar for better usability. See issue [#534](https://github.com/mitre-attack/attack-navigator/issues/534).
 - Updated Angular from v14 to v17.
 
+
 # 5.0.1 - 9 May 2024
 
 ## Fixes

diff --git a/nav-app/src/app/app.module.ts b/nav-app/src/app/app.module.ts
@@ -41,6 +41,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { LayerSettingsComponent } from './layer-settings/layer-settings.component';
 
 import { MarkdownModule } from 'ngx-markdown';
 import { LayerInformationComponent } from './layer-information/layer-information.component';
@@ -71,6 +72,7 @@ import { ConfigService } from './services/config.service';
         LayerInformationComponent,
         ChangelogComponent,
         ListInputComponent,
+        LayerSettingsComponent,
     ],
     imports: [
         BrowserModule,

diff --git a/nav-app/src/app/classes/view-model.ts b/nav-app/src/app/classes/view-model.ts
@@ -106,7 +106,7 @@ export class ViewModel {
         this._sidebarOpened = newVal;
     }
 
-    public readonly sidebarContentTypes = ['layerUpgrade', 'search'];
+    public readonly sidebarContentTypes = ['layerUpgrade', 'search', 'layerSettings'];
     private _sidebarContentType: string;
     public get sidebarContentType(): string {
         return this._sidebarContentType;

diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html
diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss
@@ -35,13 +35,11 @@ $cellSize: 15px;
     }
 
     .matrices-columns {
-        // white-space: nowrap;
         display: table;
 
         .matrix-column {
             display: table-cell;
             white-space: normal;
-            // display: inline-block;
             padding: 10px;
             @media print {
                 padding: 0;
@@ -62,10 +60,6 @@ $cellSize: 15px;
     }
 }
 
-.multiselect-dropdown {
-    display: inline-block;
-}
-
 .colorpicker {
     width: ($cellSize + 5 + 2) * 4 !important; //override preset width
     align-items: center;
@@ -114,7 +108,6 @@ $cellSize: 15px;
     }
 
     .display-buttons {
-        // width: 183px;
         text-align: center;
 
         .squarebutton {
@@ -160,7 +153,6 @@ $cellSize: 15px;
                 }
 
                 &.buttons > div {
-                    // border: 1px solid black;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
@@ -181,15 +173,12 @@ $cellSize: 15px;
                     select {
                         width: 80px;
                     }
-
-                    // width: 100%;
                 }
 
                 &.col2 {
                     width: 45px;
 
                     input[type='number'] {
-                        // background-color: rgb(104, 60, 213);
                         width: 40px;
                     }
                 }
@@ -198,15 +187,11 @@ $cellSize: 15px;
             .minmax {
                 @include adaptive-color('background-color', color(panel-light), color(dark-4));
                 text-align: center;
-                // &.top { border-top: 1px solid black; border-bottom: 1px solid black}
-                // &.bottom { border-top: 1px solid black}
             }
         }
 
-        // button {background: red;}
         .addcolor {
             width: 100%;
-            // background: red;
         }
     }
 }
@@ -216,80 +201,86 @@ $cellSize: 15px;
     text-align: left;
 }
 
-.contextMenu-cover {
-    // covers entire page
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    // background: rgba(0, 0, 0, 0.15);
-}
-
-.contextMenu-box {
-    position: absolute;
-    // background: white;
-    &.left {
-        right: 0;
+.control-section-header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    height: 30px;
+  }
+
+  .control-section-tabs {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .section-label {
+      cursor: pointer;
+
+      padding: 6px 24px;
+
+      @include adaptive-color("color", black, white);
+
+      @include adaptive-color("border-color", black, white);
+      border-style: solid;
+      border-width: 1px;
+
+      &.active {
+        @include adaptive-color("background-color", white, #364370);
+        @include adaptive-color("border-color", #464DFF, #464DFF);
+      }
     }
-
-    border: 1px solid black;
-    background-color: white;
-    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    position: absolute;
-    z-index: 100; //draw on top of other controls
-    width: max-content;
-
-    .contextMenu-section {
-        &:not(:first-child) {
-            border-top: 1px solid color(panel-dark);
-            margin-top: 2px;
-            padding-top: 2px;
+
+    .control-bar-help {
+      .control-help-button {
+        text-align: center;
+        width: 4ex;
+        height: 3ex;
+        padding: 5px;
+
+        svg {
+          @include adaptive-color-dark-only("fill", on-color(dark));
         }
-
-        .contextMenu-button {
-            padding: 3px;
-            cursor: pointer;
-
+        &:hover svg {
+          @include adaptive-color-dark-only("fill", on-color(dark));
+          fill: #505050;
+        }
+      }
+
+      .dropdown-container {
+        @include adaptive-color-dark-only("background", color(dark-3));
+        @include adaptive-color-dark-only("border-color", color(dark-3));
+        @include adaptive-color-dark-only("box-shadow", 2px 1px 1px color(dark-2));
+        @include adaptive-color-dark-only("color", color(dark-link));
+        position: absolute;
+        right: 16px;
+        display: flex;
+        justify-content: center;
+        flex-flow: column;
+        background: white;
+        border-style: solid;
+        border-color: #ddd;
+        border-width: 1px 0 1px 1px;
+        box-shadow: 2px 1px 1px #ddd;
+        border-radius: 0 0 5px 5px;
+        padding: 10px;
+        top: 40px;
+        z-index: 9;
+        button {
+            @include adaptive-color-dark-only("color", on-color(dark));
+            border: none;
+            background-color: transparent;
+            text-align: right;
+            padding-bottom: 5px;
             &:hover {
-                @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color));
+                text-decoration: underline;
+                cursor: pointer;
             }
         }
+      }
     }
 }
 
-// .tooltip {
-//     position: absolute;
-//     z-index: 100; //draw on top of other controls
-
-//     padding: 6px;
-//     border-radius: 3px;
-//     background: rgba(80, 80, 80, 0.75);
-
-//     font-size: 8pt;
-//     color: white;
-
-//     max-width: 150px;
-//     overflow-x: hidden;
-
-//     .comment {
-//         max-height: 300px;
-//         overflow-y: hidden;
-//     }
-
-//     .comment-overflow-note {
-//         // color: rgb(255, 199, 190);
-//     }
-//     .metadatalist {
-//         margin: 0;
-//         margin-top: 1px;
-//         padding-left: 6px;
-//         list-style: none;
-
-//     }
-
-// }
-
 .mat-mdc-select {
     :focus {
         color: #63961c;
@@ -323,14 +314,12 @@ $cellSize: 15px;
 }
 
 .multiselect {
-    // padding: 4px;
     text-align: center;
 
     .multiselect-grouping {
         .multiselect-grouping-label {
             padding: 4px;
             font-weight: bold;
-            // font-size: 14pt;
         }
 
         .multiselect-list {
@@ -341,7 +330,6 @@ $cellSize: 15px;
             overflow-y: scroll;
 
             table {
-                // table-layout:fixed; //fixes width
                 border-collapse: collapse;
             }
 
@@ -363,7 +351,6 @@ $cellSize: 15px;
 }
 
 .search {
-    // padding: 4px;
     text-align: center;
 
     .search-list {
@@ -375,7 +362,6 @@ $cellSize: 15px;
         overflow-y: scroll;
 
         table {
-            // table-layout:fixed; //fixes width
             border-collapse: collapse;
             width: 325px;
         }
@@ -408,7 +394,6 @@ $cellSize: 15px;
     border: none;
     padding: 4px 10px;
     text-align: center;
-    //font-size: 16px;
     margin: 2px 1px;
     transition: 0.3s;
     display: inline-block;
@@ -493,31 +478,6 @@ $cellSize: 15px;
     }
 }
 
-.layer_info {
-    padding: 0 !important;
-    box-sizing: border-box !important;
-    width: 300px !important;
-
-    .name_desc {
-        padding: 0 10px;
-    }
-
-    .layer-data {
-        text-align: left;
-        margin: 0 10px;
-
-        .mat-divider.layer-div {
-            margin-bottom: 10px;
-            @include adaptive-color-dark-only('border-top-color', color(dark-4));
-        }
-    }
-
-    .data-input {
-        overflow-y: auto;
-        max-height: 25vh;
-    }
-}
-
 .layout {
     width: 100px;
     text-align: left;