Skip to content

Commit e8a8c2e

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
style(AuthoringTool): Organize unit listing page using tabs (WISE-Community#2243)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent e792d7c commit e8a8c2e

4 files changed

Lines changed: 97 additions & 125 deletions

File tree

‎src/assets/wise5/authoringTool/project-list/project-list.component.html‎

Lines changed: 69 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,77 @@
1-
<div id="top" class="view-content view-content--with-sidemenu">
2-
<div class="l-constrained" class="flex flex-col">
1+
<div id="top" class="view-content">
2+
<div class="l-constrained flex flex-col">
33
<div class="node-content md-whiteframe-1dp flex flex-wrap" style="position: relative">
4-
<div class="main-box">
5-
<button
6-
mat-raised-button
7-
color="primary"
8-
matTooltip="Back to Teacher Home"
9-
i18n-matTooltip
10-
(click)="goHome()"
11-
>
12-
<mat-icon>arrow_back</mat-icon>
13-
</button>
14-
<button
15-
mat-raised-button
16-
color="primary"
17-
matTooltip="Create a New Unit"
18-
i18n-matTooltip
19-
(click)="addNewProject()"
20-
style="margin-left: 8px"
21-
>
22-
<mat-icon>add</mat-icon>
23-
</button>
4+
<div class="p-8 w-full">
5+
<div class="flex flex-wrap justify-end gap-1">
6+
<button mat-raised-button color="primary" (click)="addNewProject()" class="flex gap-1">
7+
<mat-icon>add</mat-icon> <span i18n>Create new unit</span>
8+
</button>
9+
<button mat-raised-button color="primary" (click)="goHome()" class="flex gap-1">
10+
<mat-icon>calendar_month</mat-icon> <span i18n>Class schedule</span>
11+
</button>
12+
</div>
2413
<ng-template #projectTemplate let-project="project">
25-
<span
26-
(click)="previewProject(project.id)"
27-
class="projectButton"
28-
matTooltip="Preview"
29-
matTooltipPosition="left"
30-
i18n-matTooltip
31-
>
32-
<mat-icon>preview</mat-icon>
33-
</span>
34-
<span
35-
(click)="copyProject(project.id)"
36-
class="projectButton"
37-
matTooltip="Copy"
38-
matTooltipPosition="left"
39-
i18n-matTooltip
40-
>
41-
<mat-icon>content_copy</mat-icon>
42-
</span>
43-
<span (click)="openProject(project.id)" class="projectButton flex grow">
44-
<span>{{ project.id }} - {{ project.name }}</span
45-
>&nbsp;
46-
@if (project.runId != null) {
47-
<span i18n>(Run ID: {{ project.runId }})</span>
48-
}
49-
</span>
14+
<button class="projectItem" mat-list-item (click)="openProject(project.id)">
15+
<span class="flex items-center justify-between gap-2">
16+
<span class="whitespace-normal">
17+
<span>{{ project.id }} - {{ project.name }}</span>
18+
@if (project.runId != null) {
19+
&nbsp;<span i18n>(Run ID: {{ project.runId }})</span>
20+
}
21+
</span>
22+
<span>
23+
<button
24+
matIconButton
25+
(click)="copyProject(project.id); $event.stopPropagation()"
26+
matTooltip="Copy"
27+
matTooltipPosition="above"
28+
i18n-matTooltip
29+
>
30+
<mat-icon>content_copy</mat-icon>
31+
</button>
32+
<button
33+
matIconButton
34+
(click)="previewProject(project.id); $event.stopPropagation()"
35+
matTooltip="Preview"
36+
matTooltipPosition="above"
37+
i18n-matTooltip
38+
>
39+
<mat-icon>preview</mat-icon>
40+
</button>
41+
</span>
42+
</span>
43+
</button>
5044
</ng-template>
51-
<div style="width: 750px">
52-
<h3 i18n>My Units</h3>
53-
@if (projects.length == 0) {
54-
<div i18n>You have no units</div>
55-
} @else {
56-
@for (project of projects; track project.id) {
57-
<div id="{{ project.id }}" class="projectItem flex">
58-
<ng-template *ngTemplateOutlet="projectTemplate; context: { project: project }" />
59-
</div>
45+
<mat-tab-group mat-stretch-tabs="false">
46+
<mat-tab label="My Units" i18n-label>
47+
@if (projects.length == 0) {
48+
<p i18n>You have no units</p>
49+
} @else {
50+
<mat-action-list>
51+
@for (project of projects; track project.id) {
52+
<ng-container
53+
[ngTemplateOutlet]="projectTemplate"
54+
[ngTemplateOutletContext]="{ project: project }"
55+
/>
56+
}
57+
</mat-action-list>
6058
}
61-
}
62-
<h3 i18n>Shared Units</h3>
63-
@if (sharedProjects.length == 0) {
64-
<div i18n>You have no shared units</div>
65-
} @else {
66-
@for (project of sharedProjects; track project.id) {
67-
<div id="{{ project.id }}" class="projectItem flex">
68-
<ng-template *ngTemplateOutlet="projectTemplate; context: { project: project }" />
69-
</div>
59+
</mat-tab>
60+
<mat-tab label="Shared Units" i18n-label>
61+
@if (sharedProjects.length == 0) {
62+
<div i18n>You have no shared units</div>
63+
} @else {
64+
<mat-action-list>
65+
@for (project of sharedProjects; track project.id) {
66+
<ng-container
67+
[ngTemplateOutlet]="projectTemplate"
68+
[ngTemplateOutletContext]="{ project: project }"
69+
/>
70+
}
71+
</mat-action-list>
7072
}
71-
}
72-
</div>
73+
</mat-tab>
74+
</mat-tab-group>
7375
</div>
7476
</div>
7577
</div>

‎src/assets/wise5/authoringTool/project-list/project-list.component.scss‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/assets/wise5/authoringTool/project-list/project-list.component.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,26 @@ import { DialogWithSpinnerComponent } from '../../directives/dialog-with-spinner
1010
import { ConfigService } from '../../services/configService';
1111
import { CopyProjectService } from '../../services/copyProjectService';
1212
import { SessionService } from '../../services/sessionService';
13+
import { MatTabsModule } from '@angular/material/tabs';
14+
import { MatListModule } from '@angular/material/list';
1315

1416
@Component({
1517
imports: [
1618
CommonModule,
1719
MatButtonModule,
1820
MatDialogModule,
1921
MatIconModule,
22+
MatListModule,
23+
MatTabsModule,
2024
MatTooltipModule,
2125
RouterModule
2226
],
23-
styleUrl: './project-list.component.scss',
27+
styles: `
28+
.projectItem:hover {
29+
cursor: pointer;
30+
background-color: #add8e6;
31+
}
32+
`,
2433
templateUrl: './project-list.component.html'
2534
})
2635
export class ProjectListComponent implements OnInit, OnDestroy {

‎src/messages.xlf‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1703,7 +1703,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
17031703
</context-group>
17041704
<context-group purpose="location">
17051705
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
1706-
<context context-type="linenumber">52,54</context>
1706+
<context context-type="linenumber">46,48</context>
17071707
</context-group>
17081708
</trans-unit>
17091709
<trans-unit id="4794443509874758508" datatype="html">
@@ -5799,7 +5799,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
57995799
</context-group>
58005800
<context-group purpose="location">
58015801
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
5802-
<context context-type="linenumber">38,40</context>
5802+
<context context-type="linenumber">27,28</context>
58035803
</context-group>
58045804
<context-group purpose="location">
58055805
<context context-type="sourcefile">src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html</context>
@@ -6105,7 +6105,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
61056105
</context-group>
61066106
<context-group purpose="location">
61076107
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
6108-
<context context-type="linenumber">29,31</context>
6108+
<context context-type="linenumber">36,37</context>
61096109
</context-group>
61106110
<context-group purpose="location">
61116111
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/export-item/export-item.component.html</context>
@@ -8857,7 +8857,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
88578857
</context-group>
88588858
<context-group purpose="location">
88598859
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
8860-
<context context-type="linenumber">47,48</context>
8860+
<context context-type="linenumber">19,20</context>
88618861
</context-group>
88628862
</trans-unit>
88638863
<trans-unit id="3570561190371217661" datatype="html">
@@ -13188,60 +13188,60 @@ The branches will be removed but the steps will remain in the unit.</source>
1318813188
<context context-type="linenumber">10,14</context>
1318913189
</context-group>
1319013190
</trans-unit>
13191-
<trans-unit id="3665922072246739344" datatype="html">
13192-
<source>Back to Teacher Home</source>
13191+
<trans-unit id="87418722412836884" datatype="html">
13192+
<source>Create new unit</source>
1319313193
<context-group purpose="location">
1319413194
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
13195-
<context context-type="linenumber">8,12</context>
13195+
<context context-type="linenumber">7,9</context>
1319613196
</context-group>
1319713197
</trans-unit>
13198-
<trans-unit id="6028595855188256954" datatype="html">
13199-
<source>Create a New Unit</source>
13198+
<trans-unit id="5180326923261897886" datatype="html">
13199+
<source>Class schedule</source>
1320013200
<context-group purpose="location">
1320113201
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
13202-
<context context-type="linenumber">17,20</context>
13202+
<context context-type="linenumber">10,13</context>
1320313203
</context-group>
1320413204
</trans-unit>
1320513205
<trans-unit id="2631973667300763051" datatype="html">
1320613206
<source>You have no units</source>
1320713207
<context-group purpose="location">
1320813208
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
13209-
<context context-type="linenumber">54,56</context>
13209+
<context context-type="linenumber">48,51</context>
1321013210
</context-group>
1321113211
</trans-unit>
1321213212
<trans-unit id="9063616864663648521" datatype="html">
1321313213
<source>Shared Units</source>
1321413214
<context-group purpose="location">
1321513215
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
13216-
<context context-type="linenumber">62,64</context>
13216+
<context context-type="linenumber">60,62</context>
1321713217
</context-group>
1321813218
</trans-unit>
1321913219
<trans-unit id="7727005768668091798" datatype="html">
1322013220
<source>You have no shared units</source>
1322113221
<context-group purpose="location">
1322213222
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
13223-
<context context-type="linenumber">64,66</context>
13223+
<context context-type="linenumber">62,65</context>
1322413224
</context-group>
1322513225
</trans-unit>
1322613226
<trans-unit id="5269484094677699060" datatype="html">
1322713227
<source>Copying Unit...</source>
1322813228
<context-group purpose="location">
1322913229
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
13230-
<context context-type="linenumber">53</context>
13230+
<context context-type="linenumber">62</context>
1323113231
</context-group>
1323213232
</trans-unit>
1323313233
<trans-unit id="5317921744918848185" datatype="html">
1323413234
<source>There was an error copying this unit. Please contact WISE staff.</source>
1323513235
<context-group purpose="location">
1323613236
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
13237-
<context context-type="linenumber">60</context>
13237+
<context context-type="linenumber">69</context>
1323813238
</context-group>
1323913239
</trans-unit>
1324013240
<trans-unit id="4550129747596313114" datatype="html">
1324113241
<source> (Run ID: <x id="PH" equiv-text="project.runId"/>)</source>
1324213242
<context-group purpose="location">
1324313243
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
13244-
<context context-type="linenumber">75</context>
13244+
<context context-type="linenumber">84</context>
1324513245
</context-group>
1324613246
</trans-unit>
1324713247
<trans-unit id="5435676366729047906" datatype="html">
@@ -13250,14 +13250,14 @@ The branches will be removed but the steps will remain in the unit.</source>
1325013250
<x id="PH" equiv-text="projectInfo"/></source>
1325113251
<context-group purpose="location">
1325213252
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
13253-
<context context-type="linenumber">77</context>
13253+
<context context-type="linenumber">86</context>
1325413254
</context-group>
1325513255
</trans-unit>
1325613256
<trans-unit id="1460984918484282139" datatype="html">
1325713257
<source>Loading Unit...</source>
1325813258
<context-group purpose="location">
1325913259
<context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.ts</context>
13260-
<context context-type="linenumber">100</context>
13260+
<context context-type="linenumber">109</context>
1326113261
</context-group>
1326213262
</trans-unit>
1326313263
<trans-unit id="1278268521087394642" datatype="html">

0 commit comments

Comments
 (0)