Commit Graph

1230 Commits

Author SHA1 Message Date
Alan Guo Xiang Tan
2583d21aa7
UX: Improve styling of sidebar on mobile (#18246)
* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
2022-09-15 11:35:33 +08:00
Kris
c69473128b
UX: improve composer toolbar flexibility (#18195) 2022-09-13 14:20:33 -04:00
Keegan George
a046f0306a
UX: Improve max-height value on toolbar popup menu (#18030)
* UX: Improve `max-height` value on toolbar popup menu

* UX: Popup menu based on new editor height property

* DEV: Update heights on resize

* DEV: Remove `--d-editor-height` property

* UX: Calculate max height based on composer type

* DEV: Remove event listener `willDestroyElement()` hook

* FIX: Remove unnecessary check and calculation

* DEV: Remove explicitly calling `updateHeightOnViewportResize()`

* UX: Update max-height

* UX: Different max-height values for reply/create

* DEV: Add comments for clarity

* DEV: Remove `updateHeightOnViewportResize()` event listener
2022-08-29 12:59:35 -07:00
Alan Guo Xiang Tan
48da481871
UX: Increase sidebar fontsize on mobile (#18100)
Font size was first increased in 9909d001c5 but regressed in
7a05a9d411
2022-08-29 10:27:58 +08:00
Kris
3068df4cea
UX: sidebar styling, spacing consistency, etc (#18059) 2022-08-24 09:33:15 +08:00
Alan Guo Xiang Tan
5990842dd9 UX: Revamp styling of sidebar
The following changes are made in this commit:

1. Move caret icon in sidebar section header to the right.
1. Each row in sidebar takes the full width which enables us to do a
full width highlight on hover and when sidebar link is active.
1. Ensure each row in Sidebar is of the same height.

Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 16:14:49 +08:00
Alan Guo Xiang Tan
7a05a9d411
UX: Make Sidebar more consistent with user menu on mobile (#17940)
Before this commit, we carried custom code and styles for the sidebar on
mobile. This meant the look and feel of bringing up the sidebar on
mobile was very different from the user menu resulting in a very
inconsistent experience on mobile. Also, we could not leverage on the
existing swipe to close support on mobile.

In this commit, we made it such that the sidebar dropdown is always
rendered on mobile and made the interaction with the dropdown more
consistent with the user menu. There is also more parity with the old
hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
Arpit Jalan
10a1b6b0a9
FEATURE: update bootstrap mode notice to add invite and wizard links (#17822)
* FEATURE: update bootstrap mode notice to add invite and wizard links

* Updates per feedback on PR

* Fix the wizard link not showing

* Remove unneeded function

* Remove router service injection
2022-08-10 00:13:42 +05:30
Kris
391c687afb
UX: sidebar focus styles, remove hover for touch (#17713) 2022-07-28 13:04:00 -04:00
Kris
a23e934730
FIX: show button bar overflow on iPad & mobile (#17708) 2022-07-28 09:26:06 -04:00
Kris
b5c1132546
UX: add bulk-select to mobile topic lists (#15386) 2022-07-26 15:36:35 -04: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
Kris
d8714facb6
FIX: can't hide overflow of d-editor-button-bar on mobile (#17563) 2022-07-18 20:43:05 -04:00
Kris
9909d001c5
UX: increase text size for mobile exp sidebar (#17521) 2022-07-15 17:44:44 -04:00
Kris
4c1b8e736d
UX: add border-box to stop padding from overflow (#17391) 2022-07-08 10:31:28 -04:00
Kris
59c8774957
UX: Prevent experimental sidebar scroll jumps (#17352) 2022-07-06 10:36:44 +08:00
Kris
56c0d8cf92
UX: mobile experimental sidebar improvement (#17302)
First pass at the mobile experimental sidebar improvement.

Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
2022-07-05 11:45:02 +08:00
Kris
305c4750df
UX: allow more mobile topic elements to be tapped (#17234) 2022-06-24 15:55:52 -04:00
Jarek Radosz
36c2284dea
DEV: Fix typos "formated" -> "formatted" (#17156)
(nothing in all-the* relies on these)
2022-06-20 20:02:05 +02:00
Penar Musaraj
4be67ef9a7
UX: Larger images in mobile emoji picker (#17013) 2022-06-07 12:00:09 -04:00
Kris
4df4817e13
FIX: auto margins cause too-narrow content (#16725) 2022-05-12 08:13:53 +08:00
Kris
19677ce3f6
UX: fix various login modal issues on mobile (#16708) 2022-05-11 14:36:27 +10:00
Kris
8dd3d6cb97
UX: Larger clickable area for mobile topic list (#16473) 2022-04-26 15:01:43 -04:00
Kris
144b87b17a
UX: fix topic admin menu layout for short screens (#16565) 2022-04-26 10:27:45 -04:00
Kris
f2468f1093
Revert: UX: Make full topic row clickable on mobile (#16440) (#16472) 2022-04-13 18:35:47 -04:00
Kris
0ff66b3b74
UX: minor mobile topic list alignment adjustments (#16470)
* UX: minor mobile topic list alignment adjustments

* use margin, not padding
2022-04-13 15:47:18 -04:00
Kris
0e88cffaf4
UX: Make full topic row clickable on mobile (#16440) 2022-04-12 09:44:20 -04:00
awesomerobot
264c8f5fd7 Improve docked progress position on mobile 2022-04-12 09:09:59 +08:00
Jordan Vidrine
2b974d4992
DEV: Add additional outlet to user-card next to message button (#16300) 2022-03-28 11:56:43 -05:00
Penar Musaraj
593f3e5dd8
UX: Styling changes to global banner (#16191) 2022-03-15 16:19:55 +01:00
Martin Brennan
ff96d541e9
FEATURE: Add fullscreen button for code blocks (#16044)
This commit extends the original copy-codeblocks initializer,
renaming it to codeblock-buttons, and adding another button
to make the code block fullscreen in a modal window. The fullscreen
code is then run through highlight.js.

This commit also moves much of the code out of the initializer
and into a reusable CodeblockButtons class, so it can also be used
in the fullscreen code modal for the copy + paste button.

The fullscreen button will not be shown if there is no scroll overflow
in the code block, nor will it be shown on mobile. This commit also
changes the fullscreen table button to not show on mobile.

This will make long lines of code much easier to read and interact
with. This is gated behind the same `show_copy_button_on_codeblocks`
site setting.
2022-03-01 08:37:24 +10:00
Ella E
baa4bcda23
FIX: on mobile, overflow on post controls if there are many buttons (#16054) 2022-02-25 15:03:58 -07:00
Kris
c9419b51a3
UX: prevent user menu overflow on tiny screens (#15964) 2022-02-15 20:13:11 -05:00
Jordan Vidrine
7223d5e012
UX: Fix login header z-index (#15848) 2022-02-07 13:31:03 -06:00
Jarek Radosz
692b6543ff
FIX: Composer fields on small desktop sizes (#15729) 2022-02-01 21:33:06 +01:00
Kris
c4e8ba3965
UX: post action spacing refactor & consistency (#15403) 2022-01-04 09:44:54 -05:00
Meghna
f6db99b56a
UX: improved invite accept page layout (#15418) 2021-12-29 09:12:18 +05:30
Jarek Radosz
0b34d5ac6c
UX: Maximize the preview space in composer (#15188)
A follow-up to #15117 and #15141. Applies the previous changes to PM-specific fields, makes the preview area take the all the available height of the composer, and unifies more spacing between composer elements.
2021-12-24 12:38:33 +01:00
Kris
07436e9d8c
UX: update navigation-container scaling & wrapping (#15372) 2021-12-20 17:08:03 -05:00
Kris
1c9a0fe18e
UX: let mobile post controls scroll on overflow (#15305) 2021-12-15 15:36:10 -05:00
Penar Musaraj
f24027b453
UX: Fix topic status icon size in mobile search results (#15251) 2021-12-09 14:32:12 -05:00
Kris
6d2eae27a6
UX: reduce composer jumpiness on android (#15184) 2021-12-03 17:02:22 -05:00
Kris
657c137384
UX: Prevent overflow on mobile timeline dates (#15182) 2021-12-03 13:48:26 -05:00
Krzysztof Kotlarek
9cabd3721b
FEATURE: ability to add description to tags (#15125)
Ability to add description to tags, which will be displayed on hover.
2021-12-01 09:18:56 +11:00
Jarek Radosz
0bf30196c9
FIX: Broken css in #15141 (#15144) 2021-11-30 20:02:22 +01:00
Jarek Radosz
feb9a3675d
UX: Tweak mobile composer styling (#15141)
A followup to #15117
2021-11-30 19:50:28 +01:00
Jarek Radosz
ceed48f321
UX: Make banner full-width (#15038) 2021-11-22 19:43:45 +01:00
Kris
8b5dec4607
UX: mobile topic list fixes follow-up to 0e371d4 (#14959) 2021-11-15 21:07:32 -05:00
Jordan Vidrine
0e371d4c6d
SYNTAX: Use classes instead of html element targeting (#14890)
* SYNTAX: Use classes instead of html element targeting
2021-11-15 14:49:45 -06:00
Penar Musaraj
ce91bf0775
Revert "FIX: Composer height issue in Safari on iOS 15 (#14282)" (#14847)
This reverts commit 0dab1634b0.
2021-11-09 13:10:07 -05:00
Penar Musaraj
51233ae349
UX: Fix several issues with topic progress refactor (#14790) 2021-11-02 13:45:40 -04:00
Penar Musaraj
724f1ee9d1
UX: Fix short post width on mobile (#14771) 2021-10-29 11:39:19 -04:00
Penar Musaraj
095421a1e1
REFACTOR: Use IntersectionObserver to calculate topic progress position (#14698) 2021-10-29 09:23:15 -04:00
janzenisaac
dd5b0543c7
FEATURE: Add fullscreen-tables to post (#14709)
Overflown tables will have a "expand table" option added to open x table in a modal
2021-10-25 14:06:28 -05:00
Penar Musaraj
7c7dd2335b
FIX: Category and tag picker alignment on mobile (#14622) 2021-10-15 10:25:11 -04:00
Jordan Vidrine
6ab5f70090
UX: Change layout of invites page to match other user pages (#14520)
* UX: Change layout of invites page to match other user pages
2021-10-05 15:30:31 -05:00
Alan Guo Xiang Tan
9d5da2b383
PERF: Revert all inboxes from messages route. (#14445)
The all inboxes was introduced in
016efeadf6 but we decided to roll it back
for performance reasons. The main performance challenge here is that PG
has to basically loop through all the PMs that a user is allowed to view
before being able to order by `Topic#bumped_at`. The all inboxes was not
planned as part of the new/unread filter so we've decided not to tackle
the performance issue for the upcoming release.

Follow-up to 016efeadf6
2021-09-28 11:58:04 +08:00
Penar Musaraj
0b69675060
UX: Adjust mobile spacing for full page search (#14450) 2021-09-27 18:03:56 -04:00
Penar Musaraj
3e3043dbaa
UX: Add second Search button on mobile (#14404) 2021-09-21 13:02:00 -04:00
Penar Musaraj
dfeca42bf8
FEATURE: user/category/tag results in full page search (#14346)
See PR for details, this commit also changes the layout of the full page search.
2021-09-20 10:01:11 -04:00
Penar Musaraj
a736ff5f69
DEV: Clean up some styles (#14374) 2021-09-20 09:52:03 -04:00
Penar Musaraj
19b14d6ec2
UX: Fix tab groups editing layout issues on mobile (#14329) 2021-09-14 09:55:40 -04:00
Penar Musaraj
a03d8a147f
UX: Fix mobile styling for admin color schemes (#14314) 2021-09-13 13:43:57 -04:00
Penar Musaraj
33fb3b7ec8
UX: Fix date input display in iOS (#14307) 2021-09-10 15:13:45 -04:00
Penar Musaraj
6c7f4e15b6
FIX: Mobile nav styling (#14309) 2021-09-10 15:13:26 -04:00
Penar Musaraj
24e71acf3f
UX: Normalize sizing for inputs, buttons, dropdowns (#14226)
See PR for details
2021-09-09 11:01:56 -04:00
Penar Musaraj
0dab1634b0
FIX: Composer height issue in Safari on iOS 15 (#14282) 2021-09-08 13:35:09 -04:00
Kris
94085d0996
UX: Select-kit update alignment fixes (#14199) 2021-08-31 17:44:11 +02:00
Joffrey JAFFEUX
14e92bb0ea
FIX: correctly apply unusual padding to profile dropdowns (#14172) 2021-08-27 10:03:59 +10:00
Joffrey JAFFEUX
cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00
Kris
f848f6cbb6
UX: Fix mobile PM nav for regular users (#14007) 2021-08-11 12:47:03 -04:00
Alan Guo Xiang Tan
016efeadf6
FEATURE: New and Unread messages for user personal messages. (#13603)
* FEATURE: New and Unread messages for user personal messages.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2021-08-02 12:41:41 +08:00
Kris
00820f0fad
UX: History controls should use nav-pill styles (#13904) 2021-07-30 19:52:15 -04:00
Kris
aa6daeaa3e
FEATURE: New style for personal messages (#13800) 2021-07-21 10:41:04 -04:00
Jarek Radosz
a2425487b2
UX: Make sure there's always a margin on badges page (#13693) 2021-07-14 13:45:26 +08:00
Alan Guo Xiang Tan
f57d49ed01
UX: Layout issues with topic last visit line. (#13655)
Remove the calculation of width and instead switch to small action class
that automatically sets the width based on the screen size.
2021-07-07 12:40:40 +08:00
Alan Guo Xiang Tan
37b8ce79c9
FEATURE: Add last visit indication to topic view page. (#13471)
This PR also removes grey old unread bubble from the topic badges by
dropping `TopicUser#highest_seen_post_number`.
2021-07-05 14:17:31 +08:00
Andrei Prigorshnev
a2e0da16a7
FEATURE: use native file picker in composer (#13552)
We want to remove completely our custom modal for uploading files in composer and directly trigger the system file picker.

This PR makes it happen. The fix is pretty simple since we already weren't using our custom modal on mobile. We just need to start using the same hidden <input type="file"> that we already use on mobile.

It seems to be pretty tricky to test opening a system modal so I haven't added new tests. We already have other tests for file uploading though. We directly trigger jquery-File-Upload plugin hooks in those tests - 3dda926cb2/app/assets/javascripts/discourse/tests/acceptance/composer-attachment-test.js (L89).
2021-06-30 12:45:47 +04:00
awesomerobot
895df9c239 UX: margin improvement for mobile alerts 2021-06-25 09:18:06 +08:00
Kris
1702922a7c
UX: Fix mobile alert spacing (#13506) 2021-06-23 15:21:17 -04:00
Bianca Nenciu
ee87d8c93b
FEATURE: Make max number of favorite configurable (#13480)
It used to be hardcoded to 2 and now it uses max_favorite_badges site
setting. When zero, it disables favorite badges.
2021-06-22 18:58:03 +03:00
Jeff Wong
f12551afd3
PERF: Animate request animation frame (#13337)
* PERF: requestanimationframe for better performance on pan events
* PERF: temporarily remove items on animate
2021-06-09 04:26:52 -10:00
Mark VanLandingham
d500d0cc99
FEATURE: Add group filter to user directory (#13330) 2021-06-08 13:20:08 -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
Mark VanLandingham
0cba4d73c1
FEATURE: Add user custom fields to user directory (#13238) 2021-06-07 12:34:01 -05:00
Kris
2fb1eaa868
UX: more consistent mobile spacing (#13297) 2021-06-07 13:22:28 -04:00
Martin Brennan
964da21817
FEATURE: Improve group email settings UI (#13083)
This overhauls the user interface for the group email settings management, aiming to make it a lot easier to test the settings entered and confirm they are correct before proceeding. We do this by forcing the user to test the settings before they can be saved to the database. It also includes some quality of life improvements around setting up IMAP and SMTP for our first supported provider, GMail. This PR does not remove the old group email config, that will come in a subsequent PR. This is related to https://meta.discourse.org/t/imap-support-for-group-inboxes/160588 so read that if you would like more backstory.

### UI

Both site settings of `enable_imap` and `enable_smtp` must be true to test this. You must enable SMTP first to enable IMAP.

You can prefill the SMTP settings with GMail configuration. To proceed with saving these settings you must test them, which is handled by the EmailSettingsValidator.

If there is an issue with the configuration or credentials a meaningful error message should be shown.

IMAP settings must also be validated when IMAP is enabled, before saving.

When saving IMAP, we fetch the mailboxes for that account and populate them. This mailbox must be selected and saved for IMAP to work (the feature acts as though it is disabled until the mailbox is selected and saved):

### Database & Backend

This adds several columns to the Groups table. The purpose of this change is to make it much more explicit that SMTP/IMAP is enabled for a group, rather than relying on settings not being null. Also included is an UPDATE query to backfill these columns. These columns are automatically filled when updating the group.

For GMail, we now filter the mailboxes returned. This is so users cannot use a mailbox like Sent or Trash for syncing, which would generally be disastrous.

There is a new group endpoint for testing email settings. This may be useful in the future for other places in our UI, at which point it can be extracted to a more generic endpoint or module to be included.
2021-05-28 09:28:18 +10:00
Jarek Radosz
96f3f15f38
UX: Align list-controls & topic-title top margins (#13150) 2021-05-26 11:12:32 +02:00
Kris
d0dfd0c73f
UX: Consistent padding on mobile/desktop .wrap (#13155) 2021-05-26 17:33:08 +10:00
Mark VanLandingham
72950e051c
Add category breadcrumbs to edit category page (#13126) 2021-05-25 13:40:11 -05:00
Kris
f61d430566
UX: Improve category controls on smallest devices (#12945) 2021-05-06 17:51:55 -04:00
Kris
8ca6202d81
FIX: tag control styles should apply to desktop (#12919) 2021-05-03 13:57:10 -04:00
Dan Ungureanu
614166ab1e
UX: Reduce the number of columns on invite page (#12891)
We used to have different columns for invite type, groups and topics,
which sometimes introduced a lot of whitespace or distorted the other
columns.
2021-04-29 16:44:51 +03:00
Kris
b6aacc4c2d
UX: fix positioning of back button on progress bar (#12847) 2021-04-27 14:24:04 -04:00
Kris
b3cf483813
UX: Mobile consistency for topic status messages (#12828) 2021-04-26 18:55:50 -04:00
Kris
c0bd7db799
UX: Improve alignment and spacing of category headers (#12829) 2021-04-26 18:55:18 -04:00
Ahmed Gagan
3867b8998c
DEV: allows reports to display an html title (#12687)
eg: display an emoji in title
2021-04-22 13:38:10 +02:00
Kris
e0d17c8d19
UX: Prevent topic progress bar from overlapping (#12780) 2021-04-21 22:53:23 -04:00
Kris
b9b4d2485b
UX: fix layout of group header buttons on mobile (#12781) 2021-04-21 15:45:45 -04:00