Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Commit 02eb7f8

Browse files
tschafftertschaffter
authored
Merge pull request #569 from Sage-Bionetworks/update-discussion-design
Update Styling of Discussions
2 parents e5b2106 + dd8d8be commit 02eb7f8

File tree

10 files changed

+89
-47
lines changed

10 files changed

+89
-47
lines changed

‎client/components/messaging/_messaging-theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import './message-date-separator/message-date-separator-theme';
55
@import './thread-preview/thread-preview-theme';
66
@import './thread-sidenav/thread-sidenav-theme';
7+
@import './thread/thread-theme';
78

89
@mixin messaging-theme($theme) {
910
$primary: map-get($theme, primary);
@@ -18,4 +19,5 @@
1819
@include message-date-separator-theme($theme);
1920
@include thread-preview-theme($theme);
2021
@include thread-sidenav-theme($theme);
22+
@include thread-theme($theme);
2123
}

‎client/components/messaging/thread-list/_thread-list-theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@
44
$warn: map-get($theme, warn);
55
$background: map-get($theme, background);
66
$foreground: map-get($theme, foreground);
7+
8+
.app-thread-list-card {
9+
background: mat-color($primary, 50);
10+
}
711
}

‎client/components/messaging/thread-list/thread-list.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<mat-card class="app-thread-list-card">
12
<mat-list class="thread-list" *ngIf="threads$ | async as threads">
23
<div *ngIf="threads.length == 0; else showThreads">
34
<span>Use Discussion to start a stimulating conversation with your collaborators.</span>
@@ -18,3 +19,4 @@
1819
</ng-template>
1920
</ng-template>
2021
</mat-list>
22+
</mat-card>

‎client/components/messaging/thread-list/thread-list.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
.thread-list {
1414
height: 100%;
15+
width: 100%;
1516
margin-left: 20px;
1617
margin-right: 20px;
1718
}
@@ -20,3 +21,11 @@
2021
width: 100%;
2122
padding-bottom: 10px;
2223
}
24+
25+
.app-thread-list-card {
26+
display: flex;
27+
flex-flow: row nowrap;
28+
align-items: flex-start;
29+
padding: 5px 25px 25px 25px;
30+
margin: 30px;
31+
}

‎client/components/messaging/thread-preview/_thread-preview-theme.scss‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,12 @@
66
$foreground: map-get($theme, foreground);
77

88
.app-thread {
9-
// .app-message-header {
10-
// background: mat-color($primary, darker-contrast);
11-
// border-color: #cccccc;
12-
// }
9+
border: 1px solid;
10+
border-color: mat-color($accent, 200);
11+
background: mat-color($primary, darker-contrast)
12+
}
1313

14-
// .app-message-body {
15-
// background: mat-color($primary, darker-contrast);
16-
// border-color: #cccccc;
17-
// border-top-color: transparent;
18-
// }
19-
// }
20-
}
21-
22-
.app-thread-delete-btn-label {
23-
color: #ce375c;
24-
}
14+
.app-thread-delete-btn-label {
15+
color: #ce375c;
16+
}
2517
}

‎client/components/messaging/thread-preview/thread-preview.html‎

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,27 @@
1-
<mat-nav-list>
2-
<mat-list-item *ngIf="thread" (click)="goToThread()">
1+
<mat-nav-list class="app-thread">
2+
<mat-list-item class="app-thread-metadata" *ngIf="thread" (click)="goToThread()">
33
<h3 matLine>{{ thread.title }}</h3>
4-
<h3 matLine matTooltip="{{ thread.updatedAt || thread.createdAt | dateAndTime }}">{{ thread.updatedAt || thread.createdAt | date: 'shortTime' }}</h3>
5-
<div *ngIf="numReplies == 1" class="app-thread-header-metadata">{{ numReplies }} reply</div>
6-
<div *ngIf="numReplies > 1" class="app-thread-header-metadata">{{ numReplies }} replies</div>
7-
<div class="app-thread-header-metadata-contributor">
8-
<user-avatar
9-
class="app-thread-preview-contributor-avatar"
10-
[user]="thread.createdBy"
11-
[size]="contributorAvatarSize"
12-
></user-avatar>
13-
<user-avatar
14-
class="app-thread-preview-contributor-avatar"
15-
*ngFor="let contributor of thread.contributors | slice: 1 | takeRight: 4"
16-
[user]="contributor"
17-
[size]="contributorAvatarSize"
18-
></user-avatar>
4+
<h3 class="app-thread-preview-timestamp" matLine matTooltip="{{ thread.updatedAt || thread.createdAt | dateAndTime }}">
5+
{{ thread.updatedAt || thread.createdAt | date: 'shortTime' }}</h3>
6+
<div class="app-thread-preview-contributor-list">
7+
<div *ngIf="numReplies == 1" class="app-thread-header-metadata">{{ numReplies }} reply</div>
8+
<div *ngIf="numReplies > 1" class="app-thread-header-metadata">{{ numReplies }} replies</div>
9+
<div class="app-thread-header-metadata-contributor">
10+
<user-avatar class="app-thread-preview-contributor-avatar" [user]="thread.createdBy"
11+
[size]="contributorAvatarSize"></user-avatar>
12+
<user-avatar class="app-thread-preview-contributor-avatar"
13+
*ngFor="let contributor of thread.contributors | slice: 1 | takeRight: 4" [user]="contributor"
14+
[size]="contributorAvatarSize"></user-avatar>
15+
</div>
1916
</div>
2017
<!-- <div class="app-thread-header-open-thread">
2118
<a mat-icon-button (click)="showThread($event)" matTooltip="Open thread in sidenav" [matTooltipPosition]="tooltipPosition">
2219
<mat-icon>open_in_new</mat-icon>
2320
</a>
2421
</div> -->
2522
<div class="app-thread-header-actions">
26-
<a
27-
mat-icon-button
28-
[matMenuTriggerFor]="moreActionsMenu"
29-
matTooltip="More actions"
30-
[matTooltipPosition]="tooltipPosition"
31-
aria-label="More actions"
32-
(click)="stopPropagation($event)"
33-
>
23+
<a mat-icon-button [matMenuTriggerFor]="moreActionsMenu" matTooltip="More actions"
24+
[matTooltipPosition]="tooltipPosition" aria-label="More actions" (click)="stopPropagation($event)">
3425
<mat-icon aria-label="Icon of three horizontal dots">more_horiz</mat-icon>
3526
</a>
3627
<mat-menu #moreActionsMenu="matMenu" xPosition="before" [overlapTrigger]="false">

‎client/components/messaging/thread-preview/thread-preview.scss‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
.app-thread {
2-
background: #f6f6f6;
3-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
2+
// background: #f6f6f6;
43
display: flex;
54
flex-flow: row wrap;
65
align-items: center;
76
padding: 8px 12px 8px;
87
margin-top: 10px;
98
margin-bottom: 10px;
9+
border-radius: 4px;
10+
11+
.app-thread-metadata {
12+
height: 48px !important;
13+
}
14+
15+
.app-thread-preview-timestamp {
16+
width: 100px;
17+
}
1018

1119
.app-thread-header-avatar {
1220
padding-right: 10px;
@@ -17,22 +25,29 @@
1725
flex-flow: row nowrap;
1826
padding-right: 8px;
1927
justify-content: flex-end;
20-
width: 155px;
28+
align-items: center;
29+
width: 88px;
2130
}
2231

2332
.app-thread-header-metadata-line {
2433
align-items: flex-end;
2534
}
2635

2736
.app-thread-preview-contributor-avatar {
28-
padding-right: 5px;
37+
padding: 0 2.5px;
2938
}
3039

3140
.app-thread-header-metadata-contributor {
3241
display: flex;
3342
flex-flow: row-reverse nowrap;
3443
justify-content: flex-end;
35-
width: 155px;
44+
width: 95px;
45+
}
46+
47+
.app-thread-preview-contributor-list {
48+
display: flex;
49+
flex-flow: row nowrap;
50+
flex-grow: 1;
3651
}
3752

3853
.app-thread-header-title {
@@ -77,3 +92,4 @@
7792
padding-right: 4px;
7893
}
7994
}
95+

‎client/components/messaging/thread/_thread-theme.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@mixin thread-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
.app-message-thread-ellipses {
9+
border: 1px solid;
10+
border-color: mat-color($primary, 100);
11+
}
12+
.app-thread-card {
13+
background: mat-color($primary, darker-contrast);
14+
}
15+
}

‎client/components/messaging/thread/thread.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-container *ngIf="thread$ | async as thread">
2-
<mat-card *ngIf="!showThreadEditTemplate; else showThreadEditForm">
2+
<mat-card class="app-thread-card" *ngIf="!showThreadEditTemplate; else showThreadEditForm">
33
<mat-card-header>
44
<mat-card-title>{{ thread.title }}</mat-card-title>
55
<mat-card-subtitle
@@ -15,7 +15,7 @@
1515
matTooltip="More actions"
1616
aria-label="More actions"
1717
>
18-
<mat-icon aria-label="Icon of three horizontal dots">more_horiz</mat-icon>
18+
<mat-icon class="app-message-thread-ellipses" aria-label="Icon of three horizontal dots">more_horiz</mat-icon>
1919
</a>
2020
<mat-menu #moreActionsMenu="matMenu" [overlapTrigger]="false">
2121
<button

‎client/components/messaging/thread/thread.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.app-message-thread-ellipses {
2+
border-radius: 15px;
3+
}
4+
5+
.app-thread-card {
6+
margin: 25px;
7+
}
8+
9+
.app-thread-actions-delete-btn-label {
10+
color: #ce375c;
11+
}

0 commit comments

Comments
 (0)