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

Fix item pane header (#4159)

Browse source 
* Improve feed item pane header (fixes #4141)
* Show item pane custom head when headerMode is none (fixes #4116)
* fx115: Fix button style on windows (fixes #4120)
* Move split-menu-button styles to SCSS
This commit is contained in:
windingwind 2024-06-04 14:14:20 +08:00 • committed by GitHub
parent 845f11b1da
commit a6076ce76c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 214 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

1
scss/_zotero.scss
View file

@ -79,6 +79,7 @@
@import "elements/quickSearchTextbox";
@import "elements/richlistCheckbox";
@import "elements/styleConfigurator";
@import "elements/splitMenuButton";
@import "elements/tagsBox";
@import "elements/zoteroSearch";
@import "elements/itemPaneHeader";

4
scss/elements/_itemDetails.scss
View file

@ -62,3 +62,7 @@
{
margin-left: 5px;
}
.feed-item-addTo-button {
--split-button-icon-color: var(--accent-blue);
}

2
scss/elements/_itemMessagePane.scss
View file

@ -6,7 +6,7 @@ item-message-pane {
display: flex;
flex-direction: row;
align-self: stretch;
gap: 6px;
gap: 8px;
padding: 6px 8px;
background: var(--material-toolbar);
border-bottom: var(--material-panedivider);

147
scss/elements/_itemPaneHeader.scss
View file

@ -11,49 +11,118 @@ item-pane-header {
overflow-y: auto;
scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
.title {
margin-top: calc(0px - var(--editable-text-padding-block));
flex: 1 1 0;
font-weight: 600;
line-height: 1.333;
editable-text {
flex: 1;
}
}
.creator-year {
color: var(--fill-secondary);
}
.bib-entry {
line-height: 1.5;
&.loading {
color: var(--fill-secondary);
}
}
.creator-year, .bib-entry {
// Set padding to match editable-text in tight mode, plus 1px for border
padding-inline: calc(var(--editable-text-tight-padding-inline) + 1px);
overflow-wrap: anywhere;
}
.custom-head {
.head-container {
display: flex;
flex-direction: row;
align-self: stretch;
gap: 6px;
flex-direction: column;
align-items: center;
justify-content: space-between;
&:empty {
display: none;
@include compact {
gap: 4px;
}
button {
height: 26px;
margin: 0;
flex-grow: 1;
@include comfortable {
gap: 8px;
}
.title-head {
align-self: stretch;
.title {
margin-top: calc(0px - var(--editable-text-padding-block));
flex: 1 1 0;
font-weight: 600;
line-height: 1.333;
editable-text {
flex: 1;
}
}
.creator-year {
color: var(--fill-secondary);
}
.bib-entry {
line-height: 1.5;
&.loading {
color: var(--fill-secondary);
}
}
.creator-year, .bib-entry {
// Set padding to match editable-text in tight mode, plus 1px for border
padding-inline: calc(var(--editable-text-tight-padding-inline) + 1px);
overflow-wrap: anywhere;
}
}
.custom-head {
display: flex;
flex-direction: row;
align-self: stretch;
gap: 8px;
@media (-moz-platform: macos) {
// The extent of the button is about 2px wider than its optical width
// need to compensate for that
gap: 4px;
}
&:empty {
display: none;
}
button {
// Allow the button to grow/shrink to fit the container
width: 0;
margin: 0;
flex-grow: 1;
padding: 2px 6px;
@media (-moz-platform: macos) {
height: 24px;
padding: 3px 0px 1px 0px;
&:is(.split-menu-button) {
padding: 3px 2px 1px 3px;
}
}
.button-text {
width: 0;
flex-grow: 1;
justify-content: center;
&::before {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&:is(.no-shrink-button) {
width: auto;
flex-shrink: 0;
.button-text {
width: auto;
}
}
}
}
}
&.no-title-head {
&:not(.has-custom-head) {
padding: 0;
border: none;
}
.title-head {
display: none;
}
}
}

2
scss/elements/_noteEditor.scss
View file

@ -5,7 +5,7 @@ note-editor {
display: flex;
flex-direction: row;
align-self: stretch;
gap: 6px;
gap: 8px;
padding: 6px 8px;
background: var(--material-toolbar);
border-bottom: var(--material-panedivider);

50
scss/elements/_splitMenuButton.scss Normal file
View file

@ -0,0 +1,50 @@
.split-menu-button {
display: flex;
align-items: center;
padding-right: 0;
gap: 6px;
& [anonid="button-image-and-text-box"] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
// Allow the button to grow/shrink to fit the container
width: 0;
}
& [anonid="button-image"] {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-inline-end: 4px;
color: var(--split-button-icon-color);
fill: currentColor;
-moz-context-properties: fill,fill-opacity;
}
& [anonid="button-text"] {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
& [anonid="dropmarker-box"] {
display: flex;
align-items: center;
overflow: hidden;
}
& [anonid="dropmarker-separator"] {
height: calc(100% - 2px);
border-inline-start: 1px solid var(--fill-quinary);
}
& .split-menu-button-dropmarker {
padding: 0;
margin: 0;
color: var(--fill-secondary);
fill: currentColor;
-moz-context-properties: fill,fill-opacity;
}
}

2
scss/win/_menupopup.scss
View file

@ -12,6 +12,8 @@ menupopup {
margin-left: 4px;
margin-right: 4px;
border-radius: 4px;
fill: currentColor;
-moz-context-properties: fill,fill-opacity;
&[_moz-menuactive="true"] {
background: var(--fill-quinary);
}

4
scss/win/abstracts/_mixins.scss
View file

@ -1,13 +1,13 @@
@mixin windows-form-element-base {
appearance: none;
padding: 0;
border: solid 1px transparent;
border: 1px solid transparent !important;
border-radius: 3px;
background-origin: border-box;
background-clip: padding-box, padding-box, border-box;
// Overwrite default background color
background-color: unset;
background-color: unset !important;
// Simulate linear-gradient border with border-radius using background-image
@include light-dark(--color-form-element-background, var(--color-background70), var(--fill-quinary));