Skip to content

Commit 67cd3df

Browse files
sei-tspencersei-tspencer
authored
CWDOE-97 & 198 add "copyID" buttons to secnario and scenario templates, fix css for time picker (#351)
1 parent e0db25a commit 67cd3df

File tree

6 files changed

+196
-71
lines changed

6 files changed

+196
-71
lines changed

‎src/app/components/scenario-templates/scenario-template-list/scenario-template-list.component.html‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,16 @@
4242
</div>
4343
</div>
4444

45-
<mat-accordion displayMode="flat" class="mat-table">
45+
<mat-accordion displayMode="flat">
4646
<section
4747
matSort
4848
(matSortChange)="sortChanged($event)"
4949
class="mat-elevation-z2 mat-header-row"
5050
>
51-
<span class="mat-cell" fxFlex="4">&nbsp;</span>
52-
<span class="mat-header-cell" mat-sort-header="name">Name</span>
53-
<span class="mat-header-cell" mat-sort-header="description"
54-
>Description</span
55-
>
56-
<span class="mat-header-cell" mat-sort-header="durationHours"
57-
>Duration</span
58-
>
59-
<span class="mat-header-cell" mat-sort-header="dateCreated">Created</span>
51+
<span class="mat-header-cell four-cell" mat-sort-header="name"><span class="name-header">Name</span></span>
52+
<span class="mat-header-cell four-cell" mat-sort-header="description">Description</span>
53+
<span class="mat-header-cell one-cell" mat-sort-header="durationHours">Duration</span>
54+
<span class="mat-header-cell one-cell" mat-sort-header="dateCreated">Created</span>
6055
</section>
6156

6257
<mat-expansion-panel
@@ -77,23 +72,31 @@
7772
class="mat-row"
7873
(contextmenu)="onContextMenu($event, item)"
7974
>
80-
<span
81-
class="mat-cell"
82-
fxFlex="4"
83-
title="Scenario Template Menu"
84-
(click)="onContextMenu($event, item); $event.stopPropagation()"
85-
>
86-
<mat-icon
87-
svgIcon="menu"
88-
class="icon-color icon-20px"
89-
title="Scenario Template Menu"
75+
<div class="mat-cell flex-row-cell four-cell">
76+
<button
77+
mat-icon-button
78+
class="copy-button"
79+
ngxClipboard
80+
[cbContent]="item.id"
81+
(click)="$event.stopPropagation()"
82+
title="Copy ID: {{ item.id }}"
83+
>
84+
<mat-icon class="mdi-20px copy-icon" fontIcon="mdi-content-copy"></mat-icon>
85+
</button>
86+
<button
87+
mat-icon-button
88+
class="menu-button"
89+
ngxClipboard
9090
(click)="onContextMenu($event, item); $event.stopPropagation()"
91-
></mat-icon>
92-
</span>
93-
<span class="mat-cell">{{ item.name }}</span>
94-
<span class="mat-cell">{{ item.description }}</span>
95-
<span class="mat-cell">{{ item.durationHours }}</span>
96-
<span class="mat-cell">{{ item.dateCreated | date: 'yyyy-MM-dd' }}</span>
91+
title="Scenario Template Menu"
92+
>
93+
<mat-icon class="mdi-24px" fontIcon="mdi-menu"></mat-icon>
94+
</button>
95+
{{ item.name }}
96+
</div>
97+
<div class="mat-cell four-cell center-self">{{ item.description }}</div>
98+
<div class="mat-cell one-cell center-self">{{ item.durationHours }}</div>
99+
<div class="mat-cell one-cell center-self">{{ item.dateCreated | date: 'yyyy-MM-dd' }}</div>
97100
</mat-expansion-panel-header>
98101
<ng-template matExpansionPanelContent>
99102
<app-scenario-template-edit

‎src/app/components/scenario-templates/scenario-template-list/scenario-template-list.component.scss‎

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
22
// Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
33

4-
.mat-table {
5-
display: block;
6-
}
7-
84
.mat-header-row {
9-
min-height: 56px;
5+
min-height: 40px;
106
}
117

128
.mat-row {
13-
min-height: 48px;
9+
min-height: 30px;
1410
}
1511

1612
.mat-row,
@@ -19,7 +15,6 @@
1915
border-bottom-width: 1px;
2016
border-bottom-style: solid;
2117
align-items: center;
22-
padding: 0 24px;
2318
box-sizing: border-box;
2419
}
2520

@@ -40,6 +35,33 @@
4035
border-bottom: none;
4136
}
4237

38+
.name-header {
39+
margin-left: 80px;
40+
}
41+
42+
.flex-row-cell {
43+
display: flex;
44+
flex-flow: row;
45+
justify-content: flex-start;
46+
align-items: center;
47+
text-align: left;
48+
}
49+
50+
.copy-button {
51+
width: 24px;
52+
height: 24px;
53+
}
54+
55+
.menu-button {
56+
width: 36px;
57+
height: 36px;
58+
margin-right: 20px;
59+
}
60+
61+
.copy-icon {
62+
margin-top: -8px;
63+
}
64+
4365
.button-end {
4466
margin-left: 100px;
4567
}
@@ -66,3 +88,31 @@
6688
.clear-search {
6789
width: 50px;
6890
}
91+
92+
.copy-icon {
93+
margin-top: -8px;
94+
}
95+
96+
.five-cell {
97+
flex: 5;
98+
}
99+
100+
.four-cell {
101+
flex: 4;
102+
}
103+
104+
.three-cell {
105+
flex: 3;
106+
}
107+
108+
.two-cell {
109+
flex: 2;
110+
}
111+
112+
.one-cell {
113+
flex: 1;
114+
}
115+
116+
.center-self {
117+
align-self: center;
118+
}

‎src/app/components/scenarios/scenario-list/scenario-list.component.html‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,18 @@
6666
</div>
6767
</div>
6868

69-
<mat-accordion displayMode="flat" multi class="mat-table">
69+
<mat-accordion displayMode="flat" multi>
7070
<section
7171
matSort
7272
(matSortChange)="sortChanged($event)"
7373
class="mat-elevation-z2 mat-header-row"
7474
>
75-
<span class="mat-cell" fxFlex="4">&nbsp;</span>
76-
<span class="mat-header-cell" mat-sort-header="name">Name</span>
77-
<span class="mat-header-cell" mat-sort-header="view">View</span>
78-
<span class="mat-header-cell" mat-sort-header="status">Status</span>
79-
<span class="mat-header-cell" mat-sort-header="startDate">Start</span>
80-
<span class="mat-header-cell" mat-sort-header="endDate">End</span>
81-
<span class="mat-header-cell" mat-sort-header="description"
75+
<span class="mat-header-cell four-cell" mat-sort-header="name"><span class="name-header">Name</span></span>
76+
<span class="mat-header-cell two-cell" mat-sort-header="view">View</span>
77+
<span class="mat-header-cell one-cell" mat-sort-header="status">Status</span>
78+
<span class="mat-header-cell one-cell" mat-sort-header="startDate">Start</span>
79+
<span class="mat-header-cell one-cell" mat-sort-header="endDate">End</span>
80+
<span class="mat-header-cell two-cell" mat-sort-header="description"
8281
>Description</span
8382
>
8483
</section>
@@ -95,32 +94,40 @@
9594
class="mat-row"
9695
(contextmenu)="onContextMenu($event, item)"
9796
>
98-
<div
99-
class="mat-cell"
100-
fxFlex="4"
101-
title="Scenario Menu"
102-
(click)="onContextMenu($event, item); $event.stopPropagation()"
103-
>
104-
<mat-icon
105-
svgIcon="menu"
106-
class="icon-20px icon-color"
107-
title="Scenario Menu"
97+
<div class="mat-cell flex-row-cell four-cell">
98+
<button
99+
mat-icon-button
100+
class="copy-button"
101+
ngxClipboard
102+
[cbContent]="item.id"
103+
(click)="$event.stopPropagation()"
104+
title="Copy ID: {{ item.id }}"
105+
>
106+
<mat-icon class="mdi-20px copy-icon" fontIcon="mdi-content-copy"></mat-icon>
107+
</button>
108+
<button
109+
mat-icon-button
110+
class="menu-button"
111+
ngxClipboard
108112
(click)="onContextMenu($event, item); $event.stopPropagation()"
109-
></mat-icon>
113+
title="Scenario Menu"
114+
>
115+
<mat-icon class="mdi-24px" fontIcon="mdi-menu"></mat-icon>
116+
</button>
117+
{{ item.name }}
110118
</div>
111-
<span class="mat-cell">{{ item.name }}</span>
112-
<span class="mat-cell">{{ item.view }}</span>
113-
<span class="mat-cell" *ngIf="!!item.view || item.status !== 'ready'">{{
119+
<div class="mat-cell two-cell center-self">{{ item.view }}</div>
120+
<div class="mat-cell one-cell center-self" *ngIf="!!item.view || item.status !== 'ready'">{{
114121
item.status
115-
}}</span>
116-
<span
117-
class="mat-cell warn-text"
122+
}}</div>
123+
<div
124+
class="mat-cell warn-text one-cell center-self"
118125
*ngIf="!item.view && item.status === 'ready'"
119-
>Select a view!</span
126+
>Select a view!</div
120127
>
121-
<span class="mat-cell">{{ item.startDate | date: 'yyyy-MM-dd' }}</span>
122-
<span class="mat-cell">{{ item.endDate | date: 'yyyy-MM-dd' }}</span>
123-
<span class="mat-cell">{{ item.description }}</span>
128+
<div class="mat-cell one-cell center-self">{{ item.startDate | date: 'yyyy-MM-dd' }}</div>
129+
<div class="mat-cell one-cell center-self">{{ item.endDate | date: 'yyyy-MM-dd' }}</div>
130+
<div class="mat-cell two-cell center-self">{{ item.description }}</div>
124131
</mat-expansion-panel-header>
125132
<ng-template matExpansionPanelContent>
126133
<app-scenario-edit [scenario]="item"></app-scenario-edit>

‎src/app/components/scenarios/scenario-list/scenario-list.component.scss‎

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
// Copyright 2021 Carnegie Mellon University. All Rights Reserved.
22
// Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
33

4-
.mat-table {
5-
display: block;
6-
}
7-
84
.mat-header-row {
9-
min-height: 56px;
5+
min-height: 40px;
106
}
117

128
.mat-row {
13-
min-height: 48px;
9+
min-height: 30px;
1410
}
1511

1612
.mat-row,
@@ -19,12 +15,10 @@
1915
border-bottom-width: 1px;
2016
border-bottom-style: solid;
2117
align-items: center;
22-
padding: 0 24px;
2318
box-sizing: border-box;
2419
}
2520

26-
.mat-cell,
27-
.mat-header-cell {
21+
.mat-cell, .mat-header-cell {
2822
flex: 1;
2923
overflow: hidden;
3024
word-wrap: break-word;
@@ -40,6 +34,33 @@
4034
border-bottom: none;
4135
}
4236

37+
.name-header {
38+
margin-left: 80px;
39+
}
40+
41+
.flex-row-cell {
42+
display: flex;
43+
flex-flow: row;
44+
justify-content: flex-start;
45+
align-items: center;
46+
text-align: left;
47+
}
48+
49+
.copy-button {
50+
width: 24px;
51+
height: 24px;
52+
}
53+
54+
.menu-button {
55+
width: 36px;
56+
height: 36px;
57+
margin-right: 20px;
58+
}
59+
60+
.copy-icon {
61+
margin-top: -8px;
62+
}
63+
4364
.button-end {
4465
margin-left: 100px;
4566
}
@@ -75,3 +96,27 @@
7596
.checkbox-text {
7697
font-size: 0.8em;
7798
}
99+
100+
.five-cell {
101+
flex: 5;
102+
}
103+
104+
.four-cell {
105+
flex: 4;
106+
}
107+
108+
.three-cell {
109+
flex: 3;
110+
}
111+
112+
.two-cell {
113+
flex: 2;
114+
}
115+
116+
.one-cell {
117+
flex: 1;
118+
}
119+
120+
.center-self {
121+
align-self: center;
122+
}

‎src/styles/_theme.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,18 @@ $custom-typography: mat.define-typography-config(
216216
color: map-get($foreground, disabled);
217217
}
218218
}
219+
220+
.ngx-timepicker-control__input {
221+
background: map-get($background, 'background');
222+
}
223+
.ngx-timepicker-control__arrow {
224+
color: map-get($foreground, 'text') !important;
225+
}
226+
227+
.ngx-material-timepicker-toggle {
228+
color: map-get($foreground, 'text') !important;
229+
}
230+
219231
}
220232

221233
$primary: mat.define-palette($mat-cmu-tartan);

‎src/styles/styles.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,11 @@ $mdi-font-path: '~@mdi/font/fonts';
3131
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
3232
0 1px 10px 0 rgba(0, 0, 0, 0.12);
3333
}
34+
35+
.timepicker-overlay {
36+
z-index: 10000000 !important;
37+
}
38+
39+
.timepicker-backdrop-overlay {
40+
z-index: 10000000 !important;
41+
}

0 commit comments

Comments
 (0)