From 648d9a3cf677f3ec3c21b44c8d2a487a4fe7e875 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 26 Jan 2019 13:50:45 -0800
Subject: [PATCH] fix: tweak underlining of links (#920)

---
 src/inline-script/inline-script.js                   |  5 -----
 src/routes/_components/profile/AccountProfile.html   | 12 +++++++++---
 .../_components/profile/AccountProfileMeta.html      |  6 +++++-
 .../_components/profile/AccountProfileNote.html      |  6 +++++-
 src/routes/_components/status/Notification.html      | 10 ++++++++--
 src/routes/_components/status/Status.html            |  5 +++--
 src/routes/_components/status/StatusContent.html     |  4 ++++
 src/routes/_components/status/StatusMentions.html    |  6 +++++-
 src/routes/_components/status/StatusSpoiler.html     |  5 +++++
 src/routes/_pages/settings/general.html              |  2 +-
 src/routes/_store/observers/loggedInObservers.js     |  2 --
 .../_store/observers/underlineLinksObservers.js      | 12 ------------
 src/scss/global.scss                                 |  4 ----
 13 files changed, 45 insertions(+), 34 deletions(-)
 delete 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 d7f54067..3d9d4aad 100644
--- a/src/inline-script/inline-script.js
+++ b/src/inline-script/inline-script.js
@@ -45,11 +45,6 @@ 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/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html
index 2a255db4..0432032b 100644
--- a/src/routes/_components/profile/AccountProfile.html
+++ b/src/routes/_components/profile/AccountProfile.html
@@ -1,5 +1,5 @@
 <h1 class="sr-only">Profile for {accountName}</h1>
-<div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}"
+<div class={className}
      style="background-image: url({headerImage});">
   <div class="account-profile-grid-wrapper">
     <div class="account-profile-grid">
@@ -75,13 +75,19 @@
   import AccountProfileMeta from './AccountProfileMeta.html'
   import AccountProfileDetails from './AccountProfileDetails.html'
   import { store } from '../../_store/store'
+  import { classname } from '../../_utils/classname'
 
   export default {
     store: () => store,
     computed: {
       headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
       headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
-      accountName: ({ account }) => (account && (account.display_name || account.username)) || ''
+      accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
+      className: ({ headerImageIsMissing, $underlineLinks }) => (classname(
+        'account-profile',
+        headerImageIsMissing && 'header-image-is-missing',
+        $underlineLinks && 'underline-links'
+      ))
     },
     components: {
       AccountProfileHeader,
@@ -91,4 +97,4 @@
       AccountProfileDetails
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/profile/AccountProfileMeta.html b/src/routes/_components/profile/AccountProfileMeta.html
index 1ae2b4c3..dcbf78ac 100644
--- a/src/routes/_components/profile/AccountProfileMeta.html
+++ b/src/routes/_components/profile/AccountProfileMeta.html
@@ -81,6 +81,10 @@
     padding: 10px 10px 10px 20px;
   }
 
+  :global(.underline-links .account-profile-meta a) {
+    text-decoration: underline;
+  }
+
   @media (max-width: 767px) {
     .account-profile-meta {
       padding: 5px 0;
@@ -113,4 +117,4 @@
       })))
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/profile/AccountProfileNote.html b/src/routes/_components/profile/AccountProfileNote.html
index de82099e..deeb23c6 100644
--- a/src/routes/_components/profile/AccountProfileNote.html
+++ b/src/routes/_components/profile/AccountProfileNote.html
@@ -24,6 +24,10 @@
     margin: 0;
   }
 
+  :global(.underline-links .account-profile-note a) {
+    text-decoration: underline;
+  }
+
   @media (max-width: 767px) {
     .account-profile-note {
       padding: 5px 0;
@@ -42,4 +46,4 @@
       massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/status/Notification.html b/src/routes/_components/status/Notification.html
index f6ce14d4..d2e938b0 100644
--- a/src/routes/_components/status/Notification.html
+++ b/src/routes/_components/status/Notification.html
@@ -3,7 +3,7 @@
           {status} {notification} {active} {shortcutScope} on:recalculateHeight
   />
 {:else}
-  <article class="notification-article {active ? 'status-active' : ''}"
+  <article class={className}
            tabindex="0"
            aria-posinset={index}
            aria-setsize={length}
@@ -44,6 +44,7 @@
   import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
   import { goto } from '../../../../__sapper__/client'
   import { composeNewStatusMentioning } from '../../_actions/mention'
+  import { classname } from '../../_utils/classname'
 
   export default {
     components: {
@@ -67,7 +68,12 @@
       },
       ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
         !status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
-      )
+      ),
+      className: ({ active, $underlineLinks }) => (classname(
+        'notification-article',
+        active && 'status-active',
+        $underlineLinks && 'underline-links'
+      ))
     },
     methods: {
       openAuthorProfile () {
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index b779265b..35dcc5f6 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -269,12 +269,13 @@
         status.reblog ||
         timelineType === 'pinned'
       ),
-      className: ({ visibility, timelineType, isStatusInOwnThread, active }) => (classname(
+      className: ({ visibility, timelineType, isStatusInOwnThread, active, $underlineLinks }) => (classname(
         'status-article',
         visibility === 'direct' && 'status-direct',
         timelineType !== 'search' && 'status-in-timeline',
         isStatusInOwnThread && 'status-in-own-thread',
-        active && 'status-active'
+        active && 'status-active',
+        $underlineLinks && 'underline-links'
       )),
       content: ({ originalStatus }) => originalStatus.content || '',
       showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
diff --git a/src/routes/_components/status/StatusContent.html b/src/routes/_components/status/StatusContent.html
index 9d424195..9bf791b9 100644
--- a/src/routes/_components/status/StatusContent.html
+++ b/src/routes/_components/status/StatusContent.html
@@ -50,6 +50,10 @@
     position: absolute;
   }
 
+  :global(.underline-links .status-content a) {
+    text-decoration: underline;
+  }
+
 </style>
 <script>
   import { mark, stop } from '../../_utils/marks'
diff --git a/src/routes/_components/status/StatusMentions.html b/src/routes/_components/status/StatusMentions.html
index 2519283b..353b2b93 100644
--- a/src/routes/_components/status/StatusMentions.html
+++ b/src/routes/_components/status/StatusMentions.html
@@ -28,6 +28,10 @@
     margin: 20px 10px 20px 5px;
   }
 
+  :global(.underline-links .status-mentions a) {
+    text-decoration: underline;
+  }
+
 </style>
 <script>
   export default {
@@ -35,4 +39,4 @@
       mentions: ({ originalStatus }) => originalStatus.mentions || []
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/status/StatusSpoiler.html b/src/routes/_components/status/StatusSpoiler.html
index 81fb5266..bdd56d52 100644
--- a/src/routes/_components/status/StatusSpoiler.html
+++ b/src/routes/_components/status/StatusSpoiler.html
@@ -40,6 +40,11 @@
     padding: 5px 10px;
     font-size: 1.1em;
   }
+
+  :global(.underline-links .status-spoiler a) {
+    text-decoration: underline;
+  }
+
 </style>
 <script>
   import Shortcut from '../shortcut/Shortcut.html'
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index a9ae7b27..71c7ebf2 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -35,7 +35,7 @@
     <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>
+      <label for="choice-underline-links">Underline links in toots and profiles</label>
     </div>
   </form>
 
diff --git a/src/routes/_store/observers/loggedInObservers.js b/src/routes/_store/observers/loggedInObservers.js
index 893fbbe3..35261f59 100644
--- a/src/routes/_store/observers/loggedInObservers.js
+++ b/src/routes/_store/observers/loggedInObservers.js
@@ -4,7 +4,6 @@ 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
@@ -15,5 +14,4 @@ export default function loggedInObservers () {
   autosuggestObservers()
   notificationPermissionObservers()
   customScrollbarObservers()
-  underlineLinksObservers()
 }
diff --git a/src/routes/_store/observers/underlineLinksObservers.js b/src/routes/_store/observers/underlineLinksObservers.js
deleted file mode 100644
index db805d64..00000000
--- a/src/routes/_store/observers/underlineLinksObservers.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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/scss/global.scss b/src/scss/global.scss
index 031f6489..cec825a5 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -99,10 +99,6 @@ a {
     text-decoration: underline;
   }
 
-  .underline-links & {
-    text-decoration: underline;
-  }
-
 }
 
 input {