How to add my own drop down(popupMenu) like the composer options?

dev
1

I added the following code to my theme component and expected a new popupMenu to appear in the composer.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "crud",
      icon: "align-center",
      popupMenu: true
  });
});

I thought I would be able to follow the code here where the options cog gets added and it would work.

        toolbar.addButton({
          id: "options",
          group: "extras",
          icon: "cog",
          title: "composer.options",
          sendAction: this.onExpandPopupMenuOptions.bind(this),
          popupMenu: true,
        });

image
image719×394 69.6 KB

I thought that I could create additional buttons with the group crud and they would show up in their own dropdown like the default options. Is this possible? Could I get an example of how to setup and bind options to your own popupMenu?

2 Likes
2

I don’t believe our javascript plugin API is set up to make it easy to add a secondary dropdown menu at this point. The toolbar customizations I can think of have all just added options to the existing drop down.

To get something to render you would need to change your group to "extras". The groups are hard-coded and relate to the various sections of composer buttons.

The other thing to watch out for is that the icon you choose needs to be added via your theme component or the svg icon subset site setting.

Beyond that, I’m afraid you’re treading into fairly uncharted territory.

4 Likes
4

Ah okay, that makes a lot of sense for the group sections.

I changed the group back to extras and now it does show up, but now it along with the existing options cog dropdown the same menu.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "extras",
      icon: "align-center",
      popupMenu: true
  });
});

Would this be a possible feature to add to the plugin API? The ability to add custom items to your own dropdown independent of the existing options dropdown. I could see this being useful as our composer is starting to look a little cluttered with all the additional options we would like to have :slight_smile:

2 Likes
5

Totally understand how it could be useful! I see you opened a feature topic which is perfect. That will help us track interest and hopefully make it so sometime in the future.

4 Likes
6

Thank you @tshenry I appreciate you looking into it!

3 Likes