From 109022fab97f51cfdef56a5cf952f8da6071e3f4 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 26 Jan 2019 12:58:11 -0800 Subject: [PATCH] feat: add option to underline links in toot text (#919) * feat: add option to underline links in toot text * change text --- src/inline-script/inline-script.js | 5 +++ .../settings/SettingsListItem.html | 3 +- src/routes/_pages/settings/general.html | 31 ++++++++++++------- .../_store/observers/loggedInObservers.js | 2 ++ .../observers/underlineLinksObservers.js | 12 +++++++ src/routes/_store/store.js | 3 +- src/scss/global.scss | 17 ++++++---- 7 files changed, 54 insertions(+), 19 deletions(-) create mode 100644 src/routes/_store/observers/underlineLinksObservers.js diff --git a/src/inline-script/inline-script.js b/src/inline-script/inline-script.js index 3d9d4aad..d7f54067 100644 --- a/src/inline-script/inline-script.js +++ b/src/inline-script/inline-script.js @@ -45,6 +45,11 @@ if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') { theScrollbarStyle.setAttribute('media', 'only x') // disables the style } +if (hasLocalStorage && localStorage.store_underlineLinks === 'true') { + // if the user wants links underlined, then underline 'em + document.body.classList.add('underline-links') +} + // hack to make the scrollbars rounded only on macOS if (/mac/i.test(navigator.platform)) { document.documentElement.style.setProperty('--scrollbar-border-radius', '50px') diff --git a/src/routes/_components/settings/SettingsListItem.html b/src/routes/_components/settings/SettingsListItem.html index 92ee21cc..b5eb0e68 100644 --- a/src/routes/_components/settings/SettingsListItem.html +++ b/src/routes/_components/settings/SettingsListItem.html @@ -23,6 +23,7 @@ background: var(--settings-list-item-bg); } .settings-list-item a, .settings-list-item a:visited { + text-decoration: none; color: var(--settings-list-item-text); } .settings-list-item a:hover { @@ -70,4 +71,4 @@ offsetForIcon: void 0 }) } - \ No newline at end of file + diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html index 9504348c..a9ae7b27 100644 --- a/src/routes/_pages/settings/general.html +++ b/src/routes/_pages/settings/general.html @@ -1,8 +1,8 @@

General Settings

-

Preferences

-
+

Media

+
@@ -18,20 +18,29 @@ bind:checked="$largeInlineMedia" on:change="onChange(event)">
-
- - -
-
- -

Accessibility

-
+
+ +

UI

+
+
+ + +
+
+ + +
+
+ +

Accessibility

+
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js index 35261f59..893fbbe3 100644 --- a/src/routes/_store/observers/loggedInObservers.js +++ b/src/routes/_store/observers/loggedInObservers.js @@ -4,6 +4,7 @@ import { notificationObservers } from './notificationObservers' import { autosuggestObservers } from './autosuggestObservers' import { notificationPermissionObservers } from './notificationPermissionObservers' import { customScrollbarObservers } from './customScrollbarObservers' +import { underlineLinksObservers } from './underlineLinksObservers' // These observers can be lazy-loaded when the user is actually logged in. // Prevents circular dependencies and reduces the size of main.js @@ -14,4 +15,5 @@ export default function loggedInObservers () { autosuggestObservers() notificationPermissionObservers() customScrollbarObservers() + underlineLinksObservers() } diff --git a/src/routes/_store/observers/underlineLinksObservers.js b/src/routes/_store/observers/underlineLinksObservers.js new file mode 100644 index 00000000..db805d64 --- /dev/null +++ b/src/routes/_store/observers/underlineLinksObservers.js @@ -0,0 +1,12 @@ +import { store } from '../store' + +export function underlineLinksObservers () { + store.observe('underlineLinks', underlineLinks => { + if (!process.browser) { + return + } + + // disables or enables the style + document.body.classList.toggle('underline-links', underlineLinks) + }, { init: false }) +} diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js index a0c1b9ab..d02c2908 100644 --- a/src/routes/_store/store.js +++ b/src/routes/_store/store.js @@ -26,7 +26,8 @@ const persistedState = { pushSubscription: null, reduceMotion: !process.browser || - window.matchMedia('(prefers-reduced-motion: reduce)').matches + window.matchMedia('(prefers-reduced-motion: reduce)').matches, + underlineLinks: false } const nonPersistedState = { diff --git a/src/scss/global.scss b/src/scss/global.scss index d1606c30..031f6489 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -90,14 +90,19 @@ h1 { a { color: var(--anchor-text); text-decoration: none; -} -a:visited { - color: var(--anchor-text); -} + &:visited { + color: var(--anchor-text); + } + + &:hover { + text-decoration: underline; + } + + .underline-links & { + text-decoration: underline; + } -a:hover { - text-decoration: underline; } input {