sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Switch from svg masks to svg rendering in more places (#31650)

Browse Source 
* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ExtensionsCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in BaseCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in EmojiPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in Spotlight

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert size change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-08 10:44:54 +00:00
committed by GitHub
parent 15c409491d
commit edd4eab195
13 changed files with 930 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/dialogs/_SpotlightDialog.pcss
+16 -101
View File
@@ -79,12 +79,8 @@ Please see LICENSE files in the repository root for full details.
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
> svg {
color: $secondary-content;
width: 18px;
height: 18px;
position: absolute;
@@ -93,23 +89,11 @@ Please see LICENSE files in the repository root for full details.
transform: translateY(-50%);
}
&.mx_SpotlightDialog_filterPeople::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
}
&.mx_SpotlightDialog_filterPublicRooms::before {
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
&.mx_SpotlightDialog_filterPublicSpaces::before {
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
}
.mx_SpotlightDialog_filter--close {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
padding: 1px;
background: $system;
border-radius: 8px;
margin-left: $spacing-8;
@@ -117,17 +101,10 @@ Please see LICENSE files in the repository root for full details.
line-height: 16px;
color: $secondary-content;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
svg {
color: $secondary-content;
width: inherit;
height: inherit;
position: absolute;
left: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}
@@ -386,45 +363,24 @@ Please see LICENSE files in the repository root for full details.
margin: 0;
padding: 3px $spacing-8 3px $spacing-28;
&::before {
content: "";
svg {
display: block;
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
left: $spacing-8;
width: 16px;
height: 16px;
background: var(--cpd-color-icon-primary);
color: var(--cpd-color-icon-primary);
}
}
}
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_otherSearches {
.mx_SpotlightDialog_startChat,
.mx_SpotlightDialog_joinRoomAlias,
.mx_SpotlightDialog_explorePublicRooms,
.mx_SpotlightDialog_explorePublicSpaces,
.mx_SpotlightDialog_startGroupChat,
.mx_SpotlightDialog_searchMessages {
.mx_SpotlightDialog_option {
padding-left: $spacing-32;
position: relative;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
svg {
color: $secondary-content;
width: 24px;
height: 24px;
position: absolute;
@@ -434,30 +390,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_SpotlightDialog_startChat::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
}
.mx_SpotlightDialog_joinRoomAlias::before {
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_explorePublicRooms::before {
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_explorePublicSpaces::before {
mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
}
.mx_SpotlightDialog_startGroupChat::before {
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
}
.mx_SpotlightDialog_searchMessages::before {
mask-image: url("@vector-im/compound-design-tokens/icons/chat.svg");
}
.mx_SpotlightDialog_otherSearches_messageSearchText {
font-size: $font-15px;
line-height: $font-24px;
@@ -496,27 +428,10 @@ Please see LICENSE files in the repository root for full details.
display: none;
}
.mx_SpotlightDialog_metaspaceResult {
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
&.mx_SpotlightDialog_metaspaceResult_home-space {
mask-image: url("@vector-im/compound-design-tokens/icons/home.svg");
}
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
mask-image: url("@vector-im/compound-design-tokens/icons/favourite.svg");
}
&.mx_SpotlightDialog_metaspaceResult_people-space {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
}
&.mx_SpotlightDialog_metaspaceResult_orphans-space {
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_metaspaceResult svg {
color: $secondary-content;
width: inherit;
height: inherit;
}
}
}
res/css/views/emojipicker/_EmojiPicker.pcss
+12 -22
View File
@@ -87,34 +87,24 @@ Please see LICENSE files in the repository root for full details.
align-self: center;
width: 32px;
height: 32px;
cursor: pointer;
svg {
width: 100%;
height: 100%;
}
}
}
.mx_EmojiPicker_search_clear {
cursor: pointer;
}
.mx_EmojiPicker_search_icon {
width: 20px;
width: 18px;
margin: 8px;
}
.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
pointer-events: none;
}
.mx_EmojiPicker_search_icon::after {
mask: url("@vector-im/compound-design-tokens/icons/search.svg") no-repeat;
mask-size: 100%;
background-color: $primary-content;
content: "";
display: inline-block;
width: 100%;
height: 100%;
}
.mx_EmojiPicker_search_clear::after {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
svg {
width: 100%;
height: 100%;
color: $primary-content;
}
}
.mx_EmojiPicker_category {
res/css/views/right_panel/_ExtensionsCard.pcss
+9 -21
View File
@@ -58,7 +58,13 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
padding: var(--cpd-space-3x) var(--cpd-space-1x);
box-sizing: border-box;
min-width: 24px; /* prevent flexbox crushing */
flex-shrink: 0;
svg {
width: 16px;
height: 16px;
color: $icon-button-color;
}
&:hover {
&::after {
@@ -72,32 +78,14 @@ Please see LICENSE files in the repository root for full details.
background-color: rgb(141, 151, 165, 0.1);
}
}
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
background-color: $icon-button-color;
}
}
.mx_ExtensionsCard_app_pinToggle {
right: 8px;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
}
}
.mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}
&.mx_ExtensionsCard_Button_pinned {
@@ -105,8 +93,8 @@ Please see LICENSE files in the repository root for full details.
opacity: 0.2;
}
.mx_ExtensionsCard_app_pinToggle::before {
background-color: $accent;
.mx_ExtensionsCard_app_pinToggle svg {
color: $accent;
}
}