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

Fix scaffold window UI (#4339)

Browse source 
fix: #4258
This commit is contained in:
windingwind 2024-07-09 16:02:52 +08:00 • committed by GitHub
parent f79a59f56a
commit e4f75c36e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 205 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,6 @@
***** END LICENSE BLOCK *****
-->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
@ -40,6 +39,6 @@
id="scaffold-load">
<script src="load.js"/>
<script src="chrome://zotero/content/titlebar.js"/>
<richlistbox id="listbox" class="theme-listbox"/>
<richlistbox id="listbox" class="theme-listbox" style="height: 300px;"/>
</dialog>
</window>

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

@ -467,7 +467,7 @@
</vbox>
</tabpanel>
<tabpanel flex="1" id="tabpanel-tests">
<vbox flex="1" style="max-width: 100%;">
<vbox id="testing-container">
<vbox id="testing-listbox-container">
<keyset>
<key id="key-delete-tests" observes="validate-tests" keycode="VK_BACK" oncommand="Scaffold.deleteSelectedTests()"/>
@ -487,27 +487,27 @@
onselect="Scaffold.handleTestSelect(event)"
context="testing-context-menu"
/>
<hbox>
<button observes="validate-tests" label="&scaffold.testing.delete;" tooltiptext="Delete the selected tests" oncommand="Scaffold.deleteSelectedTests()"/>
<button observes="validate-tests" label="&scaffold.testing.run;" tooltiptext="Run the selected tests" oncommand="Scaffold.runSelectedTests()"/>
<button observes="validate-tests" label="&scaffold.testing.update;" tooltiptext="Run the selected tests and update the test definitions with the latest data" oncommand="Scaffold.updateSelectedTests()"/>
<hbox flex="1" pack="end">
<checkbox
id="checkbox-remember-cookies"
label="&scaffold.testing.rememberCookies;"
native="true"
checked="true"
/>
</hbox>
</hbox>
</vbox>
<hbox id="testing-buttons">
<button observes="validate-tests" label="&scaffold.testing.delete;" tooltiptext="Delete the selected tests" oncommand="Scaffold.deleteSelectedTests()"/>
<button observes="validate-tests" label="&scaffold.testing.run;" tooltiptext="Run the selected tests" oncommand="Scaffold.runSelectedTests()"/>
<button observes="validate-tests" label="&scaffold.testing.update;" tooltiptext="Run the selected tests and update the test definitions with the latest data" oncommand="Scaffold.updateSelectedTests()"/>
<hbox flex="1" pack="end">
<checkbox
id="checkbox-remember-cookies"
label="&scaffold.testing.rememberCookies;"
native="true"
checked="true"
/>
</hbox>
</hbox>
<iframe src="monaco/monaco.html" id="editor-tests" onmousedown="this.focus()"/>
</vbox>
</tabpanel>
<tabpanel>
<vbox flex="1">
<hbox align="center">
<vbox id="browser-container">
<hbox id="browser-url-container" align="center">
<label control="browser-url" value="&scaffold.tabUrl.label;"/>
<html:input id="browser-url" style="flex: 1;"/>
<button observes="validate-tests" label="&scaffold.testing.create.web;" tooltiptext="Create a new test from the current page" oncommand="Scaffold.saveTestFromCurrent('web')"/>
@ -524,8 +524,8 @@
</vbox>
</tabpanel>
<tabpanel flex="1" id="tabpanel-import">
<vbox flex="1">
<hbox align="right">
<vbox id="import-container">
<hbox id="import-buttons" align="right">
<button observes="validate-tests" label="&scaffold.testing.create.import;" tooltiptext="Create a new test from the current import data" oncommand="Scaffold.saveTestFromCurrent('import')" />
<button observes="validate-tests" label="&scaffold.testing.create.search;" tooltiptext="Create a new test from the current search data" oncommand="Scaffold.saveTestFromCurrent('search')" />
</hbox>

43
scss/components/_listheader.scss
View file

@ -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,

5
scss/components/_richlistbox.scss
View file

@ -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] {

61
scss/mac/_tabbox.scss
View file

@ -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;
}
}
}

176
scss/scaffold.scss
View file

@ -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;
}
}
}

12
scss/win/components/_tabbox.scss
View file

@ -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;