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:
parent
0b1efab0c1
commit
109022fab9
|
@ -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')
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)">
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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 })
|
||||
}
|
|
@ -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 = {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue