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

Commit 0766519

Browse files
t3chguyt3chguy
authored
Merge pull request #5398 from matrix-org/t3chguy/fix/8141
Improvements around new room empty space interactions
2 parents 50bce64 + 80bb091 commit 0766519

32 files changed

+644
-413
lines changed

‎res/css/_components.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
@import "./views/elements/_InfoTooltip.scss";
116116
@import "./views/elements/_InlineSpinner.scss";
117117
@import "./views/elements/_ManageIntegsButton.scss";
118+
@import "./views/elements/_MiniAvatarUploader.scss";
118119
@import "./views/elements/_PowerSelector.scss";
119120
@import "./views/elements/_ProgressBar.scss";
120121
@import "./views/elements/_QRCode.scss";
@@ -139,6 +140,7 @@
139140
@import "./views/groups/_GroupUserSettings.scss";
140141
@import "./views/messages/_CreateEvent.scss";
141142
@import "./views/messages/_DateSeparator.scss";
143+
@import "./views/messages/_EventTileBubble.scss";
142144
@import "./views/messages/_MEmoteBody.scss";
143145
@import "./views/messages/_MFileBody.scss";
144146
@import "./views/messages/_MImageBody.scss";
@@ -182,6 +184,7 @@
182184
@import "./views/rooms/_MemberList.scss";
183185
@import "./views/rooms/_MessageComposer.scss";
184186
@import "./views/rooms/_MessageComposerFormatBar.scss";
187+
@import "./views/rooms/_NewRoomIntro.scss";
185188
@import "./views/rooms/_NotificationBadge.scss";
186189
@import "./views/rooms/_PinnedEventTile.scss";
187190
@import "./views/rooms/_PinnedEventsPanel.scss";

‎res/css/structures/_HomePage.scss

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -50,42 +50,8 @@ limitations under the License.
5050
color: $muted-fg-color;
5151
}
5252

53-
.mx_HomePage_userAvatar {
54-
position: relative;
55-
width: min-content;
53+
.mx_MiniAvatarUploader {
5654
margin: 0 auto;
57-
58-
&::before, &::after {
59-
content: '';
60-
position: absolute;
61-
62-
height: 26px;
63-
width: 26px;
64-
65-
right: -6px;
66-
bottom: -6px;
67-
}
68-
69-
&::before {
70-
background-color: $primary-bg-color;
71-
border-radius: 50%;
72-
z-index: 1;
73-
}
74-
75-
&::after {
76-
background-color: $secondary-fg-color;
77-
mask-position: center;
78-
mask-repeat: no-repeat;
79-
mask-image: url('$(res)/img/element-icons/camera.svg');
80-
mask-size: 16px;
81-
z-index: 2;
82-
}
83-
84-
&.mx_HomePage_userAvatar_busy::after {
85-
background: url("$(res)/img/spinner.gif") no-repeat center;
86-
background-size: 80%;
87-
mask: unset;
88-
}
8955
}
9056

9157
.mx_HomePage_default_buttons {

‎res/css/structures/_RoomStatusBar.scss

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -153,16 +153,6 @@ limitations under the License.
153153
display: block;
154154
}
155155

156-
.mx_RoomStatusBar_isAlone {
157-
height: 50px;
158-
line-height: $font-50px;
159-
160-
color: $primary-fg-color;
161-
opacity: 0.5;
162-
overflow-y: hidden;
163-
display: block;
164-
}
165-
166156
.mx_MatrixChat_useCompactLayout {
167157
.mx_RoomStatusBar {
168158
min-height: 40px;

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
Copyright 2020 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_MiniAvatarUploader {
18+
position: relative;
19+
width: min-content;
20+
21+
&::before, &::after {
22+
content: '';
23+
position: absolute;
24+
25+
height: 26px;
26+
width: 26px;
27+
28+
right: -6px;
29+
bottom: -6px;
30+
}
31+
32+
&::before {
33+
background-color: $primary-bg-color;
34+
border-radius: 50%;
35+
z-index: 1;
36+
}
37+
38+
&::after {
39+
background-color: $secondary-fg-color;
40+
mask-position: center;
41+
mask-repeat: no-repeat;
42+
mask-image: url('$(res)/img/element-icons/camera.svg');
43+
mask-size: 16px;
44+
z-index: 2;
45+
}
46+
47+
&.mx_MiniAvatarUploader_busy::after {
48+
background: url("$(res)/img/spinner.gif") no-repeat center;
49+
background-size: 80%;
50+
mask: unset;
51+
}
52+
}
53+
54+
.mx_MiniAvatarUploader_input {
55+
display: none;
56+
}

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

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2018 New Vector Ltd
2+
Copyright 2018, 2020 The Matrix.org Foundation C.I.C.
33
44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
@@ -15,25 +15,8 @@ limitations under the License.
1515
*/
1616

1717
.mx_CreateEvent {
18-
background-color: $info-plinth-bg-color;
19-
padding-left: 20px;
20-
padding-right: 20px;
21-
padding-top: 10px;
22-
padding-bottom: 10px;
23-
}
24-
25-
.mx_CreateEvent_image {
26-
float: left;
27-
margin-right: 20px;
28-
width: 72px;
29-
height: 34px;
30-
31-
background-color: $primary-fg-color;
32-
mask: url('$(res)/img/room-continuation.svg');
33-
mask-repeat: no-repeat;
34-
mask-position: center;
35-
}
36-
37-
.mx_CreateEvent_header {
38-
font-weight: bold;
18+
&::before {
19+
background-color: $composer-e2e-icon-color;
20+
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
21+
}
3922
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*
2+
Copyright 2019, 2020 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_EventTileBubble {
18+
background-color: $dark-panel-bg-color;
19+
padding: 10px;
20+
border-radius: 8px;
21+
margin: 10px auto;
22+
max-width: 75%;
23+
box-sizing: border-box;
24+
display: grid;
25+
grid-template-columns: 24px minmax(0, 1fr) min-content;
26+
27+
&::before, &::after {
28+
position: relative;
29+
grid-column: 1;
30+
grid-row: 1 / 3;
31+
width: 16px;
32+
height: 16px;
33+
content: "";
34+
top: 0;
35+
bottom: 0;
36+
left: 0;
37+
right: 0;
38+
mask-repeat: no-repeat;
39+
mask-position: center;
40+
mask-size: contain;
41+
margin-top: 4px;
42+
}
43+
44+
.mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
45+
overflow-wrap: break-word;
46+
}
47+
48+
.mx_EventTileBubble_title {
49+
font-weight: 600;
50+
font-size: $font-15px;
51+
grid-column: 2;
52+
grid-row: 1;
53+
}
54+
55+
.mx_EventTileBubble_subtitle {
56+
font-size: $font-12px;
57+
grid-column: 2;
58+
grid-row: 2;
59+
}
60+
}

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

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,8 @@ limitations under the License.
1515
*/
1616

1717
.mx_MJitsiWidgetEvent {
18-
display: grid;
19-
grid-template-columns: 24px minmax(0, 1fr) min-content;
20-
2118
&::before {
22-
grid-column: 1;
23-
grid-row: 1 / 3;
24-
width: 16px;
25-
height: 16px;
26-
content: "";
27-
top: 0;
28-
bottom: 0;
29-
left: 0;
30-
right: 0;
31-
mask-repeat: no-repeat;
32-
mask-position: center;
33-
mask-size: contain;
3419
background-color: $composer-e2e-icon-color; // XXX: Variable abuse
35-
margin-top: 4px;
3620
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
3721
}
38-
39-
.mx_MJitsiWidgetEvent_title {
40-
font-weight: 600;
41-
font-size: $font-15px;
42-
grid-column: 2;
43-
grid-row: 1;
44-
}
45-
46-
.mx_MJitsiWidgetEvent_subtitle {
47-
grid-column: 2;
48-
grid-row: 2;
49-
}
50-
51-
.mx_MJitsiWidgetEvent_title,
52-
.mx_MJitsiWidgetEvent_subtitle {
53-
overflow-wrap: break-word;
54-
}
5522
}

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

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,6 @@ limitations under the License.
1515
*/
1616

1717
.mx_cryptoEvent {
18-
display: grid;
19-
grid-template-columns: 24px minmax(0, 1fr) min-content;
20-
21-
&.mx_cryptoEvent_icon::before,
22-
&.mx_cryptoEvent_icon::after {
23-
grid-column: 1;
24-
grid-row: 1 / 3;
25-
width: 16px;
26-
height: 16px;
27-
content: "";
28-
top: 0;
29-
bottom: 0;
30-
left: 0;
31-
right: 0;
32-
mask-repeat: no-repeat;
33-
mask-position: center;
34-
mask-size: contain;
35-
mask-image: url('$(res)/img/e2e/normal.svg');
36-
background-color: $composer-e2e-icon-color;
37-
margin-top: 4px;
38-
}
39-
4018
// white infill for the transparency
4119
&.mx_cryptoEvent_icon::before {
4220
background-color: #ffffff;
@@ -46,6 +24,11 @@ limitations under the License.
4624
mask-size: 90%;
4725
}
4826

27+
&.mx_cryptoEvent_icon::after {
28+
mask-image: url('$(res)/img/e2e/normal.svg');
29+
background-color: $composer-e2e-icon-color;
30+
}
31+
4932
&.mx_cryptoEvent_icon_verified::after {
5033
mask-image: url("$(res)/img/e2e/verified.svg");
5134
background-color: $accent-color;
@@ -56,25 +39,6 @@ limitations under the License.
5639
background-color: $notice-primary-color;
5740
}
5841

59-
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {
60-
overflow-wrap: break-word;
61-
}
62-
63-
.mx_cryptoEvent_title {
64-
font-weight: 600;
65-
font-size: $font-15px;
66-
grid-column: 2;
67-
grid-row: 1;
68-
}
69-
70-
.mx_cryptoEvent_subtitle {
71-
grid-column: 2;
72-
grid-row: 2;
73-
}
74-
75-
.mx_cryptoEvent_state, .mx_cryptoEvent_subtitle {
76-
font-size: $font-12px;
77-
}
7842

7943
.mx_cryptoEvent_state, .mx_cryptoEvent_buttons {
8044
grid-column: 3;
@@ -92,5 +56,7 @@ limitations under the License.
9256
margin: auto 0;
9357
text-align: center;
9458
color: $notice-secondary-color;
59+
overflow-wrap: break-word;
60+
font-size: $font-12px;
9561
}
9662
}

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,6 @@ $left-gutter: 64px;
2525
position: relative;
2626
}
2727

28-
.mx_EventTile_bubble {
29-
background-color: $dark-panel-bg-color;
30-
padding: 10px;
31-
border-radius: 5px;
32-
margin: 10px auto;
33-
max-width: 75%;
34-
box-sizing: border-box;
35-
}
36-
3728
.mx_EventTile.mx_EventTile_info {
3829
padding-top: 0px;
3930
}
@@ -131,9 +122,10 @@ $left-gutter: 64px;
131122
grid-template-columns: 1fr 100px;
132123

133124
.mx_EventTile_line {
134-
margin-right: 0px;
125+
margin-right: 0;
135126
grid-column: 1 / 3;
136-
padding: 0;
127+
// override default padding of mx_EventTile_line so that we can be centered
128+
padding: 0 !important;
137129
}
138130

139131
.mx_EventTile_msgOption {

0 commit comments

Comments
 (0)