Skip to content

Commit 768abf2

Browse files
wewoorwewoor
committed
feat(theme): compatible with vscode theme
1 parent e56f0be commit 768abf2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+910
-703
lines changed

‎src/components/button/style.scss

-4
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,4 @@
2626
opacity: 0.4;
2727
pointer-events: none;
2828
}
29-
30-
&:hover {
31-
opacity: 0.9;
32-
}
3329
}

‎src/components/contextview/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ import {
1313
HTMLElementType,
1414
IPosition,
1515
} from 'mo/common/dom';
16-
import { Utils } from 'dt-utils/lib';
1716
import { EventEmitter } from 'mo/common/event';
18-
17+
import { Utils } from 'dt-utils';
1918
export interface IContextViewProps {
2019
/**
2120
* Default true
@@ -43,7 +42,8 @@ const shadowClassName = getBEMModifier(contextViewClass, 'shadow');
4342

4443
const Emitter = new EventEmitter();
4544

46-
export function useContextView(props?: IContextViewProps): IContextView {
45+
export function useContextView(props: IContextViewProps = {}): IContextView {
46+
const { shadowOutline = true } = props;
4747
const claName = classNames(contextViewClass, 'fade-in');
4848
let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
4949

@@ -92,7 +92,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
9292
contextView = document.createElement('div');
9393
contextView.className = classNames(
9494
claName,
95-
Utils.isMacOs() ? 'mac' : null
95+
Utils.isMacOs() ? 'mac' : ''
9696
)!;
9797
contextView.style.visibility = 'hidden';
9898
const root = document.getElementById('molecule');
@@ -101,7 +101,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
101101
} else {
102102
root.appendChild(contextView);
103103
}
104-
const shadowClass = !props?.shadowOutline ? '' : shadowClassName;
104+
const shadowClass = !shadowOutline ? '' : shadowClassName;
105105

106106
ReactDOM.render(
107107
<>

‎src/components/contextview/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,6 @@
2424
}
2525

2626
&--shadow {
27-
box-shadow: rgb(0, 0, 0) 0 2px 4px;
27+
box-shadow: var(--widget-shadow) 0 2px 4px;
2828
}
2929
}

‎src/components/menu/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@
7878
font-size: 16px;
7979
}
8080
}
81+
82+
&__separator {
83+
height: 1px;
84+
width: 100%;
85+
}
8186
}
8287

8388
#{$subMenu} {

‎src/components/select/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
&__container {
5151
align-items: center;
5252
appearance: none;
53+
border-top: 0;
5354
box-sizing: border-box;
5455
display: flex;
5556
flex-direction: column;

‎src/extensions/activityBar/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ function initActivityBar(extensionCtx: IExtensionService) {
1919
{
2020
id: 'ColorTheme',
2121
name: 'Color Theme',
22+
onClick(e) {
23+
console.log('globalSettings: colorTheme onClick:', e);
24+
},
2225
},
2326
],
2427
};

‎src/extensions/search/searchPane.tsx

+37-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import * as React from 'react';
22
import Toolbar from 'mo/components/toolbar';
33
import { prefixClaName } from 'mo/common/className';
44
import { Header, Content } from 'mo/workbench/sidebar';
5-
import { activityBarService, editorService, explorerService } from 'mo';
5+
import { activityBarService, colorThemeService, explorerService, editorService } from 'mo';
66
import { Button } from 'mo/components/button';
7+
import { Select, Option } from 'mo/components/select';
8+
import { IColorTheme } from 'mo/model/colorTheme';
79
import SearchTree from './searchTree';
810

9-
interface ISearchPaneToolBar {}
11+
interface ISearchPaneToolBar { }
1012

1113
const initialState = {
1214
input: '',
@@ -38,7 +40,7 @@ type State = typeof initialState;
3840
export default class SearchPane extends React.Component<
3941
ISearchPaneToolBar,
4042
State
41-
> {
43+
> {
4244
state: State;
4345

4446
constructor(props) {
@@ -69,6 +71,33 @@ export default class SearchPane extends React.Component<
6971
});
7072
};
7173

74+
onChangeTheme = (e, option) => {
75+
if (option && option.value) {
76+
console.log('onChangeTheme:', option.value);
77+
colorThemeService.applyTheme(option.value);
78+
}
79+
};
80+
81+
renderColorThemes() {
82+
const colorThemes = colorThemeService.getThemes();
83+
const defaultTheme = colorThemeService.colorTheme;
84+
const options = colorThemes.map((theme: IColorTheme) => {
85+
return (
86+
<Option key={theme.id} value={theme.id}>
87+
{theme.label}
88+
</Option>
89+
);
90+
});
91+
return (
92+
<Select
93+
defaultValue={defaultTheme.id}
94+
onSelect={this.onChangeTheme}
95+
>
96+
{options}
97+
</Select>
98+
);
99+
}
100+
72101
render() {
73102
const { toolbar } = this.state;
74103

@@ -97,7 +126,7 @@ export default class SearchPane extends React.Component<
97126
editorService.open(tabData, 1);
98127
};
99128

100-
const openCommand = function () {};
129+
const openCommand = function () { };
101130
const { input } = this.state;
102131
return (
103132
<div className={prefixClaName('search-pane', 'sidebar')}>
@@ -122,6 +151,10 @@ export default class SearchPane extends React.Component<
122151
<Button onClick={newEditor}>New Editor</Button>
123152
<Button onClick={openCommand}>Command Palette</Button>
124153
</div>
154+
<div style={{ margin: '50px 20px' }}>
155+
ColorThemes:
156+
{this.renderColorThemes()}
157+
</div>
125158
</Content>
126159
</div>
127160
);

‎src/extensions/statusBar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function init() {
2222
statusBarService.appendRightItem(notifications);
2323

2424
statusBarService.onClick(function (e, item) {
25-
console.log('statusBarService:', e, item);
25+
console.log('statusBarService:', e, item, problems, notifications);
2626
});
2727
}
2828

‎src/extensions/theme-defaults/index.ts

+42-36
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
1-
import { IColorTheme } from "mo/model/colorTheme";
2-
import { IExtension, IExtensionType } from "mo/model/extension";
3-
4-
const colorThemesExtension: IExtension = require('./package.json');
5-
6-
function initColorTheme() {
7-
8-
try {
9-
10-
if (!colorThemesExtension || !colorThemesExtension.categories?.includes(IExtensionType.Theme)) {
11-
console.error('This is invalid colorTheme extension package!', colorThemesExtension);
12-
}
13-
14-
const themes = colorThemesExtension.contributes?.themes?.map((theme: IColorTheme) => {
15-
if (theme.path) {
16-
const themeDetail = {}; // require(theme.path);
17-
return Object.assign({}, theme, themeDetail)
18-
}
19-
return theme;
20-
});
21-
22-
if (!colorThemesExtension.contributes) {
23-
colorThemesExtension.contributes = { themes: [] };
24-
}
25-
26-
colorThemesExtension.contributes.themes = themes;
27-
} catch (e) {
28-
throw new Error('Load color theme exception:' + e);
29-
}
30-
}
31-
32-
initColorTheme();
33-
34-
export {
35-
colorThemesExtension
36-
}
1+
import { IColorTheme } from 'mo/model/colorTheme';
2+
import { IExtension } from 'mo/model/extension';
3+
4+
const defaultColorThemeExtension: IExtension = require('./package.json');
5+
6+
// The below handle for theme extension is temporary,
7+
// we will automatic load the extension package.
8+
9+
// Default
10+
const defaultDark: IColorTheme = require('./themes/dark_defaults.json');
11+
const defaultLight: IColorTheme = require('./themes/light_defaults.json');
12+
const defaultHC: IColorTheme = require('./themes/hc_black_defaults.json');
13+
14+
// Theme
15+
const darkPlus: IColorTheme = require('./themes/dark_plus.json');
16+
Object.assign(darkPlus, defaultDark);
17+
const darkVS: IColorTheme = require('./themes/dark_vs.json');
18+
Object.assign(darkVS, defaultDark);
19+
20+
const lightPlus: IColorTheme = require('./themes/light_plus.json');
21+
Object.assign(lightPlus, defaultLight);
22+
const lightVS: IColorTheme = require('./themes/light_vs.json');
23+
Object.assign(lightVS, defaultLight);
24+
25+
const hcBlack: IColorTheme = require('./themes/hc_black.json');
26+
Object.assign(hcBlack, defaultHC);
27+
28+
const themes = defaultColorThemeExtension.contributes?.themes || [];
29+
30+
const themeDarkPlus = themes[0];
31+
const themeLightPlus = themes[1];
32+
const themeVSDark = themes[2];
33+
const themeVSLight = themes[3];
34+
const themeHCBlack = themes[4];
35+
36+
themes[0] = Object.assign({}, themeDarkPlus, darkPlus);
37+
themes[1] = Object.assign({}, themeLightPlus, lightPlus);
38+
themes[2] = Object.assign({}, themeVSDark, darkVS);
39+
themes[3] = Object.assign({}, themeVSLight, lightVS);
40+
themes[4] = Object.assign({}, themeHCBlack, hcBlack);
41+
42+
export { defaultColorThemeExtension };

‎src/extensions/theme-monokai/index.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { IColorTheme } from 'mo/model/colorTheme';
2+
import { IExtension } from 'mo/model/extension';
3+
4+
const monokaiColorThemeExtension: IExtension = require('./package.json');
5+
6+
// Default
7+
const themeOneColors: IColorTheme = require('./themes/monokai-color-theme.json');
8+
9+
const themes = monokaiColorThemeExtension.contributes?.themes || [];
10+
11+
const themeOne = themes[0];
12+
13+
themes[0] = Object.assign({}, themeOne, themeOneColors);
14+
15+
export { monokaiColorThemeExtension };

‎src/extensions/theme-monokai/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"contributes": {
1212
"themes": [
1313
{
14+
"id": "Monokai",
1415
"label": "Monokai",
1516
"uiTheme": "vs-dark",
1617
"path": "./themes/monokai-color-theme.json"

‎src/model/colorTheme.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
export interface ThemeColor extends Object {
2-
id?: string;
1+
export interface IColors {
2+
[colorId: string]: string;
33
}
4-
54
export interface TokenColor extends Object {
65
name?: string;
76
scope?: string | string[];
@@ -17,7 +16,7 @@ export interface IColorTheme {
1716
name: string;
1817
uiTheme: string;
1918
path?: string;
20-
colors?: ThemeColor;
19+
colors?: IColors;
2120
tokenColors?: TokenColor[];
2221
/**
2322
* The semanticTokenColors mappings as well as

‎src/model/extension.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export enum IContributeType {
1919
Commands = 'commands',
2020
Configuration = 'configuration',
2121
Grammar = 'grammars',
22-
Theme = 'themes',
22+
Themes = 'themes',
2323
IconTheme = 'iconThemes',
2424
}
2525

@@ -28,7 +28,7 @@ export interface IContribute {
2828
[IContributeType.Commands]?: any;
2929
[IContributeType.Configuration]?: any;
3030
[IContributeType.Grammar]?: any;
31-
[IContributeType.Theme]?: IColorTheme[];
31+
[IContributeType.Themes]?: IColorTheme[];
3232
[IContributeType.IconTheme]?: IIconTheme[];
3333
}
3434

‎src/services/extensionService.ts

+14-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { singleton, inject, container } from 'tsyringe';
22
import { ErrorMsg } from 'mo/common/error';
33
import { IContribute, IContributeType, IExtension } from 'mo/model/extension';
4+
import { colorThemeService } from 'mo';
5+
import { IColorTheme } from 'mo/model/colorTheme';
6+
import logger from 'mo/common/logger';
47

58
export interface IExtensionService {
69
/**
@@ -25,25 +28,18 @@ export class ExtensionService implements IExtensionService {
2528
this.load(extensions);
2629
}
2730

28-
/**
29-
* TODO: Current extension service can't parses VSCode theme, so needs to refactor
30-
* @param param0 extensionEntry object
31-
* @param moleculeCtx the context object of molecule
32-
*/
3331
public load(extensions: IExtension[] = []) {
3432
try {
3533
if (extensions?.length === 0) return;
3634
this.extensions = this.extensions.concat(extensions);
35+
logger.info('ExtensionService.extensions:', this.extensions);
3736
const ctx = this;
38-
3937
extensions?.forEach((extension: IExtension, index: number) => {
40-
if (extension.activate) {
38+
if (extension && extension.activate) {
4139
extension.activate(ctx);
42-
} else {
43-
// TODO: different kind of extension ,different hand
44-
// throw new Error(ErrorMsg.NotFoundActivateMethod);
4540
}
46-
if (extension.contributes) {
41+
42+
if (extension && extension.contributes) {
4743
this.loadContributes(extension.contributes);
4844
}
4945
});
@@ -55,10 +51,13 @@ export class ExtensionService implements IExtensionService {
5551
public loadContributes(contributes: IContribute) {
5652
const contributeKeys = Object.keys(contributes);
5753
contributeKeys.forEach((type: string) => {
58-
if (type === IContributeType.Commands) {
59-
console.log('contributeKeys:', type);
60-
// ThemeService.load(extension[type]);
61-
// exts.push(extension);
54+
switch (type) {
55+
case IContributeType.Themes: {
56+
const themes: IColorTheme[] | undefined = contributes[type];
57+
if (themes) {
58+
colorThemeService.load(themes);
59+
}
60+
}
6261
}
6362
});
6463
}

‎src/services/helper.ts

Whitespace-only changes.

‎src/services/index.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ export * from './extensionService';
55
export * from './theme/colorThemeService';
66
export * from './workbench';
77

8-
import { ColorThemeService, IColorThemeService } from './theme/colorThemeService';
8+
import {
9+
ColorThemeService,
10+
IColorThemeService,
11+
} from './theme/colorThemeService';
912
import { ExtensionService, IExtensionService } from './extensionService';
1013
import {
1114
ActivityBarService,
@@ -36,10 +39,11 @@ const editorService = container.resolve<IEditorService>(EditorService);
3639
const statusBarService = container.resolve<IStatusBarService>(StatusBarService);
3740

3841
/**
39-
* The theme service,
40-
* TODO: think about break themeService into ColorTheme and IconTheme
42+
* The ColorTheme service,
4143
*/
42-
const colorThemeService = container.resolve<IColorThemeService>(ColorThemeService);
44+
const colorThemeService = container.resolve<IColorThemeService>(
45+
ColorThemeService
46+
);
4347

4448
/**
4549
* Note: The extension service depends on other workbench services,

0 commit comments

Comments
 (0)