feat: add option to underline links in toot text (#919)

* feat: add option to underline links in toot text

* change text
This commit is contained in:
Nolan Lawson 2019-01-26 12:58:11 -08:00 committed by GitHub
parent 0b1efab0c1
commit 109022fab9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 54 additions and 19 deletions

View file

@ -45,6 +45,11 @@ if (hasLocalStorage && localStorage.store_disableCustomScrollbars === 'true') {
theScrollbarStyle.setAttribute('media', 'only x') // disables the style 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 // hack to make the scrollbars rounded only on macOS
if (/mac/i.test(navigator.platform)) { if (/mac/i.test(navigator.platform)) {
document.documentElement.style.setProperty('--scrollbar-border-radius', '50px') document.documentElement.style.setProperty('--scrollbar-border-radius', '50px')

View file

@ -23,6 +23,7 @@
background: var(--settings-list-item-bg); background: var(--settings-list-item-bg);
} }
.settings-list-item a, .settings-list-item a:visited { .settings-list-item a, .settings-list-item a:visited {
text-decoration: none;
color: var(--settings-list-item-text); color: var(--settings-list-item-text);
} }
.settings-list-item a:hover { .settings-list-item a:hover {

View file

@ -1,8 +1,8 @@
<SettingsLayout page='settings/general' label="General"> <SettingsLayout page='settings/general' label="General">
<h1>General Settings</h1> <h1>General Settings</h1>
<h2>Preferences</h2> <h2>Media</h2>
<form class="ui-settings" aria-label="UI settings"> <form class="ui-settings">
<div class="setting-group"> <div class="setting-group">
<input type="checkbox" id="choice-mark-media-sensitive" <input type="checkbox" id="choice-mark-media-sensitive"
bind:checked="$markMediaAsSensitive" on:change="onChange(event)"> bind:checked="$markMediaAsSensitive" on:change="onChange(event)">
@ -18,20 +18,29 @@
bind:checked="$largeInlineMedia" on:change="onChange(event)"> bind:checked="$largeInlineMedia" on:change="onChange(event)">
<label for="choice-large-inline-media">Show large inline images and videos</label> <label for="choice-large-inline-media">Show large inline images and videos</label>
</div> </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"> <div class="setting-group">
<input type="checkbox" id="choice-autoplay-gif" <input type="checkbox" id="choice-autoplay-gif"
bind:checked="$autoplayGifs" on:change="onChange(event)"> bind:checked="$autoplayGifs" on:change="onChange(event)">
<label for="choice-autoplay-gif">Autoplay GIFs</label> <label for="choice-autoplay-gif">Autoplay GIFs</label>
</div> </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"> <div class="setting-group">
<input type="checkbox" id="choice-reduce-motion" <input type="checkbox" id="choice-reduce-motion"
bind:checked="$reduceMotion" on:change="onChange(event)"> bind:checked="$reduceMotion" on:change="onChange(event)">

View file

@ -4,6 +4,7 @@ import { notificationObservers } from './notificationObservers'
import { autosuggestObservers } from './autosuggestObservers' import { autosuggestObservers } from './autosuggestObservers'
import { notificationPermissionObservers } from './notificationPermissionObservers' import { notificationPermissionObservers } from './notificationPermissionObservers'
import { customScrollbarObservers } from './customScrollbarObservers' import { customScrollbarObservers } from './customScrollbarObservers'
import { underlineLinksObservers } from './underlineLinksObservers'
// These observers can be lazy-loaded when the user is actually logged in. // These observers can be lazy-loaded when the user is actually logged in.
// Prevents circular dependencies and reduces the size of main.js // Prevents circular dependencies and reduces the size of main.js
@ -14,4 +15,5 @@ export default function loggedInObservers () {
autosuggestObservers() autosuggestObservers()
notificationPermissionObservers() notificationPermissionObservers()
customScrollbarObservers() customScrollbarObservers()
underlineLinksObservers()
} }

View file

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

View file

@ -26,7 +26,8 @@ const persistedState = {
pushSubscription: null, pushSubscription: null,
reduceMotion: reduceMotion:
!process.browser || !process.browser ||
window.matchMedia('(prefers-reduced-motion: reduce)').matches window.matchMedia('(prefers-reduced-motion: reduce)').matches,
underlineLinks: false
} }
const nonPersistedState = { const nonPersistedState = {

View file

@ -90,14 +90,19 @@ h1 {
a { a {
color: var(--anchor-text); color: var(--anchor-text);
text-decoration: none; text-decoration: none;
}
a:visited { &:visited {
color: var(--anchor-text); color: var(--anchor-text);
} }
&:hover {
text-decoration: underline;
}
.underline-links & {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
} }
input { input {