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
|
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')
|
||||||
|
|
|
@ -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 {
|
||||||
|
@ -70,4 +71,4 @@
|
||||||
offsetForIcon: void 0
|
offsetForIcon: void 0
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -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)">
|
||||||
|
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
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 = {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue