Skip to content

Commit

Permalink
Redesign toolbar: simplify and modernize UI
Browse files Browse the repository at this point in the history 
The old UI was elaborate but cluttered, cramming many different controls
in a small space, confusing the users. The patch strips away most of it,
resulting in a cleaner and more intiutive UI and overall shorter code.

Changes:
  * Drop the power and invert buttons. The reader-off and invert modes
    are now activated by pseudo-tones added to the tone-picker UI; the
    reader-on mode is auto-enabled while selecting an actual tone.
  * Drop the image-mode switch. The invert-image mode is useful only
    in dark themes, but then we might just use the full invert option.
    Thus the (renamed) image-toggle now simply flips blend-image mode.
  * Drop panels, separators and icons. Descriptive labels are used for
    the toggle buttons, stacked vertically below the theme controls.
  • Loading branch information
@shivaprsd
shivaprsd committed May 18, 2022
1 parent a28e9e3 commit 9afc4bd
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 232 deletions.
156 changes: 29 additions & 127 deletions addon/doq.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
.reader .pdfViewer .page, .reader .thumbnailImage {
background-color: var(--reader-bg) !important;
}
.reader.invert .pdfViewer, .reader.invert .thumbnailImage {
.invert .pdfViewer, .invert .thumbnailImage, .colorSwatch.invert {
filter: invert(86%);
}
.pdfViewer .textLayer > span {
Expand All @@ -26,6 +26,10 @@
margin: 4px;
cursor: pointer;
}
#origTone + .colorSwatch, #invertTone + .colorSwatch {
color: #000000;
background-color: #ffffff;
}

.maskIcon::before, :checked + .colorSwatch::before {
display: inline-block;
Expand All @@ -38,147 +42,51 @@
-webkit-mask-size: cover;
mask-size: cover;
}
.maskIcon.toolbarLabel::before {
margin-top: 0;
}
.maskIcon.toolbarLabel {
display: block;
width: 16px;
padding: 6px;
border: 0;
}

.choiceSwitch {
display: inline-flex;
}
.choiceSwitch > div {
position: relative;
flex: auto;
}
.choiceSwitch label {
display: block;
margin: 0;
padding: 6px;
border: 1px solid var(--field-border-color);
cursor: pointer;
}
.choiceSwitch :checked + label {
background-color: var(--field-border-color);
}
.choiceSwitch > :first-child > .toolbarLabel {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.choiceSwitch > :last-child > .toolbarLabel {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

/* Toolbar layout */
#readerToolbar {
right: 189px;
z-index: 20000;
font-size: 0;
background-color: var(--toolbar-bg-color);
-webkit-user-select: none;
user-select: none;
}
#readerToolbar > :nth-child(-n+3) {
display: inline-block;
vertical-align: top;
#readerToolbar::after {
border-bottom-color: var(--toolbar-bg-color);
}
#readerToolbar > :first-child {
padding-left: 6px;
}
#readerToolbar .verticalToolbarSeparator {
padding: 41px 0;
margin: -6px 4px -2px 6px;
background-color: var(--doorhanger-separator-color);
}
#readerToolbar > :nth-child(3) {
padding-right: 4px;
}
#readerToolbar .horizontalToolbarSeparator {
clear: both;
margin-top: 2px;
padding: 0 6px;
margin-bottom: 10px;
}
#readerToolbar > :last-child {
display: flex;
align-items: center;
padding: 0 8px 0 6px;
margin-bottom: -4px;
padding: 0 8px;
margin-bottom: -6px;
}

/* Panel layouts */
#readerToolbar > div > div {
position: relative;
}
.asidePanel > div {
margin-bottom: 6px;
}
.colorPanel {
max-width: 136px;
max-width: 170px;
}
.colorPanel > :nth-child(-n+2) {
display: inline-block;
margin-bottom: 3px;
}
.colorPanel > :first-child > * {
margin-right: -4px;
}
.colorPanel > :nth-child(2) {
float: right;
margin-left: 4px;
.colorPanel > :first-child {
margin-bottom: 6px;
}
.colorPanel > :last-child {
margin: 3px 4px 6px !important;
}
.imagePanel > :first-child {
flex: none;
}
.imagePanel > :last-child {
flex: auto;
margin-left: 6px;
margin-left: 4px;
margin-right: 4px;
}

/* Aside panel */
#readerSwitch + .colorSwatch {
color: var(--field-color);
border-color: transparent;
background-color: transparent;
margin-left: 3px;
margin-right: 3px;
cursor: revert;
}
#readerSwitch:checked + .colorSwatch {
color: aqua;
box-shadow: 0 0 2px;
}
@media (prefers-color-scheme: light) {
#readerSwitch:checked + .colorSwatch {
color: dodgerblue;
background-color: transparent !important;
}
}
/* Image panel */
#imageEnable + label {
width: 25px;
.imagePanel > div {
position: relative;
margin-bottom: 6px;
}

/* Color panel */
#invertToggle + .colorSwatch {
--stripe-angle: 90deg;
background: linear-gradient(var(--stripe-angle), black 50%, white 50%);
border: 1px solid black;
}
#invertToggle:checked + .colorSwatch {
--stripe-angle: 270deg;
}
#invertToggle + .colorSwatch::before {
content: none;
#tonePicker {
position: relative;
text-align: center;
}
#schemeSelectContainer {
position: relative;
min-width: 94px;
width: auto;
}
Expand All @@ -188,20 +96,17 @@
#schemeSelect:focus {
border-color: rgba(0, 0, 0, 0.38);
}
/* Image Panel */
.imagePanel .toolbarLabel {
display: block;
text-align: center;
}

/* Icons */
#viewReader.toolbarButton::before {
-webkit-mask-image: url(images/readerIcon.svg);
mask-image: url(images/readerIcon.svg);
}
#readerSwitch + .colorSwatch::before {
-webkit-mask-image: url(images/powerButton.svg);
mask-image: url(images/powerButton.svg);
opacity: 0.5;
}
#readerSwitch:checked + .colorSwatch::before {
opacity: 1
}
#tonePicker > :checked + .colorSwatch::before {
-webkit-mask-image: url(images/checkMark.svg);
mask-image: url(images/checkMark.svg);
Expand All @@ -216,9 +121,6 @@
}

/* Form controls */
#readerToolbar .toolbarLabel {
text-align: center;
}
#readerToolbar input[type="radio"] {
margin: 10px 0 3px 7px;
position: absolute !important;
Expand Down
52 changes: 9 additions & 43 deletions addon/doq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,6 @@

<template id="mainAddon">
<div id="readerToolbar" class="secondaryToolbar doorHangerRight hidden">
<div class="asidePanel">
<div>
<input type="checkbox" id="readerSwitch" class="toolbarField" tabindex="29"
aria-label="Toggle reader mode">
<label for="readerSwitch" class="colorSwatch maskIcon" aria-hidden="true"
title="Turn on Reader Mode" data-toggle-title="on;off">
</label>
</div>
<div>
<input type="checkbox" id="shapeEnable" class="toolbarField" tabindex="29"
aria-label="Apply to lines and shapes">
<label for="shapeEnable" class="toolbarLabel maskIcon" aria-hidden="true"
title="Apply to Lines and Shapes">
</label>
</div>
</div>
<div class="verticalToolbarSeparator"></div>

<div class="colorPanel">
<div>
<form id="tonePicker" role="radiogroup" aria-label="Color scheme tone">
Expand All @@ -34,42 +16,26 @@
</template>
</form>
</div>
<div>
<input type="checkbox" id="invertToggle" class="toolbarField" tabindex="29"
aria-label="Invert document colors">
<label for="invertToggle" class="colorSwatch" aria-hidden="true"
title="Invert Document Colors">
</label>
</div>
<div id="schemeSelectContainer" class="dropdownToolbarButton">
<select id="schemeSelect" class="toolbarField" title="Color Scheme"
tabindex="29">
</select>
</div>
</div>
<div class="horizontalToolbarSeparator"></div>

<div class="imagePanel">
<div>
<input type="checkbox" id="shapeEnable" class="toolbarField" tabindex="29"
aria-label="Apply theme to lines and shapes">
<label for="shapeEnable" class="toolbarLabel" aria-hidden="true"
title="Apply theme to lines and shapes">Apply to Shapes</label>
</div>
<div>
<input type="checkbox" id="imageEnable" class="toolbarField" tabindex="30"
aria-label="Apply to images">
<label for="imageEnable" class="toolbarLabel maskIcon" aria-hidden="true"
title="Apply to Images">
</label>
aria-label="Blend images with reader theme">
<label for="imageEnable" class="toolbarLabel" aria-hidden="true"
title="Blend images with reader theme">Blend Images</label>
</div>
<form id="imageMode" class="choiceSwitch" title="Image Mode"
role="radiogroup" aria-label="Image mode">
<div>
<input type="radio" id="blendImage" name="compOp" value="multiply"
tabindex="30" checked>
<label class="toolbarLabel" for="blendImage">Blend</label>
</div>
<div>
<input type="radio" id="invertImage" name="compOp" value="difference"
tabindex="30">
<label class="toolbarLabel" for="invertImage">Invert</label>
</div>
</form>
</div>
</div>
</template>
Loading

0 comments on commit 9afc4bd

Please sign in to comment.