Giter VIP home page Giter VIP logo

apc-extension's Issues

Addon by default changes UI scaling

Just enabling addon changes scaling of file tree, activity bar, status bar, tab bar.

No addon settings specified.

Is there any option to disable UI changes until it explicitly turned on by user?

vscode version
Version: 1.79.0-insider (Universal)
Commit: 2dfb838f494f035099e999f0cd0eff5f1f488a30
Date: 2023-05-26T05:24:15.292Z
Electron: 22.5.3
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin x64 21.6.0

Expected behaviour

No style changes, until user explicitly enable options / set styles in settings.

Actual behaviour

Font size and some icons became smaller in the next areas:

  • file tree
  • activity bar
  • status bar
  • tab bar

Visual diff

After "Disable Apc extension" command

image

After "Enable Apc extension" command

image

Steps to reproduce

  1. Install addon
  2. Run "Enable Apc extension" command
  3. Restart vscode

Bottom ActivityBar overlapping with sidebar border

image

When sideBar.border has a color, bottom activity bar seems to overlap with it. resulting in the situation in the image. Toggling activity bar to be invisible restores the border area there. This overlap scales with the size/height of activity bar

Request for Logo Addition and Logo Design Suggestions

It would greatly enhance the overall appearance and branding of this extension to have a distinctive logo.

I have some logo design suggestions that I would like to propose. You can choose any of them.

1 2 3 4 5 6 7 8 9

If you're not satisfied with any of the options, let me know which one(s) you would like me to edit or modify.
And I'll be happy to make the necessary changes.

Extension Disabled on Update

When VSCodium automatically updated itself this morning, this extension was disabled for some reason. In my utter despair I thought VSCode broke something again, but luckily I was wrong.

I have absolutely no idea why this happens, but it would probably be better to notify the user when it is disabled or automatically enable it again.

#45

Can I change the font family of the UI?

this extension is awesome.

Is that possible to manipulate the css of the body using it? I tried this with the first apc.stylesheet option but its not working.

"apc.stylesheet": {
    "body": {
      // other panels should be transparent see "workbench.colorCustomizations"
      "background-image": "url(/Users/aleksandarpopovic/imgs/19.png), linear-gradient(to top,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2))",
      "background-size": "cover",
      "background-blend-mode": "multiply",
      "background-repeat": "no-repeat"
    }

  },

List Row setting breaks some dropdowns

Steps to reproduce:

Enable "apc.listRow" with height and fontSize

Open a dropdown for icons in the settings editor - I search for "terminal default icon":
Screenshot 2023-08-11 at 11 56 47 AM
Kapture 2023-08-11 at 11 54 33 resized

This is what the dropdown is supposed to look like, with apc.listRow off:

Screenshot 2023-08-11 at 11 57 46 AM

Feature Request: Custom Style for Notebooks

I use jupyter notebook in vscode, and seeing the font setting also applies to font for notebooks is awesome (I didn't find a way to do that)!

(I'm not sure if it's already possible, but) It would be good to provide some setting options or guides to further customize the look of notebooks. E.g., what I want to change most is to make the markdown headers bold and numbered.

Thanks for the great work!

Window resize not works with addon

vscode stopped properly resize after update addon to 0.0.6

vscode version: 1.79.0-insider

Possibly related issues:

  • vscode about window not showing
  • "toggle developer tools" also do nothing

"Disable Apc extension" fixes everything.

Initial state after load

image

Resize vscode window

image

Change apc settings and save them to fix

next resize also broke vscode

image

The listRow.height config makes some lists the same size that shouldn't be

First of all thanks for maintaining this extension! It's desperately needed now that CustomizeUI no longer works, and I appreciate the effort.

With the previous extension, I liked setting the listRow height to around 24px to make the files in the explorer in the sidebar taller. However when I tried it with APC, it also seemed to affect the list in the command palette and, unfortunately, any list of in-editor suggestions I've found. These are typically rendered with a significantly larger height than the other two types of lists, and so they end up looking broken at just 24px.

CleanShot 2023-07-16 at 16 14 37@2x

I've been digging around the styles in the extension a bit and tried using the extension itself and some custom styles to fix this but haven't succeeded yet. Could you consider adding a separate config option for the different types of lists, or if not, could you point me in the right direction so that I could fix it for myself?

Much obliged!

[Bug] An "undefined" tab

bu1

Here is my configuration:

"apc.header": {
    "height": 28,
},
"apc.activityBar": {
    "position": "top",
    "size": 34,
},

How to reproduce

Step1: Close all the open files.
bug3

Step2: Then, just open any file or create a new file.
You will get:
bug4

Repeating the above steps, will get more "undefinde".

Primary sidebar shrinks when a new window opened

Every time I reopen a VS Code window, primary sidebar shrinks in width:

Before closing VS Code/its window:
CleanShot 2023-07-31 at 14 04 35@2x

After closing VS Code/its window:
CleanShot 2023-07-31 at 14 05 04@2x

It's quite annoying since, after a couple of iterations, it makes the file explorer tiny.

Settings
"apc.activityBar": {
  "size": 77,
  "itemSize": 48,
  "itemMargin": 0
},
"apc.header": {
  "height": 37
},
"apc.electron": {
  "titleBarStyle": "hiddenInset"
},
"apc.sidebar.titlebar": {
  "height": 37
},
"apc.stylesheet": {
  // Make the host button as wide as the .activitybar
  ".statusbar #status\\.host": "width: calc(var(--activity-bar-action-size) - 1px);",
  ".statusbar #status\\.host .codicon": "margin: 0 auto;",
  // Enforce the same color for tabs background
  ".editor-group-container .inline-no-tabs-placeholder": "background-color: rgba(0,0,0,0) !important;",
}

Original discussion: #52 (comment).

Activitybar icons become unresponsive when titleBarStyle is set to hidden

OS: Windows
Setting,

"apc.activityBar": 
{
  "position": "top",
   "size": 40
 },

"apc.electron": {
  "titleBarStyle": "hidden",
  "titleBarOverlay": {
    "color": "#212121",
    "symbolColor": "#FFFFFF",
  }
},

"window.titleBarStyle": "native"

These cause the activity bar icons to become unclickable though other buttons in their position remain fully functional.

activityBar incomplete when position is top

First of all, Thank you for your work.

When the activityBar is set to top, it does not display all the icons that fit in that space. Setting the position to bottom shows 2 more icons that when set to top.

Top
CleanShot 2023-06-23 at 18 49 14

Bottom
CleanShot 2023-06-23 at 18 49 47

Also the setting trafficLightPosition does not work.

"apc.activityBar": {
    "position": "bottom",
    "hideSettings": true,
    "size": 30,
    "fontSize": 11
  }, 
"apc.statusBar": {
    "position": "editor-bottom",
    "fontSize": 11.5
  },
"apc.electron": {
    "opacity": 1,
    "backgroundColor": "rgba(123, 123, 123, 0)",
    "vibrancy": "sidebar",
    "trafficLightPosition": {
      "x": 17,
      "y": 12
    }
  },
 "apc.listRow": {
    "height": 24,
    "fontSize": 14
  },
 "apc.header": {
    "height": 30
  }

Improved documentation & Recommended settings order for first-time users

The documentation needs improvement for better user-friendliness, especially for first-time users.
Additionally, recommended settings should be reorganized to enhance the overall user experience.

Proposed Changes

  • Enhance documentation for easier understanding by beginners. Example: Inline titlebar setup.
  • Rearrange recommended settings for smoother customization.

Suggested Order

From my perspective, it seems that most users prefer using this extension for the task in this sequential order.

`apc.electron`: Configure the Electron window (title bar style, traffic light position, background color, etc)
`font.family`: Change the Default Font Family for (Any Part of) VS Code
`apc.imports`: Import CSS and JavaScript files to customize the look and feel of VS Code
`apc.stylesheet`: Override the default CSS of VS Code
`apc.header`: Adjust the height and font size of the header bar
`apc.activityBar`: Set the position and size of the activity bar
`apc.sidebar.titlebar`: Define the height and font size of the sidebar title bar
`apc.listRow`: Specify the height and font size of list rows
`apc.menubar.compact`: Enable a compact menu bar
`apc.statusBar`: Set the position and height of the status bar
`apc.iframe.style`: Inject custom CSS into iframes (Notebook, Extension view, etc)

Add One-liner information

You need not follow this style I have mentioned above. One-liner information above the code chunk would be great too.

Example: instead of multiple // or we can implement this way.

Feel free to pick a style you like or come up with your own!

    // requires other panels to be transparent for ultra-dark vibrancy
    // see demo https://github.com/drcika/apc-extension/blob/production/demo/vibrancy.settings.json
    "apc.electron": {
      "vibrancy": "ultra-dark"
    }
    
    // customize visuals including background color, transparency, and title bar style
    "apc.electron": {
      "backgroundColor": "rgba(123, 123, 123, 0.5)",
      "frame": false,
      "transparent": true,
      "titleBarStyle": "hiddenInset",
      "vibrancy": "ultra-dark",
      "opacity": 0.98,  // Opacity range is 0-1 where 0 means full transparency. If set, you won't see the element.
      "visualEffectState": "active"
    }

    // disables the frame
    "apc.electron": {
      "frame": false,
    }

    // sets the title bar style to hidden (inline title bar)
    "apc.electron": {
      "titleBarStyle": "hidden",
    }

    // sets the title bar style to hiddenInset (inline title bar) and defines a custom traffic light position
    "apc.electron": {
      "titleBarStyle": "hiddenInset",
      "trafficLightPosition": {
        "x": 7,
        "y": 5
      }
    }

    // sets the title bar style to hidden and adds a title bar overlay with custom color, symbol color, and height
    "apc.electron": {
      "titleBarStyle": "hidden",
      "titleBarOverlay": {
        "color": "#2f3241",
        "symbolColor": "#74b1be",
        "height": 60
      }
    }

apc.imports doesnt work on mac

i tried both

"apc.imports": [
        "/Users/path/styles.css",
        // ...
    ],

and

"apc.imports": [
        "file:///Users/path/styles.css",
        // ...
    ],

and non of the styles is applied to the editor.

Version: 1.82.0-insider
Commit: bf9c8105647b1e9d244f0f00155c21298e7554cf
Date: 2023-08-09T05:48:26.386Z
Electron: 25.4.0
ElectronBuildId: 22901934
Chromium: 114.0.5735.248
Node.js: 18.15.0
V8: 11.4.183.27-electron.0
OS: Darwin arm64 21.6.0

Support equivalent of "customizeUI.activityBar": "wide"

First of all, thank you for making this great extension! I'm the author of the original vscode-titlebar-less-macos, which I discontinued when the great Customize UI by @iocave came long, and in the past months I have been maintaining a custom version of it that would keep working on VSCodium, as the only viable solution to still get my desired UX layout:

iocave/customize-ui#156 (comment)
iocave/customize-ui#170 (comment)

Screenshot 2023-07-16 at 12 21 29

But your APC extension has come to rescue and really looks like a solid path forward!

The only bit missing for me right now is the style where the activity bar will match the width of the traffic lights for macOS inline menu bar, and align the activity bar items underneath, as shown in the screenshot above.

After a lot of fiddling around with the settings, I have managed to achieve this look with APC using some custom CSS, but I need to undo a lot of APC's .activitybar styling that affects position and sizing of the action items, and I'm hoping there will be a better way to achieve this more easily.

Also, I don't think APC should hide the host button in the bottom left corner by default. It could expose this through an option? I can create a second issue for that.

My current settings are:

{
    "window.titleBarStyle": "native",
    "apc.electron": {
        "titleBarStyle": "hiddenInset",
    },
    "apc.header": {
      "height": 37
    },
    "apc.sidebar.titlebar": {
      "height": 37
    },
    "apc.activityBar": {
        "size": 77
    },
    "apc.stylesheet": {
        ".custom-sidebar-titlebar .sidebar .composite.title": "padding-left: 0;",
        // Make room for the traffic lights.
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content": "margin-top: var(--titlebar-height);",
        // Reset strange APC .activitybar styling back to VSCode defaults.
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item": "margin-top: 0 !important;",
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item a.action-label": "width: 48px; height: 48px; font-size: 24px; margin: 0 auto; -webkit-mask-size: 1em;",
        ".custom-activitybar div.monaco-workbench div.activitybar > div.content div.monaco-action-bar ul.actions-container li.action-item .badge div.badge-content": "top: 24px; right: 8px;",
        // Don't indent the statusbar items.
        ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",
        // Show the host button again, and make it as wide as the .activitybar.
        ".statusbar #status\\.host": "display: block !important; width: calc(var(--activity-bar-action-size) - 1px); background: #555 !important;",
        ".statusbar #status\\.host .codicon": "margin: 0 auto;",
    }
}

Without the custom CSS settings, the activity bar looks as follows, which I am sure you'll agree, is far from ideal :)

image

Support different listRow settings for different contexts

Thanks for this extension, it is awesome!

I was trying to use listRow settings to reduce the vertical spacing on the file explorer panel, but it also affects other lists like for autocomplete, causing text to be cut, etc. It would be great to be able to use different settings for the sidebar and for context menus.

Breadcrumbs are disabled, when tab view is toggled off.

When enabling extension, breadcrumbs are gone, even if enabled in user settings. After disabling extension, breadcrumbs are visible again.

Note that this behavior is true only when tab view is off. While on, everything is okay.

Disabled Apc Extension
image

Enabled Apc Extension
image

Inline Titlebar hides titlebar but disables buttons

When the inline titlebar setting is enabled, the title bar gets hidden, and the tab bar becomes draggable.

However, there is a bug related to the functionality of the buttons on the title bar. Only the Close button is functional, while the other three buttons, namely:

  • Open settings (UI)
  • Split editor right
  • More actions

do not respond to clicks.

EDIT
On Windows machine, same thing occurs in EXPLORER panel.

To provide a clear understanding of the problem, I have attached a video demonstrating the bug.

titlebar.bug.mp4

Would it be within the scope of this extension to move the find widget to the bottom?

Sublime and Atom both have a similar find widget, but theirs comes up at the bottom of the editor and is full width. With the old customize UI, I got vscode to do this with css, but it required setting the editor to scroll past the last line, which I'd prefer not to do.

Would it make sense to have this extension optionally relocate the find widget to the bottom of the editor and have it resize the editor so that it doesn't cut off the bottom of the file?

image Screenshot 2023-07-07 at 2 28 53 AM Screenshot 2023-07-07 at 2 29 33 AM

[bug] vscode does not open after installing the extension

After installing the extension, VS Code closes immediately after clicking on the icon.

logs:

2023-06-19 02:14:48.494 [error] TypeError: Cannot read properties of undefined (reading 'backgroundColor')
    at CodeWindow.themeMainService.getBackgroundColor (/Applications/Visual Studio Code.app/Contents/Resources/app/out/modules/patch.main.js:13:60)
    at new bt (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:88:96903)
    at new CodeWindow (/Applications/Visual Studio Code.app/Contents/Resources/app/out/modules/patch.main.js:22:9)
    at v.j (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:38:1296)
    at v.createInstance (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:38:788)
    at at.hb (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:89:44678)
    at at.Q (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:89:33019)
    at at.N (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:89:32045)
    at at.open (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:89:27843)
    at async e.CodeApplication.startup (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:89:55919)
    at async Me.a (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js:91:1258)

os: mac
chip: m2
vscode version: 1.79

Version 0.0.4 and 0.0.5 are not working

Version 0.0.4 and 0.0.5 have errors and have already tried to reinstall. It returned to version 0.03 and is now working normally.
It looks like the new version is still fetching files from the old version (0.0.3).

The error:
workbench.js:947 GET vscode-file://vscode-app/Users/xxxx/.vscode/extensions/drcika.apc-extension-0.0.3/modules/main.js net::ERR_FILE_NOT_FOUND

browser.main.js:13 Error: [object Event]
at Object.g [as ensureError] (workbench.js:524:24)
at p._createLoadError (workbench.js:1748:35)
at p._onLoadError (workbench.js:1759:32)
at a (workbench.js:1902:26)
at Object.errorback (workbench.js:1922:25)
at g.triggerErrorback (workbench.js:891:36)
at workbench.js:878:116
at HTMLScriptElement.o (workbench.js:911:17)

Is it possible to have transparent sidebar only

Hi,

I don't have an issue, but more a question. Is it possible to only make the sidebar have a slight transparency?

MacOs apps like Mail do this, and I would find it pretty neat if I can replicate that effect with vs code.

Nice work on the extension!

How can I achieve the following effect similar to customizeUI?

"customizeUI.stylesheet": {
    // Let the quick pick take the full window height, so that more bindings
    // are visible.
    ".quick-input-widget > .quick-input-list > .monaco-list":
        "max-height: 100vh !important;",
    // Colorize icons uniformly and add some extra padding
    ".quick-input-widget > .quick-input-list .codicon":
        "color: #83a598 !important; padding-right: 5px;",
    // Colorize entries starting with a `+` differently
    ".quick-input-widget > .quick-input-list .monaco-list-row[aria-label*=\" +\"] .label-description":
        "color: #8ec07c;",
}

、、
https:vspacecode.github.io/docs/whichkey/#style-the-menu-with-customize-ui, how can I achieve a similar effect while customizing the font here?
image

Draggable tab area that is empty

It would be nice for "editorGroupHeader.tabsBackground" to be draggable when no tabs are taking up that area. Makes more dragging area available other than just the sidebar top area. I'm aware there is a very thin line at the very top that is draggable but that can often be hard to take cursor to

How to change UI font?

I am inexperienced with CSS and Electron. I would like some hand-holding instructions on how to change the Fonts from the System Font to my own custom Font:
image

Linux Support

Attempting to use this extension running Fedora 38 results in the following error:

Apc Extension failed: Error: EACCES: permission denied, rename '/usr/share/code/resources/app/out/bootstrap-amd.js' -> '/usr/share/code/resources/app/out/bootstrap-amd.js.apc.extension.backup'

Application dropdown menu unintended beheaviour if activity bar in top/bottom mode

  • The dropdown menu blocks the top menubar
  • In bottom mode, the dropdown menu is practically not visible
  • The dropdown menu no longer has a position relative to the menu option, but has a static position

See the reproduction below:

8


Apc Customize UI++ v0.1.4

Windows 11 running a totally fresh VSCode:

Version: 1.79.2
Commit: 695af097c7bd098fbf017ce3ac85e09bbc5dda06
Date: 2023-06-14T08:57:04.379Z
Electron: 22.5.7
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

settings.json visible in reproduction GIF

Theme to be used with vibrancy

Hi, I published VS Code theme specifically for your extension, almost everything made transparent, however all hovering and focusing effects are changed to match

You are free to use it's code to include into your extension one day, or just place a link so other people can find it easily :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.