diff --git a/CHANGELOG.md b/CHANGELOG.md index 475edc61c1..6e424a6285 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,16 +5,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] +### Added +- Mouseover titles for emojis in reaction picker +- Support to input emoji into the search box in reaction picker +- Added some missing unicode emoji + ### Fixed - Fixed the occasional bug where screen would scroll 1px when typing into a reply form - Fixed timeline errors locking timelines - Fixed missing highlighted border in expanded conversations +- Fixed custom emoji not working in profile field names +- Fixed pinned statuses not appearing in user profiles +- Fixed some elements not being keyboard navigation friendly ### Changed - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers -- Fixed custom emoji not working in profile field names -- Fixed pinned statuses not appearing in user profiles -- Fixed username autocomplete being jumpy +- Made reply/fav/repeat etc buttons easier to hit ## [2.2.1] - 2020-11-11 diff --git a/src/App.scss b/src/App.scss index ca7d33cd93..cdc3209c91 100644 --- a/src/App.scss +++ b/src/App.scss @@ -33,6 +33,7 @@ h4 { max-width: 980px; align-content: flex-start; } + .underlay { background-color: rgba(0,0,0,0.15); background-color: var(--underlay, rgba(0,0,0,0.15)); @@ -69,7 +70,7 @@ a { color: var(--link, $fallback--link); } -button { +.button-default { user-select: none; color: $fallback--text; color: var(--btnText, $fallback--text); @@ -85,7 +86,8 @@ button { font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); - i[class*=icon-], .svg-inline--fa { + i[class*=icon-], + .svg-inline--fa { color: $fallback--text; color: var(--btnText, $fallback--text); } @@ -107,7 +109,8 @@ button { background-color: $fallback--fg; background-color: var(--btnPressed, $fallback--fg); - svg, i { + svg, + i { color: $fallback--text; color: var(--btnPressedText, $fallback--text); } @@ -120,7 +123,8 @@ button { background-color: $fallback--fg; background-color: var(--btnDisabled, $fallback--fg); - svg, i { + svg, + i { color: $fallback--text; color: var(--btnDisabledText, $fallback--text); } @@ -134,7 +138,8 @@ button { box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); - svg, i { + svg, + i { color: $fallback--text; color: var(--btnToggledText, $fallback--text); } @@ -149,6 +154,30 @@ button { } } +.button-unstyled { + background: none; + border: none; + outline: none; + display: inline; + text-align: initial; + font-size: 100%; + font-family: inherit; + padding: 0; + line-height: unset; + cursor: pointer; + box-sizing: content-box; + color: inherit; + + &.-link { + color: $fallback--link; + color: var(--link, $fallback--link); + } + + &.-fullwidth { + width: 100%; + } +} + input, textarea, .select, .input { &.unstyled { @@ -442,6 +471,7 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { color: $fallback--faint; color: var(--faintLink, $fallback--faint); @@ -453,11 +483,8 @@ main-router { overflow-x: hidden; } - button { - flex-shrink: 0; - } - - button, .alert { + .button-default, + .alert { // height: 100%; line-height: 21px; min-height: 0; @@ -468,8 +495,11 @@ main-router { align-self: stretch; } - button { - &, i[class*=icon-] { + .button-default { + flex-shrink: 0; + + &, + i[class*=icon-] { color: $fallback--text; color: var(--btnPanelText, $fallback--text); } @@ -492,7 +522,8 @@ main-router { } } - a { + a, + .-link { color: $fallback--link; color: var(--panelLink, $fallback--link) } @@ -507,15 +538,15 @@ main-router { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - .faint { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } - a { + a, + .-link { color: $fallback--link; - color: var(--panelLink, $fallback--link) + color: var(--panelLink, $fallback--link); } } @@ -797,7 +828,7 @@ nav { } } -.btn.btn-default { +.btn.button-default { min-height: 28px; } diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index e3ae376e26..ab5d1d2982 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -4,6 +4,7 @@ trigger="click" placement="bottom" :bound-to="{ x: 'container' }" + remove-padding >
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 5af744a358..e4351d3b80 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -31,9 +31,6 @@ color: $fallback--text; color: var(--text, $fallback--text); } - - border-radius: $fallback--chatMessageRadius; - border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); } .popover { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index 3849ab6e7a..0777f8809f 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -53,7 +53,7 @@
- - + - + + + diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue index 97aee2431a..3b5aec141b 100644 --- a/src/components/domain_mute_card/domain_mute_card.vue +++ b/src/components/domain_mute_card/domain_mute_card.vue @@ -6,7 +6,7 @@ {{ $t('domain_mute_card.unmute') }}