fix: tweak underlining of links (#920)

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')

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>
+</script>

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>
+</script>

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>
+</script>

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 () {

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,

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'

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>
+</script>

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'

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>
 

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()
 }

src/routes/_store/observers/underlineLinksObservers.js

@@ -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 })
-}

src/scss/global.scss

@@ -99,10 +99,6 @@ a {
     text-decoration: underline;
   }
 
-  .underline-links & {
-    text-decoration: underline;
-  }
-
 }
 
 input {