openkylin
/
kylin-code
9
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

feat:工具栏中新增一个创建工程的按钮,依赖于KylinIDETeam.project-manager插件是否安装,重新加载才生效.

This commit is contained in:
chriswang521 2024-06-21 13:51:21 +08:00 committed by wangpenglong
parent 7f138be7d8
commit caca853aaa
4 changed files with 110 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/vs/workbench/browser/parts/toolbar/media/createProject-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg class="icon" width="16px" height="16px" viewBox="0 -40 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#C5C5C5" d="M943.5 629.1V345c0-42.4-34.5-76.9-76.9-76.9h-330l-37.3-139.3c-8.3-31.1-36.7-52.9-68.9-52.9H142.1c-40.7 0-73.9 33.1-73.9 73.9V844c0 42.4 34.5 76.9 76.9 76.9h397.2c41.3 24.6 88.6 37.8 137.9 37.8 72.1 0 139.9-28.1 190.8-79 51-51 79-118.7 79-190.8 0.1-20.4-2.2-40.4-6.5-59.8zM138.2 149.8c0-2.1 1.7-3.9 3.9-3.9h288.2c0.6 0 1.1 0.4 1.3 1L464 268.1H138.2V149.8z m0 694.2V338.1h728.3c3.8 0 6.9 3.1 6.9 6.9v155.5c-0.8-0.8-1.6-1.7-2.4-2.5-51-51-118.7-79-190.8-79s-139.9 28.1-190.8 79c-51 51-79 118.7-79 190.8 0 59.3 19 115.6 54.1 162.1H145.1c-3.8 0.1-6.9-3-6.9-6.9z m542 44.8c-110.2 0-199.9-89.7-199.9-199.9S570 489 680.2 489s199.9 89.7 199.9 199.9-89.7 199.9-199.9 199.9zM771 653.9h-55.8v-55.8c0-19.3-15.7-35-35-35s-35 15.7-35 35v55.8h-55.8c-19.3 0-35 15.7-35 35s15.7 35 35 35h55.8v55.8c0 19.3 15.7 35 35 35s35-15.7 35-35v-55.8H771c19.3 0 35-15.7 35-35s-15.6-35-35-35z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1014 B

1
src/vs/workbench/browser/parts/toolbar/media/createProject-light.svg Normal file
View File

@ -0,0 +1 @@
<svg class="icon" width="16px" height="16px" viewBox="0 -40 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#3B3B3B" d="M943.5 629.1V345c0-42.4-34.5-76.9-76.9-76.9h-330l-37.3-139.3c-8.3-31.1-36.7-52.9-68.9-52.9H142.1c-40.7 0-73.9 33.1-73.9 73.9V844c0 42.4 34.5 76.9 76.9 76.9h397.2c41.3 24.6 88.6 37.8 137.9 37.8 72.1 0 139.9-28.1 190.8-79 51-51 79-118.7 79-190.8 0.1-20.4-2.2-40.4-6.5-59.8zM138.2 149.8c0-2.1 1.7-3.9 3.9-3.9h288.2c0.6 0 1.1 0.4 1.3 1L464 268.1H138.2V149.8z m0 694.2V338.1h728.3c3.8 0 6.9 3.1 6.9 6.9v155.5c-0.8-0.8-1.6-1.7-2.4-2.5-51-51-118.7-79-190.8-79s-139.9 28.1-190.8 79c-51 51-79 118.7-79 190.8 0 59.3 19 115.6 54.1 162.1H145.1c-3.8 0.1-6.9-3-6.9-6.9z m542 44.8c-110.2 0-199.9-89.7-199.9-199.9S570 489 680.2 489s199.9 89.7 199.9 199.9-89.7 199.9-199.9 199.9zM771 653.9h-55.8v-55.8c0-19.3-15.7-35-35-35s-35 15.7-35 35v55.8h-55.8c-19.3 0-35 15.7-35 35s15.7 35 35 35h55.8v55.8c0 19.3 15.7 35 35 35s35-15.7 35-35v-55.8H771c19.3 0 35-15.7 35-35s-15.6-35-35-35z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1014 B

18
src/vs/workbench/browser/parts/toolbar/media/toolbarpart.css
View File

@ -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;

103
src/vs/workbench/browser/parts/toolbar/toolbarPart.ts
View File

@ -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<string>();
// 添加监听创建工程插件的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) {
if (item.icon === undefined) {
if (item.className) {
const img = document.createElement('img');
img.title = title;
img.classList.add('tool-item-icon');
img.src = url.toString(true);
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);