Switched from list-item stylized tabs to mat-tabs

mitre-attack · Aug 24, 2021 · 1cefb97 · 1cefb97
1 parent a2b6ce0
commit 1cefb97
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 73 deletions.
diff --git a/nav-app/src/app/app.module.ts b/nav-app/src/app/app.module.ts
@@ -41,6 +41,7 @@ import { MarkdownModule } from "ngx-markdown";
 import { LayerInformationComponent } from './layer-information/layer-information.component';
 import { ChangelogComponent } from './changelog/changelog.component';
 import { SearchPopoverNotificationComponent } from './search-and-multiselect/search-popover-notification/search-popover-notification.component';
+import { MatTabsModule } from "@angular/material/tabs";
 
 
 @NgModule({
@@ -84,15 +85,17 @@ import { SearchPopoverNotificationComponent } from './search-and-multiselect/sea
     MatCardModule,
     MatDividerModule,
     MarkdownModule.forRoot(),
-    PopoverModule
+    PopoverModule,
+    MatTabsModule
   ],
   exports: [
-      MatSelectModule,
-      MatInputModule,
-      MatButtonModule,
-      MatTooltipModule,
-      MatMenuModule,
-      MatExpansionModule,
+    MatSelectModule,
+    MatInputModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatExpansionModule,
+    MatTabsModule
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/nav-app/src/app/tabs/tabs.component.html b/nav-app/src/app/tabs/tabs.component.html
@@ -29,28 +29,24 @@
     </div>
 </div>
 
+
 <!-- Tabs display -->
-<div [style.margin-top]="hasFeature('header') ? '0px' : '15px'" *ngIf="layerTabs.length > 0 && hasFeature('tabs')">
-    <ul class="tabs">
-        <!-- dynamic tabs (can be opened and closed) -->
-        <li *ngFor="let tab of layerTabs; let $i = index" (click)="selectTab(tab)" [class.active]="tab == activeTab">
-            <span *ngIf="!tab == activeTab || !tab.isDataTable" class="tab-title"
-                  [style.cursor]="tab == activeTab ? 'default' : 'pointer'">{{tab.isDataTable ? tab.dataContext.name : tab.title}}</span>
-            <input *ngIf="!(!tab == activeTab || !tab.isDataTable)"
-                   [style.cursor]="tab == activeTab ? tab.isDataTable ? 'text' : 'default' : 'pointer'" type="text"
-                   [(ngModel)]="tab.dataContext.name"
-                   [style.width]="tab.isDataTable ? ((tab.dataContext.name.length) * 8.4) + 'px' : (tab.title.length * 8.4) + 'px' ">
-            <span class="tab-close" *ngIf="tab.isCloseable" (click)="closeTab(tab)">x</span>
+<nav mat-tab-nav-bar class="tabs">
+    <a mat-tab-link
+       class="tab-title"
+       [class.active]="activeTab === tab"
+       *ngFor="let tab of layerTabs; let $i = index"
+       (click)="activeTab = tab"
+       [active]="activeTab === tab">
+        {{tab.isDataTable ? tab.dataContext.name : tab.title}}
+        <span class="tab-close" *ngIf="tab.isCloseable" (click)="closeTab(tab)">x</span>
+        <!-- tab enumerator (for layer operations) -->
+        <span class="tabEnumerator" *ngIf="getActiveTab().showScoreVariables && tab.isDataTable && (!domain || tab.domain === domain) && alphabetical(indexToChar($i))">{{indexToChar($i)}}</span>
+    </a>
+    <a mat-tab-link class="addTab" *ngIf="layerTabs.length < 10" (click)="newBlankTab()">+</a>
+</nav>
 
-            <!-- tab enumerator (for layer operations) -->
-            <span class="tabEnumerator"
-                  *ngIf="getActiveTab().showScoreVariables && tab.isDataTable && (!domain || tab.domain === domain) && alphabetical(indexToChar($i))">{{indexToChar($i)}}</span>
-        </li>
 
-        <!-- open new tab button -->
-        <li *ngIf="layerTabs.length < 10" class="addTab" (click)="newBlankTab()">+</li>
-    </ul>
-</div>
 <div *ngIf="layerTabs.length == 0" class="newTab">
     <!-- you shouldn't ever see this, but just in case -->
     <button (click)="newBlankTab()">Start</button>

diff --git a/nav-app/src/app/tabs/tabs.component.scss b/nav-app/src/app/tabs/tabs.component.scss
@@ -1,35 +1,24 @@
 @import "../../colors.scss";
 
 .tabs {
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
-    // border-bottom: 1px solid #ddd; //horizontal line border
-    user-select: none;
-    margin-top: 0;
-
-    &>li {
-        bottom: 0;
-        position: relative;
-        display: block;
-        float: left;
-        margin-bottom: 0;
-        cursor: pointer;
-        height: 23px;
-
-        .tab-title { //non-datatable tab names
-            font-family: 'Roboto Mono', monospace;
-            font-size: 14px;
-            text-decoration: none;
-            color: black;
-        }
+    .tab-title { //non-datatable tab names
+        font-family: 'Roboto Mono', monospace;
+        font-size: 14px;
+        text-decoration: none;
+        color: black !important;
+        display: flex;
+        justify-content: space-around;
 
         input[type=text] { //datatable tab name edit field
             font-family: 'Roboto Mono', monospace;
             font-size: 14px;
             border: none;
             background: none;
-            &:disabled {} //when the tab isn't active
+
+            &:disabled {
+            }
+
+            //when the tab isn't active
             &:not(:disabled) { //when the tab is active
                 &:focus { //when the input is selected (editing)
                     background: $panel-light;
@@ -38,54 +27,38 @@
 
         }
 
-
-        position: relative;
-        display: block;
-        padding: 10px 15px;
-
-        margin-right: 2px;
-        border: 1px solid transparent;
-        border-radius: 4px 4px 0 0;
-
-        // add new tab button
-        &.addTab {
-            font-size: 12pt;
-            cursor: pointer;
-            color: darken($panel-dark, 20%);
-            &:hover {
-                color: black;
-            }
-        }
-
         &:hover, &:focus { //when the mouse is over a non-selected tab
             &:not(.active) {
                 text-decoration: none;
+
                 &:not(.addTab) { //add tab should not behave like other tabs
-                    border-color: $panel-dark $panel-dark $panel-light $panel-dark;//black border bottom when hovered
+                    border-color: $panel-dark $panel-dark $panel-light $panel-dark; //black border bottom when hovered
                     background-color: $panel-light;
                 }
             }
         }
 
 
         //tab number that shows up when tab is highlighted
-        &>.tabEnumerator {
+        .tabEnumerator {
             position: absolute;
             top: -10px;
             right: 5px;
             padding: 2px 4px;
-            background: rgb(255,255,0);
+            background: rgb(255, 255, 0);
             border-radius: 5px;
         }
 
         &.active {
-            color: $tab-text-color;//text color
+            color: $tab-text-color; //text color
             cursor: default; //cursor behavior
             background-color: $panel-dark;
             border: 1px solid transparent; //override border highlighting on hover
         }
+    }
 
-
+    .addTab {
+        min-width: fit-content;
     }
 
     &:before {