Commit Graph

71 Commits

Author SHA1 Message Date
Kris 7658341b0b
UX: use relative units to prevent timeline crop (#20943) 2023-04-04 09:40:43 -04:00
Isaac Janzen 96c1fad2fe
UX: Fix `timeline-handle` positioning (#20217)
Positioning of the timeline handle was slightly off on the glimmer-topic-timeline

# Before
<img width="451" alt="Screenshot 2023-02-08 at 11 30 18 AM" src="https://user-images.githubusercontent.com/50783505/217606919-2f07b69f-4820-4b72-805b-ed28b34c79dc.png">


# After
<img width="447" alt="Screenshot 2023-02-08 at 11 29 53 AM" src="https://user-images.githubusercontent.com/50783505/217606811-977f52df-6070-4127-80c1-27c97174a9a7.png">
2023-02-08 12:01:14 -06:00
Kris 7ebd8a44f5
UX: hide date in timeline when wrapping (#19912) 2023-01-20 10:05:16 -05:00
Isaac Janzen 04acee5de3
Fix timeline admin menu button spacing (#19322) 2022-12-05 12:41:24 -06:00
Isaac Janzen 6ccc0227f3
DEV: Upgrade Topic Timeline to Glimmer (#17377)
In an effort to modernize our codebase to the latest Ember version we have selected the Topic Timeline as a candidate to be refactored. The topic timeline component was originally built with `Widgets` and this PR will upgrade it to `Glimmer Components`. 

The refactored timeline is hidden by default behind a group flag, `SiteSetting.enable_experimental_topic_timeline_groups`. Being part of a group included in this site setting will make the new timeline available for testing.

## Other points of interest

This PR introduces a `Draggable Modifier` available to all components, which will take the place of the existing _drag functionality_ exclusive to widgets. 

It can be included like so:
```
{{draggable didStartDrag=@didStartDrag didEndDrag=@didEndDrag dragMove=@dragMove }}
```
2022-12-01 13:50:44 -06:00
Keegan George 897bcacdda
A11Y: Improve topic timeline in WHCM (#18647) 2022-10-18 10:35:01 -07:00
Bianca Nenciu 4b2cc2de1e
FIX: Show timelines dates as clickable (#18580)
These two dates used to have the default cursor when hovering. This
commit removes the 'cursor: default' CSS property.
2022-10-13 14:24:41 +03:00
Jarek Radosz 4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

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 (#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
Kris 61c5916b2c
Revert "FEATURE: add tooltips to timeline start/end dates (#18294)" (#18346)
This reverts commit b98cd73ace.
2022-09-23 14:20:33 -04:00
Kris b98cd73ace
FEATURE: add tooltips to timeline start/end dates (#18294) 2022-09-21 09:46:14 +08:00
Jarek Radosz 87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02:00
Penar Musaraj c80730ea4a
UX: Improve timeline touch hit areas (#16038) 2022-02-23 17:55:48 +01:00
Penar Musaraj 312c417366
DEV: Minor topic timeline refactor (#15357) 2021-12-28 12:01:20 -05:00
Kris 091ca9dbb1
UX: prevent timeline overflow in extreme cases (#15303) 2021-12-15 10:02:02 +11:00
Kris 657c137384
UX: Prevent overflow on mobile timeline dates (#15182) 2021-12-03 13:48:26 -05:00
Vinoth Kannan 0ededb1454
UX: timestamp should not hide handle of topic timeline in mobile. (#15066)
Previously, since the space of the timestamp is big in some locales, it blocked the visibility of topic timeline handle in mobile view.
2021-11-23 23:24:58 +05:30
Penar Musaraj 095421a1e1
REFACTOR: Use IntersectionObserver to calculate topic progress position (#14698) 2021-10-29 09:23:15 -04:00
Penar Musaraj ab9c63e4ee
UX: Optionally show a "Summarize" button in topic timeline (#13533) 2021-09-16 15:15:00 -04:00
Penar Musaraj fcc02412c0
UX: Fix mobile progress bar button alignment (#13442) 2021-06-18 15:23:57 -04: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
Kris 28d5a3f21f
UX: smoother timeline footer animation, padding fix (#12743) 2021-04-19 13:00:12 -04:00
Kris da5841de0b
REFACTOR: Remove position fixed from the header and use sticky instead (#10781)
This removes fixed positioning from d-header and the topic timeline.

Plugins, themes and components that use the above/below header plugin outlet will likely need some margin/padding adjustments.
2020-10-19 17:26:38 -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 25dcc577ae
DEV: More color transformation refactoring 2020-07-29 12:01:12 -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
Penar Musaraj c2abf88a61
UX: Adjustments to topic admin menu on mobile (#9945) 2020-06-01 09:39:38 -04:00
Joffrey JAFFEUX 31d1468922
UX: reworks various menus to homogenize them (#9905)
- bookmark modal menu
- topic-footer-mobile-dropdown
- post-admin-menu
- topic-admin-menu
- quick-access menus
- toolbar-popup-menu
2020-05-29 08:05:21 +02:00
Penar Musaraj d653d2f5d9 UX: Prevent timeline overlapping topic footer buttons 2020-05-08 16:20:27 -04:00
Kris cd5b7109d0 UX: Cap height of user fields on mobile user-cards, add line-clamp mixin 2020-02-14 16:19:11 -05:00
Jeff Wong 6b6b0f09c4 UX: Align timeline controls to the top 2019-09-04 17:28:54 -07: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
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 (#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 a82dfbd2dc Mobile timeline fix 2018-10-23 07:59:00 -04:00
Kris 541b6a8446 UX: Allow vertical timeline to fit on narrower screens 2018-10-22 22:16:59 -04:00
Kris e43a05fa10 Timeline back button too tall 2018-09-20 10:28:26 -04:00
Kris b79fedd540 Streamlining some breakpoint mixins 2018-07-12 16:39:16 -04:00
Kris a201103127 removing some old styles 2018-07-12 00:53:24 -04: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
Robin Ward 6385c7fcb3 UX: Don't let topic progress widget dangle when preview is disabled 2018-03-08 16:34:19 -05:00
Kris 677e126fbf UX: Implementing a box-shadow system, cleaning up existing shadows 2018-02-20 12:18:20 -05:00
Kris 5ab44833ab UX: Make mobile timeline extra short in landscape 2018-02-14 23:27:06 -05:00
Bruno Perel 6750ff6873 (S)CSS cleanup: 0px => O and removal of duplicated properties (#5526) 2018-01-25 09:53:36 -05:00
Kris 0c01e0b2fe
UX: Implementing a z-index system (#5507) 2018-01-16 19:05:12 -05:00
Kris 674013129a
UX: Type system rebuild (#5492) 2018-01-12 17:27:38 -05:00
Kris dc2d9f05dc removing scale-color, first pass 2017-10-13 11:57:10 -04:00
Joffrey JAFFEUX cf6fb7622e Replaces all notification-options like dropdowns with select-box 2017-09-08 20:47:39 +02:00
Joffrey JAFFEUX 3c0a9d4d19 FIX: topic-notifications taking too much space in timeline 2017-09-07 19:55:56 +02:00
Joffrey JAFFEUX ca58a8228c minor css fixes on select-box 2017-09-07 16:56:00 +02:00