From e4f75c36e19d1806678cf20f0a27689cc30764d9 Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Tue, 9 Jul 2024 16:02:52 +0800
Subject: [PATCH] Fix scaffold window UI (#4339)
fix: #4258
---
chrome/content/scaffold/load.xhtml | 3 +-
chrome/content/scaffold/scaffold.xhtml | 38 +++---
scss/components/_listheader.scss | 43 ++++--
scss/components/_richlistbox.scss | 5 +-
scss/mac/_tabbox.scss | 61 +++++----
scss/scaffold.scss | 176 +++++++++++++++----------
scss/win/components/_tabbox.scss | 12 +-
7 files changed, 205 insertions(+), 133 deletions(-)
diff --git a/chrome/content/scaffold/load.xhtml b/chrome/content/scaffold/load.xhtml
index 67e295dad8..dc4a18e507 100644
--- a/chrome/content/scaffold/load.xhtml
+++ b/chrome/content/scaffold/load.xhtml
@@ -24,7 +24,6 @@
***** END LICENSE BLOCK *****
-->
-
@@ -40,6 +39,6 @@
id="scaffold-load">
-
+
diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml
index e3aa941c00..239ca457a8 100644
--- a/chrome/content/scaffold/scaffold.xhtml
+++ b/chrome/content/scaffold/scaffold.xhtml
@@ -467,7 +467,7 @@
-
+
@@ -487,27 +487,27 @@
onselect="Scaffold.handleTestSelect(event)"
context="testing-context-menu"
/>
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
@@ -524,8 +524,8 @@
-
-
+
+
diff --git a/scss/components/_listheader.scss b/scss/components/_listheader.scss
index 7879e464f5..dd6dcdbd67 100644
--- a/scss/components/_listheader.scss
+++ b/scss/components/_listheader.scss
@@ -10,24 +10,43 @@ richlistbox {
border: var(--material-panedivider);
}
-treecol {
- appearance: none;
- border: none;
+listheader {
+ treecol {
+ appearance: none;
+ border: none;
+ background: transparent;
+ padding: 0;
+
+ .treecol-text {
+ padding: 0 4px;
+ margin: 1px 6px 2px 5px !important;
+ }
- background: transparent;
+ &::after {
+ content: "";
+ display: block;
+ height: 100%;
+ width: 1px;
+ background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%;
+ }
- &:hover {
- background: var(--material-mix-quinary);
- }
-
- &:hover:active {
- background: var(--material-mix-quarternary);
- }
+ &:last-of-type::after {
+ display: none;
+ }
+
+ &:hover {
+ background: var(--material-mix-quinary);
+ }
+
+ &:hover:active {
+ background: var(--material-mix-quarternary);
+ }
+ }
}
listheader + richlistbox {
margin-top: 0;
- border-top: none;
+ border-top: none !important;
}
select[size][multiple] > option,
diff --git a/scss/components/_richlistbox.scss b/scss/components/_richlistbox.scss
index 0865dc9d0a..5e542acd5a 100644
--- a/scss/components/_richlistbox.scss
+++ b/scss/components/_richlistbox.scss
@@ -1,6 +1,8 @@
richlistbox.theme-listbox {
background: var(--material-background);
border: var(--material-panedivider);
+ // Prevent horizontal scrollbar on Windows
+ overflow-x: hidden;
richlistitem {
--listitem-selectedBackground: var(--tag-gray);
@@ -23,11 +25,12 @@ richlistitem {
padding: 0.2em 0.4em;
}
-richlistitem, richlistitem > * {
+richlistitem, richlistitem * {
// Prevent word cut-off with double-byte characters
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ width: 100%;
}
richlistcheckbox[selected=true] {
diff --git a/scss/mac/_tabbox.scss b/scss/mac/_tabbox.scss
index a43cf1b715..33372ef996 100644
--- a/scss/mac/_tabbox.scss
+++ b/scss/mac/_tabbox.scss
@@ -4,45 +4,60 @@ tabbox {
appearance: none;
// Since the tab with opacity is weird, we just use hard-coded colors
@include light-dark(background, #ededed, #343434);
- box-shadow:
+ --tabbox-tab-shadow:
0px 2px 2px -2px var(--fill-quarternary) inset,
0px -2px 2px -2px var(--fill-quarternary) inset,
0px 4px 4px -4px var(--fill-quinary) inset,
0px -4px 4px -4px var(--fill-quinary) inset;
+ --tabbox-tab-shadow-left:
+ 2px 0px 2px -2px var(--fill-quarternary) inset,
+ 4px 0px 4px -4px var(--fill-quinary) inset;
+ --tabbox-tab-shadow-right:
+ -2px 0px 2px -2px var(--fill-quarternary) inset,
+ -4px 0px 4px -4px var(--fill-quinary) inset;
+
+ box-shadow: var(--tabbox-tab-shadow);
&::before {
content: "";
- position: absolute;
height: 14px;
top: 5px;
border-left: 1px solid var(--fill-quarternary);
}
&:first-of-type {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
- box-shadow:
- 0px 2px 2px -2px var(--fill-quarternary) inset,
- 0px -2px 2px -2px var(--fill-quarternary) inset,
- 0px 4px 4px -4px var(--fill-quinary) inset,
- 0px -4px 4px -4px var(--fill-quinary) inset,
- 2px 0px 2px -2px var(--fill-quarternary) inset,
- 4px 0px 4px -4px var(--fill-quinary) inset;
+ border-start-start-radius: 6px;
+ border-end-start-radius: 6px;
+
&::before {
display: none;
}
+
+ &:-moz-locale-dir(ltr) {
+ box-shadow:
+ var(--tabbox-tab-shadow),
+ var(--tabbox-tab-shadow-left);
+ }
+ &:-moz-locale-dir(rtl) {
+ box-shadow:
+ var(--tabbox-tab-shadow),
+ var(--tabbox-tab-shadow-right);
+ }
}
&:last-of-type {
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- box-shadow:
- 0px 2px 2px -2px var(--fill-quarternary) inset,
- 0px -2px 2px -2px var(--fill-quarternary) inset,
- 0px 4px 4px -4px var(--fill-quinary) inset,
- 0px -4px 4px -4px var(--fill-quinary) inset,
- -2px 0px 2px -2px var(--fill-quarternary) inset,
- -4px 0px 4px -4px var(--fill-quinary) inset;
+ border-start-end-radius: 6px;
+ border-end-end-radius: 6px;
+ &:-moz-locale-dir(ltr) {
+ box-shadow:
+ var(--tabbox-tab-shadow),
+ var(--tabbox-tab-shadow-right);
+ }
+ &:-moz-locale-dir(rtl) {
+ box-shadow:
+ var(--tabbox-tab-shadow),
+ var(--tabbox-tab-shadow-left);
+ }
}
&[visuallyselected=true] {
@@ -53,12 +68,12 @@ tabbox {
& + tab {
&::before {
- display: none;
+ border-color: transparent;
}
}
&::before {
- display: none;
+ border-color: transparent;
}
.tab-middle {
@@ -68,6 +83,8 @@ tabbox {
0px 1px 0.75px 0px var(--fill-quinary),
0px 0.25px 0.25px 0px var(--color-border);;
border: 0.5px solid var(--fill-senary);
+ padding: 0.5px 6px 0.5px;
+ margin: 0px -0.5px 1px -0.5px;
}
}
}
diff --git a/scss/scaffold.scss b/scss/scaffold.scss
index 9fd6beeb9b..c380fd8a05 100644
--- a/scss/scaffold.scss
+++ b/scss/scaffold.scss
@@ -52,7 +52,6 @@ $scaffold-toolbarbutton-icons: (
border-bottom: var(--material-panedivider);
toolbarbutton {
- width: 28px;
height: 28px;
padding: 0 4px;
margin: 0 4px;
@@ -65,57 +64,11 @@ $scaffold-toolbarbutton-icons: (
toolbarseparator {
appearance: none;
width: 1px;
- height: 20px;
+ height: 18px;
background-color: var(--fill-quinary);
}
}
-#metadata-grid {
- flex: 1;
- display: grid;
- align-content: start;
- align-items: center;
- grid-template-columns: max-content 1fr;
-}
-
-#metadata-grid > label:nth-child(2n + 1) {
- justify-self: right;
-}
-
-.button-row {
- display: grid;
- grid-template-columns: 1fr max-content;
-}
-
-#metadata-bottom-row {
- display: flex;
- align-items: center;
-}
-
-#metadata-bottom-row #textbox-minVersion {
- margin-right: auto;
-}
-
-#hbox-testFrame {
- -moz-box-align: center;
-}
-
-richlistbox {
- min-width: 200px;
-
- richlistitem {
- align-items: center;
-
- > hbox {
- display: block;
- }
- }
-}
-
-#zotero-toolbar toolbarseparator {
- height: 18px;
-}
-
browser,
#appcontent
{
@@ -126,10 +79,6 @@ browser,
padding: 16px;
}
-vbox > splitter {
- cursor: row-resize;
-}
-
#left-tabbox {
flex: 1;
min-width: 500px;
@@ -143,20 +92,11 @@ vbox > splitter {
}
}
-#checkboxes-translatorType {
- display: flex;
- flex-direction: row;
- gap: 10px;
-}
-
-#tabpanel-metadata label:first-child {
- text-align: right;
-}
-
#right-pane {
min-width: 350px;
- margin: -16px -16px -16px 0px;
- border-left: var(--material-panedivider);
+ margin: -16px;
+ margin-inline-start: 0;
+ border-inline-start: var(--material-panedivider);
#output {
width: 100%;
@@ -167,17 +107,111 @@ vbox > splitter {
}
}
-#scaffold-load {
- #listbox {
- height: 300px;
+#metadata-grid {
+ flex: 1;
+ display: grid;
+ align-content: start;
+ align-items: center;
+ grid-template-columns: max-content 1fr;
+ gap: 8px;
+
+ label,
+ button,
+ input {
+ margin: 0;
+ }
+
+ & > label:nth-child(2n + 1) {
+ justify-self: inline-end;
+ }
+
+ label:first-child {
+ text-align: inline-end;
+ }
+
+ .button-row {
+ display: grid;
+ grid-template-columns: 1fr max-content;
+ gap: 8px;
+ }
+
+ #metadata-bottom-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ #textbox-minVersion {
+ margin-inline-end: auto;
+ }
+ }
+
+ #checkboxes-translatorType {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
}
}
-#testing-listbox-container {
+#testing-container {
flex: 1;
+ max-width: 100%;
+ gap: 8px;
+
+ richlistbox {
+ min-width: 200px;
+ margin-block: 0;
+
+ richlistitem {
+ align-items: center;
+
+ > hbox {
+ display: block;
+ }
+ }
+ }
+
+ #testing-buttons {
+ gap: 8px;
+
+ button,
+ checkbox {
+ margin: 0;
+ }
+ }
+
+ #testing-listbox-container {
+ flex: 1;
+ }
+
+ #editor-tests {
+ flex: 2;
+ }
}
-#editor-tests {
- flex: 2;
- margin-top: 3px;
+#browser-container {
+ flex: 1;
+ gap: 8px;
+
+ #browser-url-container {
+ gap: 8px;
+
+ button,
+ label,
+ input {
+ margin: 0;
+ }
+ }
+}
+
+#import-container {
+ flex: 1;
+ gap: 8px;
+
+ #import-buttons {
+ gap: 8px;
+
+ button {
+ margin: 0;
+ }
+ }
}
diff --git a/scss/win/components/_tabbox.scss b/scss/win/components/_tabbox.scss
index ae62625277..d8bb2bb2e2 100644
--- a/scss/win/components/_tabbox.scss
+++ b/scss/win/components/_tabbox.scss
@@ -24,15 +24,15 @@ tabbox {
color-scheme: light dark;
&:first-of-type {
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
- border-left: 1px solid var(--fill-quinary);
+ border-start-start-radius: 4px;
+ border-end-start-radius: 4px;
+ border-inline-start: 1px solid var(--fill-quinary);
}
&:last-of-type {
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- border-right: 1px solid var(--fill-quinary);
+ border-start-end-radius: 4px;
+ border-end-end-radius: 4px;
+ border-inline-end: 1px solid var(--fill-quinary);
}
@include focus-ring;