Commit Graph

140 Commits

Author SHA1 Message Date
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
Penar Musaraj 3d5ff23b16
UX: Fix alignment of composer when tags are disabled (#14535) 2021-10-06 14:58:08 -04:00
Penar Musaraj 8a250a1eac
UX: Ensure sticky elements don't overflow header (#14432) 2021-09-23 14:51:06 -04:00
Kris a7c342ccb9
REFACTOR: move composer min-height to CSS (#14378) 2021-09-20 12:21:24 -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
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 5f6b9e36ed
UX: New text and style for dominating topic message (#13789) 2021-07-20 13:58:38 -04: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
Andrei Prigorshnev 9e426d33c7
FEATURE: Don't show the draft checkmark when drafts are saved (#13292)
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 (#12627) 2021-04-07 16:15:07 -04:00
Kris 47ef83505f
UX: make tag input full width for PMs (#12158) 2021-02-22 16:49:12 +11:00
Penar Musaraj 578f753a13
UX: Adjust focus styles for autocomplete input (#12051) 2021-02-11 13:11:21 -05:00
Penar Musaraj eb29827e9d
UX: Adjust focus styles for topic post menu, composer cancel (#11977) 2021-02-04 10:28:35 -05:00
Kris f1d5d2b134
REFACTOR: Convert buttons to flexbox (#11785) 2021-01-27 16:17:08 -05:00
Kris 8be04ff7f7
UX: Give furigana and other top-overflowing elements a little space (#11154) 2020-11-09 16:03:36 +11:00
Penar Musaraj 94ed54a616
DEV: Small refactor of topic progress wrapper positioning (#10646)
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 (#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 e6349685d3
UX: Uniform focus styles for composer inputs/textarea (#10296)
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 (#10330) 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 (#8381) 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 (#7891) 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 (#7369) 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
Tim Lange 9a428acce4 UX: Switched composer draft saving to animations (#7356) 2019-04-11 10:03:36 -04:00
Kris b6e3ef4a90 Minor icon color fix 2019-02-04 22:14:18 -05:00
Kris 94f16ba931 UX: Make button icons use lighter color instead of opacity 2019-01-31 13:59:49 -05:00
Kris e4c593f1e7 removing some dupe styles, adding button class 2019-01-11 15:41:51 -05:00
Joffrey JAFFEUX 9a8db2748a
FIX: composer css fixes for ie11 (#6827) 2018-12-28 20:52:21 +01:00
Joffrey JAFFEUX 608abd4c08
FIX: uses `flex: 1 0 0;` instead of `flex: 1;` for better browser compat (#6826) 2018-12-28 20:21:32 +01: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
Kris c09a407f65 composer alignment fixes 2018-11-13 11:12:58 -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 09dc922b3b Fix several FontAwesome 5 issues
add missing icons, update SvgSprite methods (to fix ruby 2.4 issues), update whisper icon in composer, fix alignment issues
2018-11-07 22:20:53 -05: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
Kris 0b4edfc7d6 UX: improve spacing on composer controls 2018-10-23 16:37:36 -04: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
Joe 2144009520
UX: ensure ac-wrap input height matches other inputs 2018-09-20 00:02:45 +08:00
Joe e844fa5370
UX: general cleanup of inputs, buttons and select elements - part 1 2018-09-19 20:37:04 +08:00
Gerhard Schlager 448e95b97d UX: Show anchor icon instead of text when topic bump is disabled 2018-08-11 21:51:13 +02:00
Gerhard Schlager ef4b9f98c1 FEATURE: Allow admins to reply without topic bump 2018-08-10 10:48:30 +10:00