From caca853aaa09a4c24f819eed87d2a4d438be54c6 Mon Sep 17 00:00:00 2001 From: chriswang521 Date: Fri, 21 Jun 2024 13:51:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=B7=A5=E5=85=B7=E6=A0=8F=E4=B8=AD?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=80=E4=B8=AA=E5=88=9B=E5=BB=BA=E5=B7=A5?= =?UTF-8?q?=E7=A8=8B=E7=9A=84=E6=8C=89=E9=92=AE,=E4=BE=9D=E8=B5=96?= =?UTF-8?q?=E4=BA=8EKylinIDETeam.project-manager=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=AE=89=E8=A3=85,=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=89=8D=E7=94=9F=E6=95=88.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../toolbar/media/createProject-dark.svg | 1 + .../toolbar/media/createProject-light.svg | 1 + .../parts/toolbar/media/toolbarpart.css | 18 +++ .../browser/parts/toolbar/toolbarPart.ts | 107 +++++++++++++++--- 4 files changed, 110 insertions(+), 17 deletions(-) create mode 100644 src/vs/workbench/browser/parts/toolbar/media/createProject-dark.svg create mode 100644 src/vs/workbench/browser/parts/toolbar/media/createProject-light.svg diff --git a/src/vs/workbench/browser/parts/toolbar/media/createProject-dark.svg b/src/vs/workbench/browser/parts/toolbar/media/createProject-dark.svg new file mode 100644 index 00000000..3d27abe8 --- /dev/null +++ b/src/vs/workbench/browser/parts/toolbar/media/createProject-dark.svg @@ -0,0 +1 @@ + diff --git a/src/vs/workbench/browser/parts/toolbar/media/createProject-light.svg b/src/vs/workbench/browser/parts/toolbar/media/createProject-light.svg new file mode 100644 index 00000000..bd3fa9bc --- /dev/null +++ b/src/vs/workbench/browser/parts/toolbar/media/createProject-light.svg @@ -0,0 +1 @@ + diff --git a/src/vs/workbench/browser/parts/toolbar/media/toolbarpart.css b/src/vs/workbench/browser/parts/toolbar/media/toolbarpart.css index 3096dd2c..199b8d31 100644 --- a/src/vs/workbench/browser/parts/toolbar/media/toolbarpart.css +++ b/src/vs/workbench/browser/parts/toolbar/media/toolbarpart.css @@ -63,6 +63,24 @@ /* border:1px solid transparent; */ } +.tool-item>.tool-item-icon>.create-project { + width: 24px; + height: 24px; + background-image: url('./createProject-light.svg'); + background-repeat: no-repeat; + background-position: center; +} + +.monaco-workbench.vs-dark .part.toolbar>.toolbar-title>.tool-item>.tool-item-icon>.create-project { + background-image: url('./createProject-dark.svg'); +} +.monaco-workbench.hc-light .part.toolbar>.toolbar-title>.tool-item>.tool-item-icon>.create-project { + background-image: url('./createProject-light.svg'); +} +.monaco-workbench.hc-black .part.toolbar>.toolbar-title>.tool-item>.tool-item-icon>.create-project { + background-image: url('./createProject-dark.svg'); +} + .tool-item-icon:hover { /* background: #4d4d4d; */ border: 1px solid; diff --git a/src/vs/workbench/browser/parts/toolbar/toolbarPart.ts b/src/vs/workbench/browser/parts/toolbar/toolbarPart.ts index 71d59080..17a6f778 100644 --- a/src/vs/workbench/browser/parts/toolbar/toolbarPart.ts +++ b/src/vs/workbench/browser/parts/toolbar/toolbarPart.ts @@ -28,8 +28,17 @@ import { ThemeIcon } from 'vs/base/common/themables'; import { isWeb } from 'vs/base/common/platform'; import { disposeIfDisposable } from 'vs/base/common/lifecycle'; import { GestureEvent } from 'vs/base/browser/touch'; +import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; // import { isMacintosh } from 'vs/base/common/platform'; // import { OpenFileFolderAction, OpenFolderAction } from 'vs/workbench/browser/actions/workspaceActions'; +interface ToolItem { + url: URI; + command: string; + arg: string; + title: string; + icon?: ThemeIcon; + className?: string; +} export class ToolbarPart extends Part implements IToolBarService { declare readonly _serviceBrand: undefined; @@ -39,6 +48,15 @@ export class ToolbarPart extends Part implements IToolBarService { readonly minimumHeight: number = 34; readonly maximumHeight: number = 34; + //要插入的 创建工程 的配置 + private createProjectItem: ToolItem = { + url: FileAccess.asFileUri('vs/workbench/browser/parts/toolbar/media/createProject.svg'), + command: 'project.createProject', + arg: '', + title: localize('newProject', 'New Project'), + className: 'create-project' + }; + constructor( @IStorageService storageService: IStorageService, @IThemeService themeService: IThemeService, @@ -46,8 +64,36 @@ export class ToolbarPart extends Part implements IToolBarService { @IInstantiationService protected readonly instantiationService: IInstantiationService, @ICommandService private readonly commandService: ICommandService, @IContextMenuService private contextMenuService: IContextMenuService, + @IContextKeyService private contextKeyService: IContextKeyService, ) { super(Parts.TOOLBAR_PART, { hasTitle: false }, themeService, storageService, layoutService); + + const allKeys = new Set(); + // 添加监听创建工程插件的key值，是否设置 + allKeys.add('hasProjectManager'); + // 注册contextKeyService服务的监听事件，监听设置的key是否改变 + this._register(this.contextKeyService.onDidChangeContext(e => { + if (e.affectsSome(allKeys)) { + //创建工程的按钮 + if (this.contextKeyService.getContextKeyValue('hasProjectManager')) { + var container = this.element.getElementsByClassName('toolbar-title')[0] as HTMLElement; + // 创建新的div元素 + var newDiv = this.createCreateProjectHtmlElement(this.createProjectItem); + + // 插入到第n个位置，假设n是索引（从0开始） + var n = 1; // 例如，在第2个div后面插入（索引为1） + var refDiv = container.children[n]; + container.insertBefore(newDiv, refDiv.nextElementSibling); + } else { + var container = this.element.getElementsByClassName('toolbar-title')[0] as HTMLElement; + // 插入到第n个位置，假设n是索引（从0开始） + var n = 2; // 例如，在第3个div（索引为2） + var refDiv = container.children[n]; + container.removeChild(refDiv); + } + + } + })); } override createContentArea(parent: HTMLElement): HTMLElement { @@ -56,7 +102,7 @@ export class ToolbarPart extends Part implements IToolBarService { content.classList.add('toolbar-title'); this.element.appendChild(content); - const toolitem = [ + const toolItems: ToolItem[] = [ // 新建文本文件 { url: FileAccess.asFileUri('vs/workbench/browser/parts/toolbar/media/newfile.svg'), @@ -243,7 +289,7 @@ export class ToolbarPart extends Part implements IToolBarService { ]; //添加分隔竖线 - toolitem.forEach(item => { + toolItems.forEach(item => { if (item.command === 'undo' || item.command === 'workbench.view.explorer' || item.command === 'workbench.action.zoomIn') { const toolitem = document.createElement('div'); toolitem.style.margin = '0 5px 0 5px'; @@ -255,7 +301,7 @@ export class ToolbarPart extends Part implements IToolBarService { if (isWeb && (item.command === 'workbench.action.zoomIn' || item.command === 'workbench.action.zoomOut')) { return; } - this.createToolitem(content, item.url, item.command, item.arg, item.title, item.icon); + this.createToolitem(content, item); }); this.updateStyles(); @@ -264,7 +310,7 @@ export class ToolbarPart extends Part implements IToolBarService { return this.element; } - private createToolitem(parent: HTMLElement, url: URI, cmd: string, arg: string, title: string, icon?: ThemeIcon | undefined): void { + private createToolitem(parent: HTMLElement, item: ToolItem): void { const toolitem = document.createElement('div'); toolitem.classList.add('tool-item'); @@ -272,34 +318,61 @@ export class ToolbarPart extends Part implements IToolBarService { toolitemicon.classList.add('tool-item-icon'); //没有使用url的图片地址，使用IDE中的默认icon - if (icon === undefined) { - const img = document.createElement('img'); - img.title = title; - img.classList.add('tool-item-icon'); - img.src = url.toString(true); - toolitemicon.appendChild(img); + if (item.icon === undefined) { + if (item.className) { + const img = document.createElement('img'); + img.title = item.title; + img.classList.add(item.className); + img.src = item.url.fsPath; + toolitemicon.appendChild(img); + } } else { const node = $(`span`); - node.title = title; - node.classList.add(...ThemeIcon.asClassNameArray(icon)); + node.title = item.title; + node.classList.add(...ThemeIcon.asClassNameArray(item.icon)); toolitemicon.appendChild(node); } - toolitem.appendChild(toolitemicon); parent.appendChild(toolitem); - if (cmd.length > 0) { + if (item.command.length > 0) { this._register(addDisposableListener(toolitem, EventType.MOUSE_DOWN, _e => { - if (arg.length > 0) { - this.commandService.executeCommand(cmd, arg); + if (item.arg.length > 0) { + this.commandService.executeCommand(item.command, item.arg); } else { - this.commandService.executeCommand(cmd); + this.commandService.executeCommand(item.command); } })); } } + //创建要插入的'创建工程'html元素 + private createCreateProjectHtmlElement(item: ToolItem): HTMLElement { + const toolitem = document.createElement('div'); + toolitem.classList.add('tool-item'); + + const toolitemicon = document.createElement('div'); + toolitemicon.classList.add('tool-item-icon'); + + const iconDiv = document.createElement('div'); + iconDiv.title = item.title; + iconDiv.classList.add(item.className!);//这里对应css中的class + toolitemicon.appendChild(iconDiv); + + toolitem.appendChild(toolitemicon); + if (item.command.length > 0) { + this._register(addDisposableListener(toolitem, EventType.MOUSE_DOWN, _e => { + if (item.arg.length > 0) { + this.commandService.executeCommand(item.command, item.arg); + } else { + this.commandService.executeCommand(item.command); + } + })); + } + return toolitem; + } + //显示右键菜单内容 private showContextMenu(e: MouseEvent | GestureEvent): void { EventHelper.stop(e, true);