Commit Graph

67 Commits

Author SHA1 Message Date
chapoi
18f7b47ecb
UX: improve emoji alignment for text ()
* UX: improve emoji alignment for text

* UX: emoji exception for titles
2023-01-30 14:07:08 +01: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
Keegan George
eb987460f2
FEATURE: Select emojis in picker via keyboard ()
* DEV: Make emoji elements focusable

Since emoji elements are of type `<img>` it requires a `tablindex="0"` in order to be focusable.

* WIP: Handle emoji focus/selection via arrow keys

Near completion, however, need a few fixes/improvements and overall code cleanup

* WIP: Testing

* DEV: Fixes and cleanup

* DEV: Follow conventions

* DEV: Improve up/down traversal when recents present

* DEV: Emoji markup in tests should include `tabindex`

* DEV: Add `tabindex` to topic tests

* DEV: Variable name as `searchInput` instead of `searchBar`

* DEV: Use appropriate method name (`_setNumEmojiPerRow`)

* DEV: Add comments and avoid nested if

* WIP: Adding test

* Fix first test

* DEV: Add assertions for arrow keys and escape key

* Some fixes for up/down navigation

This does not fix everything, when going from one section to another,
there are issues

* Fix a small regression

* FIX: Ability to focus on search results

Fixes regression

* Refactor calculating next up/down emoji

* Debugging test failure

* Skip stubborn CI test, add others

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2022-09-21 13:21:36 -07:00
Penar Musaraj
4be67ef9a7
UX: Larger images in mobile emoji picker () 2022-06-07 12:00:09 -04:00
Jarek Radosz
0f225c8e54 UX: Tweak emoji picker css
1. Hide the results element when empty (and set top-margin of section to 0, which fixes some custom themes)
2. Fixed the on-hover color of .trash-recent
2022-01-10 10:23:21 +08:00
Penar Musaraj
f343cfd92e
DEV: Remove IntersectionObserver polyfill () 2021-06-22 09:30:44 -04:00
Penar Musaraj
2579127091
UX: Fix tab list alignment in emoji popup () 2021-03-29 16:30:20 -04:00
Penar Musaraj
edc0f61920
UX: Emoji popup layout adjustments () 2021-03-26 13:07:04 -04:00
Joffrey JAFFEUX
c230d2e443
FIX: prevents scrollbar jumping in the emoji picker ()
This was mostly due to `content-visibility: auto;` but setting the width/height is also a good practice.
2020-09-28 13:23:46 +02:00
Joffrey JAFFEUX
c3364b3a6b
UX: improves picker on automatic dark themes () 2020-08-24 15:04:11 +02:00
Joffrey JAFFEUX
226be994da
REFACTOR: rewrite the emoji-picker ()
The emoji-picker is a specific piece of code as it has very strong performance requirements which are almost not found anywhere else in the app, as a result it was using various hacks to make it work decently even on old browsers.

Following our drop of Internet Explorer, and various new features in Ember and recent browsers we can now take advantage of this to reduce the amount of code needed, this rewrite most importantly does the following:
- use loading="lazy" preventing the full list of emojis to be loaded on opening
- uses InterserctionObserver to find the active section
- limits the use of native event listentes only for hover/click emojis (for performance reason we track click on the whole emoji area and delegate events), everything else is using ember events
- uses popper to position the emoji picker
- no jquery code
2020-08-24 14:20:51 +02: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
3116591dc6
DEV: Refactor dark-light-choose() usage in SCSS
Covers most, but not all, cases.
2020-07-29 09:09:37 -04:00
Jordan Vidrine
7cf45dab01
Remove darken & lighten functions from scss () 2020-07-28 18:21:53 -04:00
Joffrey JAFFEUX
6fa990f05d
FIX: prevents emoji in links to appear as large emojis () 2020-06-11 12:27:48 +02:00
Joffrey JAFFEUX
d8a086abc5
FIX: do not apply only-emoji margin for excluded cases () 2020-05-03 17:52:19 +02:00
Joffrey JAFFEUX
d9db0e6691
FIX: allows custom groups updates to be reflected without recompilation () 2020-04-14 16:43:57 +02:00
Joffrey JAFFEUX
0996c3b7b3
FEATURE: allows multiple custom emoji groups ()
Note: DBHelper would fail with a sql syntax error on columns like "group".

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2020-03-30 20:16:10 +02:00
Joffrey JAFFEUX
fc3d547268
UX: do not enlarge emojis in polls () 2020-02-12 08:37:32 +01:00
Joffrey JAFFEUX
56fa77c032
FIX: do not increase size of emojis in markdown tables () 2020-01-17 18:15:05 +01:00
Joffrey JAFFEUX
948bd00340
FEATURE: line with only 1 to 3 emojis will now display as large emojis 2020-01-16 09:54:26 +01:00
Kris
b066a4128d Adding a text-overflow: ellipsis; mixin and related cleanup 2019-11-06 14:00:29 -05:00
Joffrey JAFFEUX
aa4b84925a FEATURE: updates emoji to latest 12.0 version ()
* improved emoji support

- always optimize images as part of the task
- use the unicode standard ordering/naming for sections

* UX: more height for when there are recently used
2019-03-15 16:12:07 +01:00
Kris
12df8c5c82 General style cleanup, removing unused styles 2019-01-23 21:37:39 -05:00
Penar Musaraj
ba5e17a7a9 FIX: IE11 layout glitches
IE11 requires a unit on the third parameter (flex-basis) of the flex property
2019-01-21 13:40:55 -05:00
Kris
4af7471ead Better contrast ratio match between dark and light themes 2019-01-02 17:54:22 -05:00
Joffrey JAFFEUX
608abd4c08
FIX: uses flex: 1 0 0; instead of flex: 1; for better browser compat () 2018-12-28 20:21:32 +01:00
Gerhard Schlager
4300ac0f4a UX: Show smaller Emojis within some HTML elements 2018-12-06 15:13:16 +01:00
Penar Musaraj
03deda2147
Upgrade to FontAwesome 5 (take two) ()
* 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 ()
* 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
174d392e5a
DEV: adds prettier ()
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
Sam
81f048612e UX: reduce lines in emoji picker
This makes it much easier to find the search box
2018-05-01 14:44:15 +10:00
Sam
727f90023f UX: emoji highlighting is more box shaped
This eliminates a flicker you used to get with the circle radius
2018-05-01 12:12:11 +10:00
Kris
677e126fbf UX: Implementing a box-shadow system, cleaning up existing shadows 2018-02-20 12:18:20 -05:00
Bruno Perel
6750ff6873 (S)CSS cleanup: 0px => O and removal of duplicated properties () 2018-01-25 09:53:36 -05:00
Kris
0c01e0b2fe
UX: Implementing a z-index system () 2018-01-16 19:05:12 -05:00
Kris
674013129a
UX: Type system rebuild () 2018-01-12 17:27:38 -05:00
Joffrey JAFFEUX
133d97402a
FIX: prevents global input width to impact input inside emoji picker filter 2017-12-18 10:48:33 +01:00
Kris
edd7cb4f0d UX: Replacing some PX font definitions with EM based units 2017-12-08 17:10:49 -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
Kris
dc2d9f05dc removing scale-color, first pass 2017-10-13 11:57:10 -04:00
Robin Ward
cb8918d034 It's bad practice to have body be the parent of everything 2017-09-14 11:24:14 -04:00
Robin Ward
6dfa3625df REFACTOR: Replace fa-* in SCSS with d-icon-* 2017-07-27 15:09:30 -04:00
Joffrey JAFFEUX
e36d9f55c3 replaces links/imgs by buttons in the emoji-picker 2017-07-21 19:42:50 +02:00
Joffrey JAFFEUX
c7f2b0fe58 tweaks to copy and styles 2017-07-21 14:19:04 +02:00
Joffrey JAFFEUX
0112b9aa43 FIX: emoji-picker works with dark theme 2017-07-19 22:54:56 +02:00
Joffrey JAFFEUX
d2581bbf21 FIX: make sure the emoji picker is hidden 2017-07-19 22:54:54 +02:00
Joffrey JAFFEUX
d1f2b981b5 scope .section-group to .emoji-picker 2017-07-19 22:54:52 +02:00