Commit Graph

56 Commits

Author SHA1 Message Date
Stephane Zermatten c2bd2f306a feat: Add support for keyboard shortcuts (#870)
* Add support for keyboard shortcuts.

This change introduces a Shortcut component for defining global
keyboard shortcuts from whichever component makes more sense.

This change also adds an initial set of navigation shortcuts:
- Backspace to leave a modal dialog or to go back
- g t to go to the federated timeline
- g f to go to the favorite page
- g h to go to the home page
- g n to go to the notification page
- g c to go to the community page
- s to go to the search page

These shortcuts are loaded asynchronously from _layout.html

In modal dialogs, shortcuts are also modal, to avoid strange or
overly complex behavior. This is implemented by grouping
shortcuts into scopes, and activating a separate 'modal' scope
when entering a modal dialog, so a separate set of shortcuts can
be enabled in modal dialog. Modal dialogs can be exited by
pressing 'Backspace'.

* Navigate up/down lists using keyboard shortcuts.

This change introduces keyboard shortcuts for navigating in lists and
virtual lists. j or arrow up selects the next element, k or arrow down,
the previous element. Selecting an element scrolls the list up and down,
as necessary.

This change also allows directing keyboard shortcuts to the active
element and defines the following shortcuts, for the active status:
- f to favorite or unfavorite it
- b to boost or unboost it
- r to reply to it
- o to open its thread
- x to toggle the display of a CW
- y to toggle the display of sensitive medias

This works by defining a keyboard shortcut scope for each list element.
A new component, ScrollListShortcuts, keeps track of the active element,
based on list or virtual list elements and redirects shortcuts to the
active element's scope. ScrollListShortcuts keeps the active element in
the current realm of the store, so the active element is restored when
going back to the list.

* Typing h or ? displays the list of available keyboard shortcuts.

This change introduces a new modal dialog that documents the list of
available shortcuts.
2019-01-13 10:03:29 -08:00
Nolan Lawson 7ddfe3830a
feat: add drag and drop for media uploads (#809)
* feat: add drag and drop for media uploads

fixes #65

* tweak colors
2018-12-15 02:06:12 -08:00
Nolan Lawson 25793e2fec
fix(style): use dark placeholder on dark theme (#802)
fixes #797
2018-12-13 21:32:37 -08:00
sgenoud 94d0590070 Fix the Pitch Black buttons color (#773)
Fix #757
2018-12-10 20:52:24 -08:00
sgenoud 03d883423c feat(themes): Add the Pitch Black theme (#727)
This theme is made with mobile OLED screens (iPhone XS for instance)
2018-12-04 20:40:47 -08:00
Nolan Lawson aae73f0cc6
fix(design): "add instance" input has dark bg on dark theme (#726)
fixes #723
2018-12-04 07:25:22 -08:00
Nolan Lawson 26b84c435a
fix(design): use dark compose button halo on dark themes (#714)
Also only show the halo when we're actually scrolled down, because the
point is to make it more visible against arbitrary content.
2018-12-02 14:25:40 -08:00
Nolan Lawson ef656301f6
fix(a11y): decrease brightness of hacker theme (#712)
fixes #576
2018-12-02 14:25:30 -08:00
Nolan Lawson e44cafb5fb
feat(scrollbars): add option to disable scrollbars, fix macOS style (#701)
fixes #698 and fixes #700
2018-11-27 19:17:18 -08:00
Nolan Lawson 58f9c09bb8
fix(scrollbars): use standard CSS for scrollbars (#697)
Also use correct SCSS escaping everywhere, and fix a missing semicolon. Fixes #691
2018-11-26 13:15:33 -08:00
Nolan Lawson bfa37f5105
fix(design): tweak scrollbar colors (#687) 2018-11-24 09:33:07 -08:00
Nolan Lawson 2569b59b32
feat(design): add custom scrollbars for each theme (#685)
* feat(design): add custom scrollbars for each theme

fixes #683

* improve contrast of hotpants theme
2018-11-24 01:39:00 -08:00
Nolan Lawson 48a1bd47b3
refactor(themes): use CSS specificity order for themes (#684)
The point of this PR is to make it easier to implement scrollbars (#683).

With this PR, the themes move from a body tag-based system (e.g. `body.theme-scarlet`) to a system where they simply declare global CSS and we use CSS specificity order to give us the right theme.
2018-11-24 00:41:36 -08:00
Nolan Lawson 9b2b90b46e
simplify theme definitions (#574)
* simplify theme definitions

* remove rollup dep which is overkill

* fix syntax error

* fix lint

* fix test
2018-09-23 12:26:01 -07:00
Nolan Lawson 24dc3ad2ae rename darkscarlet and darkpink to Punk and Riot 2018-09-22 16:42:57 -07:00
pianycist 9dac979cb6 add dark pink, dark red, dark green themes 2018-09-22 16:42:57 -07:00
Nolan Lawson 8334598786
fix autosuggest for dark themes (#507) 2018-08-27 19:32:22 -07:00
Nolan Lawson 092d9e98a5
fix typo in SCSS (#430) 2018-08-17 21:51:26 -07:00
Nolan Lawson 82438a62e0
upgrade to node-sass 4.8.3 (#165) 2018-04-18 21:38:16 -07:00
Maxime Le Conte des Floris e52130f1c8 add toot-cafe theme (#108)
* add toot-cafe theme

* rename "toot-cafe" theme to "sorcery"
2018-04-14 09:43:30 -07:00
Nolan Lawson edb621e0f5 nit: make cobalt secondary text a bit lighter
[skip ci]
2018-04-11 20:13:39 -07:00
Chris c8687635e8 add cobalt blue theme (#78)
* added cobalt blue theme

* lighten nav items
2018-04-11 20:11:47 -07:00
Nolan Lawson a150613b53 tweak css variable names
[skip ci]
2018-04-11 19:53:43 -07:00
Spanky bdf547b561 made a variable for the AccountProfile page for its color overlay of the header image. (#84) 2018-04-11 19:47:24 -07:00
Spanky a722e6e244 increased the default contrast in the --very-deemphasized* variables for dark themes (#76) 2018-04-11 08:41:16 -07:00
Nolan Lawson 036dcf082f extract Ozark dark theme into separate scss file 2018-04-10 20:07:58 -07:00
Spanky 3a7d887531 Added 'Ozark' dark blue color theme (#62)
* added Ozark theme, based off of a personal color scheme I use elsewhere.

* fixed incorrect main color value
2018-04-10 20:02:28 -07:00
Nolan Lawson 33d595f239 add mention option to account profiles 2018-04-04 21:45:19 -07:00
Nolan Lawson 4e67f36510 tweak css 2018-03-28 09:07:00 -07:00
Nolan Lawson 58b700788c add floating compose button 2018-03-27 00:02:55 -07:00
Nolan Lawson 6fc21e40bf add username autocomplete feature 2018-03-24 18:04:54 -07:00
Nolan Lawson 60dd2ecff2 add muted style for image/video dialogs 2018-03-20 21:26:53 -07:00
Nolan Lawson cd376c5a18 start adding media uploads 2018-03-01 21:21:49 -08:00
Nolan Lawson 3c62411819 start adding compose icons, update seafoam style 2018-02-26 20:55:49 -08:00
Nolan Lawson 1a9bca6c2b add a length indicator 2018-02-25 17:21:17 -08:00
Nolan Lawson 27f15d4030 tweak styles for notifications 2018-02-04 12:49:42 -08:00
Nolan Lawson 88d59678f2 more work on profile page 2018-01-28 12:51:48 -08:00
Nolan Lawson b569d63412 different style for direct/private statuses 2018-01-27 18:25:49 -08:00
Nolan Lawson fcfe409633 add loading indicator for images 2018-01-22 21:47:29 -08:00
Nolan Lawson 0d6cf813a8 tweak gecko theme 2018-01-21 15:28:11 -08:00
Nolan Lawson d627348d19 set meta theme color correctly 2018-01-21 15:20:50 -08:00
Nolan Lawson 17312eedbf add custom focus outline, improve a11y 2018-01-21 10:53:15 -08:00
Nolan Lawson 1f32b6a0ce add gecko theme 2018-01-20 23:26:48 -08:00
Nolan Lawson b211484cff tweak colors 2018-01-20 21:56:28 -08:00
Nolan Lawson 0f580063f7 tweak colors 2018-01-20 21:50:30 -08:00
Nolan Lawson ec2ce84f12 tweak colors 2018-01-20 21:46:33 -08:00
Nolan Lawson 0f29316ada refactor toolbar, tweak colors, add pressed states for toolbar 2018-01-20 21:42:46 -08:00
Nolan Lawson adfa5d5fb5 add modal dialog to fix fullscreen video 2018-01-20 19:19:24 -08:00
Nolan Lawson cbcb270ed3 add explicit offline mode 2018-01-18 20:57:15 -08:00
Nolan Lawson 0340a0d16f flesh out status component 2018-01-14 19:28:50 -08:00