diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2017-10-06 01:07:59 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-10-06 01:07:59 +0200 |
| commit | 7db0f8dcb2110b4ec8815bedc965cfbd01a59798 (patch) | |
| tree | ff3153c334c12a75aa2875284012cded2a82d49d /app/javascript/styles | |
| parent | 49cc0eb3e7d1521079e33a60216df46679082547 (diff) | |
Implement hotkeys for web UI (#5164)
* Fix #2102 - Implement hotkeys Hotkeys on status list: - r to reply - m to mention author - f to favourite - b to boost - enter to open status - p to open author's profile - up or k to move up in the list - down or j to move down in the list - 1-9 to focus a status in one of the columns - n to focus the compose textarea - alt+n to start a brand new toot - backspace to navigate back * Add navigational hotkeys The key g followed by: - s: start - h: home - n: notifications - l: local timeline - t: federated timeline - f: favourites - u: own profile - p: pinned toots - b: blocked users - m: muted users * Add hotkey for focusing search, make escape un-focus compose/search * Fix focusing notifications column, fix hotkeys in compose textarea
Diffstat (limited to 'app/javascript/styles')
| -rw-r--r-- | app/javascript/styles/basics.scss | 13 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 24 |
2 files changed, 28 insertions, 9 deletions
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index 96f0023c3..0018c9a5d 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -94,9 +94,12 @@ button { } .app-holder { - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; + &, + & > div { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + } } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 6ef4e3866..7609ac005 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -587,6 +587,22 @@ position: absolute; } +.focusable { + &:focus { + outline: 0; + background: lighten($ui-base-color, 4%); + + &.status-direct { + background: lighten($ui-base-color, 12%); + } + + .detailed-status, + .detailed-status__action-bar { + background: lighten($ui-base-color, 8%); + } + } +} + .status { padding: 8px 10px; padding-left: 68px; @@ -1046,11 +1062,11 @@ strong { color: $primary-text-color; } +} - &.muted { - .emojione { - opacity: 0.5; - } +.muted { + .emojione { + opacity: 0.5; } } |