Commit Graph

83 Commits

Author SHA1 Message Date
Kris
aabf174ac8
UX: fix admin sidebar header width () 2024-12-11 11:09:27 -05:00
Penar Musaraj
041ac3d8b7
DEV: Refactor header offset calculations () 2024-10-31 09:50:01 -04:00
Ella E.
19fb8b8d57
FIX: Adjustments to the admin sidebar following recent core sidebar styling changes () 2024-10-08 22:11:07 -06:00
chapoi
0ba7a7ecab
UX: new sidebar styling () 2024-10-08 11:28:36 +02:00
Joffrey JAFFEUX
7a7cc815be
DEV: removes legacy modal code () 2024-07-24 18:07:17 +02:00
Sérgio Saquetim
b36cbc7d21
DEV: Untangle the admin sidebar from the sidebar code () 2024-07-05 13:11:15 -03:00
Martin Brennan
222a5f4677
UX: Show shortcut for admin sidbar filter ()
This adds a small indicator of the Ctrl+/ shortcut that
exists for the admin sidebar filter, since it's not very
obvious that you can do that. This should help people
who are struggling with the long list of links -- it's
much faster to use the keyboard and search for what
you are looking for.
2024-05-30 15:06:02 +10:00
Ella E
4334fc9bd3
UX: Change admin sidebar expand/collapse all icon () 2024-05-22 09:07:07 +10:00
Krzysztof Kotlarek
0932b146d9
FEATURE: the ability to expand/collapse all admin sections ()
By default, admin sections should be collapsed.
In addition, a button to expand/collapse all sections has been added.
2024-03-27 14:42:06 +11:00
Kris
8b4730e52c
DEV: unused CSS cleanup, variable updates, simplification () 2024-03-11 09:07:53 -04:00
Krzysztof Kotlarek
15ff33ae9e
FEATURE: move back to the forum link above the filter ()
Before, the `back to forum` link was part of experimental admin navigation. It means that the link could be filtered out.

Because it is essential navigation, it should not be part of sidebar links and should be moved above the filter.
2024-03-07 14:48:16 +11:00
Krzysztof Kotlarek
8b5204579c
FEATURE: filter admin sidebar ()
Ability to filter admin sidebar. The filter can be cleared. In addition, it can be accessed with ctrl+/ shortcut
2024-02-28 12:15:02 +11:00
Kris
94199715cd
UX: fix sidebar section modal styles () 2024-02-21 18:22:03 -05:00
Ella E
e4b6142d6a
UX: Tweaks on the admin sidebar () 2024-02-16 14:28:25 -07:00
Kris
7b6e32c238
UX: move global option to sidebar modal footer, shorten translation () 2023-10-19 12:20:03 -04:00
Joffrey JAFFEUX
2a10ea0e3f
DEV: FloatKit ()
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @Label={{i18n "foo.bar"}}
  @ICON="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 13:39:52 +02:00
Joffrey JAFFEUX
85fddf58bc
Revert "DEV: FloatKit ()" ()
This reverts commits

0623ac684a
408e71e437
a32fa3b947

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
Joffrey JAFFEUX
0623ac684a
DEV: FloatKit ()
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:50:26 +02:00
Joffrey JAFFEUX
b8cc1072cc
Revert "DEV: FloatKit ()" ()
This reverts commit abcdd8d367.
2023-09-12 15:37:16 +02:00
Joffrey JAFFEUX
abcdd8d367
DEV: FloatKit ()
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Menus are very similar to tooltips and provide the same kind of APIs:

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:06:51 +02:00
Krzysztof Kotlarek
20ec7ac174
FEATURE: new API to add panels to sidebar ()
Define new concept of panels in sidebar. Panels are wrappers around sidebar sections. In the future, it allows creating full focus mode by switching between panels.

A new API method called addSidebarPanel was added. Default main panel is already registered and by default all API sections are mounted to main.
2023-07-19 11:31:45 +10:00
Kris
7b23010c4a
UX: fix icon warning position in sidebar modal () 2023-07-12 13:57:11 -04:00
Alan Guo Xiang Tan
ab053ac669
UX: Remove section heading for community section ()
Why is this change being made?

We've decided that the previous "community" section should look more
like a primary section that holds the most important navigation links
for the site and the word "community" doesn't quite fit that
description. Therefore, we've made the decision to drop the
section heading for the community section. 

As part of removing the section heading, the following changes are made
as well:

1. Button to customize the section has been moved to the "footer" of the
   "More..." section when `navigation_menu` site setting is set to `sidebar`. 
   When `navigation_menu` is set to `header dropdown`, a button to customize 
   the section is shown inline.

2. The section will no longer be collapsable.

3. The title of the section is no longer customisable as it is no longer
   displayed. As a technical note, we have not dropped any previous
   customisations of the section's title previously in case we have to
   bring back the header in the future.

4. The new topic button that was previously present in the header has
   been removed alongside the header. Admins can add a custom section
   link to the `/new-topic` route if there would like to make it easier for
   users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
Kris
26d19fc1bd
UX: indicate main sidebar section is always public () 2023-07-10 11:44:40 -04:00
Kris
10dce46886
UX: remove sidebar background color () 2023-06-06 09:24:56 -04:00
Kris
594b892409
UX: style adjustments for sidebar edit modal () 2023-06-01 10:37:28 +08:00
Krzysztof Kotlarek
9f78ff5572
FEATURE: modal for admins to edit Community section ()
Allow admins to edit Community section. This includes drag and drop reorder, change names, delete and reset to default.

Visual improvements introduced in edit community section modal are available in edit custom section form as well. For example:
- drag and drop links to change their position;
- smaller icon picker.
2023-05-29 15:20:23 +10:00
Kris
442b5538bb
UX: more style adjustments for larger sidebar font () 2023-05-25 11:21:30 -04:00
Kris
2aae8d6092
UX: increase sidebar font-size () 2023-05-24 11:00:20 -04:00
Kris
5dd89e0b70
UX: iPad footer nav now included in header offset () 2023-05-23 17:49:19 -04:00
Joffrey JAFFEUX
5ce0697348
FIX: limits max height to viewport on channel only ()
Before this commit chat was applying a fixed height on everything under the `/chat` route. It's only really needed on the channel page with the composer at the bottom of the page.

This commits makes the following changes:
- moves height limitation from `#main-outlet-wrapper` to `.chat-channel`
- makes browse channel page and members list page full height and rely on main document scrollbar
- adds height computation for draft header and direct message creator block to ensure the height is correct when creating a draft channel
- makes chat index full height to rely on the browser scrollbar. As a result the <kbd> + </kbd> button used on mobile to create a direct message as been moved out of `<ChannelsList>` into the chat index template
- sidebar height was relying on chat setting a max height, as a result the height computation of sidebar has been changed to work correctly, especially with an opened keyboard on mobile or ipad
2023-05-15 11:46:33 +02:00
Kris
4cca7de22d
UX: two column dropdown sidebar layout () 2023-05-01 10:41:28 -04:00
David Taylor
f5fa1ef771
UX: Use dvh for sidebar height ()
This will automatically adjust when browser UI is shown/hidden (e.g. when scrolling up/down on mobile Safari).

Similar approach to c82094cd9d, which targeted the 'slide-in' version of menus.
2023-04-27 16:31:09 +01:00
Krzysztof Kotlarek
fd718c1a42
FIX: use unselectable mixin in sidebar drag and drop ()
7dcaaec90c/app/assets/stylesheets/common/foundation/mixins.scss (L122)
2023-03-31 09:28:22 +11:00
Krzysztof Kotlarek
b854fa8cdb
FIX: disable text select on sidebar ()
To make drag&drop links reliable, we have to disable user-select option on whole sidebar.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
2023-03-29 14:32:28 +11:00
Krzysztof Kotlarek
db74e9484b
FEATURE: ability to reorder links in custom sidebar sections ()
Drag and drop to reorder custom sidebar sections
2023-03-21 12:23:28 +11:00
Joffrey JAFFEUX
c37dd63ac3
DEV: fixes linting ()
Followup to 54eaae4326
2023-03-20 20:59:27 +00:00
Dominik Schlipper
54eaae4326
FIX: replace unitless 0 in CSS calc() with '0px' ()
Using the unitless number 0 in CSS calc() functions is recognized as invalid (tested in Chrome 110 & Firefox 111).
In this code, this would disable the style definition for the 'height' property when one of the custom properties is undefined and the fallback '0' is used.
For more insight on this topic. see https://stackoverflow.com/questions/55406001/why-doesnt-css-calc-work-when-using-0-inside-the-equation
2023-03-20 16:06:49 -04:00
Krzysztof Kotlarek
b9d037770c
DEV: configurable public sidebar sections ()
Extension of https://github.com/discourse/discourse/pull/20057

Admin can create a public session visible to everyone. An additional checkbox is displayed for staff members.
2023-02-22 08:55:44 +11:00
Krzysztof Kotlarek
1a5f6aefc7
FIX: correct sidebar and chat height on DiscourseHub ()
Before that change, footer of the sidebar was not visible.
Footer is very important, especially now, when add custom section button is located there.
Also, distance between chat input and keyboard were increased
2023-02-16 15:59:09 +11:00
Kris
1c64b2dd95
UX: allow sidebar to appear inline down to 768px ()
* UX: allow sidebar to appear inline down to 768px

* test fix

* fix typos
2023-02-14 09:51:42 +11:00
Krzysztof Kotlarek
6e1f3e0023
FIX: improvements for user custom sections ()
Improvements for this PR: https://github.com/discourse/discourse/pull/20057

What was fixed:
- [x] Use ember transitions instead of full reload
- [x] Link was inaccurately kept active
- [x] "+ save" renamed to just "save"
- [x] Render emojis in link name
- [x] UI to set icon
- [x] Delete link is trash icon instead of "x"
- [x] Add another link to on the left and rewording
- [x] Raname "link name" -> "name", "points to" ->  link
- [x] Add limits to fields
- [x] Move add section button to the bottom
2023-02-08 11:45:34 +11:00
Krzysztof Kotlarek
84a87a703c
DEV: configurable custom sidebar sections ()
Allows users to configure their own custom sidebar sections with links withing Discourse instance. Links can be passed as relative path, for example "/tags" or full URL.

Only path is saved in DB, so when Discourse domain is changed, links will be still valid.

Feature is hidden behind SiteSetting.enable_custom_sidebar_sections. This hidden setting determines the group which members have access to this new feature.
2023-02-03 14:44:40 +11:00
Alan Guo Xiang Tan
3ec1808d75
DEV: Revert change in background-color of sidebar ()
Follow-up to f1cbc23f1e
2022-09-29 13:52:23 +08:00
Alan Guo Xiang Tan
f1cbc23f1e
UX: Add icons to all section links in Sidebar ()
This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. 

Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
Alan Guo Xiang Tan
2583d21aa7
UX: Improve styling of sidebar on mobile ()
* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
2022-09-15 11:35:33 +08:00
Kris
c5df47d5eb
minor sidebar scrollbar adjustments () 2022-08-24 15:46:01 -04:00
Kris
03a599f457
UX: revert sidebar scrollbar repositioning () 2022-08-24 13:26:25 -04:00
Kris
3068df4cea
UX: sidebar styling, spacing consistency, etc () 2022-08-24 09:33:15 +08:00
Alan Guo Xiang Tan
a3565914a4 UX: Adjust scrollbar behaviour in sidebar
Vertical sidebar is only restricted to sidebar sections and not the
footer.
2022-08-22 14:09:39 +08:00