Commit Graph

52 Commits

Author SHA1 Message Date
Joffrey JAFFEUX 9830c40386
DEV: makes chat modals use the new <DModal /> component (#22495)
This commit also standardize the naming pattern of modals: `<Chat::Modal::FooBar />` and changes css class accordingly.

Co-authored-by: David Taylor <david@taylorhq.com>
2023-07-10 13:43:33 +02:00
David Taylor 9a1a3906c4
DEV: Support rendering `<DModal>` as a `<form>` element (#22507) 2023-07-10 10:28:45 +01:00
David Taylor b3a23bd9d6
DEV: Introduce new component-based DModal API (#21304)
Ember 4.x will be removing the 'named outlet' feature, which were previously relying on to render modal 'controllers' and their associated templates. This commit updates the modal.show API to accept a component class, and also introduces a declarative API which can be used by including the <DModal component directly in your template.

For more information on the API design, and conversion instructions from the current API, see these Meta topics:

DModal API: https://meta.discourse.org/t/268304
Conversion: https://meta.discourse.org/t/268057
2023-07-03 10:51:27 +01:00
Joffrey JAFFEUX 99f0ace229
DEV: implements styleguide for chat header icon (#22033)
This commit also uses this opportunity to change component name from: `ChatHeaderIcon` to `Chat::Header::Icon`
2023-06-09 18:40:34 +02:00
Jarek Radosz 22a6ae7e32
DEV: Remove `renderTemplate` from the styleguide (#21660)
Adds plugin API:

```js
import fidget from "../components/styleguide/molecules/fidget";

api.addStyleguideSection({
  component: fidget,
  id: "fidget",
  category: "molecules",
  priority: 0,
});
```

Removes notes. You can always add `<p class="styleguide-note">` to section components to annotate them.
2023-05-25 11:22:36 +02:00
Penar Musaraj a25bb81a64
DEV: Improve manual color scheme toggle in styleguide (#21629) 2023-05-18 07:31:20 +02:00
Joffrey JAFFEUX 4c4401b726
FIX: various fixes to chat styleguide (#21617)
- uses current user as user for fabricators, allows for correct avatar image and presence indicator
- uses a non existing channel ID to avoid setting a draft of an existing channel
- attempts to make color toggle more reliable
2023-05-17 20:03:19 +02:00
Joffrey JAFFEUX 60c67afba4
DEV: various improvements to devex on chat (#21612)
- Improves styleguide support
- Adds toggle color scheme to styleguide
- Adds properties mutators to styleguide
- Attempts to quit a session as soon as done with it in system specs, this should at least free resources faster
- Refactors fabricators to simplify them
- Adds more fabricators (uploads for example)
- Starts implementing components pattern in system specs
- Uses Chat::Message creator to create messages in system specs, this should help to have more real specs as the side effects should now happen
2023-05-17 17:49:52 +02:00
Penar Musaraj 56422ca8b8
FIX: Don't show duplicates in styleguide (#21582) 2023-05-16 09:27:15 -04: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
David Taylor 7ed4eaabda
DEV: Update styleguide example titles to use angle-bracket naming (#20375) 2023-02-20 15:16:18 +00:00
Keegan George 9c29d688e7
FEATURE: Add word count and indicator when exceeded max (#19367)
**This PR creates a new core reusable component wraps a character counter around any input.**

The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).

It can be used for example, like so:
```hbs
  <CharCounter @max="50" @value={{this.charCounterContent}}>
    <textarea
      placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
      {{on "input" (action (mut this.charCounterContent) value="target.value")}}
      class="styleguide--char-counter"></textarea>
  </CharCounter>
```

**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route
2023-02-20 12:06:43 +01:00
Keegan George 6338287e89
UX: Easily toggle badges in admin badge list (#20225) 2023-02-09 11:36:27 -08: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
David Taylor c8e2e37fa7 DEV: Apply prettier to hbs files 2022-12-28 13:11:12 +00:00
Jordan Vidrine ef62c85a12
FIX: Add REPLACEMENTS icons to styleguide 2022-12-15 09:12:18 -06:00
David Taylor c139767055
DEV: Remove `Ember.TEMPLATES` and centralize template resolution rules (#19220)
In the past, the result of template compilation would be stored directly in `Ember.TEMPLATES`. Following the move to more modern ember-cli-based compilation, templates are now compiled to es6 modules. To handle forward/backwards compatibility during these changes we had logic in `discourse-boot` which would extract templates from the es6 modules and store them into the legacy-style `Ember.TEMPLATES` object.

This commit removes that shim, and updates our resolver to fetch templates directly from es6 modules. This is closer to how 'vanilla' Ember handles template resolution. We still have a lot of discourse-specific logic, but now it is centralised in one location and should be easier to understand and normalize in future.

This commit should not introduce any behaviour change.
2022-11-29 10:24:35 +00:00
Kris d6ddb337c8
UX: use solid envelope icon for consistency (#19157) 2022-11-23 08:46:35 +08:00
Penar Musaraj b930f4886a
UX: Add flat text button styles and use in date/time cancel modal (#17892)
Also fixes an A11Y issue with the date/time cancel button.
2022-08-15 15:06:03 -04:00
Andrei Prigorshnev 023835cdad
DEV: a new `d-tooltip` component (#17513) 2022-07-28 18:33:20 +04:00
Jarek Radosz 5538b8442e
DEV: Introduce `discourseLater` (#17532)
A wrapper for `later()` from `@ember/runloop`, similar to `discourseDebounce`. It automatically reduces the delay in testing environment.
2022-07-17 00:50:49 +02:00
Peter Wagenet 371bbadb92
No implicit this codemod (#17235)
* Run no-implicit-this codemod for app templates
* Run tagless-ember-components-codemod for plugins
* Turn on no-implicit-this lint
2022-07-05 19:41:31 +02:00
David Taylor c011dd7b43 DEV: Remove last few curly-component invocations 2022-07-04 17:25:42 +01:00
Andrei Prigorshnev c9b2374299
DEV: make API of future-date-input more customizable and aligned with the API of time-shortcut-picker (#16502) 2022-04-27 16:41:15 +04:00
Andrei Prigorshnev 42bb629817
DEV: use the only source for time shortcut options on all date pickers (#16366) 2022-04-21 15:49:11 +04:00
Jarek Radosz 14778ba52e
DEV: Fix select-kit deprecations (#15080) 2022-04-05 19:01:09 +02:00
Penar Musaraj ddafa42b7e
DEV: Fix styleguide label regression (#16379)
Introduced in c92e62a271, it output all
styleguide example labels as CSS custom properties.
2022-04-05 12:16:18 -04:00
Jarek Radosz 99b2cfe26e
DEV: Disallow `Ember` global usage (#16147)
…and sprinkle `// eslint-disable-next-line no-undef` throughout the code where is unavoidable for now
2022-03-09 17:54:07 +01:00
Jarek Radosz 6e7cdc5bc3
DEV: Use Ember imports in the styleguide code (#16123) 2022-03-07 21:38:09 +01:00
Jordan Vidrine c92e62a271
UX: Styleguide changes & color variable additions (#15984) 2022-02-17 14:39:29 -06:00
Andrei Prigorshnev 62029ec4eb
DEV: remove the includeMidFuture option on future-date-input (#15818)
This option was always on. Essentially, we set it only in two places and always use `|| true` with it.

Note that we're going to switch future-date-input-selector to another source of time shortcuts(https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/time-shortcut.js) and also change its API to make it more customizable. Removing the includeMidFuture option is a part of that change.
2022-02-04 21:33:11 +04:00
Penar Musaraj 3b75120b3d
UX: Support `type=search` inputs in inline forms (#15790) 2022-02-03 13:50:24 +01:00
Andrei Prigorshnev bcc148556f
DEV: add empty state placeholder to styleguide (#15617) 2022-01-18 17:52:48 +04:00
Penar Musaraj 732678f642
UX: Fix alignment in group navigation bar (#15169)
Same as #15145.
2021-12-02 09:45:33 -05:00
Martin Brennan 4bdb956a0d
Revert "UX: Fix alignment in group navigation bar (#15145)" (#15150)
This reverts commit 01830f9d28.

This broke sidebar and could have affected customer themes
on a full enterprise deploy.
2021-12-01 16:13:03 +11:00
Penar Musaraj 01830f9d28
UX: Fix alignment in group navigation bar (#15145) 2021-12-01 11:49:34 +11:00
Jarek Radosz 4f14e012a7
DEV: Replace `$.extend` with `Object.assign` (#14921) 2021-11-14 10:59:22 +01:00
Jarek Radosz 4ad77f3382
DEV: Remove `.es6` extensions from core (#14912)
Still supported in plugins though.
2021-11-13 12:51:53 +01:00
Penar Musaraj 574cb28b0e
DEV: Sort styleguide icons alphabetically and fix render on refresh (#14463)
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2021-09-28 14:09:15 -04:00
Penar Musaraj 299d0ca445
UX: Minor layout tweaks to dropdowns (#14299)
- fixes mini-tag-chooser validation message
- fixes ellipsis overflow in mini-tag-chooser
- removes redundant `border-radius: 0` styles
- simplifies `user-notifications-dropdown` styling and adds example to styleguide
2021-09-10 09:00:41 -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
David Taylor 8c83803109
DEV: Remove unused `disabled_plugins` checks (#13144)
We now bundle Javascript for each theme/plugin separately, and only ship bundles for enabled plugins to the client. Therefore, these disabled_plugins checks are now redundant, and can be removed.
2021-05-26 09:44:58 +10:00
Josh Soref 59097b207f
DEV: Correct typos and spelling mistakes (#12812)
Over the years we accrued many spelling mistakes in the code base. 

This PR attempts to fix spelling mistakes and typos in all areas of the code that are extremely safe to change 

- comments
- test descriptions
- other low risk areas
2021-05-21 11:43:47 +10:00
Penar Musaraj 116ae8ebc1
DEV: update styleguide guidance for colors and font sizes (#12975) 2021-05-07 09:30:27 -04:00
David Taylor 1844bde57c
FIX: Allow mobile-nav to work without loading transitions (#12184)
Previously, the `{{mobile-nav}}` component required a `currentRouteName` property, passed from the router service. It would observe changes in this property, and update the UI accordingly.

If we change between routes which have the same `currentRouteName` (e.g. two different group message inboxes), then the `currentRouteName` does not change and does not trigger the observer. Currently in core, we are relying on the fact that currentRouteName temporarily enters a `.loading` substate during a transition. This will change when we remove the loading substate in the near future.

This commit refactors `{{mobile-nav}}` to inject the router directly, and use the `routeDidChange` event instead of an observer. The change is backwards compatible, but plugins passing the old `currentPath` property will be shown a deprecation notice.
2021-02-23 11:16:40 +00:00
Jarek Radosz 33507cdb14
DEV: Styleguide fixes (#11836)
Includes:

* FIX: Don't override computed properties
* FIX: Prevent a set-after-destroy error
* FIX: Get rid of select-kit deprecations
* FIX: Replace removed admin-group-selector
* FIX: Provide onChange action to fix warnings
* FIX: Remove an element with an invalid id
* DEV: Remove topic-notifications-button from dropdowns
  It has its own styleguide section under "Molecules".
* UX: Styleguide tweaks
* DEV: Make the dropdowns useable
2021-01-26 15:40:58 +01:00
Penar Musaraj 8922a878f3
DEV: Add site header organism to styleguide (#11495) 2020-12-15 12:48:47 -05:00
Penar Musaraj 2b2c840297
DEV: Fix JS errors in styleguide (#11494)
Replaces latest topic list component with basic topic list (the former
no longer exists). And fixes the display of the topic footer buttons.
2020-12-15 12:35:14 -05:00
Penar Musaraj 28feb7c2ff
DEV: Add header colors to styleguide (#11421) 2020-12-07 14:50:45 -05:00