add option to use sliders in manager and popup

2020-11-20 17:00:20 +03:00 · 2020-11-20 17:00:20 +03:00 · 008e33254d
commit 008e33254d
parent 3dc684f85f
12 changed files with 197 additions and 55 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -475,6 +475,10 @@
    "message": "Title",
    "description": "Used in various parts of the UI to indicate the title of something"
  },
+  "genericUI": {
+    "message": "UI",
+    "description": "UI = User Interface, this label is used to label generic UI-related stuff"
+  },
  "genericUnknown": {
    "message": "Unknown",
    "description": "Used in various parts of the UI to indicate if something is unknown (e.g. an unknown date)"
@ -1076,6 +1080,9 @@
  "optionsResetButton": {
    "message": "Reset options"
  },
+  "optionsSliders": {
+    "message": "Use sliders to toggle style entries"
+  },
  "optionsStylusThemes": {
    "message": "Find a Stylus UI theme"
  },
--- a/js/prefs.js
+++ b/js/prefs.js
@ -108,6 +108,8 @@ window.INJECTED !== 1 && (() => {

    'popupWidth': 246,              // popup width in pixels

+    'ui.sliders': true,             // use sliders instead of checkboxes for style entries
+
    'updateInterval': 24,           // user-style automatic update interval, hours (0 = disable)
  };
  const values = clone(defaults);
--- a/manage.html
+++ b/manage.html
@ -5,10 +5,10 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title i18n-text="manageTitle"></title>
  <link rel="stylesheet" href="global.css">
+  <link rel="stylesheet" href="options/onoffswitch.css">
  <link rel="stylesheet" href="manage/manage.css">
  <link rel="stylesheet" href="manage/config-dialog.css">
  <link rel="stylesheet" href="msgbox/msgbox.css">
-  <link rel="stylesheet" href="options/onoffswitch.css">
  <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">

  <style id="firefox-transitions-bug-suppressor">
@ -58,10 +58,7 @@
  <template data-id="styleNewUI">
    <div class="entry">
      <h2 class="style-name">
-        <div class="checkmate">
-          <input class="checker" type="checkbox" i18n-title="toggleStyle">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
+        <toggle></toggle>
        <a class="style-name-link">
          &nbsp;
          <span class="style-info" data-type="version"></span>
@ -84,6 +81,20 @@
    </div>
  </template>

+  <template data-id="toggleChecker">
+    <div class="checkmate">
+      <input class="checker" type="checkbox" i18n-title="toggleStyle">
+      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+    </div>
+  </template>
+
+  <template data-id="toggleSlider">
+    <div class="onoffswitch">
+      <input class="slider" type="checkbox" i18n-title="toggleStyle">
+      <span></span>
+    </div>
+  </template>
+
  <template data-id="homepageIconBig">
    <svg class="svg-icon" viewBox="0 0 20 20">
      <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
--- a/manage/config-dialog.css
+++ b/manage/config-dialog.css
@ -1,3 +1,7 @@
+:root {
+  --onoffswitch-width: 60px;
+}
+
 #stylus-manage .config-dialog #message-box-contents {
  padding: 2em 16px;
 }
--- a/manage/manage.css
+++ b/manage/manage.css
@ -1,10 +1,13 @@
 :root {
  --header-width: 280px;
-  --checkbox-width: 24px;
-  --name-padding-left: 40px;
+  --slider-width: 21px;
+  --name-padding-left: 20px;
  --name-padding-right: 40px;
  --actions-width: 75px;
-  --onoffswitch-width: 60px;
+}
+
+.has-sliders {
+  --name-padding-left: 46px;
 }

 body {
@ -360,10 +363,6 @@ a:hover {

 /************ checkbox & select************/

-.newUI .checker {
-  margin: 0;
-}
-
 #newUIoptions > div, #newUIoptions > label {
  margin: 4px 0;
 }
@ -464,7 +463,6 @@ a:hover {

 .newUI .style-name {
  font-size: 14px;
-  text-indent: calc(var(--checkbox-width) - var(--name-padding-left) - 4px);
  padding-left: var(--name-padding-left);
  padding-right: var(--name-padding-right);
  position: relative;
@ -1028,6 +1026,14 @@ a:hover {
 }

@media (max-width: 850px) {
+  :root {
+    --name-padding-left: 34px;
+  }
+
+  .has-sliders {
+    --name-padding-left: 44px;
+  }
+
  body {
    display: table;
  }
@ -1051,6 +1057,11 @@ a:hover {
    table-layout: fixed;
  }

+  .entry .onoffswitch {
+    --slider-width: 20px;
+    padding-left: 14px;
+  }
+
  .newUI .entry .actions {
    padding-right: 30px
  }
@ -1131,7 +1142,6 @@ a:hover {
  }

  .newUI .entry .style-name {
-    padding: .5rem 0 .5rem 34px;
    text-indent: unset;
  }

--- a/manage/manage.js
+++ b/manage/manage.js
@ -44,14 +44,30 @@ const newUI = {
  enabled: null, // the global option should come first
  favicons: null,
  faviconsGray: null,
+  sliders: null,
  targets: null,
 };
 // ...add utility functions
 Object.assign(newUI, {
  ids: Object.keys(newUI),
-  prefGroup: 'manage.newUI',
-  prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
+  prefKeyForId: id =>
+    id === 'sliders' ? `ui.${id}` :
+      id === 'enabled' ? 'manage.newUI' :
+        `manage.newUI.${id}`,
  renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled),
+  tpl: {
+    getToggle() {
+      return t.template[newUI.sliders ? 'toggleSlider' : 'toggleChecker'].cloneNode(true);
+    },
+    getEntry() {
+      const tpl = t.template[newUI.enabled ? 'styleNewUI' : 'style'].cloneNode(true);
+      if (newUI.enabled) {
+        const slot = $('toggle', tpl);
+        slot.parentElement.replaceChild(newUI.tpl.getToggle(), slot);
+      }
+      return tpl;
+    },
+  },
 });
 // ...read the actual values
 for (const id of newUI.ids) {
@ -190,12 +206,12 @@ function showStyles(styles = [], matchUrlIds) {
 function createStyleElement({style, name: nameLC}) {
  // query the sub-elements just once, then reuse the references
  if ((createStyleElement.parts || {}).newUI !== newUI.enabled) {
-    const entry = t.template[newUI.enabled ? 'styleNewUI' : 'style'];
+    const entry = newUI.tpl.getEntry();
    createStyleElement.parts = {
      newUI: newUI.enabled,
      entry,
      entryClassBase: entry.className,
-      checker: $('.checker', entry) || {},
+      checker: $('input', entry) || {},
      nameLink: $('.style-name-link', entry),
      editLink: $('.style-edit-link', entry) || {},
      editHrefBase: 'edit.html?id=',
@ -397,7 +413,7 @@ function getFaviconImgSrc(container = installed) {
 Object.assign(handleEvent, {

  ENTRY_ROUTES: {
-    '.checker, .enable, .disable': 'toggle',
+    'input, .enable, .disable': 'toggle',
    '.style-name': 'name',
    '.homepage': 'external',
    '.check-update': 'check',
@ -621,7 +637,7 @@ function handleUpdate(style, {reason, method} = {}) {
    if (diff.length === 1 && diff[0].key === 'enabled') {
      oldEntry.classList.toggle('enabled', style.enabled);
      oldEntry.classList.toggle('disabled', !style.enabled);
-      $$('.checker', oldEntry).forEach(el => (el.checked = style.enabled));
+      $$('input', oldEntry).forEach(el => (el.checked = style.enabled));
      oldEntry.styleMeta = newStyleMeta;
      entry = oldEntry;
      oldEntry = null;
@ -661,6 +677,7 @@ function switchUI({styleOnly} = {}) {

  Object.assign(newUI, current);
  newUI.renderClass();
+  installed.classList.toggle('has-sliders', newUI.enabled && newUI.sliders);
  installed.classList.toggle('has-favicons', newUI.enabled && newUI.favicons);
  installed.classList.toggle('favicons-grayed', newUI.enabled && newUI.faviconsGray);
  if (installed.style.getPropertyValue('--num-targets') !== `${newUI.targets}`) {
@ -678,6 +695,15 @@ function switchUI({styleOnly} = {}) {
    API.getAllStyles().then(showStyles);
    return;
  }
+  if (changed.sliders && newUI.enabled) {
+    const dst = newUI.tpl.getToggle();
+    const dstChecker = $('input', dst);
+    for (const entry of installed.children) {
+      const src = $('.checkmate, .onoffswitch', entry);
+      dstChecker.checked = entry.classList.contains('enabled');
+      src.parentElement.replaceChild(dst.cloneNode(true), src);
+    }
+  }
  if (changed.targets) {
    for (const entry of installed.children) {
      $('.applies-to', entry).classList.toggle('has-more', entry._numTargets > newUI.targets);
--- a/options.html
+++ b/options.html
@ -180,6 +180,26 @@
        </div>
      </div>

+      <div class="block">
+        <h1 i18n-text="genericUI"></h1>
+        <div class="items">
+          <label>
+            <span i18n-text="optionsSliders"></span>
+            <span class="onoffswitch">
+              <input type="checkbox" id="ui.sliders" class="slider">
+              <span></span>
+            </span>
+          </label>
+          <label class="chromium-only">
+            <span i18n-text="optionsAdvancedContextDelete"></span>
+            <span class="onoffswitch">
+              <input type="checkbox" id="editor.contextDelete" class="slider">
+              <span></span>
+            </span>
+          </label>
+        </div>
+      </div>
+
      <div class="block" id="updates">
        <h1 i18n-text="optionsCustomizeUpdate"></h1>
        <div class="items">
@ -272,13 +292,6 @@
              <span></span>
            </span>
          </label>
-          <label class="chromium-only">
-            <span i18n-text="optionsAdvancedContextDelete"></span>
-            <span class="onoffswitch">
-              <input type="checkbox" id="editor.contextDelete" class="slider">
-              <span></span>
-            </span>
-          </label>
        </div>
      </div>

--- a/options/onoffswitch.css
+++ b/options/onoffswitch.css
@ -71,3 +71,55 @@
  background-color: #04BA9F;
  box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
 }
+
+.entry .onoffswitch {
+  position: absolute;
+  width: var(--slider-width, 24px);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0 4px 0 18px;
+}
+.entry .onoffswitch span {
+  position: absolute;
+  width: var(--slider-width, 24px);
+  height: 11px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: rgba(128, 128, 128, .2);
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
+  transition: box-shadow .25s;
+  pointer-events: none;
+}
+.entry .onoffswitch input:checked + span {
+  background-color: hsla(180, 50%, 40%, .5);
+}
+.entry .onoffswitch:hover span {
+  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8);
+}
+.entry .onoffswitch input {
+  width: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: 0;
+  cursor: pointer;
+  pointer-events: all;
+}
+.entry .onoffswitch input + span::before {
+  width: 9px;
+  height: 9px;
+  left: 2px;
+  right: auto;
+  margin: auto;
+  background-color: #fff;
+  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
+}
+.entry .onoffswitch input:checked + span::before {
+  left: auto;
+  right: 2px;
+  background-color: #fff;
+  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
+}
--- a/popup.html
+++ b/popup.html
@ -27,8 +27,7 @@
      <div class="entry-content">
        <div class="main-controls">
          <label class="style-name">
-            <input class="checker" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <toggle></toggle>
          </label>
        </div>
        <div class="actions">
@ -77,6 +76,20 @@
    </div>
  </template>

+  <template data-id="toggleChecker">
+    <div class="checkmate">
+      <input class="checker" type="checkbox">
+      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+    </div>
+  </template>
+
+  <template data-id="toggleSlider">
+    <div class="onoffswitch">
+      <input class="slider" type="checkbox">
+      <span></span>
+    </div>
+  </template>
+
  <template data-id="writeStyle">
    <a class="write-style-link"></a>
  </template>
--- a/popup/hotkeys.js
+++ b/popup/hotkeys.js
@ -57,7 +57,7 @@ const hotkeys = (() => {
    if (!entry) {
      return;
    }
-    const target = $(shiftKey ? '.style-edit-link' : '.checker', entry);
+    const target = $(shiftKey ? '.style-edit-link' : 'input', entry);
    target.dispatchEvent(new MouseEvent('click', {cancelable: true}));
  }

@ -86,14 +86,14 @@ const hotkeys = (() => {
    let task = Promise.resolve();
    for (let entry of list) {
      entry = typeof entry === 'string' ? $('#' + entry) : entry;
-      if (!match && $('.checker', entry).checked !== enable || entry.classList.contains(match)) {
+      if (!match && $('input', entry).checked !== enable || entry.classList.contains(match)) {
        results.push(entry.id);
        task = task
          .then(() => API.toggleStyle(entry.styleId, enable))
          .then(() => {
            entry.classList.toggle('enabled', enable);
            entry.classList.toggle('disabled', !enable);
-            $('.checker', entry).checked = enable;
+            $('input', entry).checked = enable;
          });
      }
    }
--- a/popup/popup.css
+++ b/popup/popup.css
@ -1,11 +1,12 @@
 :root {
-  --header-width: 280px;
-  --checkbox-width: 24px;
-  --name-padding-left: 40px;
-  --name-padding-right: 40px;
-  --actions-width: 75px;
-  --onoffswitch-width: 60px;
+  --inner-padding: 18px; /* checkbox + gap */
  --outer-padding: 9px;
+  --hotkey-margin: 16px;
+}
+
+.has-sliders {
+  --inner-padding: 20px;
+  --slider-width: 18px;
 }

 html, body {
@ -35,12 +36,12 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 /************ checkbox ************/

-.style-name:hover input[type="checkbox"]:checked {
+.style-name:hover .checker:checked {
  border-color: hsl(0, 0%, 32%);
  background-color: hsl(0, 0%, 82%);
 }

-.style-name:hover input[type="checkbox"] {
+.style-name:hover .checker {
  border-color: hsl(0, 0%, 32%);
  background-color: hsl(0, 0%, 82%);
 }
@ -96,7 +97,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }

 #disable-all-wrapper .main-controls label {
-  padding-left: 16px;
+  padding-left: var(--inner-padding);
  position: relative;
  transition: color .25s;
  font-size: 12px;
@ -126,7 +127,7 @@ a:hover {
 }

 .actions > .main-controls {
-  padding-left: 16px;
+  padding-left: var(--inner-padding);
 }

 .main-controls {
@ -178,7 +179,7 @@ body.blocked > DIV {
 }

 html[style] .entry-content {
-  padding: 0 16px 0 0;
+  padding: 0 var(--hotkey-margin) 0 0;
 }

 #no-styles.entry {
@ -199,7 +200,7 @@ html[style] .entry-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  padding-left: 26px;
+  padding-left: calc(var(--outer-padding) + var(--inner-padding));
  position: relative;
 }

@ -234,6 +235,10 @@ html[style] .entry-content {
  padding-right: 5px;
 }

+.entry .onoffswitch {
+  padding: 0 0 0 6px;
+}
+
 .entry:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
 }
@ -265,7 +270,7 @@ html[style*="border"] .entry:nth-child(11):before {

 .entry .actions > * {
  height: 26px;
-  width: 18px;
+  width: var(--inner-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
@ -849,7 +854,7 @@ body.blocked .actions > .main-controls {
  top: 0;
  right: 0;
  bottom: 0;
-  width: 16px;
+  width: var(--hotkey-margin);
  cursor: help;
  margin: 0;
  padding: 0;
--- a/popup/popup.js
+++ b/popup/popup.js
@ -47,6 +47,11 @@ initTabUrls()
        .map(({url}) => getStyleDataMerged(url).then(styles => ({styles, url}))),
    ]))
  .then(([, ...results]) => {
+    const sliders = prefs.get('ui.sliders');
+    const slot = $('toggle', t.template.style);
+    const toggle = t.template[sliders ? 'toggleSlider' : 'toggleChecker'];
+    slot.parentElement.replaceChild(toggle.cloneNode(true), slot);
+    document.body.classList.toggle('has-sliders', sliders);
    if (results[0]) {
      showStyles(results);
    } else {
@ -353,7 +358,6 @@ function createStyleElement(style) {
  let entry = $.entry(style);
  if (!entry) {
    entry = t.template.style.cloneNode(true);
-    entry.setAttribute('style-id', style.id);
    Object.assign(entry, {
      id: ENTRY_ID_PREFIX_RAW + style.id,
      styleId: style.id,
@ -361,12 +365,8 @@ function createStyleElement(style) {
      onmousedown: handleEvent.maybeEdit,
      styleMeta: style,
    });
-    const checkbox = $('.checker', entry);
-    Object.assign(checkbox, {
-      id: ENTRY_ID_PREFIX_RAW + style.id,
-      // title: t('exclusionsPopupTip'),
+    Object.assign($('input', entry), {
      onclick: handleEvent.toggle,
-      // oncontextmenu: handleEvent.openExcludeMenu
    });
    const editLink = $('.style-edit-link', entry);
    Object.assign(editLink, {
@ -378,7 +378,6 @@ function createStyleElement(style) {
      htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
      onclick: handleEvent.name,
    });
-    styleName.checkbox = checkbox;
    styleName.appendChild(document.createTextNode(' '));

    const config = $('.configure', entry);
@ -415,7 +414,7 @@ function createStyleElement(style) {

  entry.classList.toggle('disabled', !style.enabled);
  entry.classList.toggle('enabled', style.enabled);
-  $('.checker', entry).checked = style.enabled;
+  $('input', entry).checked = style.enabled;

  const styleName = $('.style-name', entry);
  styleName.lastChild.textContent = style.customName || style.name;
@ -478,7 +477,7 @@ Object.assign(handleEvent, {
  },

  name(event) {
-    this.checkbox.dispatchEvent(new MouseEvent('click'));
+    $('input', this).dispatchEvent(new MouseEvent('click'));
    event.preventDefault();
  },