Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#340 UI scroll refactor #342

Merged
merged 31 commits into from
Sep 7, 2021
Merged
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
bd28849
Remove padding and margin (gutter) from body
iguannalin Aug 18, 2021
6220788
Moved application logo is moved from top-right to inside new tab layout
iguannalin Aug 18, 2021
7a901d3
Moved help-buttons to after app descriptor in new tab page
iguannalin Aug 18, 2021
a2b6ce0
Margin to MITRE ATT&CK logo at bottom left
iguannalin Aug 18, 2021
1cefb97
Switched from list-item stylized tabs to mat-tabs
iguannalin Aug 24, 2021
6316f83
Updated Tab class--replaced dataTable boolean with checking for dataC…
iguannalin Aug 24, 2021
7457137
Fixed bug where dynamic ngModel was not working for activeTab title
iguannalin Aug 25, 2021
bf09ee3
Reverted to 1cefb97a411682a78fb833c4dab20fbf8fbecebe (no dropdown und…
iguannalin Aug 30, 2021
826999a
Refactored content scroll to be independent of page and sidebar
iguannalin Aug 30, 2021
c893da6
Help icon changed to circle; need to fix overlay issue with when matr…
iguannalin Aug 30, 2021
26dc3a4
Enabled two-way binding for tabs & data-table component to control la…
iguannalin Aug 31, 2021
d9ef85c
Fixed css of help button, changed adjustedHeaderHeight to numeric value
iguannalin Aug 31, 2021
41443e4
Fixed banner style
iguannalin Aug 31, 2021
de6b0bc
Adjusted banner height when scroll down; removed section label border
iguannalin Aug 31, 2021
8c61830
Layer description dropdown should only show on click after user is al…
iguannalin Sep 1, 2021
657ac85
Moved tab enumerator down
iguannalin Sep 1, 2021
c463723
Fixed tab styles and bugs, removed random help icon
iguannalin Sep 1, 2021
888e915
Updated ATT&CK header to H1
iguannalin Sep 1, 2021
fee6653
Disable layer desc dropdown on change tabs
iguannalin Sep 1, 2021
3d4512d
Added hover effect for + new tab button
iguannalin Sep 1, 2021
96ef708
Removed monospace font from tab title, and old tab title input style
iguannalin Sep 1, 2021
ac05f7a
Decreased speed of hiding the header to for a little smoother scroll …
iguannalin Sep 1, 2021
48572a2
Fixed link at bottom, and updated tab/header with icons
iguannalin Sep 1, 2021
3780cf3
Added list of layer tab variables for create a new layer
iguannalin Sep 2, 2021
ffb191f
Added positioning to help icon in header so help icon will hide with …
iguannalin Sep 2, 2021
e93f05e
Changed behavior of scroll to detect scroll up from scroll down instead
iguannalin Sep 2, 2021
00108a7
Strongly typing query selector to <HTMLElement>
iguannalin Sep 2, 2021
59135a6
Playing around with material's transition effect
iguannalin Sep 2, 2021
293ee9c
Added more case handling for scroll--only hide header if scroll direc…
iguannalin Sep 2, 2021
0c33a34
Hide overflow-y on scroll, to fix double scrollbar issue
iguannalin Sep 7, 2021
5638b6b
Merge branch 'develop' of https://github.com/mitre-attack/attack-navi…
iguannalin Sep 7, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18,484 changes: 18,458 additions & 26 deletions nav-app/package-lock.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions nav-app/src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -9,7 +9,11 @@ tabs {
border: none;
background-color: transparent;
text-align: right;
margin-left: 16px;
padding: 0;
display: block;
position: fixed;
bottom: 16px;
&:hover {
text-decoration: underline;
cursor: pointer;
5 changes: 4 additions & 1 deletion nav-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -48,6 +48,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({
@@ -97,7 +98,8 @@ import { SearchPopoverNotificationComponent } from './search-and-multiselect/sea
MatStepperModule,
MatPaginatorModule,
MarkdownModule.forRoot(),
PopoverModule
PopoverModule,
MatTabsModule
],
exports: [
MatSelectModule,
@@ -107,6 +109,7 @@ import { SearchPopoverNotificationComponent } from './search-and-multiselect/sea
MatTooltipModule,
MatMenuModule,
MatExpansionModule,
MatTabsModule,
],
providers: [],
bootstrap: [AppComponent],
56 changes: 28 additions & 28 deletions nav-app/src/app/datatable/data-table.component.html
Original file line number Diff line number Diff line change
@@ -71,7 +71,7 @@
<div *ngIf="configService.getFeature('layer_info')" class="control-row-item">

<div class="control-row-button dropdown noselect"
(click)="currentDropdown = currentDropdown !== 'description' ? 'description' : null"
(click)="handleDescriptionDropdown()"
matTooltipPosition="below"
matTooltip="layer information">
<img src="assets/icons/ic_description_black_24px.svg" alt="layer information" />
@@ -517,34 +517,34 @@
88 888 88 8oooo88 888 888 88o 888 88 888
o88o 8 o88o o88o o888o o888o o888o 88o8 o888o o88o o888o
-->
<div class="matrices">
<div oncontextmenu="return false">
<div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainVersionID).dataLoaded">
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>
<mat-drawer-container autosize>
<mat-drawer-content>
<div class="matrices-columns">
<div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainVersionID).matrices">
<div *ngIf="dataService.getDomain(viewModel.domainVersionID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
<div *ngIf="viewModel.layout.layout == 'side'">
<matrix-side [matrix]="matrix" [viewModel]="viewModel"></matrix-side>
</div>
<div *ngIf="viewModel.layout.layout == 'flat'">
<matrix-flat [matrix]="matrix" [viewModel]="viewModel"></matrix-flat>
</div>
<div *ngIf="viewModel.layout.layout == 'mini'">
<matrix-mini [matrix]="matrix" [viewModel]="viewModel"></matrix-mini>
</div>
</div>
<mat-drawer-container class="matrices-content" autosize>
<mat-drawer-content>
<div class="matrices" #scrollRef>
<div oncontextmenu="return false">
<div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainVersionID).dataLoaded">
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>
</mat-drawer-content>
<mat-drawer [disableClose]="true" mode="side" position="end" #sidebar [opened]="viewModel.sidebarOpened">
<sidebar [viewModel]="viewModel"></sidebar>
</mat-drawer>
</mat-drawer-container>
</div>
</div>
<div class="matrices-columns">
<div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainVersionID).matrices">
<div *ngIf="dataService.getDomain(viewModel.domainVersionID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
<div *ngIf="viewModel.layout.layout == 'side'">
<matrix-side [matrix]="matrix" [viewModel]="viewModel"></matrix-side>
</div>
<div *ngIf="viewModel.layout.layout == 'flat'">
<matrix-flat [matrix]="matrix" [viewModel]="viewModel"></matrix-flat>
</div>
<div *ngIf="viewModel.layout.layout == 'mini'">
<matrix-mini [matrix]="matrix" [viewModel]="viewModel"></matrix-mini>
</div>
</div>
</div>
</div>
</div>
</mat-drawer-content>
<mat-drawer [disableClose]="true" mode="side" position="end" [opened]="viewModel.sidebarOpened">
<sidebar [viewModel]="viewModel"></sidebar>
</mat-drawer>
</mat-drawer-container>


<!--
2 changes: 1 addition & 1 deletion nav-app/src/app/datatable/data-table.component.scss
Original file line number Diff line number Diff line change
@@ -16,12 +16,12 @@ $cellSize: 15px;
// | |\/| |/ _ \ | || .` | | |/ _ \| _ \ |__| _|
// |_| |_/_/ \_\___|_|\_| |_/_/ \_\___/____|___|


// content of each tab
.matrices {
overflow-x: scroll;
min-height: 50vh;
border: 1px solid $panel-dark;
transition: height ease-in-out 0.2s;

.spinner {
display: flex;
46 changes: 42 additions & 4 deletions nav-app/src/app/datatable/data-table.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, ViewChild, HostListener, AfterViewInit, ViewEncapsulation, OnDestroy } from '@angular/core';
import { Component, Input, ViewChild, HostListener, AfterViewInit, ViewEncapsulation, OnDestroy, ElementRef, Output, EventEmitter } from '@angular/core';
import {DataService, Technique, Matrix, Domain} from '../data.service';
import {ConfigService} from '../config.service';
import { TabsComponent } from '../tabs/tabs.component';
@@ -27,6 +27,7 @@ import { Subscription } from 'rxjs';
encapsulation: ViewEncapsulation.None,
})
export class DataTableComponent implements AfterViewInit, OnDestroy {
@ViewChild('scrollRef') private scrollRef: ElementRef;

//items for custom context menu
customContextMenuItems = [];
@@ -35,8 +36,9 @@ export class DataTableComponent implements AfterViewInit, OnDestroy {

// The ViewModel being used by this data-table
@Input() viewModel: ViewModel;

currentDropdown: string = ""; //current dropdown menu
@Input() currentDropdown: string = ""; //current dropdown menu
@Output() dropdownChange = new EventEmitter<any>();
@Output() onScroll = new EventEmitter<any>();

//////////////////////////////////////////////////////////
// Stringifies the current view model into a json string//
@@ -251,10 +253,46 @@ export class DataTableComponent implements AfterViewInit, OnDestroy {
*/
ngAfterViewInit(): void {
// setTimeout(() => this.exportRender(), 500);
this.headerHeight = document.querySelector<HTMLElement>('.header-wrapper')?.offsetHeight;
this.scrollRef.nativeElement.style.height = `calc(100vh - ${this.headerHeight + this.controlsHeight + this.footerHeight}px)`;
this.scrollRef.nativeElement.addEventListener('scroll', this.handleScroll);
}

ngOnDestroy(): void {
ngOnDestroy() {
this.selectionChangeSubscription.unsubscribe();
document.body.removeEventListener('scroll', this.handleScroll);
}

handleDescriptionDropdown() {
this.currentDropdown !== 'description' ? this.currentDropdown = 'description' : this.currentDropdown = '';
this.dropdownChange.emit(this.currentDropdown);
}

previousScrollTop = 0;
headerHeight = 0;
footerHeight = 33;
controlsHeight = 34;
isScrollUp = true;
handleScroll = (e) => {
const diff = this.scrollRef.nativeElement.scrollTop - this.previousScrollTop;
if (!this.isScrollUp && diff < 0) {
this.isScrollUp = diff < 0;
this.calculateScrollHeight();
this.previousScrollTop = this.scrollRef.nativeElement.scrollTop;
} else if (this.isScrollUp && diff > 0) {
this.isScrollUp = diff < 0;
this.calculateScrollHeight();
this.previousScrollTop = this.scrollRef.nativeElement.scrollTop;
} else if (!this.isScrollUp && this.scrollRef.nativeElement.scrollTop > 0 && diff === 0) {
this.calculateScrollHeight();
}
}

calculateScrollHeight = () => {
const tabOffset = this.isScrollUp ? 0 : this.headerHeight;
this.onScroll.emit(-1 * tabOffset);
const scrollWindowHeight = this.isScrollUp ? this.headerHeight + this.controlsHeight + this.footerHeight : this.controlsHeight;
this.scrollRef.nativeElement.style.height = `calc(100vh - ${scrollWindowHeight}px)`;
}

// open custom url in a new tab
Loading