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

Commit f14374a

Browse files
Germaint3chguy
Germain
and
t3chguy
authored
Improve composer visiblity (#8578)
Co-authored-by: Michael Telatynski <[email protected]>
1 parent 8c13a0f commit f14374a

File tree

18 files changed

+325
-176
lines changed

18 files changed

+325
-176
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
@import "./views/avatars/_DecoratedRoomAvatar.scss";
8484
@import "./views/avatars/_WidgetAvatar.scss";
8585
@import "./views/beta/_BetaCard.scss";
86+
@import "./views/buttons/_Cancel.scss";
8687
@import "./views/context_menus/_CallContextMenu.scss";
8788
@import "./views/context_menus/_DeviceContextMenu.scss";
8889
@import "./views/context_menus/_IconizedContextMenu.scss";

‎res/css/structures/_RoomView.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ limitations under the License.
3232
position: relative;
3333
}
3434

35+
.mx_MainSplit_timeline {
36+
.mx_MessageComposer_wrapper {
37+
margin: $spacing-8 $spacing-16;
38+
}
39+
}
40+
3541
.mx_RoomView_auxPanel {
3642
min-width: 0px;
3743
width: 100%;
@@ -155,7 +161,7 @@ limitations under the License.
155161
.mx_RoomView_messageListWrapper {
156162
justify-content: flex-start;
157163

158-
>.mx_RoomView_MessageList > li > ol {
164+
> .mx_RoomView_MessageList > li > ol {
159165
list-style-type: none;
160166
}
161167
}

‎res/css/views/buttons/_Cancel.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_CancelButton {
18+
width: var(--size);
19+
height: var(--size);
20+
21+
box-sizing: border-box;
22+
padding: calc(var(--size) / 4);
23+
border-radius: 50%;
24+
25+
line-height: 0;
26+
background: $quinary-content;
27+
28+
svg {
29+
width: calc(var(--size) / 2);
30+
color: $secondary-content;
31+
}
32+
}

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

Lines changed: 104 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,48 @@ limitations under the License.
2020
margin: auto;
2121
border-top: 1px solid $primary-hairline-color;
2222
position: relative;
23-
padding-left: 42px;
24-
padding-right: 16px;
25-
}
2623

27-
.mx_MessageComposer_replaced_wrapper {
28-
margin-left: auto;
29-
margin-right: auto;
30-
}
24+
display: grid;
25+
grid-template:
26+
"reply reply" auto
27+
"composer controls" auto
28+
/ 1fr auto;
3129

32-
.mx_MessageComposer_replaced_valign {
33-
height: 60px;
34-
display: table-cell;
35-
vertical-align: middle;
36-
}
30+
.mx_ReplyPreview {
31+
grid-area: reply;
32+
}
3733

38-
.mx_MessageComposer_roomReplaced_icon {
39-
float: left;
40-
margin-right: 20px;
41-
margin-top: 5px;
42-
width: 31px;
43-
height: 31px;
44-
}
34+
.mx_MessageComposer_row {
35+
grid-area: composer;
36+
}
37+
38+
.mx_MessageComposer_controls {
39+
grid-area: controls;
40+
display: flex;
41+
align-items: flex-end;
42+
margin-bottom: 2px;
43+
}
44+
45+
>[role=button] {
46+
margin-bottom: 7px;
47+
}
48+
49+
.mx_VoiceRecordComposerTile_delete {
50+
margin-bottom: 9px;
51+
}
52+
53+
.mx_VoiceRecordComposerTile_stop,
54+
.mx_MessageComposer_sendMessage {
55+
margin-bottom: $spacing-4;
56+
}
4557

46-
.mx_MessageComposer_roomReplaced_header {
47-
font-weight: bold;
58+
.mx_VoiceMessagePrimaryContainer {
59+
margin-right: $spacing-8;
60+
}
61+
62+
a {
63+
color: $accent;
64+
}
4865
}
4966

5067
.mx_MessageComposer_autocomplete_wrapper {
@@ -56,7 +73,36 @@ limitations under the License.
5673
display: flex;
5774
flex-direction: row;
5875
align-items: center;
59-
width: 100%;
76+
border: 1px solid $quaternary-content;
77+
border-radius: 12px;
78+
padding: $spacing-12 $spacing-8;
79+
margin-right: $spacing-16;
80+
81+
transition: border-color var(--transition-short);
82+
83+
&[data-notice=true] {
84+
border-color: transparent;
85+
color: $secondary-content;
86+
87+
p {
88+
margin: 0;
89+
line-height: 0;
90+
}
91+
92+
svg {
93+
vertical-align: middle;
94+
position: relative;
95+
top: -2px;
96+
}
97+
}
98+
99+
&:focus-within {
100+
border-color: $tertiary-content;
101+
}
102+
103+
&[aria-disabled=true] {
104+
cursor: not-allowed;
105+
}
60106
}
61107

62108
.mx_MessageComposer .mx_MessageComposer_avatar {
@@ -73,22 +119,16 @@ limitations under the License.
73119
}
74120

75121
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
76-
position: absolute;
77-
left: 20px;
78-
margin-right: 0; // Counteract the E2EIcon class
79-
margin-left: 3px; // Counteract the E2EIcon class
122+
margin: 0 0 2px;
80123
width: 12px;
81124
height: 12px;
125+
align-self: end;
82126
}
83127

84128
.mx_MessageComposer_noperm_error {
85-
width: 100%;
86-
height: 60px;
87129
font-style: italic;
88-
color: $info-plinth-fg-color;
89-
display: flex;
90-
align-items: center;
91-
justify-content: center;
130+
color: $tertiary-content;
131+
font-size: $font-12px;
92132
}
93133

94134
.mx_MessageComposer_input_wrapper {
@@ -124,13 +164,19 @@ limitations under the License.
124164
.mx_MessageComposer_editor > :first-child {
125165
margin-top: 0 !important;
126166
}
167+
127168
.mx_MessageComposer_editor > :last-child {
128169
margin-bottom: 0 !important;
129170
}
130171

131172
@keyframes visualbell {
132-
from { background-color: $visual-bell-bg-color; }
133-
to { background-color: $background; }
173+
from {
174+
background-color: $visual-bell-bg-color;
175+
}
176+
177+
to {
178+
background-color: $background;
179+
}
134180
}
135181

136182
.mx_MessageComposer_input_error {
@@ -166,12 +212,14 @@ limitations under the License.
166212
color: $accent;
167213
opacity: 1.0;
168214
}
215+
169216
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
170217
color: $accent;
171218
}
172219

173220
.mx_MessageComposer_button_highlight {
174221
background: rgba($accent, 0.25);
222+
175223
// make the icon the accent color too
176224
&::before {
177225
background-color: $accent !important;
@@ -188,6 +236,7 @@ limitations under the License.
188236
padding-left: var(--size);
189237
border-radius: 50%;
190238
margin-right: 6px;
239+
margin-bottom: 7px;
191240

192241
&:last-child {
193242
margin-right: auto;
@@ -261,11 +310,30 @@ limitations under the License.
261310
mask-image: url('$(res)/img/image-view/more.svg');
262311
}
263312

313+
.mx_MessageComposer_sendMessageWrapper {
314+
--sendMessageSize: 32px;
315+
transition: all var(--transition-short);
316+
}
317+
318+
.mx_MessageComposer_sendMessageWrapper,
319+
.mx_MessageComposer_sendMessageWrapper-enter,
320+
.mx_MessageComposer_sendMessageWrapper-exit {
321+
width: 0;
322+
transform: scale(.6);
323+
opacity: 0;
324+
}
325+
326+
.mx_MessageComposer_sendMessageWrapper-enter-active {
327+
width: var(--sendMessageSize);
328+
transform: scale(1);
329+
opacity: 1;
330+
}
331+
264332
.mx_MessageComposer_sendMessage {
265333
cursor: pointer;
266334
position: relative;
267-
width: 32px;
268-
height: 32px;
335+
width: var(--sendMessageSize);
336+
height: var(--sendMessageSize);
269337
border-radius: 100%;
270338
background-color: $accent;
271339

@@ -358,10 +426,6 @@ limitations under the License.
358426
.mx_MessageComposer_input {
359427
min-height: 50px;
360428
}
361-
362-
.mx_MessageComposer_noperm_error {
363-
height: 50px;
364-
}
365429
}
366430

367431
/**
@@ -371,21 +435,7 @@ limitations under the License.
371435
.mx_MessageComposer.mx_MessageComposer--compact {
372436
margin-right: 0;
373437

374-
.mx_MessageComposer_wrapper {
375-
padding: 0 0 0 25px;
376-
}
377-
378-
&:not(.mx_MessageComposer_e2eStatus) {
379-
.mx_MessageComposer_wrapper {
380-
padding: 0;
381-
}
382-
}
383-
384438
.mx_MessageComposer_button:last-child {
385439
margin-right: 0;
386440
}
387-
388-
.mx_MessageComposer_e2eIcon {
389-
left: 0;
390-
}
391441
}

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

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,48 +15,44 @@ limitations under the License.
1515
*/
1616

1717
.mx_ReplyPreview {
18-
border: 1px solid $primary-hairline-color;
18+
border: 1px solid $system;
19+
20+
margin-left: calc(-1 * $spacing-16);
21+
margin-right: calc(-1 * $spacing-16);
22+
padding: $spacing-8 $spacing-16 0 $spacing-16;
23+
24+
border-top-left-radius: 16px;
25+
border-top-right-radius: 16px;
26+
1927
border-bottom: none;
2028
background: $background;
2129
max-height: 50vh;
2230
overflow: auto;
31+
}
2332

24-
.mx_ReplyPreview_section {
25-
border-bottom: 1px solid $primary-hairline-color;
26-
display: flex;
27-
flex-flow: column;
28-
row-gap: $spacing-8;
29-
padding: $spacing-8 $spacing-8 0 $spacing-8;
30-
31-
.mx_ReplyPreview_header {
32-
display: flex;
33-
justify-content: space-between;
34-
column-gap: 8px;
35-
36-
color: $primary-content;
37-
font-weight: 400;
38-
opacity: 0.4;
39-
40-
.mx_ReplyPreview_header_cancel {
41-
background-color: $primary-content;
42-
mask: url('$(res)/img/cancel.svg');
43-
mask-repeat: no-repeat;
44-
mask-position: center;
45-
mask-size: 18px;
46-
width: 18px;
47-
height: 18px;
48-
min-width: 18px;
49-
min-height: 18px;
50-
}
51-
}
33+
.mx_ReplyPreview_header {
34+
display: flex;
35+
font-size: $font-12px;
36+
color: $secondary-content;
37+
position: relative;
38+
39+
> svg {
40+
width: 1em;
41+
vertical-align: middle;
42+
margin-right: $spacing-8;
5243
}
53-
}
5444

55-
.mx_RoomView_body {
56-
.mx_ReplyPreview {
57-
// Add box-shadow to the reply preview on the main (left) panel only.
58-
// It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
59-
box-shadow: 0px -16px 32px $composer-shadow-color;
60-
border-radius: 8px 8px 0 0;
45+
.mx_CancelButton {
46+
position: absolute;
47+
right: 0;
48+
top: 50%;
49+
transform: translateY(-50%);
6150
}
6251
}
52+
53+
.mx_ReplyPreview_header_cancel {
54+
position: absolute;
55+
right: 0;
56+
color: $primary-content;
57+
width: 18px;
58+
}

0 commit comments

Comments
 (0)