Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 694c39e

Browse files
author
Germain
authored
Enable threads by default and mark it as a beta feature (#8081)
1 parent 27e4806 commit 694c39e

File tree

16 files changed

+258
-69
lines changed

16 files changed

+258
-69
lines changed

‎res/css/structures/_RightPanel.scss‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ $pulse-color: $alert;
103103
mask-position: center;
104104
}
105105
}
106+
106107
.mx_RightPanel_headerButton_unreadIndicator_bg {
107108
position: absolute;
108109
right: $dot-offset;
@@ -121,14 +122,6 @@ $pulse-color: $alert;
121122
right: $dot-offset;
122123
top: $dot-offset;
123124
margin: 4px;
124-
width: $dot-size;
125-
height: $dot-size;
126-
border-radius: 50%;
127-
transform: scale(1);
128-
background: rgba($pulse-color, 1);
129-
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
130-
animation: mx_RightPanel_indicator_pulse 2s infinite;
131-
animation-iteration-count: 1;
132125

133126
&.mx_Indicator_red {
134127
background: rgba($alert, 1);
@@ -144,22 +137,6 @@ $pulse-color: $alert;
144137
background: rgba($primary-content, 1);
145138
box-shadow: rgba($primary-content, 1);
146139
}
147-
148-
&::after {
149-
content: "";
150-
position: absolute;
151-
width: inherit;
152-
height: inherit;
153-
top: 0;
154-
left: 0;
155-
transform: scale(1);
156-
transform-origin: center center;
157-
animation-name: mx_RightPanel_indicator_pulse_shadow;
158-
animation-duration: inherit;
159-
animation-iteration-count: inherit;
160-
border-radius: 50%;
161-
background: inherit;
162-
}
163140
}
164141

165142
.mx_RightPanel_timelineCardButton {
@@ -250,7 +227,8 @@ $pulse-color: $alert;
250227
margin: 16px 0;
251228
}
252229

253-
h2, p {
230+
h2,
231+
p {
254232
font-size: $font-14px;
255233
}
256234

‎res/css/structures/_RoomView.scss‎

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,9 @@ limitations under the License.
105105
flex: 1;
106106
min-width: 0;
107107

108-
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
108+
.mx_RoomView_messagePanel,
109+
.mx_RoomView_messagePanelSpinner,
110+
.mx_RoomView_messagePanelSearchSpinner {
109111
order: 2;
110112
}
111113
}
@@ -147,20 +149,17 @@ limitations under the License.
147149
}
148150

149151
.mx_RoomView_messageListWrapper {
150-
min-height: 100%;
151-
152152
display: flex;
153-
154153
flex-direction: column;
155-
156154
justify-content: flex-end;
155+
position: relative;
157156
}
158157

159158
.mx_RoomView_searchResultsPanel {
160159
.mx_RoomView_messageListWrapper {
161160
justify-content: flex-start;
162161

163-
> .mx_RoomView_MessageList > li > ol {
162+
>.mx_RoomView_MessageList > li > ol {
164163
list-style-type: none;
165164
}
166165
}
@@ -295,3 +294,62 @@ hr.mx_RoomView_myReadMarker {
295294
min-height: 42px;
296295
}
297296
}
297+
298+
@keyframes mx_Indicator_pulse {
299+
0% {
300+
transform: scale(0.95);
301+
}
302+
303+
70% {
304+
transform: scale(1);
305+
}
306+
307+
100% {
308+
transform: scale(0.95);
309+
}
310+
}
311+
312+
@keyframes mx_Indicator_pulse_shadow {
313+
0% {
314+
opacity: 0.7;
315+
}
316+
317+
70% {
318+
transform: scale(2.2);
319+
opacity: 0;
320+
}
321+
322+
100% {
323+
opacity: 0;
324+
}
325+
}
326+
327+
.mx_Indicator {
328+
position: absolute;
329+
right: 0;
330+
top: 0;
331+
width: $dot-size;
332+
height: $dot-size;
333+
border-radius: 50%;
334+
transform: scale(1);
335+
background: rgba($pulse-color, 1);
336+
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
337+
animation: mx_Indicator_pulse 2s infinite;
338+
animation-iteration-count: 1;
339+
340+
&::after {
341+
content: "";
342+
position: absolute;
343+
width: inherit;
344+
height: inherit;
345+
top: 0;
346+
left: 0;
347+
transform: scale(1);
348+
transform-origin: center center;
349+
animation-name: mx_Indicator_pulse_shadow;
350+
animation-duration: inherit;
351+
animation-iteration-count: inherit;
352+
border-radius: 50%;
353+
background: inherit;
354+
}
355+
}

‎res/css/views/elements/_Tooltip.scss‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,23 @@ limitations under the License.
1616
*/
1717

1818
@keyframes mx_fadein {
19-
from { opacity: 0; }
20-
to { opacity: 1; }
19+
from {
20+
opacity: 0;
21+
}
22+
23+
to {
24+
opacity: 1;
25+
}
2126
}
2227

2328
@keyframes mx_fadeout {
24-
from { opacity: 1; }
25-
to { opacity: 0; }
29+
from {
30+
opacity: 1;
31+
}
32+
33+
to {
34+
opacity: 0;
35+
}
2636
}
2737

2838
.mx_Tooltip_chevron {

‎res/css/views/messages/_MessageActionBar.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ limitations under the License.
4848
cursor: initial;
4949
}
5050

51-
> * {
51+
>* {
5252
white-space: nowrap;
5353
display: inline-block;
5454
position: relative;
@@ -102,6 +102,11 @@ limitations under the License.
102102
mask-image: url('$(res)/img/element-icons/message/thread.svg');
103103
}
104104

105+
.mx_MessageActionBar_threadButton .mx_Indicator {
106+
background: $links;
107+
animation-iteration-count: infinite;
108+
}
109+
105110
.mx_MessageActionBar_editButton::after {
106111
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
107112
}

‎res/css/views/right_panel/_ThreadPanel.scss‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ limitations under the License.
1717
.mx_ThreadPanel {
1818
display: flex;
1919
flex-direction: column;
20+
height: 100px;
21+
overflow: visible;
2022

2123
.mx_BaseCard_header {
2224
margin-bottom: 12px;
@@ -225,6 +227,20 @@ limitations under the License.
225227
display: none; // hide the hidden event expand button, not enough space, view source can still be used
226228
}
227229
}
230+
231+
.mx_BaseCard_footer {
232+
text-align: left;
233+
font-size: $font-12px;
234+
align-items: center;
235+
justify-content: end;
236+
gap: 4px;
237+
position: relative;
238+
top: 2px;
239+
240+
.mx_AccessibleButton_kind_link_inline {
241+
color: $secondary-content;
242+
}
243+
}
228244
}
229245

230246
.mx_ThreadPanel_replies {
@@ -269,10 +285,10 @@ limitations under the License.
269285
align-items: center;
270286
justify-content: center;
271287
position: absolute;
272-
top: 48px;
273-
bottom: 8px;
274-
left: 8px;
275-
right: 8px;
288+
top: 0;
289+
bottom: 0;
290+
left: 0;
291+
right: 0;
276292
padding: 20px;
277293

278294
h2 {

‎res/css/views/rooms/_EventTile.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -940,6 +940,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
940940
.mx_ThreadView {
941941
display: flex;
942942
flex-direction: column;
943+
max-height: 100%;
943944

944945
.mx_ThreadView_List {
945946
flex: 1;

‎res/img/betas/threads.png‎

85 KB
Loading

‎res/themes/light/css/_light.scss‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,22 @@
88
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
99
digits in flowed text to stand out.
1010
TODO: Consider putting all emoji fonts to the end rather than the front. */
11-
$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
12-
13-
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
11+
$font-family: 'Inter',
12+
'Twemoji',
13+
'Apple Color Emoji',
14+
'Segoe UI Emoji',
15+
'Arial',
16+
'Helvetica',
17+
sans-serif,
18+
'Noto Color Emoji';
19+
20+
$monospace-font-family: 'Inconsolata',
21+
'Twemoji',
22+
'Apple Color Emoji',
23+
'Segoe UI Emoji',
24+
'Courier',
25+
monospace,
26+
'Noto Color Emoji';
1427

1528
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
1629
// ********************
@@ -57,7 +70,7 @@ $icon-button-color: $quaternary-content;
5770
// Colors that aren't in Figma and are theme specific - we need to get rid of these
5871
// ********************
5972
$selection-fg-color: $background;
60-
$yellow-background: #fff8e3;
73+
$yellow-background: #fff8e3;
6174
$secondary-accent-color: #f2f5f8;
6275
$button-fg-color: $background;
6376
$neutral-badge-color: #dbdbdb;
@@ -79,7 +92,8 @@ $event-selected-color: #f6f7f8;
7992
$topleftmenu-color: #212121;
8093
$roomtopic-color: #9e9e9e;
8194
$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
82-
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
95+
$panel-gradient: rgba(242, 245, 248, 0),
96+
rgba(242, 245, 248, 1);
8397
$h3-color: #3d3b39;
8498
$event-highlight-bg-color: $yellow-background;
8599
$header-panel-text-primary-color: #91A1C0;
@@ -296,6 +310,7 @@ $focus-brightness: 105%;
296310
:root {
297311
--lp-background-blur: 40px;
298312
}
313+
299314
// ********************
300315

301316
// Icon URLs
@@ -330,8 +345,7 @@ $location-live-secondary-color: #deddfd;
330345
outline: none;
331346
}
332347

333-
@define-mixin mx_DialogButton_hover {
334-
}
348+
@define-mixin mx_DialogButton_hover {}
335349

336350
@define-mixin mx_DialogButton_danger {
337351
background-color: $accent;
@@ -355,6 +369,7 @@ $location-live-secondary-color: #deddfd;
355369
color: $accent;
356370
text-decoration: none;
357371
}
372+
358373
// ********************
359374

360375
// diff highlight colors
@@ -366,4 +381,5 @@ $location-live-secondary-color: #deddfd;
366381
.hljs-deletion {
367382
background: #fdd;
368383
}
384+
369385
// ********************

‎src/components/structures/ThreadPanel.tsx‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,14 @@ import { Layout } from '../../settings/enums/Layout';
3131
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
3232
import Measured from '../views/elements/Measured';
3333
import PosthogTrackers from "../../PosthogTrackers";
34-
import { ButtonEvent } from "../views/elements/AccessibleButton";
34+
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
35+
import { BetaPill } from '../views/beta/BetaCard';
36+
import SdkConfig from '../../SdkConfig';
37+
import Modal from '../../Modal';
38+
import BetaFeedbackDialog from '../views/dialogs/BetaFeedbackDialog';
39+
import { Action } from '../../dispatcher/actions';
40+
import { UserTab } from '../views/dialogs/UserSettingsDialog';
41+
import dis from '../../dispatcher/dispatcher';
3542

3643
interface IProps {
3744
roomId: string;
@@ -233,6 +240,12 @@ const ThreadPanel: React.FC<IProps> = ({
233240
}
234241
}, [timelineSet, timelinePanel]);
235242

243+
const openFeedback = SdkConfig.get().bug_report_endpoint_url ? () => {
244+
Modal.createTrackedDialog("Threads Feedback", "feature_thread", BetaFeedbackDialog, {
245+
featureId: "feature_thread",
246+
});
247+
} : null;
248+
236249
return (
237250
<RoomContext.Provider value={{
238251
...roomContext,
@@ -246,6 +259,22 @@ const ThreadPanel: React.FC<IProps> = ({
246259
setFilterOption={setFilterOption}
247260
empty={threadCount === 0}
248261
/>}
262+
footer={<>
263+
<BetaPill
264+
tooltipTitle={_t("Threads are a beta feature")}
265+
tooltipCaption={_t("Click for more info")}
266+
onClick={() => {
267+
dis.dispatch({
268+
action: Action.ViewUserSettings,
269+
initialTabId: UserTab.Labs,
270+
});
271+
}}
272+
/>
273+
{ openFeedback && _t("<a>Give feedback</a>", {}, {
274+
a: sub =>
275+
<AccessibleButton kind="link_inline" onClick={openFeedback}>{ sub }</AccessibleButton>,
276+
}) }
277+
</>}
249278
className="mx_ThreadPanel"
250279
onClose={onClose}
251280
withoutScrollContainer={true}

0 commit comments

Comments
 (0)