fix: use focus ring rather than background for status/notifications (#1030)
I don't like clicking on a status, clicking back, and suddenly it has a different background. The focus ring is less distracting. Unfortunately it doesn't look right on the article element itself, so we have to apply the style to its parent, but that's not too hard.
This commit is contained in:
parent
42e466f3c2
commit
e16c312788
|
@ -10,6 +10,9 @@
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
focus-key={focusKey}
|
focus-key={focusKey}
|
||||||
shortcut-key={shortcutScope}
|
shortcut-key={shortcutScope}
|
||||||
|
on:focus="onFocus()"
|
||||||
|
on:blur="onBlur()"
|
||||||
|
ref:article
|
||||||
>
|
>
|
||||||
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
|
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
|
||||||
{account} {accountId} {uuid} isStatusInNotification="true" />
|
{account} {accountId} {uuid} isStatusInNotification="true" />
|
||||||
|
@ -27,8 +30,7 @@
|
||||||
border-bottom: 1px solid var(--main-border);
|
border-bottom: 1px solid var(--main-border);
|
||||||
}
|
}
|
||||||
.notification-article:focus {
|
.notification-article:focus {
|
||||||
background-color: var(--status-active-background);
|
outline: none; /* focus is on the parent instead */
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.notification-article {
|
.notification-article {
|
||||||
|
@ -84,6 +86,13 @@
|
||||||
async mentionAuthor () {
|
async mentionAuthor () {
|
||||||
let { account } = this.get()
|
let { account } = this.get()
|
||||||
await composeNewStatusMentioning(account)
|
await composeNewStatusMentioning(account)
|
||||||
|
},
|
||||||
|
// apply focus styles to parent rather than article because it shows up better
|
||||||
|
onFocus () {
|
||||||
|
this.refs.article.parentElement.classList.toggle('focus', true)
|
||||||
|
},
|
||||||
|
onBlur () {
|
||||||
|
this.refs.article.parentElement.classList.toggle('focus', false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,11 @@
|
||||||
aria-posinset={index}
|
aria-posinset={index}
|
||||||
aria-setsize={length}
|
aria-setsize={length}
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
on:recalculateHeight>
|
on:recalculateHeight
|
||||||
|
on:focus="onFocus()"
|
||||||
|
on:blur="onBlur()"
|
||||||
|
ref:article
|
||||||
|
>
|
||||||
{#if showHeader}
|
{#if showHeader}
|
||||||
<StatusHeader {...params} />
|
<StatusHeader {...params} />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -76,8 +80,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-article:focus {
|
.status-article:focus {
|
||||||
background-color: var(--status-active-background);
|
outline: none; /* focus is on the parent instead */
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-article.status-in-own-thread {
|
.status-article.status-in-own-thread {
|
||||||
|
@ -213,6 +216,13 @@
|
||||||
async mentionAuthor () {
|
async mentionAuthor () {
|
||||||
let { accountForShortcut } = this.get()
|
let { accountForShortcut } = this.get()
|
||||||
await composeNewStatusMentioning(accountForShortcut)
|
await composeNewStatusMentioning(accountForShortcut)
|
||||||
|
},
|
||||||
|
// apply focus styles to parent rather than article because it shows up better
|
||||||
|
onFocus () {
|
||||||
|
this.refs.article.parentElement.classList.toggle('focus', true)
|
||||||
|
},
|
||||||
|
onBlur () {
|
||||||
|
this.refs.article.parentElement.classList.toggle('focus', false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -173,7 +173,7 @@ ul, li, p {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
*:focus {
|
*:focus, .focus {
|
||||||
outline: 2px solid var(--focus-outline);
|
outline: 2px solid var(--focus-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -82,7 +82,6 @@
|
||||||
--very-deemphasized-text-color: #{rgba(#666, 0.6)};
|
--very-deemphasized-text-color: #{rgba(#666, 0.6)};
|
||||||
|
|
||||||
--status-direct-background: #{darken($body-bg-color, 5%)};
|
--status-direct-background: #{darken($body-bg-color, 5%)};
|
||||||
--status-active-background: #{lighten($body-bg-color, 2%)};
|
|
||||||
--main-theme-color: #{$main-theme-color};
|
--main-theme-color: #{$main-theme-color};
|
||||||
--warning-color: #{#e01f19};
|
--warning-color: #{#e01f19};
|
||||||
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
|
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
|
||||||
|
|
|
@ -16,7 +16,6 @@
|
||||||
--very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
|
--very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
|
||||||
|
|
||||||
--status-direct-background: #{darken($body-bg-color, 5%)};
|
--status-direct-background: #{darken($body-bg-color, 5%)};
|
||||||
--status-active-background: #{lighten($body-bg-color, 10%)};
|
|
||||||
--main-theme-color: #{$main-theme-color};
|
--main-theme-color: #{$main-theme-color};
|
||||||
--warning-color: #{#c7423d};
|
--warning-color: #{#c7423d};
|
||||||
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
|
--alt-input-bg: #{rgba($main-bg-color, 0.7)};
|
||||||
|
|
Loading…
Reference in a new issue