drcika / apc-extension

https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
MIT License
669 stars 26 forks source link

Padding issues of title-action and main-panel #214

Open sleepymalc opened 2 months ago

sleepymalc commented 2 months ago

This is my current UI:

image

On the top-left, the activity-bar and the traffic-light are overlapping with each other. I would like to left-pad the activity-bar to avoid this.

A side note: somehow the activity-bar already gets some left-padding, and I don't know why. I would love to understand this as well.

In addition, when I tried to remove the title-action, I'll get the following:

image

Which is expected. To remove the empty space that the title-action originally occupied, I change the height in the setting to a smaller number, say 1:

    "apc.sidebar.titlebar": {
        "height": 35, // -> 1
    },

Which shifts the whole side-panel upwards, resulting in an additional empty space at the bottom (the red-rectangle):

image

Any idea how to fix the issues? My APC setting is quite minimalistic:

    "apc.electron": {
        "titleBarStyle": "hidden",
    },
    "apc.header": {
        "height": 38
    },
    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
        "hideSettings": true
    },
    "apc.statusBar": {
        "position": "bottom",
        "height": 20,
        "fontSize": 13
    },
    "apc.sidebar.titlebar": {
        "height": 1,
    },
    "apc.stylesheet": {
        ".title-label": "display: none !important",
        ".title-actions": "display: none !important",
        ".quick-input-widget": {
            "position": "absolute !important",
            "top": "30% !important",
            "left": "50%",
            "border-radius": "10px",
            "border": "1px solid var(--vscode-textSeparator-foreground) !important",
            "box-shadow": "0 0 60px 0 rgba(0,0,0,0.2) !important"
        },
        ".split-view-view + .split-view-view.visible .tabs-container": "padding-left: 100px",
        ".split-view-view.visible + .split-view-view.visible .tabs-container": "padding-left: 0px",
    },
rez1coder commented 2 months ago

This should solve traffic light problem https://github.com/drcika/apc-extension?tab=readme-ov-file#inline-title-bar-with-traffic-light-position

I don't know about title. This may work. https://github.com/drcika/apc-extension?tab=readme-ov-file#frameless-title-bar

sleepymalc commented 2 months ago

@rez1coder I don't want to adjust the traffic light position; instead, I would like only to adjust the activity bar's position.

As for the title-action, I think you misunderstood the issue here. I'm referring to removing the following component (the top-left red rectangle):

image

By doing that (uncommenting the code in the red rectangle), it creates an empty spacing. To remove that empty spacing, I tried

    "apc.sidebar.titlebar": {
        "height": 1
    },

and unfortunately, this shifts the whole side-panel component upwards, resulting in an empty spacing at the bottom (see the third figure of the original post). I believe that frameless-title-bar is something different.

rez1coder commented 2 months ago

I see but there's no easy solution. You have to edit the css in apc.stylesheet heavily.

And you are using the apc.activityBar wrong.

"hideSettings": true is removed. See here

Changed code

    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
    },

You set it to bottom but the activityBar is on top.

Maybe you are using vscode default setting "workbench.activityBar.location": "top",

sleepymalc commented 2 months ago

For the apc.activityBar, indeed I am using "workbench.activityBar.location": "top". This is not well-documented as in the README it says only bottom will take effect, but I want to place it on the top and also adjust the size and the margin so I just leave it there.

image

Indeed I didn't see visual difference when changing size, but when changing itemMargin there's some slight difference. So I guess it just doesn't work well when activity bar is on top.

rez1coder commented 2 months ago

This is not well-documented as in the README it says only bottom will take effect

For bottom or default position left, the settings will work. Top position removed means, it doesn't/won't work. You can remove the position setting.

sleepymalc commented 2 months ago

Okay. But after removing it I still can't figure out why it causes the shift of the activity bar to the right.

image

This is a bigger issue I would like to address first compared to removing the title-action. Any idea why this happens?

rez1coder commented 2 months ago

IMO, what you are requesting was tried before https://github.com/drcika/apc-extension/issues/5#issuecomment-1794828754, but no fix at this moment. Typically I would go for activityBar to bottom of sidebar, not top. That would solve everything.

sleepymalc commented 2 months ago

Sorry but not really. When I change to "workbench.activityBar.location": "bottom" and also

    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
    },

I get the following shifted effect again:

image

I should point out that when I change to bottom, "window.customTitleBarVisibility": "never" disappears, and I'll need to manually add back to get rid of the title again.

I think this is the intended way to achieve this as documented here

image
rez1coder commented 2 months ago

IMO, what you are requesting was tried before #5 (comment), but no fix at this moment. Typically I would go for activityBar to bottom of sidebar, not top. That would solve everything.

Assuming you didn't hide the sidebar title and actions. Lol

You are going vim mode there. Just the explorer title won't hurt ;)

sleepymalc commented 2 months ago

Sorry I hardly understand what you're suggesting. Not hiding the sidebar title and actions doesn't really help with the shifted issue. Please see the following:

image

Here I commented out both ".title-label": "display: none !important" and ".title-actions": "display: none !important", and as the screenshot shows, the title (top left, Explorer...) and the sidebar icon (bottom left) are shifted to the right.

rez1coder commented 2 months ago

That's weird.

Comment out everything except this section and apc.activityBar. See if it works. You can move the sidebar to the right, too.

image

PS: Windows version is working as expected.

sleepymalc commented 2 months ago

The result after commenting out everything related to APC except apc.activityBar:

image
sleepymalc commented 2 months ago

I think such a problem happens in multiple places:

https://github.com/user-attachments/assets/55c1c2b2-44a9-4af8-b65c-909dbc3087b5

Basically, for the base panel, it gets some non-zero left-padding; as for the tabs, even if I set the left-padding to 0, it still gets some non-zero padding when I hide the side-panel.

rez1coder commented 2 months ago

@drcika Please, take a look at this.

sleepymalc commented 2 months ago

The issue seems to be the title. Please see the following:

https://github.com/user-attachments/assets/13050c7c-bf32-4345-a8aa-40810b19b353