From e44cafb5fb116ae2b3ea3267e0e62b3345a5aa44 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 27 Nov 2018 19:17:18 -0800 Subject: [PATCH] feat(scrollbars): add option to disable scrollbars, fix macOS style (#701) fixes #698 and fixes #700 --- bin/build-sass.js | 3 ++ inline-script.js | 11 +++++ routes/_pages/settings/general.html | 5 +++ .../observers/customScrollbarObservers.js | 12 +++++ routes/_store/observers/observers.js | 2 + routes/_store/store.js | 2 + scss/custom-scrollbars.scss | 34 ++++++++++++++ scss/themes/_scrollbars.scss | 44 +++++-------------- templates/2xx.html | 18 +++++++- 9 files changed, 95 insertions(+), 36 deletions(-) create mode 100644 routes/_store/observers/customScrollbarObservers.js create mode 100644 scss/custom-scrollbars.scss diff --git a/bin/build-sass.js b/bin/build-sass.js index 9c62c006..b5199c8b 100755 --- a/bin/build-sass.js +++ b/bin/build-sass.js @@ -15,6 +15,7 @@ const now = require('performance-now') const globalScss = path.join(__dirname, '../scss/global.scss') const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss') const offlineThemeScss = path.join(__dirname, '../scss/themes/_offline.scss') +const customScrollbarScss = path.join(__dirname, '../scss/custom-scrollbars.scss') const html2xxFile = path.join(__dirname, '../templates/2xx.html') const scssDir = path.join(__dirname, '../scss') const themesScssDir = path.join(__dirname, '../scss/themes') @@ -41,12 +42,14 @@ async function renderCss (file) { async function compileGlobalSass () { let mainStyle = (await Promise.all([defaultThemeScss, globalScss].map(renderCss))).join('') let offlineStyle = (await renderCss(offlineThemeScss)) + let scrollbarStyle = (await renderCss(customScrollbarScss)) let html = await readFile(html2xxFile, 'utf8') html = html.replace(/[\s\S]+/, `\n` + `\n` + `\n` + + `\n` + `` ) diff --git a/inline-script.js b/inline-script.js index 3d76f451..6dc37c74 100644 --- a/inline-script.js +++ b/inline-script.js @@ -25,6 +25,17 @@ if (!localStorage.store_currentInstance) { document.head.appendChild(style) } +if (localStorage.store_disableCustomScrollbars === 'true') { + // if user has disabled custom scrollbars, remove this style + let theScrollbarStyle = document.getElementById('theScrollbarStyle') + theScrollbarStyle.setAttribute('media', 'only x') // disables the style +} + +// hack to make the scrollbars rounded only on macOS +if (/mac/i.test(navigator.platform)) { + document.documentElement.style.setProperty('--scrollbar-border-radius', '50px') +} + // TODO: remove this hack when Safari works with cross-origin window.open() // in a PWA: https://github.com/nolanlawson/pinafore/issues/45 if (/iP(?:hone|ad|od)/.test(navigator.userAgent)) { diff --git a/routes/_pages/settings/general.html b/routes/_pages/settings/general.html index 0c2d30c1..81e03850 100644 --- a/routes/_pages/settings/general.html +++ b/routes/_pages/settings/general.html @@ -23,6 +23,11 @@ bind:checked="$omitEmojiInDisplayNames" on:change="$save()"> +
+ + +

Themes diff --git a/routes/_store/observers/customScrollbarObservers.js b/routes/_store/observers/customScrollbarObservers.js new file mode 100644 index 00000000..231b621b --- /dev/null +++ b/routes/_store/observers/customScrollbarObservers.js @@ -0,0 +1,12 @@ +let theScrollbarStyle = process.browser && document.getElementById('theScrollbarStyle') + +export function customScrollbarObservers (store) { + store.observe('disableCustomScrollbars', disableCustomScrollbars => { + if (!process.browser) { + return + } + + // disables or enables the style + theScrollbarStyle.setAttribute('media', disableCustomScrollbars ? 'only x' : 'all') + }, { init: false }) +} diff --git a/routes/_store/observers/observers.js b/routes/_store/observers/observers.js index a66aa949..278424d4 100644 --- a/routes/_store/observers/observers.js +++ b/routes/_store/observers/observers.js @@ -7,6 +7,7 @@ import { autosuggestObservers } from './autosuggestObservers' import { pageVisibilityObservers } from './pageVisibilityObservers' import { resizeObservers } from './resizeObservers' import { notificationPermissionObservers } from './notificationPermissionObservers' +import { customScrollbarObservers } from './customScrollbarObservers' export function observers (store) { instanceObservers(store) @@ -18,4 +19,5 @@ export function observers (store) { pageVisibilityObservers(store) resizeObservers(store) notificationPermissionObservers(store) + customScrollbarObservers(store) } diff --git a/routes/_store/store.js b/routes/_store/store.js index 9cc41f0e..28db1072 100644 --- a/routes/_store/store.js +++ b/routes/_store/store.js @@ -15,6 +15,7 @@ const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([ 'autoplayGifs', 'markMediaAsSensitive', 'reduceMotion', + 'disableCustomScrollbars', 'omitEmojiInDisplayNames', 'pinnedPages', 'composeData', @@ -42,6 +43,7 @@ export const store = new PinaforeStore({ autoplayGifs: false, markMediaAsSensitive: false, reduceMotion: !process.browser || window.matchMedia('(prefers-reduced-motion: reduce)').matches, + disableCustomScrollbars: false, pinnedPages: {}, instanceLists: {}, pinnedStatuses: {}, diff --git a/scss/custom-scrollbars.scss b/scss/custom-scrollbars.scss new file mode 100644 index 00000000..52866158 --- /dev/null +++ b/scss/custom-scrollbars.scss @@ -0,0 +1,34 @@ +html { + // Firefox with scrollbar config changes as of 2018-11 + scrollbar-face-color: var(--scrollbar-face-color); + scrollbar-track-color: var(--scrollbar-track-color); + // Firefox nightly as of 2018-11, new standard version + // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color + scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color); +} + +::-webkit-scrollbar { + width: var(--scrollbar-width); + height: var(--scrollbar-height); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-face-color); + border-radius: var(--scrollbar-border-radius); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-face-color-hover); +} + +::-webkit-scrollbar-thumb:active { + background: var(--scrollbar-face-color-active); +} + +::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { + background: var(--scrollbar-track-color); +} + +::-webkit-scrollbar-corner { + background: var(--scrollbar-background-color); +} \ No newline at end of file diff --git a/scss/themes/_scrollbars.scss b/scss/themes/_scrollbars.scss index 89391e8f..3d490469 100644 --- a/scss/themes/_scrollbars.scss +++ b/scss/themes/_scrollbars.scss @@ -1,34 +1,10 @@ -html { - // Firefox with scrollbar config changes as of 2018-11 - scrollbar-face-color: #{$scrollbar-face}; - scrollbar-track-color: #{$scrollbar-track}; - // Firefox nightly as of 2018-11, new standard version - // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color - scrollbar-color: #{$scrollbar-face $scrollbar-track}; -} - -::-webkit-scrollbar { - width: 12px; - height: 12px; -} - -::-webkit-scrollbar-thumb { - background: #{$scrollbar-face}; - border-radius: 0; -} - -::-webkit-scrollbar-thumb:hover { - background: #{$scrollbar-face-hover}; -} - -::-webkit-scrollbar-thumb:active { - background: #{$scrollbar-face-active}; -} - -::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { - background: #{$scrollbar-track}; -} - -::-webkit-scrollbar-corner { - background: transparent; -} +:root { + --scrollbar-face-color: #{$scrollbar-face}; + --scrollbar-track-color: #{$scrollbar-track}; + --scrollbar-border-radius: 0; + --scrollbar-face-color-hover: #{$scrollbar-face-hover}; + --scrollbar-face-color-active: #{$scrollbar-face-active}; + --scrollbar-width: 12px; + --scrollbar-height: 12px; + --scrollbar-background-color: transparent; +} \ No newline at end of file diff --git a/templates/2xx.html b/templates/2xx.html index e721627b..3d9b4412 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -16,11 +16,14 @@ + @@ -71,6 +74,17 @@ if (!localStorage.store_currentInstance) { document.head.appendChild(style) } +if (localStorage.store_disableCustomScrollbars === 'true') { + // if user has disabled custom scrollbars, remove this style + let theScrollbarStyle = document.getElementById('theScrollbarStyle') + theScrollbarStyle.setAttribute('media', 'only x') // disables the style +} + +// hack to make the scrollbars rounded only on macOS +if (/mac/i.test(navigator.platform)) { + document.documentElement.style.setProperty('--scrollbar-border-radius', '50px') +} + // TODO: remove this hack when Safari works with cross-origin window.open() // in a PWA: https://github.com/nolanlawson/pinafore/issues/45 if (/iP(?:hone|ad|od)/.test(navigator.userAgent)) {