Commit Graph

178 Commits

Author SHA1 Message Date
Kris
c2dc2cd727
UX: add gap between category and tags in suggested topics (#25097) 2024-01-02 16:40:35 -05:00
Kris
c4f940aa31
UX: resize pm composer inputs for narrow screens (#25019) 2023-12-22 15:17:26 -05:00
Meghna
91ab2766e9
UX: properly align close button icon on composer messages (#24632) 2023-11-30 13:21:50 +05:30
chapoi
7f580a3083
UX: Composer and sidebar better fit (#23841) 2023-10-10 20:01:08 +02:00
Kris
c9db9e9319
A11Y: composer tip close link should be a button (#23731) 2023-10-03 09:09:54 -04:00
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Canapin
bc7ef70380
UX: fix kbd tag text's color in the composer full screen prompt (#21169) 2023-04-19 10:05:26 -05:00
Kris
ce601ac84c
UX: improve composer control spacing on mobile (#21021) 2023-04-11 14:11:00 -05:00
Jordan Vidrine
d533f316e8
UX: Fix mobile grippie being hidden (#20803) 2023-03-24 07:04:09 -05:00
chapoi
87de3c2319
UX: highlight vars updates (#20346)
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
2023-02-21 10:15:49 +01:00
Jarek Radosz
ea326906e3
DEV: Use css var font sizes (#18518)
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
250c0bccbd
A11Y: Add aria label to composer messages Esc button (#18372) 2022-09-27 08:52:09 -04:00
Joe
c85921a548
FEATURE: Adds full screen composer submit button and prompt (#17839)
Context: https://meta.discourse.org/t/still-display-the-reply-create-topic-button-when-using-full-screen-composition/123597/6?u=johani

Right now, we don't show the submit buttons when you enter the full-screen composer. The reasons for that are described in the context link above.

This PR adds the improvements highlighted here: https://meta.discourse.org/t/still-display-the-reply-create-topic-button-when-using-full-screen-composition/123597/12?u=johani

Here's a list of the changes this PR introduces:

1. When you enter full-screen mode, we will now add a prompt that matches the browser fullscreen <kbd>F11</kbd> function. It looks like so

    <img width="500" src="https://user-images.githubusercontent.com/33972521/183529813-71a20167-a661-466c-b9ef-c4d34e231000.png">
    
    The prompt fades away after a couple of seconds.
    
2. This PR adds the submit buttons to the full-screen composer mode. The submit buttons should work like normal if the post has no errors. If the post has errors (title too short, body too short, required categories/tags), then the button will make the composer exit the full-screen mode so that users will see the errors and fix them. The error logic is based on what we currently have; this PR doesn't add any new validation. Here's a video of what that looks like:

    https://meta.discourse.org/t/-/127948/14?u=johani
2022-08-11 14:38:56 +08:00
Jarek Radosz
23aceedbd5
FIX: Display composer popovers over dropdowns (#15659) 2022-01-20 17:55:55 +01:00
Jarek Radosz
b9f650e55e
UX: Fix composer popup placement (#15660) 2022-01-20 14:21:13 +01:00
Penar Musaraj
879e35195a
DEV: Small refactor to header offset (#15421)
Centralizes calculations in a helper under the site header component.

This also reverts a small CSS change to the composer: since ac79c5ef,
the composer height was not including the grippie, which means that the
composer height was off by 11 pixels, and the topic progress widget was
sometimes being displayed cut off by 11 pixels.
2021-12-29 11:03:21 -05:00
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
Jarek Radosz
ac79c5efc6
UX: Tweak composer styling (#15117)
* 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
Kris
cd8822cb50
UX: better accommodate PM composer with tags (#14778) 2021-10-29 16:26:37 -04:00
Kris
75041dbbeb
UX: Remove :empty on topic-statuses, clean up (#14227) 2021-09-02 15:35:35 -04:00
Kris
bde6f7e9b0
UX: Update "get a room" composer message (#14104) 2021-08-23 18:34:23 -04:00
Kris
5f6b9e36ed
UX: New text and style for dominating topic message (#13789) 2021-07-20 13:58:38 -04:00
Kris
3e3bae59f6
UX: clean up tag styles to improve alignment (#12300) 2021-03-08 10:52:39 +11:00
Kris
77c8f0c864
UX: Show bullets for some composer lists (#12122) 2021-02-18 18:47:27 -05:00
Kris
04d0bf9c4a
UX: Improve tag and assign display in search (#12039) 2021-02-11 13:41:43 -05:00
Kris
363170513e
UX: Allow some overflow in composer preview (#11902) 2021-01-29 20:28:56 -05:00
Kris
95179a5ab6 Button bar needs visible overflow, follow-up to 489443e 2020-08-26 20:52:03 -04:00
Kris
489443e3a9
UX: Better handling of long category names and button bar in composer (#10542) 2020-08-26 19:38:20 -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
2a0a689442
UX: prevent devices from miscalculating fullscreen composer height
Fixes issue seen in some Chromebooks that flip between tablet and regular notebook window size
2020-06-01 22:24:16 -04:00
Kris
62ebfbbb67 UX: Minor adjustment to give the PM recipient input more flexibility. 2019-12-17 14:56:57 -05:00
Penar Musaraj
797045f5a9
DEV: Move some autocomplete input styling to SCSS (#8381) 2019-11-20 12:32:00 -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
Penar Musaraj
ceb29d3eea UX: Full viewport composer layout on iPad
Partially reverts 94ab48c by using Safari hacks on iPad again.

This brings parity in the composer UI between iPhones and iPads

Hides grippie and fullscreen toggle button when the keyboard is visible on iPads
2019-10-02 12:36:11 -04:00
Penar Musaraj
94ab48c616 UX: Improve composer layout in iPads
In iOS 13, Apple no longer includes "iPad" in the user agent by default, so we need to adjust our detection.
2019-10-01 08:22:17 -04:00
Joffrey JAFFEUX
1b45096aa5
UX: improves styling of similar topics results in composer (#7839) 2019-07-02 11:26:43 +02:00
Kris
b24938b5ff UX: Minor composer button alignment adjustments, simplification 2019-05-29 14:37:32 -04:00
Kris
34d0cc6ad5 UX: Better alignment of similar topics in composer 2019-02-25 17:04:11 -05:00
Osama Sayegh
d5efe2d7ee UX: make composer resize work on touch devices (#7068)
* UX: make composer resize work on touch devices

This also replaces a vendor dependency with a small built-in resize mechanism.

* Make blue bar's larger padding specific to touch devices
2019-02-26 08:04:14 +11:00
Joe
2acb885c72 FEATURE: fullscreen composer mode on desktop
Adds keyboard shortcut and icon that allows expanding composer to full screen.
2018-10-15 13:59:49 +11:00
Kris
1f14fb5e1e Don't override category badge icon color in similar topic JIT 2018-10-09 15:38:49 -04:00
Kris
8d67b20d37 z-index fix 2018-07-26 12:11:40 -04:00
Joe
f3a1b3829a
FIX: composer popup close link overlaps with text 2018-06-30 13:02:10 +08: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
Kris
8d86e49845 z-index fix for previewless composer 2018-04-25 21:00:33 -04:00
Kris
879aac39f7 z-index fix 2018-04-25 20:46:54 -04:00
Kris
677e126fbf UX: Implementing a box-shadow system, cleaning up existing shadows 2018-02-20 12:18:20 -05:00
Guo Xiang Tan
9c7d609575 UX: Restore width of composer user selector.
* This fixes the build as well as a short width
  resulted in the user selector collapsing into
  the compressed display.
2018-02-15 11:49:10 +08:00
Kris
86bf6babf8 FIX: Prevent long composer overlapping controls 2018-02-02 22:31:55 -05:00