Commit Graph

157 Commits

Author SHA1 Message Date
Jarek Radosz ab330a98ad
UX: Fix user status display in autocomplete ()
A follow-up to c421dc0b28
2022-10-24 21:34:41 +02:00
Jarek Radosz c421dc0b28
UX: Improve autocomplete styling ()
1. Restore the original text color (`--primary-high`)
2. Fix the double bottom border
3. Make the padding around icons even
2022-10-24 19:37:01 +02:00
Jarek Radosz 4170b9bb58
DEV: Use more css vars ()
Followup to 

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz ea326906e3
DEV: Use css var font sizes ()
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Penar Musaraj 37b043fefc
FIX: Ensure composer grippie stays visible ()
Fixes a small regression in ab58b0c.
2022-09-28 10:02:03 -04:00
Rafael dos Santos Silva ab58b0cffe
FIX: Better virtual keyboard detect on Android ()
* FIX: Better virtual keyboard detect on Android

Firefox has a bug where *sometimes* the visualViewport.height won't be
updated when the keyboard pops up until you scroll, making our composer
stay hidden behind the keyboard. This commit uses both window.innerHeight
and  window.visualViewport.height using the minimum of both to check for
height changes.

For Chrome/Edge we feature detect the new VirtualKeyboard API and
opt-into it when the composer opens and use it to detect if a keyboard
is being draw. Opting into the API changes how the viewport is
calculated so we have to also change how the full height composer is
calculated. To minimize breakage we opt-out when the composer component
is destroyed.

This commit also moves the `--composer-ipad-padding` to only happen on
iPads.

Bug report at https://meta.discourse.org/t/-/228382
2022-09-26 17:35:58 -03:00
Penar Musaraj 4e1b9a225e
DEV: Reduce width calculations for SK dropdowns ()
Previously we were calculating both the minimum and maximum widths for
SK dropdowns using this Popper modifier. The max. width calculation was
causing issues with dropdowns in Firefox and was also sluggish when
rendering.

This switches to using CSS calculations for max. widths. It adds a 600px
global maximum and targeted maximums for the category composer dropdown
and the bookmark list dropdowns.
2022-09-20 22:59:47 -04:00
Jarek Radosz 87f8bafa7e
DEV: Remove obsolete CSS prefixes () 2022-09-15 16:54:08 +02:00
Kris c69473128b
UX: improve composer toolbar flexibility () 2022-09-13 14:20:33 -04:00
Andrei Prigorshnev c3a93597c1
FEATURE: show user status description on the mention popup () 2022-08-29 21:16:48 +04:00
Penar Musaraj 2e09a88a29
A11Y: Accessible full-screen and minimize composer buttons () 2022-08-17 09:39:41 +08:00
Kris 2743339a7e
UX: adjust sidebar margin to avoid composer height () 2022-08-01 11:02:11 +08:00
Bianca Nenciu 9ea8a4a9af
FIX: Use CSS transition to make room for composer ()
The composer is displayed over the bottom part of the page. To make sure
that no content is covered by the composer, a bottom padding is added
equal to the height of the composer. When the composer is opened or
closed that padding is added after around 300ms because of a debounce.

This commit makes sure that the padding is added as soon as the composer
state changes by using a CSS custom property (variable) and transition
property for a smooth user interface.
2022-05-17 22:44:25 +03:00
Jarek Radosz 692b6543ff
FIX: Composer fields on small desktop sizes () 2022-02-01 21:33:06 +01:00
Andrei Prigorshnev 9006c07373
FEATURE: Make the draft error exclamation in composer red () 2022-01-06 19:28:18 +04:00
Jarek Radosz 0b34d5ac6c
UX: Maximize the preview space in composer ()
A follow-up to  and . 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
Penar Musaraj 954ab4e0ec
DEV: Refactor popup-tip component () 2021-12-13 11:22:02 -05:00
Jarek Radosz ac79c5efc6
UX: Tweak composer styling ()
* Even margins
* Slightly more muted and unified borders, separators, and icons
* Editor and preview area have same height
2021-11-30 17:41:22 +01:00
Penar Musaraj 3d5ff23b16
UX: Fix alignment of composer when tags are disabled () 2021-10-06 14:58:08 -04:00
Penar Musaraj 8a250a1eac
UX: Ensure sticky elements don't overflow header () 2021-09-23 14:51:06 -04:00
Kris a7c342ccb9
REFACTOR: move composer min-height to CSS () 2021-09-20 12:21:24 -04:00
Penar Musaraj 24e71acf3f
UX: Normalize sizing for inputs, buttons, dropdowns ()
See PR for details
2021-09-09 11:01:56 -04:00
Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility ()
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 5f6b9e36ed
UX: New text and style for dominating topic message () 2021-07-20 13:58:38 -04:00
Andrei Prigorshnev a2e0da16a7
FEATURE: use native file picker in composer ()
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
Andrei Prigorshnev 9e426d33c7
FEATURE: Don't show the draft checkmark when drafts are saved ()
We don't want to show the draft checkmark in the composer when drafts are saved, as it’s a little bit distracting to see it keeps appearing and disappearing. Only in the case of error does it need to show anything, we will be showing a "drafts offline" warning as we did it before.

An important detail is that the warning was appearing and disappearing all the time too. Now, the warning won’t be flashing while a user is typing, it’ll be disappearing only when the draft was eventually saved.
2021-06-08 13:22:49 +04:00
Kris ea2105f3e8
REFACTOR: Consistency, A11Y, and less text for composer toggles () 2021-04-07 16:15:07 -04:00
Kris 47ef83505f
UX: make tag input full width for PMs () 2021-02-22 16:49:12 +11:00
Penar Musaraj 578f753a13
UX: Adjust focus styles for autocomplete input () 2021-02-11 13:11:21 -05:00
Penar Musaraj eb29827e9d
UX: Adjust focus styles for topic post menu, composer cancel () 2021-02-04 10:28:35 -05:00
Kris f1d5d2b134
REFACTOR: Convert buttons to flexbox () 2021-01-27 16:17:08 -05:00
Kris 8be04ff7f7
UX: Give furigana and other top-overflowing elements a little space () 2020-11-09 16:03:36 +11:00
Penar Musaraj 94ed54a616
DEV: Small refactor of topic progress wrapper positioning ()
This moves the logic for horizontally placing the topic progress wrapper from the JS component to SCSS. Doing so means it is more easily overridable by themes and plugins.

This also changes the left/right spacing from 1em to 2em for non-mobile screens (it fits better on iPad portrait especially).
2020-09-10 13:29:14 -04:00
Kris 489443e3a9
UX: Better handling of long category names and button bar in composer () 2020-08-26 19:38:20 -04:00
Penar Musaraj c937afc75e
FEATURE: automatic dark mode ()
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 e6349685d3
UX: Uniform focus styles for composer inputs/textarea ()
Uses a thin border as indicator that element is in focus for all editable items in the composer (inputs, select kit, textarea).

 Disables a default iOS style that has a blinking background color on inputs/textareas
2020-08-03 10:01:04 -04:00
Jordan Vidrine 7cf45dab01
Remove darken & lighten functions from scss () 2020-07-28 18:21:53 -04:00
Kris 5cea4a6cc2 icon color fix, follow-up to 5cc0369 2020-06-04 17:29:28 -04:00
Kris 5cc0369898 Minor dropdown icon width fix 2020-06-04 17:26:57 -04:00
Kris 66ec634cb3 Composer whisper icon missing margin when editing replies 2020-05-26 19:17:09 -04:00
Guo Xiang Tan 3ac5df0546
UX: Add margin when displaying unlisted details in composer. 2020-04-30 10:50:26 +08:00
Penar Musaraj 92e81d2ae5 UX: Fix composer position on iPads with a hardware keyboard
Adds padding to the composer when the keyboard accessory bar is shown (i.e. submit button no longer hides behind said bar)
2020-03-30 09:23:00 -04:00
Penar Musaraj 797045f5a9
DEV: Move some autocomplete input styling to SCSS () 2019-11-20 12:32:00 -05:00
Kris b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05:00
Penar Musaraj c3a5a8e095 UX: Refactor iOS composer layout
This addresses the following issues:
- on iPad, with keyboard attached, the composer is no longer forced to full screen
- on iPad, with keyboard attached, the topic no longer scrolls when starting a
  reply and then cancelling it
- switching between inputs and buttons (formatting, emojis, categories/tags, etc.) no longer
  causes layout to bounce around
2019-10-08 11:16:41 -04:00
Kris 5cfbe19eef UX: Change composer's edit reason link to an icon 2019-09-30 20:58:31 -04:00
Joffrey JAFFEUX ff66e62e0c
UX: ensures popup-tip shows over dropdowns () 2019-07-15 08:55:20 +02:00
Kris b24938b5ff UX: Minor composer button alignment adjustments, simplification 2019-05-29 14:37:32 -04:00
Tim Lange 1d0816b2cf UX: Changed error draft status to icon () 2019-04-19 09:18:01 +02:00
Sam Saffron 2fea29a355 Simplify animation used to denote draft is saved
The original implementation felt a bit too short, went with
a much simpler animation which sticks around for 5 seconds.

5 seconds seems to be the standard and the same timing gmail use
2019-04-12 10:28:29 +10:00