Scaffold: Implement new toolbar
New icons and new scaffold.scss go into chrome://zotero/skin. The separate root for Scaffold is mostly a historical relic, and adding special cases to build scripts, SCSS mixins, and so on would just make things complicated.
This commit is contained in:
Abe Jellinek
Dan Stillman
parent
360f65e8c2
commit
ba0475810c
19 changed files with 81 additions and 76 deletions
|
|
@ -84,13 +84,6 @@ var Scaffold = new function () {
|
|||
this.onLoad = async function (e) {
|
||||
if (e.target !== document) return;
|
||||
_document = document;
|
||||
|
||||
if (!Zotero.isMac) {
|
||||
// Hack to fix Windows/Linux toolbar
|
||||
let toolbar = document.getElementById('zotero-toolbar');
|
||||
toolbar.className = 'toolbar-scaffold-small';
|
||||
}
|
||||
|
||||
_browser = document.getElementById('browser');
|
||||
|
||||
window.messageManager.addMessageListener('Scaffold:Load', ({ data }) => {
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@
|
|||
***** END LICENSE BLOCK *****
|
||||
-->
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://scaffold/skin/scaffold.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 415 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 797 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
3
chrome/skin/default/zotero/20/universal/folder-open.svg
Normal file
3
chrome/skin/default/zotero/20/universal/folder-open.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4H2.25C1.55964 4 1 4.55964 1 5.25V16.75C1 17.4277 1.53933 17.9795 2.2122 17.9994C2.22419 17.9998 2.23622 18 2.24831 18H2.25H3H16.9739C17.5012 18 17.9577 17.6338 18.0721 17.119L19.8499 9.11905C20.006 8.41647 19.4714 7.75 18.7517 7.75H18V5.25C18 4.55964 17.4404 4 16.75 4H11L10.3455 2.69098C10.1338 2.2675 9.70092 2 9.22746 2H5.27254C4.79908 2 4.36625 2.2675 4.15451 2.69098L3.5 4ZM16.75 7.75V5.25H11C10.5265 5.25 10.0937 4.9825 9.88197 4.55902L9.22746 3.25H5.27254L4.61803 4.55902C4.40629 4.9825 3.97346 5.25 3.5 5.25H2.25V11.6814L2.92788 8.63095C3.04226 8.11622 3.4988 7.75 4.02609 7.75H16.75ZM2.40414 16.75H3H16.8736L18.5959 9H4.12636L2.40414 16.75Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 831 B |
3
chrome/skin/default/zotero/20/universal/plus.svg
Normal file
3
chrome/skin/default/zotero/20/universal/plus.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 9.75V2.75H11V9.75H18V11H11V18H9.75V11H2.75V9.75H9.75Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 235 B |
8
chrome/skin/default/zotero/20/universal/run-detect.svg
Normal file
8
chrome/skin/default/zotero/20/universal/run-detect.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.125C16 3.64175 16.3918 3.25 16.875 3.25C17.3582 3.25 17.75 3.64175 17.75 4.125V5.75H16V4.125ZM6.125 3.25H14.9379C14.8172 3.51684 14.75 3.81307 14.75 4.125V10.0068C15.1861 10.0307 15.6057 10.1167 16 10.2561V7H18.375H19V6.375V4.125C19 2.95139 18.0486 2 16.875 2H6.125C4.9514 2 4 2.95139 4 4.125V13H2.25H1.625H1V15.875C1 17.0486 1.95139 18 3.125 18H11.6713C11.243 17.6534 10.8795 17.2297 10.602 16.75H3.125C2.64175 16.75 2.25 16.3582 2.25 15.875V14.25H10.0068C10.0307 13.8139 10.1167 13.3943 10.2561 13H5.25V4.125C5.25 3.64175 5.64175 3.25 6.125 3.25ZM20 19.1161L19.1162 20L16.4933 17.3773C15.9277 17.7699 15.2407 18 14.5 18C12.567 18 11 16.433 11 14.5C11 12.567 12.567 11 14.5 11C16.433 11 18 12.567 18 14.5C18 15.2407 17.7699 15.9277 17.3772 16.4934L20 19.1161ZM16.75 14.5C16.75 15.7426 15.7426 16.75 14.5 16.75C13.2574 16.75 12.25 15.7426 12.25 14.5C12.25 13.2574 13.2574 12.25 14.5 12.25C15.7426 12.25 16.75 13.2574 16.75 14.5Z" fill="context-fill"/>
|
||||
<defs>
|
||||
<clipPath id="clip0_5189_16925">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
chrome/skin/default/zotero/20/universal/run-do.svg
Normal file
3
chrome/skin/default/zotero/20/universal/run-do.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.875 3.25C16.3918 3.25 16 3.64175 16 4.125V5.75H17.75V4.125C17.75 3.64175 17.3582 3.25 16.875 3.25ZM14.9379 3.25H6.125C5.64175 3.25 5.25 3.64175 5.25 4.125V13H11V14.25H2.25V15.875C2.25 16.3582 2.64175 16.75 3.125 16.75H11V18H3.125C1.95139 18 1 17.0486 1 15.875V13H1.625H2.25H4V4.125C4 2.95139 4.9514 2 6.125 2H16.875C18.0486 2 19 2.95139 19 4.125V6.375V7H18.375H16V12.1547L14.75 11.433V4.125C14.75 3.81307 14.8172 3.51684 14.9379 3.25ZM18.5442 14.7783L19.7942 15.5L18.5442 16.2217L13.25 19.2783L12 20V18.5566V12.4434V11L13.25 11.7217L18.5442 14.7783ZM13.25 13.1651L17.2942 15.5L13.25 17.8349V13.1651Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 779 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 2C2.55964 2 2 2.55964 2 3.25V16.75C2 17.4404 2.55964 18 3.25 18H16.75C17.4404 18 18 17.4404 18 16.75V3.25C18 2.55964 17.4404 2 16.75 2H3.25ZM3.25 3.25H16.75V16.75H3.25V3.25ZM7.99147 13.7179L13.8467 6.02513V5H6.23933V6.28154H11.7944L5.94019 13.9739V15H14.0598V13.7179H7.99147Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 457 B |
3
chrome/skin/default/zotero/20/universal/save.svg
Normal file
3
chrome/skin/default/zotero/20/universal/save.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 2C2.55964 2 2 2.55964 2 3.25V16.75C2 17.4404 2.55964 18 3.25 18H16.75C17.4404 18 18 17.4404 18 16.75V6.375V6.11612L17.8169 5.93306L14.0669 2.18306L13.8839 2H13.625H3.25ZM12 3.25H13.3661L16.75 6.63388V16.75H15V11.25C15 10.5596 14.4404 10 13.75 10H6.25C5.55964 10 5 10.5596 5 11.25V16.75H3.25V3.25H5V5.75C5 6.44036 5.55964 7 6.25 7H10.75C11.4404 7 12 6.44036 12 5.75V3.25ZM10.75 3.25H6.25V5.75H10.75V3.25ZM6.25 16.75H13.75V11.25H6.25V16.75Z" fill="context-fill"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
|
|
@ -1,53 +1,52 @@
|
|||
#tb-new {
|
||||
list-style-image: url('chrome://scaffold/skin/new.png');
|
||||
}
|
||||
@import "abstracts/variables";
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/placeholders";
|
||||
@import "abstracts/utilities";
|
||||
@import "abstracts/split-button";
|
||||
@import "abstracts/svgicon";
|
||||
|
||||
#tb-load {
|
||||
list-style-image: url('chrome://scaffold/skin/load.png');
|
||||
}
|
||||
@import "themes/light";
|
||||
@import "themes/dark";
|
||||
|
||||
#tb-save {
|
||||
list-style-image: url('chrome://scaffold/skin/save.png');
|
||||
}
|
||||
// Base
|
||||
// --------------------------------------------------
|
||||
|
||||
#tb-saveToZotero {
|
||||
list-style-image: url('chrome://scaffold/skin/saveToZotero.png');
|
||||
}
|
||||
@import "base/base";
|
||||
|
||||
#tb-template {
|
||||
list-style-image: url('chrome://scaffold/skin/add.png');
|
||||
}
|
||||
$scaffold-toolbarbutton-icons: (
|
||||
load: 'folder-open',
|
||||
save: 'save',
|
||||
saveToZotero: 'save-to-zotero',
|
||||
detect: 'run-detect',
|
||||
do: 'run-do',
|
||||
template: 'plus'
|
||||
);
|
||||
|
||||
#tb-import {
|
||||
list-style-image: url('chrome://scaffold/skin/import.png');
|
||||
}
|
||||
@each $cls, $icon in $scaffold-toolbarbutton-icons {
|
||||
#tb-#{$cls} {
|
||||
@include svgicon-menu($icon, "universal", "20");
|
||||
}
|
||||
};
|
||||
|
||||
#tb-export {
|
||||
list-style-image: url('chrome://scaffold/skin/export.png');
|
||||
}
|
||||
|
||||
#tb-copy {
|
||||
list-style-image: url('chrome://scaffold/skin/copy.png');
|
||||
}
|
||||
|
||||
#tb-detect {
|
||||
list-style-image: url('chrome://scaffold/skin/detectWeb.png');
|
||||
}
|
||||
|
||||
#tb-do {
|
||||
list-style-image: url('chrome://scaffold/skin/doWeb.png');
|
||||
}
|
||||
|
||||
#tb-setTranslatorsDir {
|
||||
list-style-image: url('chrome://scaffold/skin/setTranslatorsDir.png');
|
||||
}
|
||||
|
||||
#tb-fields {
|
||||
list-style-image: url('chrome://scaffold/skin/fields.png');
|
||||
}
|
||||
|
||||
#tb-template {
|
||||
list-style-image: url('chrome://scaffold/skin/add.png');
|
||||
#zotero-toolbar {
|
||||
toolbarbutton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 4px;
|
||||
margin: 0 4px;
|
||||
|
||||
.toolbarbutton-menu-dropmarker {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
toolbarseparator {
|
||||
appearance: none;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: var(--fill-quinary);
|
||||
}
|
||||
}
|
||||
|
||||
tab {
|
||||
|
|
@ -98,19 +97,9 @@ richlistbox {
|
|||
}
|
||||
|
||||
#zotero-toolbar {
|
||||
border-top: .5px solid darkgray;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#zotero-toolbar.toolbar-scaffold-small {
|
||||
-moz-appearance: none !important;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#zotero-toolbar.toolbar-scaffold-small .toolbarbutton-icon {
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
#zotero-toolbar toolbarseparator {
|
||||
height: 18px;
|
||||
}
|
||||
|
|
@ -129,14 +118,14 @@ vbox > splitter {
|
|||
select[size][multiple],
|
||||
listheader,
|
||||
richlistbox {
|
||||
appearance: none;
|
||||
margin-inline: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
appearance: none;
|
||||
margin-inline: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
listheader {
|
||||
padding-bottom: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
treecol {
|
||||
|
|
@ -145,16 +134,16 @@ treecol {
|
|||
}
|
||||
|
||||
listheader + richlistbox {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
select[size][multiple] > option,
|
||||
treechildren::-moz-tree-row {
|
||||
padding: 0.3em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-image: none;
|
||||
padding: 0.3em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
richlistitem hbox {
|
||||
|
|
@ -162,10 +151,10 @@ richlistitem hbox {
|
|||
}
|
||||
|
||||
richlistitem[selected] menulist:focus-visible {
|
||||
outline-offset: -2px;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
richlistbox[disabled], toolbarbutton[disabled] {
|
||||
richlistbox[disabled] {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
Loading…
Reference in a new issue