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

Commit b5ac949

Browse files
SimonBrandnerSimonBrandner
authored
Improve pills (#6398)
1 parent c79596c commit b5ac949

File tree

15 files changed

+176
-184
lines changed

15 files changed

+176
-184
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@
163163
@import "./views/elements/_InviteReason.scss";
164164
@import "./views/elements/_ManageIntegsButton.scss";
165165
@import "./views/elements/_MiniAvatarUploader.scss";
166+
@import "./views/elements/_Pill.scss";
166167
@import "./views/elements/_PowerSelector.scss";
167168
@import "./views/elements/_ProgressBar.scss";
168169
@import "./views/elements/_QRCode.scss";

‎res/css/structures/_RoomDirectory.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ limitations under the License.
155155
line-height: $font-20px;
156156
padding: 0 5px;
157157
color: $accent-fg-color;
158-
background-color: $rte-room-pill-color;
158+
background-color: $pill-bg-color;
159159
}
160160

161161
.mx_RoomDirectory_topic {

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
Copyright 2021 Šimon Brandner <[email protected]>
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_Pill {
18+
padding: $font-1px 0.4em $font-1px 0;
19+
line-height: $font-17px;
20+
border-radius: $font-16px;
21+
vertical-align: text-top;
22+
display: inline-flex;
23+
align-items: center;
24+
25+
cursor: pointer;
26+
27+
color: $accent-fg-color !important; // To override .markdown-body
28+
background-color: $pill-bg-color !important; // To override .markdown-body
29+
30+
&.mx_UserPill_me,
31+
&.mx_AtRoomPill {
32+
background-color: $alert !important; // To override .markdown-body
33+
}
34+
35+
&:hover {
36+
background-color: $pill-hover-bg-color !important; // To override .markdown-body
37+
}
38+
39+
&.mx_UserPill_me:hover {
40+
background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
41+
}
42+
43+
// We don't want to indicate clickability
44+
&.mx_AtRoomPill:hover {
45+
background-color: $alert !important; // To override .markdown-body
46+
cursor: unset;
47+
}
48+
49+
.mx_BaseAvatar {
50+
position: relative;
51+
display: inline-flex;
52+
align-items: center;
53+
border-radius: 10rem;
54+
margin-right: 0.24rem;
55+
}
56+
57+
a& {
58+
text-overflow: ellipsis;
59+
white-space: nowrap;
60+
overflow: hidden;
61+
max-width: calc(100% - 1ch);
62+
text-decoration: none !important; // To override .markdown-body
63+
}
64+
}

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

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,6 @@
22
// naming scheme; it's completely unclear where or how they're being used
33
// --Matthew
44

5-
.mx_UserPill,
6-
.mx_RoomPill,
7-
.mx_AtRoomPill {
8-
display: inline-flex;
9-
align-items: center;
10-
vertical-align: middle;
11-
border-radius: $font-16px;
12-
line-height: $font-15px;
13-
padding-left: 0;
14-
}
15-
16-
a.mx_Pill {
17-
text-overflow: ellipsis;
18-
white-space: nowrap;
19-
overflow: hidden;
20-
max-width: 100%;
21-
}
22-
23-
.mx_Pill {
24-
padding: $font-1px;
25-
padding-right: 0.4em;
26-
vertical-align: text-top;
27-
line-height: $font-17px;
28-
}
29-
30-
/* More specific to override `.markdown-body a` text-decoration */
31-
.mx_EventTile_content .markdown-body a.mx_Pill {
32-
text-decoration: none;
33-
}
34-
35-
/* More specific to override `.markdown-body a` color */
36-
.mx_EventTile_content .markdown-body a.mx_UserPill,
37-
.mx_UserPill {
38-
color: $primary-content;
39-
background-color: $other-user-pill-bg-color;
40-
}
41-
42-
.mx_UserPill_selected {
43-
background-color: $accent !important;
44-
}
45-
46-
/* More specific to override `.markdown-body a` color */
47-
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
48-
.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
49-
.mx_EventTile_content .mx_AtRoomPill,
50-
.mx_MessageComposer_input .mx_AtRoomPill {
51-
color: $accent-fg-color;
52-
background-color: $alert;
53-
}
54-
55-
/* More specific to override `.markdown-body a` color */
56-
.mx_EventTile_content .markdown-body a.mx_RoomPill,
57-
.mx_RoomPill {
58-
color: $accent-fg-color;
59-
background-color: $rte-room-pill-color;
60-
}
61-
62-
.mx_EventTile_body .mx_UserPill,
63-
.mx_EventTile_body .mx_RoomPill {
64-
cursor: pointer;
65-
}
66-
67-
.mx_UserPill .mx_BaseAvatar,
68-
.mx_RoomPill .mx_BaseAvatar,
69-
.mx_AtRoomPill .mx_BaseAvatar {
70-
position: relative;
71-
display: inline-flex;
72-
align-items: center;
73-
border-radius: 10rem;
74-
margin-right: 0.24rem;
75-
pointer-events: none;
76-
}
77-
78-
.mx_Emoji {
79-
// Should be 1.8rem for our default 1.4rem message bodies,
80-
// and scale with the size of the surrounding text
81-
font-size: calc(18 / 14 * 1em);
82-
vertical-align: bottom;
83-
}
84-
855
.mx_Markdown_BOLD {
866
font-weight: bold;
877
}

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,15 @@ limitations under the License.
5151
}
5252

5353
&.mx_BasicMessageComposer_input_shouldShowPillAvatar {
54-
span.mx_UserPill, span.mx_RoomPill {
55-
position: relative;
54+
span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill {
5655
user-select: all;
56+
position: relative;
57+
cursor: unset; // We don't want indicate clickability
58+
59+
&:hover {
60+
// We don't want indicate clickability | To override the overriding of .markdown-body
61+
background-color: $pill-bg-color !important;
62+
}
5763

5864
// avatar psuedo element
5965
&::before {
@@ -72,14 +78,6 @@ limitations under the License.
7278
font-size: $font-10-4px;
7379
}
7480
}
75-
76-
span.mx_UserPill {
77-
cursor: pointer;
78-
}
79-
80-
span.mx_RoomPill {
81-
cursor: default;
82-
}
8381
}
8482

8583
&.mx_BasicMessageComposer_input_disabled {

‎res/themes/dark/css/_dark.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ $roomheader-addroom-fg-color: $primary-content;
9494

9595
// Rich-text-editor
9696
// ********************
97-
$rte-room-pill-color: $room-highlight-color;
98-
$other-user-pill-bg-color: $room-highlight-color;
97+
$pill-bg-color: $room-highlight-color;
98+
$pill-hover-bg-color: #545a66;
9999
// ********************
100100

101101
// Inputs

‎res/themes/legacy-dark/css/_legacy-dark.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ $light-fg-color: $header-panel-text-secondary-color;
2727
// used for focusing form controls
2828
$focus-bg-color: $room-highlight-color;
2929

30-
$other-user-pill-bg-color: $room-highlight-color;
31-
$rte-room-pill-color: $room-highlight-color;
30+
$pill-bg-color: $room-highlight-color;
31+
$pill-hover-bg-color: #545a66;
3232

3333
// informational plinth
3434
$info-plinth-bg-color: $header-panel-bg-color;

‎res/themes/legacy-light/css/_legacy-light.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,6 @@ $selection-fg-color: $primary-bg-color;
3737

3838
$focus-brightness: 105%;
3939

40-
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
41-
4240
// informational plinth
4341
$info-plinth-bg-color: #f7f7f7;
4442
$info-plinth-fg-color: #888;
@@ -117,10 +115,12 @@ $settings-subsection-fg-color: #61708b;
117115

118116
$rte-bg-color: #e9e9e9;
119117
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
120-
$rte-room-pill-color: #aaa;
121118

122119
$header-panel-text-primary-color: #91a1c0;
123120

121+
$pill-bg-color: #aaa;
122+
$pill-hover-bg-color: #ccc;
123+
124124
$topleftmenu-color: #212121;
125125
$roomheader-bg-color: $primary-bg-color;
126126
$roomheader-addroom-bg-color: #91a1c0;

‎res/themes/light-custom/css/_custom.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,5 +142,6 @@ $eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-colo
142142
$reaction-row-button-selected-bg-color: var(--reaction-row-button-selected-bg-color, $reaction-row-button-selected-bg-color);
143143

144144
$menu-selected-color: var(--menu-selected-color, $menu-selected-color);
145-
$other-user-pill-bg-color: var(--other-user-pill-bg-color, $other-user-pill-bg-color);
145+
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
146+
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
146147
$icon-button-color: var(--icon-button-color, $icon-button-color);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ $roomheader-addroom-fg-color: #5c6470;
147147

148148
// Rich-text-editor
149149
// ********************
150-
$rte-room-pill-color: #aaa;
151-
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
150+
$pill-bg-color: #aaa;
151+
$pill-hover-bg-color: #ccc;
152152
$rte-bg-color: #e9e9e9;
153153
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
154154
// ********************

0 commit comments

Comments
 (0)