New Plugin: Ribbon Divider

Share & showcase
1

Just released! This plugin allows you to separate your ribbon icons with a divider to better organize!

image

8 Likes
2

Quick question: how does your plugin handle the known issue of the icons being repositioned every time you disable/enable/update the corresponding plugins?

For example, whenever we disable and re-enable plugins, their positions in the ribbon/sidebar changes completely, sometimes even when updating the plugins.

Does this plugin account this particular nasty situation? Meaning, are the dividers aware of their surrounding icons? Or will the dividers eventually end up one after the other after updating/toggling plugins?

EDIT: Nevermind, apparently this plugin goes to south and won’t work if you disable/re-enable plugins, or when you use plugin-load-delay solutions like “Plugin Groups” (I ended up having 3 dividers one after the other :roll_eyes: I hate that this plugin positioning bug doesn’t get fixed - what a shame, I really needed this plugin…)

P.S. Maybe a bug, maybe an effect of Obsidian’s own icon positioning bug: if you disable this plugin and re-enable it, the dividers are all positioned at the end of the sidebar :pensive:

1 Like
3

Yea, it’s unfortunately Obsidian itself that creates that issue.

When any plugin adds items to the ribbon, they will always get added to the end and Obsidian only remembers the user’s positioning for as long as the plugin is enabled.

1 Like
5

So, I get around some of those issues by manually specifying the order with this CSS snippet:

/* ------------------------------------------------------------------------- */
/*   Ribbon Button Order                                                     */
/* ------------------------------------------------------------------------- */

/* Workspace - Ribbon - Button Order - Top */
div[aria-label = "Open command palette"]                             { order: 1; }
div[aria-label = "Divider: 2160d391-14bb-46ea-961f-49d146a8e5d8"]    { order: 2; }
div[aria-label = "Omnisearch"]                                       { order: 3; }
div[aria-label = "Divider: 98df2be3-d2a5-4186-a305-0699ee429db4"]    { order: 4; }
div[aria-label = "Clean files"]                                      { order: 5; }
div[aria-label = "Divider: 38b4766d-a9ea-412f-8974-0ae59bed93e9"]    { order: 6; }
div[aria-label = "Hide all"]                                         { order: 7; }
div[aria-label = "Reveal all"]                                       { order: 8; }
div[aria-label = "Hidden Folders"],
div[aria-label = "Show Folders"]                                     { order: 9; }

I’m still trying to figure out a way to toss new buttons to the bottom of the list, rather than the top; but I’m pretty happy with it so-far

6 Likes
6

Holy macaroni, I completely forgot about the manual ordering property :open_mouth: This is gold, thanks a bunch, I can finally order plugins how I want and keep them ordered!

@Hitman247m Just add the following line before all your above CSS code that defines the orders:

div.clickable-icon { order: 99; }

This will make all new buttons that don’t have an order manually defined by you appear after all other ordered buttons :grin:

Now with this plugin & manual ordering everything behaves as it should, and all new plugins are added after the last divider:

Screenshot-07_01_2024-13.58.56
Screenshot-07_01_2024-13.58.56306Ă—633 50.1 KB

Be-a-utiful!

3 Likes
7

Amazing, thanks @woofy31

1 Like
8

Thats awesome @Hitman247m and @woofy31!

If one of you want to add that tip to the README via a PR, would be happy to accept that contribution!

1 Like
9

Looks like you beat us to it @andrewmcgivery, looks great; I think it explains the workaround really well

1 Like
10

Actually, it was me who did the PR and added the workaround on his plugin’s readme :eyes: :sweat_smile: #oopsiedaisy #iamspeed

3 Likes
11

Amazing. This even works with workspaces-plus. Many thanks!

2 Likes