Add option to position widgets

[deusipse]

So I've recently acquired a MacBook Pro with a notch, and turns out the bar has no way of knowing that there is a notch there. Here is what it looks like right now:

I'd say that the best solution in this situation would be to move the Spotify widget to the left, so that it sits next to the process widget. Since this is probably very hard to detect, I'd suggest that there be an option to arrange the widgets manually.

[Jean-Tinland]

The data part of simple-bar can be indeed quickly crowded I understand that. I'm not a fan of moving to the left part of the bar the data widgets that don't fit on the right because it could then overlap with the process widget in some case when user has a lot of spaces & processes opened. It would only move the problem elsewhere.

There is simply not enough horizontal real estate on a small screen to display all that data.

That said it is a recurring problem that I'm planning on solving with the addition of the possibility to create additional bars that could be displayed on specific displays and/or position (top or bottom).

Let me know if it would suits you. Otherwise, you can fix that with custom styles (last tab in settings) by adding a margin to the Spotify widget:

.spotify {
  margin-right: 200px; /* adjust this value */
}

Thank you for your suggestion!

Edit: typos

[deusipse]

Thanks for your response - I appreciate that this problem would be a hard compromise to solve.

I don't think the custom style did anything: see screenshot above. Could it be something to do with the settings I am using? Sorry for my confusion, I'm not familiar with css at all (I use C++/python/latex for my work :) )

[deusipse]

Hmm I tried modifiying the /lib/styles/components/data/spotify.js file directly:

export const spotifyStyles = /* css */ `
.spotify {
  position: relative;
  margin-right: 240px;
  width:170px;
  background-color: var(--green);
}
.simple-bar--widgets-background-color-as-foreground .spotify {
  color: var(--green);
  background-color: transparent;
}
`;

Produces

From here I have some questions:

• Can it work in custom styles?
• Could the background be disabled in between so it keeps looking like a floating bar?
• Sometimes the process widget would be too long and then it pushes the right side of the bar a bit out of the screen, which is not desirable. I tried doing

.process {
  max-width: 100px;
}

in the custom styles, but that did not work (the process widget still goes too big at times). Could this be some kind of bug with the custom styles?

• Another option could be to position the spotify widget manually in custom styles or something like that. I don't know if this is actually possible or not. That way it wouldn't be affected by the rest of the widgets changing width. Ugh, the notch is such a pain to deal with...

Thanks!

[deusipse]

@Jean-Tinland Any progress/ideas?

[Jean-Tinland]

@deusipse sorry I took some time to get back to you!

I'm only working on this project from time to time so I can't tell you when I'll be working on an update on the widget positioning system.

As for your questions:

1. Yes it should work in the custom styles tab.
2. No unfortunately you can't remove this background as the style sheet is based on the HTML markup: the Spotify widget is part of the data section of simple-bar which is grouping all data widget at the same level. You could try to move it manually outside in the index.jsx file and update the CSS according to your needs.
3. You can try to change the "Widget max width" setting in order to limit the process item size. You can also toggle settings relative to the process widget: show only process app name or even only the icon.

Please let me know if this helps you.