This commit is contained in:
Joao Moreno
2021-03-24 16:01:37 +01:00
parent da1ed96b6a
commit 6aa6260a84
3 changed files with 29 additions and 10 deletions
+16 -1
View File
@@ -101,11 +101,26 @@
right: calc(var(--sash-size) * -1);
}
.monaco-sash {
.monaco-sash:before {
content: '';
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
transition: background-color 0.1s ease-out;
background: transparent;
}
.monaco-sash.vertical:before {
width: var(--sash-hover-size);
left: calc(50% - (var(--sash-hover-size) / 2));
}
.monaco-sash.horizontal:before {
height: var(--sash-hover-size);
top: calc(50% - (var(--sash-hover-size) / 2));
}
/** Debug **/
.monaco-sash.debug {
@@ -9,7 +9,7 @@ import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle
import { Registry } from 'vs/platform/registry/common/platform';
import { workbenchConfigurationNodeBase } from 'vs/workbench/common/configuration';
import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions';
import { SashSettingsController, minSize, maxSize } from 'vs/workbench/contrib/sash/browser/sash';
import { SashSettingsController } from 'vs/workbench/contrib/sash/browser/sash';
import { isIPad } from 'vs/base/browser/browser';
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { sashHoverBorder } from 'vs/platform/theme/common/colorRegistry';
@@ -25,9 +25,9 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
properties: {
'workbench.sash.size': {
type: 'number',
default: isIPad ? maxSize : minSize,
minimum: minSize,
maximum: maxSize,
default: isIPad ? 20 : 4,
minimum: 1,
maximum: 20,
description: localize('sashSize', "Controls the feedback area size in pixels of the dragging area in between views/editors. Set it to a larger value if you feel it's hard to resize views using the mouse.")
},
'workbench.sash.hoverDelay': {
@@ -43,9 +43,9 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration)
registerThemingParticipant((theme, collector) => {
const sashHoverBorderColor = theme.getColor(sashHoverBorder);
collector.addRule(`
.monaco-sash.hover,
.monaco-sash.active {
background: ${sashHoverBorderColor}
.monaco-sash.hover:before,
.monaco-sash.active:before {
background: ${sashHoverBorderColor};
}
`);
});
@@ -10,7 +10,7 @@ import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
export const minSize = 4;
export const minSize = 1;
export const maxSize = 20; // see also https://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications
export class SashSettingsController implements IWorkbenchContribution, IDisposable {
@@ -30,8 +30,12 @@ export class SashSettingsController implements IWorkbenchContribution, IDisposab
}
private onDidChangeSize(): void {
const size = clamp(this.configurationService.getValue<number>('workbench.sash.size') ?? minSize, minSize, maxSize);
const configuredSize = this.configurationService.getValue<number>('workbench.sash.size');
const size = clamp(configuredSize, 4, 20);
const hoverSize = clamp(configuredSize, 1, 8);
document.documentElement.style.setProperty('--sash-size', size + 'px');
document.documentElement.style.setProperty('--sash-hover-size', hoverSize + 'px');
setGlobalSashSize(size);
}