איך להתאים אישית את סרגל הכלים של ה-Composer?

תכונה
1

I’m wondering if there is any way to customize which buttons are displayed (and in which order) on the New Topic toolbar.

Specifically, I want to replace the Date/Time button with the Add Event button. The Date/Time just causes confusion for new users and in our context, Events is what we want to highlight. Instructing users to first ignore the calendar-looking button, click on the gear icon, and then click on the other calendar looking icon is not the greatest considering our community has a lot of non-tech oriented and older folks using it.

I do see there are topics about customizing the new topic button, but not the toolbar itself.

3 לייקים
2

I’m also curious about this. We recently added a tool to the composer toolbar and it pushed the :gear: down to the next line.

CleanShot 2024-08-27 at 10.44.59

לייק 1
3

There’s no setting to configure the toolbar, but it’s possible through themes and plugins.

It would be nice to have this feature, so I’m going to re-categorize it as a feature request.

For now, buttons can be hidden with CSS… for example:

.d-editor-button-bar {
  .local-dates {  // hides the date button
    display: none;
  }
}

or to hide an option from the :gear: menu

.toolbar-popup-menu-options {
  [data-name="Build Poll"] {
    display: none;
  }
}

With CSS it’s also fairly straightforward to reorder items in these menus… you can do something like:

.d-editor-button-bar {
  .local-dates {  // moves the date button to the beginning
    order: -1/
  }
}

We have a guide for figuring out how to change CSS over here:

All that said, the more difficult change is moving something to/from the dropdown menu and into the main toolbar (or vice versa). You’d need to hide the original button with CSS and then add a duplicate button using the API.

Looking at an example theme component, like Discourse Gifs gives a general idea of how that’s done… though this gets tricky if you’re not a developer.

8 לייקים
4

for the :gear: menu

When I tried writing this way, the display order didn’t change.
PS: display: none; didn’t work either.

.toolbar-popup-menu-options {
  [data-name="Create event"] {
    order: -1;
  }
}

The following syntax works as expected, moving “Create event” to the top.

.select-kit-collection {
  display: flex;
  flex-direction: column;
}

.select-kit-row[data-name="Create event"] {
  order: -1;
}

I’m not familiar with CSS, ChatGPT helps to create the code above.

לייק 1
5

Yes, this is really needed. Not only a “default” option for all users, but then each user could customize it, because not everyone needs to have a button to make the text “Bold”, or "Italic, of even the “Ask AI”.

But for now, being able to at least move things around globally and adding them to the hidden/cog wheel menu, would help.

On my 13" screen things are starting to get a little bit cramped (I always like to have some of the original topic visible for quoting sections, etc):

image
image1013×596 51.4 KB

6

I’m curious: how did you add that note “20 characters required”, and does it then show how many the person typed already?

How about for the title?

7

To be honest I’m not entirely sure. That was installed on a community that I previously ran (but no longer do). It looks like this it can be located here.

2 לייקים
8

Thanks! That’s exactly that! :raising_hands:

לייק 1
9

I also have older folks on my forum, and I feel silly explaining this to them.

The gear is also a very non-obvious symbol for “there’s more”. Maybe an ellipsis would be more appropriate? Is there a straightforward way I can change the icon?

Another stumbling block I found here is that on mobile there is a little hamburger icon that hides/shows the toolbar, and it seems to be off by default. This causes way more confusion than any benefit it could offer. I turned it off:

.composer-controls .toggle-toolbar {
  display: none;
}

.d-editor-button-bar {
  display: grid !important;
}
10

Hi there, I was wondering if this method is still recommended, or is it affected by this?

לייק 1
11

Using api.onToolbarCreate from a .js initializer is still supported :+1:

The topic you linked only refers to including javascript in <script type="text/discourse-plugin"> tags.

3 לייקים
12

Hi,

I have the “create event icon” placed to the right and outside the +menu, but you can place it to the left with those instructions :

1° In your theme’s header in admin>appearance>theme>edit>edit code>head add this javascript

<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(()=>{const e=".d-editor-button-bar",t=".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options",n=".fk-d-menu__inner-content",o=".d-modal.fk-d-menu-modal",c=e=>{const t=e.querySelector('svg use[href="#calendar-day"]');return t?t.closest("button"):null},r=(e,t,n=4e3)=>new Promise((o,c)=>{const r=t(e);if(r)return o(r);const l=new MutationObserver(()=>{const n=t(e);n&&(l.disconnect(),o(n))});l.observe(e,{childList:!0,subtree:!0}),setTimeout(()=>{l.disconnect(),c()},n)}),l=(e=4e3)=>{const t=new MutationObserver(()=>{document.querySelector(o)&&t.disconnect()});t.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>t.disconnect(),e)},s=e=>{if(e.querySelector(".custom-create-event-btn"))return;const o=document.createElement("button");o.className="btn no-text btn-icon toolbar__button link custom-create-event-btn",o.title="Create event",o.innerHTML='<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>',e.appendChild(o),o.addEventListener("click",async()=>{const e=document.querySelector(t);if(!e)return;e.click();let o=document.querySelector(n);o||(await new Promise((e,t)=>{const c=new MutationObserver(()=>{(o=document.querySelector(n))&&(c.disconnect(),e())});c.observe(document.body,{childList:!0,subtree:!0}),setTimeout(()=>{c.disconnect(),t()},2e3)}));try{(await r(o,c)).click(),l()}catch{}})},u=new MutationObserver(()=>{const t=document.querySelector(e);t&&s(t)});u.observe(document.body,{childList:!0,subtree:!0});const d=document.querySelector(e);d&&s(d)})();
</script>

2° if you want the icon to the left and not to the right : on the same admin page you will find a CSS tab where you may add this there :

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3° Bonus : if you want this button to be visible at this place into only certain categories use the script there and modify the conditions with your categories names Discourse Calendar (and Event) - #547 by opcourdis

image
image1034×334 33.8 KB

לייק 1
13

Thanks very much to @david and @opcourdis for the helpful replies.

2 לייקים