From 109022fab97f51cfdef56a5cf952f8da6071e3f4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
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 3d9d4aa..d7f5406 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 92ee21c..b5eb0e6 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
     })
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index 9504348..a9ae7b2 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -1,8 +1,8 @@
 <SettingsLayout page='settings/general' label="General">
   <h1>General Settings</h1>
 
-  <h2>Preferences</h2>
-  <form class="ui-settings" aria-label="UI settings">
+  <h2>Media</h2>
+  <form class="ui-settings">
     <div class="setting-group">
       <input type="checkbox" id="choice-mark-media-sensitive"
              bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
@@ -18,20 +18,29 @@
              bind:checked="$largeInlineMedia" on:change="onChange(event)">
       <label for="choice-large-inline-media">Show large inline images and videos</label>
     </div>
-    <div class="setting-group">
-      <input type="checkbox" id="choice-disable-custom-scrollbars"
-             bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
-      <label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
-    </div>
-  </form>
-
-  <h2>Accessibility</h2>
-  <form class="ui-settings" aria-label="UI settings">
     <div class="setting-group">
       <input type="checkbox" id="choice-autoplay-gif"
              bind:checked="$autoplayGifs" on:change="onChange(event)">
       <label for="choice-autoplay-gif">Autoplay GIFs</label>
     </div>
+  </form>
+
+  <h2>UI</h2>
+  <form class="ui-settings">
+    <div class="setting-group">
+      <input type="checkbox" id="choice-disable-custom-scrollbars"
+             bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
+      <label for="choice-disable-custom-scrollbars">Disable custom scrollbars</label>
+    </div>
+    <div class="setting-group">
+      <input type="checkbox" id="choice-underline-links"
+             bind:checked="$underlineLinks" on:change="onChange(event)">
+      <label for="choice-underline-links">Underline links</label>
+    </div>
+  </form>
+
+  <h2>Accessibility</h2>
+  <form class="ui-settings">
     <div class="setting-group">
       <input type="checkbox" id="choice-reduce-motion"
              bind:checked="$reduceMotion" on:change="onChange(event)">
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js
index 35261f5..893fbbe 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 0000000..db805d6
--- /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 a0c1b9a..d02c290 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 d1606c3..031f648 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 {