Bring activityBar style from vscode-titlebar-less-macos as option to customize-ui

[lehni]

First of all, congrats on making this extension! I have started using it since porting my vscode-titlebar-less-macos extension to the newVSCode would represent a massive rewrite.

One thing I am missing though is the style of the activity-bar on the side (reminiscent of how Slack handles the UI), and I was wondering if we could work together on bringing this to customize-ui?

I would suggest adding a third option for "customizeUI.activityBar", perhaps called "left-extended" or "left-unifed"? It would then have to take on the width of --traffict-lights-width, and extend all the way to the top:

I would then discontinue the extension and recommend customize-ui instead.

[knopp]

Hi,

I just published 0.1.29, it adds wide option to customizeUI.activityBar setting. Let me know if it does what you want it to.

I wanted to avoid including left in the name, as with this on, the activity bar will be wide regardless of whether the sidebar is on left or right.

[lehni]

Wow, you work fast! This is perfect, exactly what I was looking for, thank you!

[lehni]

For the record: With these settings, I get the same behavior as vscode-titlebar-less-macos:

    "window.titleBarStyle": "native",
    "customizeUI.titleBar": "inline",
    "customizeUI.activityBar": "wide",

[lehni]

One detail that my extension was solving: When zooming in, the bar goes too wide:

I used to do this to correct that:

var factor = ${browser}.getZoomFactor();
var width = 78 / factor;
var height = 35 / factor;

[knopp]

I'm aware of zooming issue. It will correct itself after reloading window. The width is dependent on zoom factor, but the layout is not updated when changing zoom.

[lehni]

Oh I see. I guess you could listen to the zoom event itself and update the sizes then, but it may not be worth the effort.

[lehni]

@knopp for better alignment of the badge in wide mode, I recommend adding this styling:

monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content: {
  left: calc(50% + 0.5em);
  right: auto;
}

I'm currently doing so through "customizeUI.stylesheet":

  "customizeUI.stylesheet": {
    ".monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content": "left: calc(50% + 0.5em); right: auto;"
  },

[knopp]

Thanks. I've added it 6e08c7b

[lehni]

Perfect, thank you!

[knopp]

Can you try 0.1.30 (should be published soon) and let me know if it works for you?

[lehni]

Yes i just did, works as expected. 🎉

[lehni]

I have deprecated and archived this now: https://github.com/lehni/vscode-titlebar-less-macos

[adrusi]

The activity bar seems to no longer be centered under the traffic light, I've added this to my stylesheet to achieve the look in the screenshots in this thread:

".monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-label.codicon": "width: 100%"

[lehni]

@adrusi see here: #94 (comment)