fix: tweak underlining of links (#920)

This commit is contained in:
Nolan Lawson 2019-01-26 13:50:45 -08:00 committed by GitHub
parent 109022fab9
commit 648d9a3cf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 45 additions and 34 deletions

View File

@ -45,11 +45,6 @@ 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

@ -1,5 +1,5 @@
<h1 class="sr-only">Profile for {accountName}</h1> <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});"> style="background-image: url({headerImage});">
<div class="account-profile-grid-wrapper"> <div class="account-profile-grid-wrapper">
<div class="account-profile-grid"> <div class="account-profile-grid">
@ -75,13 +75,19 @@
import AccountProfileMeta from './AccountProfileMeta.html' import AccountProfileMeta from './AccountProfileMeta.html'
import AccountProfileDetails from './AccountProfileDetails.html' import AccountProfileDetails from './AccountProfileDetails.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { classname } from '../../_utils/classname'
export default { export default {
store: () => store, store: () => store,
computed: { computed: {
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'), headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static, 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: { components: {
AccountProfileHeader, AccountProfileHeader,
@ -91,4 +97,4 @@
AccountProfileDetails AccountProfileDetails
} }
} }
</script> </script>

View File

@ -81,6 +81,10 @@
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
} }
:global(.underline-links .account-profile-meta a) {
text-decoration: underline;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.account-profile-meta { .account-profile-meta {
padding: 5px 0; padding: 5px 0;
@ -113,4 +117,4 @@
}))) })))
} }
} }
</script> </script>

View File

@ -24,6 +24,10 @@
margin: 0; margin: 0;
} }
:global(.underline-links .account-profile-note a) {
text-decoration: underline;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.account-profile-note { .account-profile-note {
padding: 5px 0; padding: 5px 0;
@ -42,4 +46,4 @@
massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs) massagedNote: ({ note, emojis, $autoplayGifs }) => massageUserText(note, emojis, $autoplayGifs)
} }
} }
</script> </script>

View File

@ -3,7 +3,7 @@
{status} {notification} {active} {shortcutScope} on:recalculateHeight {status} {notification} {active} {shortcutScope} on:recalculateHeight
/> />
{:else} {:else}
<article class="notification-article {active ? 'status-active' : ''}" <article class={className}
tabindex="0" tabindex="0"
aria-posinset={index} aria-posinset={index}
aria-setsize={length} aria-setsize={length}
@ -44,6 +44,7 @@
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName' import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
import { goto } from '../../../../__sapper__/client' import { goto } from '../../../../__sapper__/client'
import { composeNewStatusMentioning } from '../../_actions/mention' import { composeNewStatusMentioning } from '../../_actions/mention'
import { classname } from '../../_utils/classname'
export default { export default {
components: { components: {
@ -67,7 +68,12 @@
}, },
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => ( ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}` !status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
) ),
className: ({ active, $underlineLinks }) => (classname(
'notification-article',
active && 'status-active',
$underlineLinks && 'underline-links'
))
}, },
methods: { methods: {
openAuthorProfile () { openAuthorProfile () {

View File

@ -269,12 +269,13 @@
status.reblog || status.reblog ||
timelineType === 'pinned' timelineType === 'pinned'
), ),
className: ({ visibility, timelineType, isStatusInOwnThread, active }) => (classname( className: ({ visibility, timelineType, isStatusInOwnThread, active, $underlineLinks }) => (classname(
'status-article', 'status-article',
visibility === 'direct' && 'status-direct', visibility === 'direct' && 'status-direct',
timelineType !== 'search' && 'status-in-timeline', timelineType !== 'search' && 'status-in-timeline',
isStatusInOwnThread && 'status-in-own-thread', isStatusInOwnThread && 'status-in-own-thread',
active && 'status-active' active && 'status-active',
$underlineLinks && 'underline-links'
)), )),
content: ({ originalStatus }) => originalStatus.content || '', content: ({ originalStatus }) => originalStatus.content || '',
showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown, showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,

View File

@ -50,6 +50,10 @@
position: absolute; position: absolute;
} }
:global(.underline-links .status-content a) {
text-decoration: underline;
}
</style> </style>
<script> <script>
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'

View File

@ -28,6 +28,10 @@
margin: 20px 10px 20px 5px; margin: 20px 10px 20px 5px;
} }
:global(.underline-links .status-mentions a) {
text-decoration: underline;
}
</style> </style>
<script> <script>
export default { export default {
@ -35,4 +39,4 @@
mentions: ({ originalStatus }) => originalStatus.mentions || [] mentions: ({ originalStatus }) => originalStatus.mentions || []
} }
} }
</script> </script>

View File

@ -40,6 +40,11 @@
padding: 5px 10px; padding: 5px 10px;
font-size: 1.1em; font-size: 1.1em;
} }
:global(.underline-links .status-spoiler a) {
text-decoration: underline;
}
</style> </style>
<script> <script>
import Shortcut from '../shortcut/Shortcut.html' import Shortcut from '../shortcut/Shortcut.html'

View File

@ -35,7 +35,7 @@
<div class="setting-group"> <div class="setting-group">
<input type="checkbox" id="choice-underline-links" <input type="checkbox" id="choice-underline-links"
bind:checked="$underlineLinks" on:change="onChange(event)"> 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> </div>
</form> </form>

View File

@ -4,7 +4,6 @@ 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
@ -15,5 +14,4 @@ export default function loggedInObservers () {
autosuggestObservers() autosuggestObservers()
notificationPermissionObservers() notificationPermissionObservers()
customScrollbarObservers() customScrollbarObservers()
underlineLinksObservers()
} }

View File

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

View File

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