opensumi
/
core
mirror of https://github.com/opensumi/core
1
0
Fork 3
Code Issues Packages Projects Releases Wiki Activity

style: improve design style (#3466)

This commit is contained in:
John 2024-03-28 21:04:31 +08:00 committed by GitHub
parent d35d3e0829
commit 816da78533
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 105 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ai-native/src/browser/ai-core.contribution.ts
View File

@ -26,13 +26,13 @@ import {
AI_INLINE_COMPLETION_VISIBLE,
} from '@opensumi/ide-core-browser/lib/ai-native/command';
import { InlineChatIsVisible } from '@opensumi/ide-core-browser/lib/contextkey/ai-native';
import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
import {
ChatFeatureRegistryToken,
CommandService,
InlineChatFeatureRegistryToken,
RenameCandidatesProviderRegistryToken,
ResolveConflictRegistryToken,
runWhenIdle,
} from '@opensumi/ide-core-common';
import { IEditor } from '@opensumi/ide-editor';
import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
@ -117,11 +117,11 @@ export class AINativeBrowserContribution
initialize() {
this.aiNativeConfigService.enableCapabilities();
const { supportsChatAssistant } = this.aiNativeConfigService.capabilities;
const { supportsChatAssistant, supportsOpenSumiDesign } = this.aiNativeConfigService.capabilities;
const { useMenubarView } = this.aiNativeConfigService.layout;
let layoutConfig = this.appConfig.layoutConfig;
let layoutViewSize = this.appConfig.layoutViewSize;
let layoutViewSize = this.appConfig.layoutViewSize as LayoutViewSizeConfig;
if (supportsChatAssistant) {
layoutConfig = {
@ -131,17 +131,19 @@ export class AINativeBrowserContribution
}
if (useMenubarView) {
layoutViewSize = {
...layoutViewSize,
menubarHeight: 48,
};
layoutViewSize.setMenubarHeight(48);
layoutConfig = {
...layoutConfig,
...AIMenubarLayoutConfig,
};
}
if (supportsOpenSumiDesign) {
layoutViewSize.setEditorTabsHeight(36);
layoutViewSize.setStatusBarHeight(36);
layoutViewSize.setAccordionHeaderSizeHeight(36);
}
this.appConfig.layoutConfig = layoutConfig;
this.appConfig.layoutViewSize = layoutViewSize;
}

26
packages/ai-native/src/browser/layout/menu-bar/menu-bar.module.less
View File

@ -43,19 +43,23 @@
margin-left: 4px;
}
.extra_top_icon {
width: 16px;
height: 16px;
background-image: url(./logo.svg);
background-repeat: no-repeat;
background-size: 100%;
.logo_container {
display: flex;
align-items: center;
&::before {
content: initial;
}
.extra_top_icon {
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: 100%;
&:hover {
background-color: transparent;
&::before {
content: initial;
}
&:hover {
background-color: transparent;
}
}
}
}

16
packages/ai-native/src/browser/layout/menu-bar/menu-bar.view.tsx
View File

@ -11,11 +11,13 @@ import { IMainLayoutService } from '@opensumi/ide-main-layout';
import { AI_MENU_BAR_LEFT, AI_MENU_BAR_RIGHT } from '../layout-config';
import opensumiLogo from './logo.svg';
import styles from './menu-bar.module.less';
const AIMenuBarRender = () => {
const contextmenuService = useInjectable<AbstractContextMenuService>(AbstractContextMenuService);
const ctxMenuRenderer = useInjectable<ICtxMenuRenderer>(ICtxMenuRenderer);
const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
const iconRef = React.useRef<HTMLDivElement | null>(null);
const [anchor, setAnchor] = React.useState<{ x: number; y: number } | undefined>(undefined);
@ -54,15 +56,15 @@ const AIMenuBarRender = () => {
});
}, [anchor, extraTopMenus]);
const logo = React.useMemo(() => aiNativeConfigService.layout.menubarLogo || opensumiLogo, [aiNativeConfigService.layout.menubarLogo]);
return (
<>
<EnhanceIcon
wrapperClassName={styles.ai_enhance_menu}
className={styles.extra_top_icon}
ref={iconRef}
onClick={handleClick}
>
<Icon className={cls(getIcon('down'), styles.caret_icon)} />
<EnhanceIcon wrapperClassName={styles.ai_enhance_menu} ref={iconRef} onClick={handleClick}>
<div className={styles.logo_container}>
<img className={styles.extra_top_icon} src={logo} alt='' />
<Icon className={cls(getIcon('down'), styles.caret_icon)} />
</div>
</EnhanceIcon>
</>
);

1
packages/core-browser/src/ai-native/ai-config.service.ts
View File

@ -23,6 +23,7 @@ export class AINativeConfigService {
private internalLayout: Required<IAINativeLayout> = {
useMergeRightWithLeftPanel: false,
useMenubarView: false,
menubarLogo: '',
};
private setDefaultCapabilities(value: boolean): void {

65
packages/core-browser/src/layout/constants.ts
View File

@ -5,6 +5,7 @@ export interface ILayoutViewSize {
titleBarHeight: number;
panelTitleBarHeight: number;
statusBarHeight: number;
accordionHeaderSizeHeight: number;
}
export const DEFAULT_LAYOUT_VIEW_SIZE: ILayoutViewSize = {
@ -14,27 +15,77 @@ export const DEFAULT_LAYOUT_VIEW_SIZE: ILayoutViewSize = {
titleBarHeight: 22,
panelTitleBarHeight: 35,
statusBarHeight: 24,
accordionHeaderSizeHeight: 24,
};
export class LayoutViewSizeConfig implements ILayoutViewSize {
constructor(private readonly layoutViewSize?: Partial<ILayoutViewSize>) {}
#menubarHeight: number;
#editorTabsHeight: number;
#bigSurTitleBarHeight: number;
#titleBarHeight: number;
#panelTitleBarHeight: number;
#statusBarHeight: number;
#accordionHeaderSizeHeight: number;
constructor(private readonly layoutViewSize?: Partial<ILayoutViewSize>) {
this.#menubarHeight = this.layoutViewSize?.menubarHeight || DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight;
this.#editorTabsHeight = this.layoutViewSize?.editorTabsHeight || DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight;
this.#bigSurTitleBarHeight =
this.layoutViewSize?.bigSurTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight;
this.#titleBarHeight = this.layoutViewSize?.titleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight;
this.#panelTitleBarHeight =
this.layoutViewSize?.panelTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight;
this.#statusBarHeight = this.layoutViewSize?.statusBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight;
this.#accordionHeaderSizeHeight =
this.layoutViewSize?.accordionHeaderSizeHeight || DEFAULT_LAYOUT_VIEW_SIZE.accordionHeaderSizeHeight;
}
get menubarHeight(): number {
return this.layoutViewSize?.menubarHeight || DEFAULT_LAYOUT_VIEW_SIZE.menubarHeight;
return this.#menubarHeight;
}
setMenubarHeight(value: number) {
this.#menubarHeight = value;
}
get editorTabsHeight(): number {
return this.layoutViewSize?.editorTabsHeight || DEFAULT_LAYOUT_VIEW_SIZE.editorTabsHeight;
return this.#editorTabsHeight;
}
setEditorTabsHeight(value: number) {
this.#editorTabsHeight = value;
}
get bigSurTitleBarHeight(): number {
return this.layoutViewSize?.bigSurTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.bigSurTitleBarHeight;
return this.#bigSurTitleBarHeight;
}
setBigSurTitleBarHeight(value: number) {
this.#bigSurTitleBarHeight = value;
}
get titleBarHeight(): number {
return this.layoutViewSize?.titleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.titleBarHeight;
return this.#titleBarHeight;
}
setTitleBarHeight(value: number) {
this.#titleBarHeight = value;
}
get panelTitleBarHeight(): number {
return this.layoutViewSize?.panelTitleBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.panelTitleBarHeight;
return this.#panelTitleBarHeight;
}
setPanelTitleBarHeight(value: number) {
this.#panelTitleBarHeight = value;
}
get statusBarHeight(): number {
return this.layoutViewSize?.statusBarHeight || DEFAULT_LAYOUT_VIEW_SIZE.statusBarHeight;
return this.#statusBarHeight;
}
setStatusBarHeight(value: number) {
this.#statusBarHeight = value;
}
get accordionHeaderSizeHeight(): number {
return this.#accordionHeaderSizeHeight;
}
setAccordionHeaderSizeHeight(value: number) {
this.#accordionHeaderSizeHeight = value;
}
}

2
packages/core-common/src/types/ai-native/index.ts
View File

@ -47,6 +47,8 @@ export interface IAINativeLayout {
useMergeRightWithLeftPanel?: boolean;
// Use ai manubar view
useMenubarView?: boolean;
// set menubar logo
menubarLogo?: string;
}
export interface IAINativeConfig {

3
packages/design/src/browser/style/design.module.less
View File

@ -47,9 +47,10 @@
.design-kt_workbench_editor {
height: 100%;
width: 100%;
background-color: var(--design-container-background);
background: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-top: none;
overflow: hidden;
}

10
packages/main-layout/src/browser/accordion/accordion.view.tsx
View File

@ -1,7 +1,7 @@
import { observer } from 'mobx-react-lite';
import React from 'react';
import React, { useMemo } from 'react';
import { View, useInjectable } from '@opensumi/ide-core-browser';
import { AppConfig, View, useInjectable } from '@opensumi/ide-core-browser';
import { EDirection, Layout, SplitPanel } from '@opensumi/ide-core-browser/lib/components';
import { replaceLocalizePlaceholder } from '@opensumi/ide-core-common';
@ -32,6 +32,10 @@ export const AccordionContainer = observer(
style,
}: AccordionContainerProps) => {
const accordionService: AccordionService = useInjectable(AccordionServiceFactory)(containerId, noRestore);
const appConfig: AppConfig = useInjectable(AppConfig);
const layoutHeaderSize = useMemo(() => headerSize || appConfig.layoutViewSize?.accordionHeaderSizeHeight!, [headerSize]);
React.useEffect(() => {
// 解决视图在渲染前注册的问题
if (!views.length) {
@ -42,7 +46,7 @@ export const AccordionContainer = observer(
}
}, [views]);
React.useEffect(() => {
accordionService.initConfig({ headerSize, minSize });
accordionService.initConfig({ headerSize: layoutHeaderSize, minSize });
}, []);
const allCollapsed = !accordionService.visibleViews.find((view) => {

1
typings/style/index.d.ts vendored
View File

@ -1,2 +1,3 @@
declare module '*.less';
declare module '*.css';
declare module '*.svg';