Improve pills (#6398)

matrix-org · May 5, 2022 · b5ac949 · b5ac949
1 parent c79596c
commit b5ac949
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 184 deletions.
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -163,6 +163,7 @@
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
+@import "./views/elements/_Pill.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_QRCode.scss";

diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
@@ -155,7 +155,7 @@ limitations under the License.
     line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
+    background-color: $pill-bg-color;
 }
 
 .mx_RoomDirectory_topic {

diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss
@@ -0,0 +1,64 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Pill {
+    padding: $font-1px 0.4em $font-1px 0;
+    line-height: $font-17px;
+    border-radius: $font-16px;
+    vertical-align: text-top;
+    display: inline-flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    color: $accent-fg-color !important; // To override .markdown-body
+    background-color: $pill-bg-color !important; // To override .markdown-body
+
+    &.mx_UserPill_me,
+    &.mx_AtRoomPill {
+        background-color: $alert !important; // To override .markdown-body
+    }
+
+    &:hover {
+        background-color: $pill-hover-bg-color !important; // To override .markdown-body
+    }
+
+    &.mx_UserPill_me:hover {
+        background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
+    }
+
+    // We don't want to indicate clickability
+    &.mx_AtRoomPill:hover {
+        background-color: $alert !important; // To override .markdown-body
+        cursor: unset;
+    }
+
+    .mx_BaseAvatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 10rem;
+        margin-right: 0.24rem;
+    }
+
+    a& {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: calc(100% - 1ch);
+        text-decoration: none !important; // To override .markdown-body
+    }
+}
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
@@ -2,86 +2,6 @@
 // naming scheme; it's completely unclear where or how they're being used
 // --Matthew
 
-.mx_UserPill,
-.mx_RoomPill,
-.mx_AtRoomPill {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    border-radius: $font-16px;
-    line-height: $font-15px;
-    padding-left: 0;
-}
-
-a.mx_Pill {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-}
-
-.mx_Pill {
-    padding: $font-1px;
-    padding-right: 0.4em;
-    vertical-align: text-top;
-    line-height: $font-17px;
-}
-
-/* More specific to override `.markdown-body a` text-decoration */
-.mx_EventTile_content .markdown-body a.mx_Pill {
-    text-decoration: none;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_UserPill,
-.mx_UserPill {
-    color: $primary-content;
-    background-color: $other-user-pill-bg-color;
-}
-
-.mx_UserPill_selected {
-    background-color: $accent !important;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
-.mx_EventTile_content .markdown-body a.mx_AtRoomPill,
-.mx_EventTile_content .mx_AtRoomPill,
-.mx_MessageComposer_input .mx_AtRoomPill {
-    color: $accent-fg-color;
-    background-color: $alert;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_RoomPill,
-.mx_RoomPill {
-    color: $accent-fg-color;
-    background-color: $rte-room-pill-color;
-}
-
-.mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill {
-    cursor: pointer;
-}
-
-.mx_UserPill .mx_BaseAvatar,
-.mx_RoomPill .mx_BaseAvatar,
-.mx_AtRoomPill .mx_BaseAvatar {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    border-radius: 10rem;
-    margin-right: 0.24rem;
-    pointer-events: none;
-}
-
-.mx_Emoji {
-    // Should be 1.8rem for our default 1.4rem message bodies,
-    // and scale with the size of the surrounding text
-    font-size: calc(18 / 14 * 1em);
-    vertical-align: bottom;
-}
-
 .mx_Markdown_BOLD {
     font-weight: bold;
 }

diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -51,9 +51,15 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
-            span.mx_UserPill, span.mx_RoomPill {
-                position: relative;
+            span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill {
                 user-select: all;
+                position: relative;
+                cursor: unset; // We don't want indicate clickability
+
+                &:hover {
+                    // We don't want indicate clickability | To override the overriding of .markdown-body
+                    background-color: $pill-bg-color !important;
+                }
 
                 // avatar psuedo element
                 &::before {
@@ -72,14 +78,6 @@ limitations under the License.
                     font-size: $font-10-4px;
                 }
             }
-
-            span.mx_UserPill {
-                cursor: pointer;
-            }
-
-            span.mx_RoomPill {
-                cursor: default;
-            }
         }
 
         &.mx_BasicMessageComposer_input_disabled {

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -94,8 +94,8 @@ $roomheader-addroom-fg-color: $primary-content;
 
 // Rich-text-editor
 // ********************
-$rte-room-pill-color: $room-highlight-color;
-$other-user-pill-bg-color: $room-highlight-color;
+$pill-bg-color: $room-highlight-color;
+$pill-hover-bg-color: #545a66;
 // ********************
 
 // Inputs

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -27,8 +27,8 @@ $light-fg-color: $header-panel-text-secondary-color;
 // used for focusing form controls
 $focus-bg-color: $room-highlight-color;
 
-$other-user-pill-bg-color: $room-highlight-color;
-$rte-room-pill-color: $room-highlight-color;
+$pill-bg-color: $room-highlight-color;
+$pill-hover-bg-color: #545a66;
 
 // informational plinth
 $info-plinth-bg-color: $header-panel-bg-color;

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -37,8 +37,6 @@ $selection-fg-color: $primary-bg-color;
 
 $focus-brightness: 105%;
 
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
-
 // informational plinth
 $info-plinth-bg-color: #f7f7f7;
 $info-plinth-fg-color: #888;
@@ -117,10 +115,12 @@ $settings-subsection-fg-color: #61708b;
 
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
 
 $header-panel-text-primary-color: #91a1c0;
 
+$pill-bg-color: #aaa;
+$pill-hover-bg-color: #ccc;
+
 $topleftmenu-color: #212121;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: #91a1c0;

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
@@ -142,5 +142,6 @@ $eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-colo
 $reaction-row-button-selected-bg-color: var(--reaction-row-button-selected-bg-color, $reaction-row-button-selected-bg-color);
 
 $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
-$other-user-pill-bg-color: var(--other-user-pill-bg-color, $other-user-pill-bg-color);
+$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
+$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
 $icon-button-color: var(--icon-button-color, $icon-button-color);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -147,8 +147,8 @@ $roomheader-addroom-fg-color: #5c6470;
 
 // Rich-text-editor
 // ********************
-$rte-room-pill-color: #aaa;
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
+$pill-bg-color: #aaa;
+$pill-hover-bg-color: #ccc;
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 // ********************