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

Improve icon rendering in iconized context menu (#31458)

Browse Source 
* Fix composer button visibility in contrast colour mode

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

* Iterate

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

* Update snapshot

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

* Iterate

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

* Iterate

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

* Update test

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

* Simplify

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

* Update snapshots

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

* Update screenshots

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

* Update screenshots

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

* Update screenshot

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

* Improve icon rendering in iconized context menu

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

* Iterate

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

* Add test

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

* Delint

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-09 15:10:42 +00:00
committed by GitHub
parent 4fda167c11
commit efe59ff35f
37 changed files with 440 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/context_menus/_IconizedContextMenu.pcss
+15 -57
View File
@@ -68,19 +68,6 @@ Please see LICENSE files in the repository root for full details.
cursor: not-allowed;
}
img,
svg,
.mx_IconizedContextMenu_icon {
/* icons */
width: 16px;
min-width: 16px;
max-width: 16px;
& + .mx_IconizedContextMenu_label {
padding-left: 14px;
}
}
span.mx_IconizedContextMenu_label {
/* labels */
width: 100%;
@@ -92,27 +79,23 @@ Please see LICENSE files in the repository root for full details.
white-space: nowrap;
}
svg {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
& + .mx_IconizedContextMenu_label {
padding-left: 14px;
}
}
.mx_BetaCard_betaPill {
margin-left: 16px;
}
}
}
.mx_IconizedContextMenu_icon {
position: relative;
&::before {
content: "";
width: inherit;
height: inherit;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--cpd-color-icon-primary);
}
}
.mx_IconizedContextMenu_optionList_red {
.mx_IconizedContextMenu_item {
color: $alert !important;
@@ -121,10 +104,6 @@ Please see LICENSE files in the repository root for full details.
svg {
color: var(--cpd-color-icon-critical-primary);
}
.mx_IconizedContextMenu_icon::before {
background-color: var(--cpd-color-icon-critical-primary);
}
}
.mx_IconizedContextMenu_option_red {
@@ -133,24 +112,16 @@ Please see LICENSE files in the repository root for full details.
svg {
color: $alert;
}
.mx_IconizedContextMenu_icon::before {
background-color: $alert;
}
}
.mx_IconizedContextMenu_active {
&.mx_IconizedContextMenu_item,
.mx_IconizedContextMenu_item {
color: $accent !important;
}
svg {
color: $accent;
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent;
svg {
color: $accent;
}
}
}
@@ -160,24 +131,11 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_IconizedContextMenu_checked,
.mx_IconizedContextMenu_unchecked {
svg.mx_IconizedContextMenu_checked {
margin-left: 16px;
margin-right: -5px;
}
.mx_IconizedContextMenu_developerTools::before {
mask-image: url("@vector-im/compound-design-tokens/icons/labs.svg");
}
.mx_IconizedContextMenu_checked::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_IconizedContextMenu_unchecked::before {
content: unset;
}
.mx_IconizedContextMenu_sublabel {
margin-left: 20px;
color: $tertiary-content;