Commit Graph

1328 Commits

Author SHA1 Message Date
Kris
13a2ca8b09
UX: update px spacing to em for proportionality (#27108) 2024-05-21 13:13:38 -04:00
Joffrey JAFFEUX
f752851030
FIX: mobile modal tweaks (#27073)
- removes `will-change: auto;` which is a performance hack which should be avoided and is probably causing more harm than good here
- lowers swipe velocity to 0.4 to ensure the modal can be dismissed with the thumb
- uses JS CSS animate API to animate the backdrop opacity
- uses the height of the modal container to have more precise values when computing backdrop opacity
- animate the modal container instead of the wrapper
- removes a useless template-lint-disable directive
- simplify the closing animation
- various small code tweaks to limit indirection
2024-05-19 15:43:03 +02:00
Jan Cernik
7bc7ad45bb
UX: Merge the redesign experiment for embedded replies (#26876)
This PR merges the [design experiment](https://meta.discourse.org/t/embedded-replies-feedback/290538) based on the [Custom embedded replies component](https://meta.discourse.org/t/custom-embedded-replies/272670) created by [Don](https://meta.discourse.org/u/don/summary)

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2024-05-08 18:00:17 +02:00
Joffrey JAFFEUX
cf8b81771f
DEV: implements <DropdownMenu /> (#26917)
DropdownMenu component is meant as a way to describe the content of menus.

Syntax:

```
<DropdownMenu as |dm|>
  <dm.item class="test">
    First
  </dm.item>
  <dm.divider class="foo" />
  <dm.item class="bar">
    Second
  </dm.item>
</DropdownMenu>
```
2024-05-08 09:08:42 +02:00
Jan Cernik
8dd883d4e5
DEV: Refactor topic admin menu to use <DMenu> (#26678)
* DEV: Refactor topic admin menu to use `<DMenu>`

This PR also introduces a new plugin API to add buttons to the topic admin menu

```javascript
api.addTopicAdminMenuButton((topic) => {
  return {
    action: () => {
      alert('Sunrise!');
    },
    icon: 'sun',
    className: 'sunrise-button',
    label: 'actions.rise',
  };
});
```

The plugins that needed to be updated are:

- [discourse-zoom](https://github.com/discourse/discourse-zoom/pull/73)
- [discourse-salesforce](https://github.com/discourse/discourse-salesforce/pull/74)
- [discourse-topic-noindex](https://github.com/discourse/discourse-topic-noindex/pull/11)
2024-04-29 12:44:38 -03:00
Kris
b971efed8c
UX: dynamic spacing for summarization buttons (#26690) 2024-04-22 09:49:00 -04:00
Joffrey JAFFEUX
17c92b4b2a
UX: shows the bookmark menu improvements
This commit adds a new option `@modalForMobile` for `<DMenu />` which allows to display a `<DModal />` when expanding a menu on mobile.

This commit also adds a `@views` options to toasts which is an array accepting `['mobile',  'desktop']` and will control if the toast is show on desktop and/or mobile.

Finally this commit allows to hide the progressBar even if the toast is set to `@autoClose=true`. This is controlled through the `@showProgressBar` option.
2024-04-08 08:18:50 +02:00
Kris
b35da59865
UX: adjustments for experimental bulk select menu (#26474) 2024-04-02 18:01:21 -04:00
Joffrey JAFFEUX
f7b73f3d70
UX: improves modal on mobile (#26055)
This commit mainly improves three things:
- slide up/down animation of the modals on mobile, also allowing swipe down to close the modal
- body scroll locked modals, it means that only the body of the modal can scroll
- a new `<:headerPrimaryAction>` block for `d-modal` which when present will move the cancel button to the left of the modal title, and this primary action to the right of the title
2024-03-22 16:29:32 +01:00
David Taylor
8b935e5b33
Revert "UX: Make input sizing consistent across all browsers (#26159)" (#26295)
This reverts commit d0d4a363d4. This causes issues for people that have specified explicit font sizes in their browser - reverting while we investigate. https://meta.discourse.org/t/300374
2024-03-21 17:54:11 +00:00
David Taylor
d0d4a363d4
UX: Make input sizing consistent across all browsers (#26159)
Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations.

This commit does two things:

1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px

2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices

It also removes some associated CSS rules which no longer make sense.
2024-03-20 16:23:44 +00:00
David Battersby
d5b944f1de
FEATURE: add chat direct message button to user profile (#26135)
This change adds the chat direct message button to user profiles, similarly to how we use it within the user card.
2024-03-18 11:17:37 +08:00
Kris
f65a5c5f02
UX: clean up invite buttons (#26068) 2024-03-07 10:50:11 -05:00
Kris
5c1147adf3
UX: Move top dismiss button from topics to d-navigation (#26032) 2024-03-05 15:43:07 -05:00
Kris
e408f4ff95
DEV: remove various unused CSS (#25994) 2024-03-01 16:51:26 -05:00
Kris
653b2e4678
DEV: remove unneeded buttons mobile CSS (#25992) 2024-03-01 16:42:02 -05:00
Kris
9421997866
DEV: remove old bootstrap alert CSS (#25991) 2024-03-01 16:03:34 -05:00
Kris
ccf0fdaa81
UX: improve group email setting wrap, cleanup styles (#25985) 2024-03-01 12:34:55 -05:00
Kris
8503d3afe1
UX: improve advanced search wrapping, remove mobile stylesheet (#25975) 2024-02-29 18:07:18 -05:00
Kris
40eea40d69
UX: clean up tag info styles, remove mobile stylesheet (#25973) 2024-02-29 17:48:47 -05:00
Kris
db2f5ae51b
UX: simplify styles for image uploader (#25970) 2024-02-29 14:39:00 -05:00
Kris
47b8e98cf7
UX: enable badge title on mobile, style cleanup (#25968) 2024-02-29 13:55:13 -05:00
chapoi
9ce2c20ab0
UX: make sure a-tag uses border radius var (#25882) 2024-02-26 16:17:04 +01:00
Isaac Janzen
21f23cc032
DEV: Convert header to glimmer (#25214)
Here is a breakdown of the changes that will be implemented in this PR.

# Widgets -> Glimmer

Obviously, the intention of the todo here is to convert the header from widgets to glimmer. This PR splits the respective widgets as so:

### widgets/site-header.js
```mermaid height=200
flowchart TB
    A[widgets/site-header.js] 
    A-->B[components/glimmer-site-header.gjs]
```

### widgets/header.js and children
```mermaid height=200
flowchart TB
    A[widgets/header.js] 
    A-->B[components/glimmer-header.gjs]
    B-->C[glimmer-header/contents.gjs]
    C-->D[./auth-buttons.gjs]
    C-->E[./icons.gjs]
    C-->F[./user-menu-wrapper.gjs]
    C-->G[./hamburger-dropdown-wrapper.gjs]
    C-->H[./user-menu-wrapper.gjs]
    C-->I[./sidebar-toggle.gjs]
    C-->J[./topic/info.gjs]
```

There are additional components rendered within the `glimmer-header/*` components, but I will leave those out for now. From this view you can see that we split apart the logic of `widgets/header.js` into 10+ components. Breaking apart these mega files has many benefits (readability, etc).

# Services

I have introduced a [header](cdb42caa04/app/assets/javascripts/discourse/app/services/header.js) service. This simplifies how we pass around data in the header, as well as fixes a bug we have with "swiping" menu panels.


# Modifiers
Added a [close-on-click-outside](cdb42caa04/app/assets/javascripts/discourse/app/modifiers/close-on-click-outside.js) modifier that is built upon the [close-on-click-outside modifier](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/float-kit/addon/modifiers/close-on-click-outside.js) that @jjaffeux built for float-kit. I think we could replace float-kit's implementation with mine and have it in a centralized location as they are extremely similar.

# Tests
Rewrote the existing header tests ([1](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/widgets/header-test.js), [2](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js)) as system tests. 

# Other
- Converted `widgets/user-status-bubble.js` to a gjs component
- Converted `widgets/sidebar-toggle.js` to a gjs component
- Converted `topicFeaturedLinkNode()` to a gjs component
- Deprecated the [docking mixin](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/mixins/docking.js)
2024-02-23 11:08:15 -07:00
Kris
1ac8922013
DEV: update classes, remove unused CSS (#25825) 2024-02-23 09:14:37 -05:00
Kris
9005a14508
UX: fix topic map link expansion hover (#25822) 2024-02-22 15:47:38 -05:00
chapoi
a9f8009801
UX: Modal mobile fixes (#25788)
* UX: remove discourse-touch class wrapper

* UX: keep modal close btn in right position
2024-02-21 13:49:42 +01:00
Krzysztof Kotlarek
ee393a7953
UX: hide the draggable icon in the sidebar form on mobile (#25738)
Drag and drop link works only on desktop. Therefore, the drag icon should be hidden on mobile.
2024-02-21 09:16:49 +11:00
Kris
52fb523bbb
UX: show the full mobile read-state indicator (#25678) 2024-02-14 15:52:02 -05:00
David Taylor
9883e6a0c8
UX: Add loading indicator when loading 'new or updated topics' (#25649)
Also improves error handling so that the action can be retried if the network request fails
2024-02-13 10:41:22 +00:00
Kris
59ccb69db0
FEATURE: show unread post indicator on mobile (#25421) 2024-02-06 11:50:49 -05:00
chapoi
fbfab92fce
UX: overflow fix for add participants to PM on mobile (#25437) 2024-01-26 09:26:25 +01:00
chapoi
d5f527ee37
UX: show the SSO options when creating an account on mobile (#25260) 2024-01-15 16:36:00 +01:00
Kris
7639591552
UX: cleaning up some invite page styles (#25247) 2024-01-12 17:15:01 -05:00
Jordan Vidrine
8dad9788a3
FIX: Drop down fix (#25093) 2024-01-03 08:02:32 -06:00
Sam
baa7c4cec7
FIX: allow styling of feedback on mobile (#25072)
(to test try using discourse-ai which displays feedback on mobile)


---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-12-30 08:57:16 +11:00
Kris
096e26d972
UX: adjust pm styles to enbubble controls (#24996) 2023-12-22 14:28:02 -05:00
chapoi
1f9e6425c6
UX: align topic notification button + text vertically (#24948) 2023-12-18 16:59:03 +01:00
Mark VanLandingham
223e413a6c
DEV: Render glimmer notification items for user notification list (#24802)
This removes the widget notifications list and renders the glimmer user menu notification items instead.
2023-12-11 11:04:43 -06:00
chapoi
e227008c65
UX: login modal sizing fixes (#24794) 2023-12-08 17:21:37 +01:00
Kris
c197f8c6ee
UX: make github onebox styles more responsive (#24761) 2023-12-06 17:45:56 -05:00
chapoi
ad77a6876c
UX: fix alignment (#24718) 2023-12-05 14:19:21 +01:00
Krzysztof Kotlarek
dc2a0854b0
UX: add gift emoji styling for new features (#24523)
When admin has unseen new feature, gift emoji is added to a link.

In addition, `/new-features` path was changed to `/whats-new`
2023-11-27 09:32:28 +11:00
chapoi
0b352ce7fb
UX: fix date time modal on mobile (#24531)
* UX: fix date time modal
2023-11-24 10:28:46 +01:00
Jordan Vidrine
e073f4e5a6
UX: Adjust topic progress wrapper border radius (#24470) 2023-11-21 09:15:20 -06:00
Penar Musaraj
36606a2157
FIX: Modals on Android when keyboard is visible (#24442) 2023-11-20 11:56:06 -05:00
chapoi
f2d3e3ed3f
UX: Fixes login/create modal (#24457)
* UX: fix > hide alt login method on mobile create acc

* UX: login modal > fix long names on login buttons

* UX: fix login overflow
2023-11-20 11:52:50 +01:00
Krzysztof Kotlarek
190a7f8c7a
UX: smaller new feature emoji (#24454)
Moved the new feature emoji to the left of the title and made it smaller.
2023-11-20 16:08:10 +11:00
Krzysztof Kotlarek
96c5a6c9ca
FEATURE: dedicated admin section for new features (#24292)
New tab in admin panel with list of new features. Presentation was enhanced by screenshot and markdown description.

Related PR https://github.com/discourse-org/discourse-new-features-feeds/pull/23
2023-11-20 09:59:04 +11:00
chapoi
cd183edad1
UX: modal > remove obsolete wrapper class (#24381) 2023-11-15 11:33:23 +00:00