Commit Graph

175 Commits

Author SHA1 Message Date
Kris
edb931e7e5
UX: let hamburger-sidebar restrict child width (#17614) 2022-07-22 10:26:13 -04:00
Alan Guo Xiang Tan
852057a25a
UX: Set width on hamburger menu drop down to prevent overflow (#17607) 2022-07-22 15:02:30 +08:00
Alan Guo Xiang Tan
99073338de
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600)
When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference.

Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 13:06:47 +08:00
Osama Sayegh
fac04f3e73
DEV: Introduce a basic version of the new notifications menu behind a feature flag (#17492) 2022-07-19 10:35:02 +08:00
Andrei Prigorshnev
5c596273a0
FEATURE: user status (#16875) 2022-05-27 13:15:14 +04:00
Kris
c9419b51a3
UX: prevent user menu overflow on tiny screens (#15964) 2022-02-15 20:13:11 -05:00
Jeff Wong
7c12ca89cb
Update menu swipe (#13277)
* DEV: replace swipe events to use translate rather than left/right

translate is better for animations. also use native css animations for opening
and closing.

* a11y: respect prefers reduced motion on mobile timeline

* DEV: reduce jquery usage

* DEV: add tests for menu swipe events

test is run in 50% zoom/transform which means offsets and x of touch events need to be halved

Refactor test window to use a transform rather than non-standard zoom property

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2021-06-07 12:31:16 -07:00
Kris
f3e021ad45
UX: Update search panel styles, consistency (#13262) 2021-06-03 14:14:24 +10:00
Jordan Vidrine
d5e787fa89
UX: Change color of focus & hover on user menu tabs (#13195) 2021-05-28 12:24:04 -05:00
Kris
567f9caf75
A11Y: Fix post control and user-menu focus styles (#13118) 2021-05-24 18:10:01 +10:00
Martin Brennan
28d67b4583
FEATURE: Show an educational message in the quick access menu for personal messages when there are none (#12564)
If the user has not been sent any messages, show a message in the quick access menu with an educational message. If the user can send private messages, also show a link to open the "new message" composer:

This also adds a general improvement to the quick-access-panel, to be able to show an `emptyStateWidget` instead of just a message if there is nothing to show in the panel, as well as initial general styles for empty state.
2021-04-01 10:22:40 +10:00
Joffrey JAFFEUX
cf703ccf66
A11Y: improves avatar menu focus/active states (#12422) 2021-03-18 13:29:27 +01:00
Roman Rizzi
5276d432aa
A11Y: Switch tabs using the keyboard (#12262)
* Revert "Revert "A11Y: Switch tabs using the keyboard (#12241)" (#12260)"

This reverts commit 4c1e02d412.

* FIX: Make sure that the "menu-link" is present when a plugin adds a tab.

Other changes:

- We put the notification tab first using JS instead of CSS. It's important because of the tab number data attribute, which the keyboard navigation uses.
- We only set the button id from the attrs object if it's a tab. Otherwise, it conflicts with the topic footer button
2021-03-03 14:37:40 -03:00
Roman Rizzi
4c1e02d412
Revert "A11Y: Switch tabs using the keyboard (#12241)" (#12260)
This reverts commit de10c39fa4.
2021-03-02 13:17:36 -03:00
Roman Rizzi
de10c39fa4
A11Y: Switch tabs using the keyboard (#12241)
* A11Y: Switch tabs using the keyboard

According to the WAI-ARIA Authoring Practices, tabs should be navigable using the left/right arrow keys.

Additionally, the screen reader couldn't correctly announce that a tab was selected when clicking the tab icon. To fix this, we made the SVG icon non-clickable and set the "aria-hidden" attribute to true.

* Handle navigation events using appEvents
2021-03-02 12:22:32 -03:00
Jordan Vidrine
3019b6d8d2
FIX: 100% Width for logout button (#12243)
This commit sets the width for the logout button to be 100% to allow for clicking outside of the text to still work as expected.
2021-03-01 11:09:50 -06:00
Kris
c3f6eb17a5
UX: On very short screens switch quick-access-profile to 2-columns (#12120) 2021-02-18 18:47:37 -05:00
Penar Musaraj
2dc48fd6c1
UX: Uniformize styles for focus states (#11933) 2021-02-03 11:45:54 -05:00
Roman Rizzi
6d30e01d1c
A11Y: Structure user menu as tabs. (#11789)
* A11Y: Structure user menu as tabs.

Although the user menu content has the appearance of tabs and relies on the functionality of tabs to make sense in terms of content and focus order, it is not marked up correctly as tabs and tab panels. See [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel) and the [example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html) for details.

* Make plugin api backwards compatible
2021-01-22 19:05:14 -03:00
Roman Rizzi
48f06e56f2
A11Y: Improve the quick access menu accessibility. (#11757)
- The icon for the “view all” controls in the panels have no accessible alternative.
- Because the “Log Out” and "Do Not Disturb" elements in the preferences tab are an <a> element without an href attribute, it is not keyboard focusable and therefore not keyboard focusable. Use a button element instead.
2021-01-20 14:50:36 -03:00
Mark VanLandingham
23059297b5
UX: Ellipsis hamburger menu link text when overflowing (#11715) 2021-01-14 18:25:19 -05:00
Kris
5b77c6a5d8
UX: Allow quick access profile content to scroll (#11639) 2021-01-06 15:32:20 -03:00
Mark VanLandingham
649ed24bb4
FEATURE: Do not disturb (#11484) 2020-12-18 09:03:51 -06:00
Sam
4558d91bbb
UX: adjust default menu width (#11526)
The notification panel gets resized and the JS uses maxWidth of 320.

This tends to fight with the CSS causing notifications to "jump" a bit when a new one lands.
2020-12-18 14:50:50 +11:00
Kris
694c7f2c98
reduce min-width for better spacing, follow-up to 1455421 (#11177) 2020-11-09 17:05:09 -06:00
Kris
1455421433
UX: truncate long usernames in multi-username notifications (#11153)
* UX: truncate long usernames in multi-username notifications

* remove extra class, clarify comments
2020-11-09 16:06:52 +11:00
Penar Musaraj
aca2697a42
UX: Don't truncate category names in search panel
But keep truncating long category names in hamburger menu.
2020-09-28 21:59:45 -04:00
Kris
7bba65b6f5
UX: Restyle user menu so user links are findable (#10554) 2020-08-28 20:20:59 -04:00
Kris
9bc992dce4 follow-ups to 1972364: increase notification limit, make show-all a link 2020-08-12 17:14:48 -04:00
Kris
95a454abb6 specificity fix to d1c570c 2020-08-12 16:03:08 -04:00
Kris
d1c570cf2c Hamburger menu needs to be able to scroll, follow-up to 1972364 2020-08-11 22:33:51 -04:00
Kris
1972364d0f
REFACTOR: Update the notification menu to remove scrolling (#10371) 2020-08-10 16:17:15 -04:00
Penar Musaraj
c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00
Penar Musaraj
3116591dc6
DEV: Refactor dark-light-choose() usage in SCSS
Covers most, but not all, cases.
2020-07-29 09:09:37 -04:00
Penar Musaraj
81ab62c72a
DEV: Refactor blend-primary-secondary() usage in SCSS 2020-07-28 13:33:31 -04:00
Penar Musaraj
69efbd213b
DEV: Refactor dark-light-diff usage in stylesheets
- Adds new `$danger-low-mid` SCSS variable
- Removes `dark-light-diff` outside variables and color transformations
2020-07-28 11:06:06 -04:00
Kris
530c6594cb follow-up fix due to adding overflow hidden in 32e40ea 2020-05-29 22:23:23 -04:00
Kris
32e40ea133 UX: Make the menu links header within the user panel more flexible 2020-05-29 21:02:26 -04:00
Joffrey JAFFEUX
03c3448b15
UX: better alignment of icons in notifications menu (#9934) 2020-05-29 22:48:47 +02:00
Joffrey JAFFEUX
31d1468922
UX: reworks various menus to homogenize them (#9905)
- bookmark modal menu
- topic-footer-mobile-dropdown
- post-admin-menu
- topic-admin-menu
- quick-access menus
- toolbar-popup-menu
2020-05-29 08:05:21 +02:00
Kris
c7d75bc3a0 Minor adjustment to menu-links-header spacing to avoid some wrapping 2020-05-28 18:40:22 -04:00
Kris
8bd693891a Follow-up to 8a52756 for safari 2020-03-31 21:57:09 -04:00
Kris
8a527567d3 UX: Break very long words in titles within menus 2020-03-31 20:55:11 -04:00
Kris
39dde33cbb UX: Larger tap areas for profile panel in user menu on mobile devices 2020-03-23 13:25:33 -04:00
Krzysztof Kotlarek
f59647cd55
FIX: move IE specific CSS rules to discourse-internet-explorer plugin (#8567) 2019-12-18 15:25:16 +11:00
Joe
5e134400e2
UX: prevent scrollbars on initial panel load (#8456) 2019-12-04 11:40:59 +08:00
Kris
b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05:00
Penar Musaraj
7eb26e5bbb FIX: ensure menu not too tall on desktop only
Followup to af65809e, menu-panel shorter than 100vh does not look good on mobile.
2019-11-03 18:47:53 -05:00
Joffrey JAFFEUX
af65809ec6
FIX: ensures menu panel is not too tall for screen (#8248) 2019-11-02 12:01:24 +01:00
Joffrey JAFFEUX
312ecf2a05
FIX: allows scrolling of search menu panel when showing more results (#8186) 2019-10-11 22:25:28 +02:00
Kris
8ccd286721 Minor category link alignment adjustment 2019-10-03 21:19:03 -04:00
Kyle Zhao
9b10a78d82 FEATURE: Quick access panels in user menu (#8073)
* Extract QuickAccessPanel from UserNotifications.

* FEATURE: Quick access panels in user menu.

This feature adds quick access panels for bookmarks and personal
messages. It allows uses to browse recent items directly in the user
menu, without being redirected to the full pages.

* REFACTOR: Use QuickAccessItem for messages.

Reusing `DefaultNotificationItem` feels nice but it actually requires a
lot of extra work that is not needed for a quick access item.

Also, `DefaultNotificationItem` shows an incorrect tooptip ("unread
private message"), and it is not trivial to remove / override that.

* Use a plain JS object instead.

An Ember object was required when `DefaultNotificationItem` was used.

* Prefix instead suffix `_` for private helpers.

* Set to null instead of deleting object keys.

JavaScript engines can optimize object property access based on the
object’s shape. https://mathiasbynens.be/notes/shapes-ics

* Change trivial try/catch to one-liners.

* Return the promise in case needs to be waited on.

* Refactor showAll to a link with href

* Store `emptyStatePlaceholderItemText` in state.

* Store items in Session singleton instead.

We can drop `staleItems` (and `findStaleItems`) altogether. Because
`(old) items === staleItems` when switching back to a quick access
panel.

* Add `limit` parameter to the `user_actions` API.

* Explicitly import Session instead.
2019-09-09 11:03:57 -04:00
Joffrey JAFFEUX
a61147d838
FEATURE: displays tags in search menu results when enabled (#7819) 2019-06-27 19:26:14 +02:00
Dan Ungureanu
da39d66e83
DEV: Improve support for plugins. (#7332)
* DEV: Allow NewPostManager handlers handle PMs.
* DEV: Add custom fields topic option to PostCreator.
* DEV: Add topic_id to serializer data.
* DEV: Wrap topic title from notification item in a span.
2019-05-25 16:53:03 +03:00
Kris
8e9d0ceb67 UX: Mobile - fix editor button space, divider, extra upload icon 2019-04-09 13:15:31 -04:00
Kris
87b5003453 UX: Increase width of hamburger menu to 320px 2019-02-21 21:52:21 -05:00
Kris
94f16ba931 UX: Make button icons use lighter color instead of opacity 2019-01-31 13:59:49 -05:00
Kris
b9355f316a Minor size/alignment fixes for font size increase 2019-01-17 11:42:03 -05:00
Jeff Wong
71d8807fec
Full height swipe-able menus (#6566)
* Feature: Full height swipe enabled menus

support pan events on iphone
2018-12-11 09:15:20 -08:00
Penar Musaraj
03deda2147
Upgrade to FontAwesome 5 (take two) (#6673)
* Add missing icons to set

* Revert FA5 revert

 This reverts commit 42572ff

* use new SVG syntax in locales

* Noscript page changes (remove login button, center "powered by" footer text)

* Cast wider net for SVG icons in settings

- include any _icon setting for SVG registry (offers better support for plugin settings)

- let themes store multiple pipe-delimited icons in a setting

- also replaces broken onebox image icon with SVG reference in cooked post processor

* interpolate icons in locales

* Fix composer whisper icon alignment

* Add support for stacked icons

* SECURITY: enforce hostname to match discourse hostname

This ensures that the hostname rails uses for various helpers always matches
the Discourse hostname

* load SVG sprite with pre-initializers

* FIX: enable caching on SVG sprites

* PERF: use JSONP for SVG sprites so they are served from CDN

This avoids needing to deal with CORS for loading of the SVG

Note, added the svg- prefix to the filename so we can quickly tell in
dev tools what the file is

* Add missing SVG sprite JSONP script to CSP

* Upgrade to FA 5.5.0

* Add support for all FA4.7 icons

- adds complete frontend and backend for renamed FA4.7 icons

- improves performance of SvgSprite.bundle and SvgSprite.all_icons

* Fix group avatar flair preview

- adds an endpoint at /svg-sprites/search/:keyword

- adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset

* Remove FA 4.7 font files
2018-11-26 16:49:57 -05:00
Sam
42572ff138 Revert font awesome 5 changes
We are still pushing ahead on this 100% just need a bit longer to prepare
all plugins
2018-11-08 16:12:18 +11:00
Penar Musaraj
005e1ecb9b
FEATURE: Update Font Awesome to v5.4.1 and SVGs (#6557)
* First take on subsetting svg icons

* FontAwesome 5 svg subset WIP

* Include icons from plugins/badges into svg sprite subset

* add svg icon support to themes

* Add spec for SvgSprite

* Misc. SVG icon fixes

* Use FA5 svgs in local-dates plugin

* CSS adjustments, fix SVG icons in group flair

* Use SVG icons in poll plugin

* Add SVG icons to /wizard
2018-11-07 13:05:43 -05:00
Joffrey JAFFEUX
11ee07093c FEATURE: revamps search-menu layout (#6543) 2018-10-30 10:44:49 -04:00
Kris
e53983b53b Alignment fix 2018-08-10 14:00:06 -04:00
Kris
04658bb2f1 UX: prevent text from wrapping below notification icons 2018-08-09 12:04:34 -04:00
Kris
48ecad53f2 additional hamburger alignment fix 2018-08-07 09:47:01 -04:00
Kris
74269ad585 FIX: hamburger menu category alignment 2018-08-06 11:11:29 -04:00
Kris
84d822959a Reducing some specificity, color fix 2018-08-03 17:44:22 -04:00
Vinoth Kannan
78d91b1daf
UX: Changes in top categories of hamburger menu (#6200) 2018-07-30 14:13:00 +05:30
Joe
85291e53f1
UX: more categories link alignment 2018-07-27 22:17:29 +08:00
Vinoth Kannan
dac29b5ebc
UX: Display only top categories in hamburger menu (#6146) 2018-07-27 12:11:07 +05:30
Kris
b637b57e4f FIX: Alignment of user dropdown menu icons 2018-06-19 15:38:06 -04:00
Joffrey JAFFEUX
174d392e5a
DEV: adds prettier (#5956)
Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn`

It's recommended to configure your editor to run prettier on file save.
2018-06-08 11:49:31 +02:00
Joe
5ec896d163
FIX: align categories with menu panel links 2018-05-24 16:15:57 +08:00
Kris
a4b8813a02 FIX: Header nav should be tabbable and have focus state 2018-04-13 12:53:04 -04:00
Sam
62f09af1c2 UX: occasionally getting scrollbar while loading notifications 2018-03-23 18:19:28 +11:00
Kris
efb0bf6b16 Categories in hamburger menu were misaligned in Firefox 2018-03-02 15:04:55 -05:00
Kris
677e126fbf UX: Implementing a box-shadow system, cleaning up existing shadows 2018-02-20 12:18:20 -05:00
Kris
35a49a240a UX: Improving header scalability for large font themes 2018-02-16 15:58:10 -05:00
Kris
9e690bf238
UX: Cleaning up category badge alignment (#5561) 2018-02-02 19:03:25 -05:00
Kris
0c01e0b2fe
UX: Implementing a z-index system (#5507) 2018-01-16 19:05:12 -05:00
Kris
674013129a
UX: Type system rebuild (#5492) 2018-01-12 17:27:38 -05:00
Kris
fc2f948a39 UX: user menu-panel icons too large 2017-12-21 16:31:45 -05:00
Kris
dea3e84f18 UX: Reducing number of font-sizes used in common 2017-12-21 12:59:19 -05:00
Kris
2d9d43ed1a UX: Removing px font defintions and replacing with em 2017-12-18 15:49:11 -05:00
Kris
af11913314 FIX: Positining of search spinner in tablet-sized viewports 2017-12-01 11:01:03 -05:00
Joffrey JAFFEUX
dd5562322b Revert "FIX: reflects discourse icons naming scheme s/d-icon-*/d-*"
This reverts commit b5ed980235.
2017-11-23 18:24:26 +01:00
Joffrey JAFFEUX
b5ed980235
FIX: reflects discourse icons naming scheme s/d-icon-*/d-* 2017-11-21 16:01:15 +01:00
Neil Lalonde
234f0262b8 UX: use down chevron button instead of "show more" text to link to full list of notifications 2017-11-07 13:48:55 -05:00
Neil Lalonde
814502f7bb FEATURE: add a Dismiss link to user menu that dismisses all notifications 2017-11-07 10:41:21 -05:00
Neil Lalonde
d9a9ad3edb FIX: rendering of block style tags in search results 2017-10-24 17:55:30 -04:00
Kris
dc2d9f05dc removing scale-color, first pass 2017-10-13 11:57:10 -04:00
Robin Ward
38064c5776 FIX: Broken notifications in non-english locales 2017-09-14 14:26:31 -04:00
Robin Ward
bc613e1df5 Adjust nesting of search divs 2017-09-12 11:14:13 -04:00
Sam
dc4d5677eb FEATURE: use a when search result is focused to add to composer 2017-08-17 12:39:43 -04:00
Sam
304379d436 FEATURE: up/down arrow will highlight search result
Then you can use enter to visit result.
2017-08-16 14:14:55 -04:00
Robin Ward
6dfa3625df REFACTOR: Replace fa-* in SCSS with d-icon-* 2017-07-27 15:09:30 -04:00
awesomerobot
c29b7aa65d initial pass at color simplification 2017-07-14 21:43:35 -04:00
giorgia
d308638a18 create searchResultUserSerializer, display name next to username in search results 2017-03-01 13:11:01 +01:00
Sam
8496f8dfc2 FEATURE: display username user dropdown 2015-12-20 17:15:45 +11:00