drcika / apc-extension Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
License: MIT License
Home Page: https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
License: MIT License
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?
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
No style changes, until user explicitly enable options / set styles in settings.
Font size and some icons became smaller in the next areas:
I am quite confused on how to install and use this extension. Does it require monkeypatch to be installed? Can it be installed like a normal extension?
"apc.activityBar": {
"position": "bottom" | undefined
}
Now apc.activityBar.position
value only support "bottom" | undefined
Currently the smallest setting is 1.
Being able to completely hide the tab and breadcrumbs bar would be nice. There already is an issue about this in the vscode repo but the devs there don't seem to want to implement it as stated in this pull request.
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.
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.
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.
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"
}
},
In vanilla VSCode, clicking the active tab icon only causes the activity bar tab to collapse, but the bar with the icons stay visible. So when it's integrated into the tab, the whole tab disappears.
I guess a solution would be to block the collapse action entirely when in "top" or "bottom" positions.
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!
vscode stopped properly resize after update addon to 0.0.6
vscode version: 1.79.0-insider
Possibly related issues:
"Disable Apc extension" fixes everything.
next resize also broke vscode
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.
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!
Every time I reopen a VS Code window, primary sidebar shrinks in width:
Before closing VS Code/its window:
After closing VS Code/its window:
It's quite annoying since, after a couple of iterations, it makes the file explorer tiny.
"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).
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.
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.
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
}
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.
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)
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
}
}
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
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)
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 :)
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.
Thank you for amazing work. Is it possible to install https://github.com/EYHN/vscode-vibrancy along with apc-ecxtension. I would be really cool. Thank you.
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:
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.
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?
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 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)
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!
"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?
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
Thank you for amazing work, it looks great. but it stopped working after the update at 1.80.0.
This might not be apc-extension issue, but I would love to hear your input on how to solve it, if possible.
links:
https://marketplace.visualstudio.com/items?itemName=sirmspencer.vscode-autohide
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'
See the reproduction below:
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
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 :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.