mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Unify richlistitem styling rules (#4511)

Browse source 
Unify richlistitem styling rules

- Fix richlistitem unwanted focus ring on Linux
fix: #4510
- Simplify richlistbox styling rules and do not follow Mozilla code
- Use --default-focusring-width for v-table
This commit is contained in:
windingwind 2024-08-09 20:57:56 +08:00 committed by GitHub
parent b7bfdd5f7c
commit 69b4789c17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 60 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chrome/content/scaffold/load.xhtml
View file

@ -39,6 +39,6 @@
id="scaffold-load">
<script src="load.js"/>
<script src="chrome://zotero/content/titlebar.js"/>
<richlistbox id="listbox" class="theme-listbox" style="height: 300px;"/>
<richlistbox id="listbox" style="height: 300px;"/>
</dialog>
</window>

1
chrome/content/scaffold/scaffold.xhtml
View file

@ -480,7 +480,6 @@
</listheader>
<richlistbox
id="testing-listbox"
class="theme-listbox"
observes="validate-tests"
flex="1"
seltype="multiple"

2
chrome/content/zotero/elements/styleConfigurator.js
View file

@ -31,7 +31,7 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<div>
<xul:richlistbox id="style-list" class="theme-listbox" tabindex="0" />
<xul:richlistbox id="style-list" tabindex="0" />
</div>
</div>
`);

1
scss/base/_base.scss
View file

@ -3,6 +3,7 @@
font-size: 13px;
font-style: normal;
line-height: 1.3333333333;
--default-focusring-width: 1px;
@media (-moz-platform: windows) {
--color-accent: var(--accent-blue);
--color-accent-text: #fff;

1
scss/components/_listheader.scss
View file

@ -16,6 +16,7 @@ listheader {
border: none;
background: transparent;
padding: 0;
box-shadow: none;
.treecol-text {
padding: 0 4px;

79
scss/components/_richlistbox.scss
View file

@ -1,41 +1,54 @@
richlistbox.theme-listbox {
richlistbox {
background: var(--material-background);
border: var(--material-panedivider);
// Prevent horizontal scrollbar on Windows
overflow-x: hidden;
richlistitem {
--listitem-selectedBackground: var(--tag-gray);
--listitem-selectedFocusCurrentBackground: var(--color-accent);
--listitem-selectedTextColor: var(--color-accent-text);
--listitem-selectedBorder: transparent;
--listitem-selectedBottomBorder: transparent;
--listitem-selectedCurrentBorder: transparent;
--listitem-selectedFocusBorder: transparent;
--listitem-selectedFocusBottomBorder: transparent;
--listitem-selectedFocusCurrentBorder: transparent;
--listitem-selectedFocusBackground: var(--color-accent);
--listitem-selectedFocusColor: var(--accent-white);
--listitem-selectedColor: var(--accent-white);
--listitem-selectedFocusCurrentBottomBorder: transparent;
padding: 0.2em 0.4em;
align-items: center;
@include compact {
height: 22px;
}
@include comfortable {
height: 28px;
}
&,
& > *,
& label {
// Prevent word cut-off with double-byte characters
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
// Selected but not focused
&[selected="true"] {
background-color: var(--color-quarternary-on-sidepane);
color: var(--color-accent-text);
}
}
&:focus {
& > richlistitem {
// Selected and focused
&[selected="true"] {
background-color: var(--color-accent);
color: var(--color-accent-text);
}
}
// Add focus ring to richlistbox if the richlistbox is multi-select
&[seltype="multiple"] > richlistitem {
&[selected="true"][current="true"] {
outline: var(--default-focusring);
outline-color: currentColor;
outline-offset: calc(-1 * var(--default-focusring-width));
}
}
}
}
richlistitem {
padding: 0.2em 0.4em;
}
richlistitem,
richlistitem > *,
richlistitem label {
// Prevent word cut-off with double-byte characters
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
richlistcheckbox[selected=true] {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}

2
scss/components/_virtualized-table.scss
View file

@ -345,7 +345,7 @@
.virtualized-table.multi-select:focus {
.row.focused:not(.selected) {
outline: 1px dotted var(--color-accent);
outline: var(--default-focusring-width) dotted var(--color-accent);
z-index: 10000;
}
}

13
scss/elements/_richlistCheckbox.scss
View file

@ -23,23 +23,23 @@ richlistbox:where(:focus) > richlistcheckbox[selected="true"] {
}
richlistbox[seltype="multiple"]:focus > richlistcheckbox[current="true"],
richlistbox.theme-listbox:focus > richlistcheckbox[current="true"] {
richlistbox:focus > richlistcheckbox[current="true"] {
outline: var(--default-focusring);
outline-color: var(--color-accent);
outline-offset: calc(-1 * var(--default-focusring-width));
}
richlistbox[seltype="multiple"]:focus > richlistcheckbox[current="true"][selected="true"],
richlistbox.theme-listbox:focus > richlistcheckbox[current="true"][selected="true"] {
richlistbox:focus > richlistcheckbox[current="true"][selected="true"] {
outline-color: #F3D982; /* TODO: find a suitable system color */
}
richlistbox.theme-listbox:not(:focus) > richlistcheckbox[selected="true"] {
richlistbox:not(:focus) > richlistcheckbox[selected="true"] {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}
richlistbox.theme-listbox > richlistcheckbox > label {
richlistbox > richlistcheckbox > label {
margin: 0px;
padding-top: 0px;
padding-bottom: 1px;
@ -47,3 +47,8 @@ richlistbox.theme-listbox > richlistcheckbox > label {
padding-inline-end: 0px;
white-space: nowrap;
}
richlistcheckbox[selected=true] {
background-color: -moz-cellhighlight;
color: -moz-cellhighlighttext;
}

4
scss/scaffold.scss
View file

@ -163,10 +163,6 @@ browser,
richlistitem {
align-items: center;
> hbox {
display: block;
}
}
}