@opensumi/ide-design 2.27.3-next-1714464252.0 → 2.27.3-next-1714469095.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/browser/override/editor-tab.service.js +3 -3
  2. package/lib/browser/override/editor-tab.service.js.map +1 -1
  3. package/lib/browser/override/menu.service.js +10 -10
  4. package/lib/browser/override/menu.service.js.map +1 -1
  5. package/lib/browser/style/design.module.less +167 -29
  6. package/package.json +6 -6
  7. package/src/browser/override/editor-tab.service.tsx +1 -1
  8. package/src/browser/override/menu.service.tsx +1 -1
  9. package/src/browser/style/design.module.less +167 -29
  10. package/lib/browser/override/override.module.less +0 -138
  11. package/src/browser/override/override.module.less +0 -138
package/lib/browser/override/editor-tab.service.js CHANGED
@@ -8,7 +8,7 @@ const di_1 = require("@opensumi/di");
8
8
  const components_1 = require("@opensumi/ide-core-browser/lib/components");
9
9
  const ide_core_common_1 = require("@opensumi/ide-core-common");
10
10
  const editor_tab_service_1 = require("@opensumi/ide-editor/lib/browser/editor.tab.service");
11
- const override_module_less_1 = tslib_1.__importDefault(require("./override.module.less"));
11
+ const design_module_less_1 = tslib_1.__importDefault(require("../style/design.module.less"));
12
12
  const EditorTabCloseComponent = (props) => {
13
13
  const { children } = props;
14
14
  const [display, setDisplay] = react_1.default.useState(false);
@@ -21,8 +21,8 @@ const EditorTabCloseComponent = (props) => {
21
21
  let DesignEditorTabService = class DesignEditorTabService extends editor_tab_service_1.EditorTabService {
22
22
  renderEditorTab(component, isCurrent) {
23
23
  return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
24
- [override_module_less_1.default['design-editor_tab_block_container']]: true,
25
- [override_module_less_1.default.active]: isCurrent,
24
+ [design_module_less_1.default['design-editor_tab_block_container']]: true,
25
+ [design_module_less_1.default.active]: isCurrent,
26
26
  }) }, component));
27
27
  }
28
28
  renderTabCloseComponent(component) {
package/lib/browser/override/editor-tab.service.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"editor-tab.service.js","sourceRoot":"","sources":["../../../src/browser/override/editor-tab.service.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,uDAA+D;AAE/D,qCAA0C;AAC1C,0EAAoE;AACpE,+DAA2D;AAC3D,4FAAuF;AAEvF,0FAA4C;AAE5C,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,GAAG,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,mBAAmB,GAAG,IAAA,sBAAI,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,oBAAO,IAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAA,0BAAQ,EAAC,4BAA4B,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,IAC1G,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CAAC;AAGK,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,qCAAgB;IACjD,eAAe,CAAC,SAAoB,EAAE,SAAkB;QAC/D,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAG,EAAC;gBACb,CAAC,8BAAM,CAAC,mCAAmC,CAAC,CAAC,EAAE,IAAI;gBACnD,CAAC,8BAAM,CAAC,MAAM,CAAC,EAAE,SAAS;aAC3B,CAAC,IAED,SAAS,CACN,CACP,CAAC;IACJ,CAAC;IAEQ,uBAAuB,CAAC,SAAoB;QACnD,OAAO,8BAAC,uBAAuB,QAAE,SAAS,CAA2B,CAAC;IACxE,CAAC;CACF,CAAA;AAjBY,sBAAsB;IADlC,IAAA,eAAU,GAAE;GACA,sBAAsB,CAiBlC;AAjBY,wDAAsB"}
1
+ {"version":3,"file":"editor-tab.service.js","sourceRoot":"","sources":["../../../src/browser/override/editor-tab.service.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,uDAA+D;AAE/D,qCAA0C;AAC1C,0EAAoE;AACpE,+DAA2D;AAC3D,4FAAuF;AAEvF,6FAAiD;AAEjD,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,GAAG,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,mBAAmB,GAAG,IAAA,sBAAI,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BAAC,oBAAO,IAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,IAAA,0BAAQ,EAAC,4BAA4B,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,IAC1G,QAAQ,CACD,CACX,CAAC;AACJ,CAAC,CAAC;AAGK,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,qCAAgB;IACjD,eAAe,CAAC,SAAoB,EAAE,SAAkB;QAC/D,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAG,EAAC;gBACb,CAAC,4BAAM,CAAC,mCAAmC,CAAC,CAAC,EAAE,IAAI;gBACnD,CAAC,4BAAM,CAAC,MAAM,CAAC,EAAE,SAAS;aAC3B,CAAC,IAED,SAAS,CACN,CACP,CAAC;IACJ,CAAC;IAEQ,uBAAuB,CAAC,SAAoB;QACnD,OAAO,8BAAC,uBAAuB,QAAE,SAAS,CAA2B,CAAC;IACxE,CAAC;CACF,CAAA;AAjBY,sBAAsB;IADlC,IAAA,eAAU,GAAE;GACA,sBAAsB,CAiBlC;AAjBY,wDAAsB"}
package/lib/browser/override/menu.service.js CHANGED
@@ -9,7 +9,7 @@ const ide_components_1 = require("@opensumi/ide-components");
9
9
  const ide_core_browser_1 = require("@opensumi/ide-core-browser");
10
10
  const ctx_menu_service_1 = require("@opensumi/ide-overlay/lib/browser/ctx-menu/ctx-menu.service");
11
11
  const ide_theme_1 = require("@opensumi/ide-theme");
12
- const override_module_less_1 = tslib_1.__importDefault(require("./override.module.less"));
12
+ const design_module_less_1 = tslib_1.__importDefault(require("../style/design.module.less"));
13
13
  const MenuComponent = (props) => {
14
14
  const iconService = (0, ide_core_browser_1.useInjectable)(ide_theme_1.IIconService);
15
15
  const { data, disabled, hasSubmenu } = props;
@@ -22,19 +22,19 @@ const MenuComponent = (props) => {
22
22
  }
23
23
  return null;
24
24
  }, [data]);
25
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)(override_module_less_1.default.menuAction__sub_menu_action_container, {
26
- [override_module_less_1.default.disabled]: disabled,
27
- [override_module_less_1.default.checked]: data.checked,
25
+ return (react_1.default.createElement("div", { className: (0, classnames_1.default)(design_module_less_1.default.menuAction__sub_menu_action_container, {
26
+ [design_module_less_1.default.disabled]: disabled,
27
+ [design_module_less_1.default.checked]: data.checked,
28
28
  }, data.className) },
29
- react_1.default.createElement("div", { className: override_module_less_1.default.icon }, renderIcon),
30
- react_1.default.createElement("div", { className: override_module_less_1.default.label }, data.label
29
+ react_1.default.createElement("div", { className: design_module_less_1.default.icon }, renderIcon),
30
+ react_1.default.createElement("div", { className: design_module_less_1.default.label }, data.label
31
31
  ? (0, ide_core_browser_1.transformLabelWithCodicon)(ide_core_browser_1.strings.mnemonicButtonLabel(data.label, true), { margin: '0 3px' }, iconService === null || iconService === void 0 ? void 0 : iconService.fromString.bind(iconService))
32
32
  : ''),
33
- react_1.default.createElement("div", { className: override_module_less_1.default.tip },
34
- data.keybinding ? react_1.default.createElement("div", { className: override_module_less_1.default.shortcut }, data.keybinding) : null,
35
- hasSubmenu ? (react_1.default.createElement("div", { className: override_module_less_1.default.submenuIcon },
33
+ react_1.default.createElement("div", { className: design_module_less_1.default.tip },
34
+ data.keybinding ? react_1.default.createElement("div", { className: design_module_less_1.default.shortcut }, data.keybinding) : null,
35
+ hasSubmenu ? (react_1.default.createElement("div", { className: design_module_less_1.default.submenuIcon },
36
36
  react_1.default.createElement(ide_components_1.Icon, { icon: 'right-arrow' }))) : null,
37
- !data.keybinding && !hasSubmenu && data.extraDesc && react_1.default.createElement("div", { className: override_module_less_1.default.extraDesc }, data.extraDesc))));
37
+ !data.keybinding && !hasSubmenu && data.extraDesc && react_1.default.createElement("div", { className: design_module_less_1.default.extraDesc }, data.extraDesc))));
38
38
  };
39
39
  let DesignBrowserCtxMenuService = class DesignBrowserCtxMenuService extends ctx_menu_service_1.BrowserCtxMenuService {
40
40
  renderSubMenuTitle(node, props) {
package/lib/browser/override/menu.service.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.service.js","sourceRoot":"","sources":["../../../src/browser/override/menu.service.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,uDAAkD;AAElD,qCAA0C;AAC1C,6DAAgD;AAChD,iEAA+F;AAG/F,kGAAoG;AACpG,mDAAmD;AAGnD,0FAA4C;AAE5C,MAAM,aAAa,GAAG,CAAC,KAA4C,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG,IAAA,gCAAa,EAAc,wBAAY,CAAC,CAAC;IAC7D,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,8BAAC,qBAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;SAC9B;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,8BAAC,qBAAI,IAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;SACvC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAG,EACZ,8BAAM,CAAC,qCAAqC,EAC5C;YACE,CAAC,8BAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,8BAAM,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;SAC/B,EACD,IAAI,CAAC,SAAS,CACf;QAED,uCAAK,SAAS,EAAE,8BAAM,CAAC,IAAI,IAAG,UAAU,CAAO;QAC/C,uCAAK,SAAS,EAAE,8BAAM,CAAC,KAAK,IACzB,IAAI,CAAC,KAAK;YACT,CAAC,CAAC,IAAA,4CAAyB,EACvB,0BAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAC7C,EAAE,MAAM,EAAE,OAAO,EAAE,EACnB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAC1C;YACH,CAAC,CAAC,EAAE,CACF;QACN,uCAAK,SAAS,EAAE,8BAAM,CAAC,GAAG;YACvB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,8BAAM,CAAC,QAAQ,IAAG,IAAI,CAAC,UAAU,CAAO,CAAC,CAAC,CAAC,IAAI;YACjF,UAAU,CAAC,CAAC,CAAC,CACZ,uCAAK,SAAS,EAAE,8BAAM,CAAC,WAAW;gBAChC,8BAAC,qBAAI,IAAC,IAAI,EAAC,aAAa,GAAG,CACvB,CACP,CAAC,CAAC,CAAC,IAAI;YACP,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,IAAI,uCAAK,SAAS,EAAE,8BAAM,CAAC,SAAS,IAAG,IAAI,CAAC,SAAS,CAAO,CAC1G,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAGK,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,wCAAqB;IACpE,kBAAkB,CAAC,IAAc,EAAE,KAAuB;QACxD,OAAO,8BAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,IAAc,EAAE,KAAuB;QACpD,OAAO,8BAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,CAAC;IAClD,CAAC;CACF,CAAA;AARY,2BAA2B;IADvC,IAAA,eAAU,GAAE;GACA,2BAA2B,CAQvC;AARY,kEAA2B"}
1
+ {"version":3,"file":"menu.service.js","sourceRoot":"","sources":["../../../src/browser/override/menu.service.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,uDAAkD;AAElD,qCAA0C;AAC1C,6DAAgD;AAChD,iEAA+F;AAG/F,kGAAoG;AACpG,mDAAmD;AAGnD,6FAAiD;AAEjD,MAAM,aAAa,GAAG,CAAC,KAA4C,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG,IAAA,gCAAa,EAAc,wBAAY,CAAC,CAAC;IAC7D,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE7C,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,8BAAC,qBAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;SAC9B;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,8BAAC,qBAAI,IAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;SACvC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAG,EACZ,4BAAM,CAAC,qCAAqC,EAC5C;YACE,CAAC,4BAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,4BAAM,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;SAC/B,EACD,IAAI,CAAC,SAAS,CACf;QAED,uCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,IAAG,UAAU,CAAO;QAC/C,uCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,IACzB,IAAI,CAAC,KAAK;YACT,CAAC,CAAC,IAAA,4CAAyB,EACvB,0BAAO,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAC7C,EAAE,MAAM,EAAE,OAAO,EAAE,EACnB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAC1C;YACH,CAAC,CAAC,EAAE,CACF;QACN,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;YACvB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,4BAAM,CAAC,QAAQ,IAAG,IAAI,CAAC,UAAU,CAAO,CAAC,CAAC,CAAC,IAAI;YACjF,UAAU,CAAC,CAAC,CAAC,CACZ,uCAAK,SAAS,EAAE,4BAAM,CAAC,WAAW;gBAChC,8BAAC,qBAAI,IAAC,IAAI,EAAC,aAAa,GAAG,CACvB,CACP,CAAC,CAAC,CAAC,IAAI;YACP,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,IAAI,uCAAK,SAAS,EAAE,4BAAM,CAAC,SAAS,IAAG,IAAI,CAAC,SAAS,CAAO,CAC1G,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAGK,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,wCAAqB;IACpE,kBAAkB,CAAC,IAAc,EAAE,KAAuB;QACxD,OAAO,8BAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,IAAc,EAAE,KAAuB;QACpD,OAAO,8BAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,CAAC;IAClD,CAAC;CACF,CAAA;AARY,2BAA2B;IADvC,IAAA,eAAU,GAAE;GACA,2BAA2B,CAQvC;AARY,kEAA2B"}
package/lib/browser/style/design.module.less CHANGED
@@ -12,6 +12,23 @@
12
12
  background-repeat: no-repeat;
13
13
  background-size: cover;
14
14
  }
15
+
16
+ .editor_tab_block_container {
17
+ > div:first-child {
18
+ &::before {
19
+ filter: grayscale(0);
20
+ }
21
+ }
22
+ }
23
+ }
24
+
25
+ :global(.design-dark),
26
+ :global(.design-light) {
27
+ :global(.design_bottom_slot) {
28
+ .design-panel_title_bar {
29
+ background-color: var(--design-title-background);
30
+ }
31
+ }
15
32
  }
16
33
 
17
34
  :global(#opensumi-quickpick) {
@@ -136,7 +153,7 @@
136
153
  &.design-kt_editor_tab_current_prev {
137
154
  background-color: var(--panel-background);
138
155
 
139
- div[class*='design-editor_tab_block_container__'] {
156
+ .design-editor_tab_block_container {
140
157
  border-radius: 0 0 12px 0;
141
158
  background-color: var(--editorGroupHeader-tabsBackground);
142
159
  }
@@ -145,7 +162,7 @@
145
162
  &.design-kt_editor_tab_current_next {
146
163
  background-color: var(--panel-background);
147
164
 
148
- div[class*='design-editor_tab_block_container__'] {
165
+ .design-editor_tab_block_container {
149
166
  background-color: var(--editorGroupHeader-tabsBackground);
150
167
  border-radius: 0 0 0 12px;
151
168
 
@@ -266,6 +283,70 @@
266
283
  }
267
284
  }
268
285
 
286
+ .design-editor_tab_block_container {
287
+ display: flex;
288
+ align-items: center;
289
+ height: 36px;
290
+ border-radius: 12px 12px 0 0;
291
+ padding: 0 8px;
292
+ margin-right: 0 !important;
293
+
294
+ &::before {
295
+ content: '';
296
+ position: absolute;
297
+ left: 0;
298
+ top: 12px;
299
+ display: inline-block;
300
+ width: 1px;
301
+ height: 12px;
302
+ background-color: var(--editorGroup-border);
303
+ }
304
+
305
+ > div:first-child {
306
+ margin-right: 4px !important;
307
+ flex-shrink: 0;
308
+ flex-grow: 0;
309
+
310
+ &::before {
311
+ font-size: 14px;
312
+ background-size: 14px;
313
+ background-position: 2px;
314
+ filter: grayscale(1);
315
+ color: var(--design-icon-foreground);
316
+ }
317
+ }
318
+
319
+ &.active {
320
+ background-color: var(--tab-activeBackground);
321
+ color: var(--tab-activeForeground);
322
+
323
+ &::before {
324
+ content: none;
325
+ }
326
+
327
+ div:first-child {
328
+ &::before {
329
+ filter: grayscale(0);
330
+ }
331
+ }
332
+ }
333
+
334
+ .design-tab_right {
335
+ &:hover {
336
+ background-color: initial !important;
337
+ transform: scale(1) !important;
338
+ }
339
+
340
+ .design-close_tab {
341
+ color: var(--design-icon-foreground);
342
+
343
+ &:hover {
344
+ color: var(--design-text-foreground);
345
+ }
346
+ }
347
+ }
348
+ }
349
+
269
350
  /**
270
351
  * ---------------- Override editor navigation bar style ---------------------
271
352
  */
@@ -301,23 +382,6 @@
301
382
  background-color: var(--panel-background);
302
383
  }
303
384
 
304
- div[class*='design-editor_tab_block_container__'] {
305
- .design-tab_right {
306
- &:hover {
307
- background-color: initial !important;
308
- transform: scale(1) !important;
309
- }
310
-
311
- .design-close_tab {
312
- color: var(--design-icon-foreground);
313
-
314
- &:hover {
315
- color: var(--design-text-foreground);
316
- }
317
- }
318
- }
319
- }
320
-
321
385
  /**
322
386
  * ---------------- Override editor panel bottom tabbar style ---------------------
323
387
  */
@@ -505,15 +569,6 @@ div[class*='design-editor_tab_block_container__'] {
505
569
  }
506
570
  }
507
571
 
508
- :global(.design-dark),
509
- :global(.design-light) {
510
- :global(.design_bottom_slot) {
511
- .design-panel_title_bar {
512
- background-color: var(--design-title-background);
513
- }
514
- }
515
- }
516
-
517
572
  :global(.design_left_slot) {
518
573
  margin-right: 1px;
519
574
  }
@@ -618,7 +673,7 @@ div[class*='design-editor_tab_block_container__'] {
618
673
  color: var(--design-text-placeholderForeground);
619
674
  }
620
675
 
621
- div[class*='mod_selected___'] {
676
+ div[class*='mod_selected'] {
622
677
  .design-opened_editor_node_overflow_wrap {
623
678
  color: var(--design-text-highlightForeground) !important;
624
679
  }
@@ -733,3 +788,86 @@ div[class*='design-editor_tab_block_container__'] {
733
788
  }
734
789
  }
735
790
  }
791
+
792
+ /**
793
+ * ---------------- Override menu actions styles ---------------------
794
+ */
795
+ .menuAction__sub_menu_action_container {
796
+ display: flex;
797
+ justify-content: space-between;
798
+ align-items: center;
799
+ width: 100%;
800
+ user-select: none;
801
+ padding-left: 12px;
802
+ padding-right: 12px;
803
+ min-width: 150px;
804
+
805
+ .icon {
806
+ filter: grayscale(1);
807
+
808
+ span {
809
+ margin-right: 8px;
810
+ }
811
+ }
812
+
813
+ .extraDesc,
814
+ .shortcut {
815
+ justify-content: right;
816
+ text-align: center;
817
+ color: var(--kt-menu-descriptionForeground);
818
+ font-size: 12px;
819
+ }
820
+
821
+ .icon,
822
+ .submenuIcon {
823
+ text-align: center;
824
+ display: flex;
825
+ justify-content: center;
826
+ align-items: center;
827
+
828
+ :global(.kt-icon) {
829
+ color: var(--design-text-foreground);
830
+ }
831
+ }
832
+
833
+ .label {
834
+ flex: 1;
835
+ padding-right: 16px;
836
+ }
837
+
838
+ &.disabled {
839
+ .shortcut {
840
+ color: var(--kt-menu-disableForeground);
841
+ }
842
+ }
843
+
844
+ &:not(.disabled):hover {
845
+ background: var(--menu-selectionBackground) !important;
846
+ color: var(--menu-selectionForeground) !important;
847
+
848
+ .shortcut {
849
+ color: var(--menu-selectionForeground);
850
+ }
851
+ }
852
+
853
+ &:focus {
854
+ .shortcut {
855
+ color: var(--menu-selectionForeground);
856
+ }
857
+ }
858
+
859
+ .label {
860
+ font-size: 12px;
861
+ display: flex;
862
+ align-items: center;
863
+ // stop Flexbox removing trailing whitespace
864
+ // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
865
+ white-space: pre-wrap;
866
+ }
867
+
868
+ .submenuIcon {
869
+ span {
870
+ font-size: 16px;
871
+ }
872
+ }
873
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensumi/ide-design",
3
- "version": "2.27.3-next-1714464252.0",
3
+ "version": "2.27.3-next-1714469095.0",
4
4
  "files": [
5
5
  "lib",
6
6
  "src"
@@ -19,12 +19,12 @@
19
19
  "url": "git@github.com:opensumi/core.git"
20
20
  },
21
21
  "dependencies": {
22
- "@opensumi/ide-core-common": "2.27.3-next-1714464252.0",
23
- "@opensumi/ide-core-node": "2.27.3-next-1714464252.0"
22
+ "@opensumi/ide-core-common": "2.27.3-next-1714469095.0",
23
+ "@opensumi/ide-core-node": "2.27.3-next-1714469095.0"
24
24
  },
25
25
  "devDependencies": {
26
- "@opensumi/ide-core-browser": "2.27.3-next-1714464252.0",
27
- "@opensumi/ide-dev-tool": "2.27.3-next-1714464252.0"
26
+ "@opensumi/ide-core-browser": "2.27.3-next-1714469095.0",
27
+ "@opensumi/ide-dev-tool": "2.27.3-next-1714469095.0"
28
28
  },
29
- "gitHead": "fec3bd7dd5bb0d4005a3f3aa582d8954accc16dc"
29
+ "gitHead": "c30535fa0f269adef39d6bf933d4cf499bb5c8dc"
30
30
  }
package/src/browser/override/editor-tab.service.tsx CHANGED
@@ -6,7 +6,7 @@ import { Popover } from '@opensumi/ide-core-browser/lib/components';
6
6
  import { localize, uuid } from '@opensumi/ide-core-common';
7
7
  import { EditorTabService } from '@opensumi/ide-editor/lib/browser/editor.tab.service';
8
8
 
9
- import styles from './override.module.less';
9
+ import styles from '../style/design.module.less';
10
10
 
11
11
  const EditorTabCloseComponent = (props) => {
12
12
  const { children } = props;
package/src/browser/override/menu.service.tsx CHANGED
@@ -10,7 +10,7 @@ import { BrowserCtxMenuService } from '@opensumi/ide-overlay/lib/browser/ctx-men
10
10
  import { IIconService } from '@opensumi/ide-theme';
11
11
  import { IconService } from '@opensumi/ide-theme/lib/browser';
12
12
 
13
- import styles from './override.module.less';
13
+ import styles from '../style/design.module.less';
14
14
 
15
15
  const MenuComponent = (props: { data: MenuNode } & IMenuRenderProps) => {
16
16
  const iconService = useInjectable<IconService>(IIconService);
package/src/browser/style/design.module.less CHANGED
@@ -12,6 +12,23 @@
12
12
  background-repeat: no-repeat;
13
13
  background-size: cover;
14
14
  }
15
+
16
+ .editor_tab_block_container {
17
+ > div:first-child {
18
+ &::before {
19
+ filter: grayscale(0);
20
+ }
21
+ }
22
+ }
23
+ }
24
+
25
+ :global(.design-dark),
26
+ :global(.design-light) {
27
+ :global(.design_bottom_slot) {
28
+ .design-panel_title_bar {
29
+ background-color: var(--design-title-background);
30
+ }
31
+ }
15
32
  }
16
33
 
17
34
  :global(#opensumi-quickpick) {
@@ -136,7 +153,7 @@
136
153
  &.design-kt_editor_tab_current_prev {
137
154
  background-color: var(--panel-background);
138
155
 
139
- div[class*='design-editor_tab_block_container__'] {
156
+ .design-editor_tab_block_container {
140
157
  border-radius: 0 0 12px 0;
141
158
  background-color: var(--editorGroupHeader-tabsBackground);
142
159
  }
@@ -145,7 +162,7 @@
145
162
  &.design-kt_editor_tab_current_next {
146
163
  background-color: var(--panel-background);
147
164
 
148
- div[class*='design-editor_tab_block_container__'] {
165
+ .design-editor_tab_block_container {
149
166
  background-color: var(--editorGroupHeader-tabsBackground);
150
167
  border-radius: 0 0 0 12px;
151
168
 
@@ -266,6 +283,70 @@
266
283
  }
267
284
  }
268
285
 
286
+ .design-editor_tab_block_container {
287
+ display: flex;
288
+ align-items: center;
289
+ height: 36px;
290
+ border-radius: 12px 12px 0 0;
291
+ padding: 0 8px;
292
+ margin-right: 0 !important;
293
+
294
+ &::before {
295
+ content: '';
296
+ position: absolute;
297
+ left: 0;
298
+ top: 12px;
299
+ display: inline-block;
300
+ width: 1px;
301
+ height: 12px;
302
+ background-color: var(--editorGroup-border);
303
+ }
304
+
305
+ > div:first-child {
306
+ margin-right: 4px !important;
307
+ flex-shrink: 0;
308
+ flex-grow: 0;
309
+
310
+ &::before {
311
+ font-size: 14px;
312
+ background-size: 14px;
313
+ background-position: 2px;
314
+ filter: grayscale(1);
315
+ color: var(--design-icon-foreground);
316
+ }
317
+ }
318
+
319
+ &.active {
320
+ background-color: var(--tab-activeBackground);
321
+ color: var(--tab-activeForeground);
322
+
323
+ &::before {
324
+ content: none;
325
+ }
326
+
327
+ div:first-child {
328
+ &::before {
329
+ filter: grayscale(0);
330
+ }
331
+ }
332
+ }
333
+
334
+ .design-tab_right {
335
+ &:hover {
336
+ background-color: initial !important;
337
+ transform: scale(1) !important;
338
+ }
339
+
340
+ .design-close_tab {
341
+ color: var(--design-icon-foreground);
342
+
343
+ &:hover {
344
+ color: var(--design-text-foreground);
345
+ }
346
+ }
347
+ }
348
+ }
349
+
269
350
  /**
270
351
  * ---------------- Override editor navigation bar style ---------------------
271
352
  */
@@ -301,23 +382,6 @@
301
382
  background-color: var(--panel-background);
302
383
  }
303
384
 
304
- div[class*='design-editor_tab_block_container__'] {
305
- .design-tab_right {
306
- &:hover {
307
- background-color: initial !important;
308
- transform: scale(1) !important;
309
- }
310
-
311
- .design-close_tab {
312
- color: var(--design-icon-foreground);
313
-
314
- &:hover {
315
- color: var(--design-text-foreground);
316
- }
317
- }
318
- }
319
- }
320
-
321
385
  /**
322
386
  * ---------------- Override editor panel bottom tabbar style ---------------------
323
387
  */
@@ -505,15 +569,6 @@ div[class*='design-editor_tab_block_container__'] {
505
569
  }
506
570
  }
507
571
 
508
- :global(.design-dark),
509
- :global(.design-light) {
510
- :global(.design_bottom_slot) {
511
- .design-panel_title_bar {
512
- background-color: var(--design-title-background);
513
- }
514
- }
515
- }
516
-
517
572
  :global(.design_left_slot) {
518
573
  margin-right: 1px;
519
574
  }
@@ -618,7 +673,7 @@ div[class*='design-editor_tab_block_container__'] {
618
673
  color: var(--design-text-placeholderForeground);
619
674
  }
620
675
 
621
- div[class*='mod_selected___'] {
676
+ div[class*='mod_selected'] {
622
677
  .design-opened_editor_node_overflow_wrap {
623
678
  color: var(--design-text-highlightForeground) !important;
624
679
  }
@@ -733,3 +788,86 @@ div[class*='design-editor_tab_block_container__'] {
733
788
  }
734
789
  }
735
790
  }
791
+
792
+ /**
793
+ * ---------------- Override menu actions styles ---------------------
794
+ */
795
+ .menuAction__sub_menu_action_container {
796
+ display: flex;
797
+ justify-content: space-between;
798
+ align-items: center;
799
+ width: 100%;
800
+ user-select: none;
801
+ padding-left: 12px;
802
+ padding-right: 12px;
803
+ min-width: 150px;
804
+
805
+ .icon {
806
+ filter: grayscale(1);
807
+
808
+ span {
809
+ margin-right: 8px;
810
+ }
811
+ }
812
+
813
+ .extraDesc,
814
+ .shortcut {
815
+ justify-content: right;
816
+ text-align: center;
817
+ color: var(--kt-menu-descriptionForeground);
818
+ font-size: 12px;
819
+ }
820
+
821
+ .icon,
822
+ .submenuIcon {
823
+ text-align: center;
824
+ display: flex;
825
+ justify-content: center;
826
+ align-items: center;
827
+
828
+ :global(.kt-icon) {
829
+ color: var(--design-text-foreground);
830
+ }
831
+ }
832
+
833
+ .label {
834
+ flex: 1;
835
+ padding-right: 16px;
836
+ }
837
+
838
+ &.disabled {
839
+ .shortcut {
840
+ color: var(--kt-menu-disableForeground);
841
+ }
842
+ }
843
+
844
+ &:not(.disabled):hover {
845
+ background: var(--menu-selectionBackground) !important;
846
+ color: var(--menu-selectionForeground) !important;
847
+
848
+ .shortcut {
849
+ color: var(--menu-selectionForeground);
850
+ }
851
+ }
852
+
853
+ &:focus {
854
+ .shortcut {
855
+ color: var(--menu-selectionForeground);
856
+ }
857
+ }
858
+
859
+ .label {
860
+ font-size: 12px;
861
+ display: flex;
862
+ align-items: center;
863
+ // stop Flexbox removing trailing whitespace
864
+ // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
865
+ white-space: pre-wrap;
866
+ }
867
+
868
+ .submenuIcon {
869
+ span {
870
+ font-size: 16px;
871
+ }
872
+ }
873
+ }
package/lib/browser/override/override.module.less DELETED
@@ -1,138 +0,0 @@
1
- .design-editor_tab_block_container {
2
- display: flex;
3
- align-items: center;
4
- height: 36px;
5
- border-radius: 12px 12px 0 0;
6
- padding: 0 8px;
7
- margin-right: 0 !important;
8
-
9
- &::before {
10
- content: '';
11
- position: absolute;
12
- left: 0;
13
- top: 12px;
14
- display: inline-block;
15
- width: 1px;
16
- height: 12px;
17
- background-color: var(--editorGroup-border);
18
- }
19
-
20
- > div:first-child {
21
- margin-right: 4px !important;
22
- flex-shrink: 0;
23
- flex-grow: 0;
24
-
25
- &::before {
26
- font-size: 14px;
27
- background-size: 14px;
28
- background-position: 2px;
29
- filter: grayscale(1);
30
- color: var(--design-icon-foreground);
31
- }
32
- }
33
-
34
- &.active {
35
- background-color: var(--tab-activeBackground);
36
- color: var(--tab-activeForeground);
37
-
38
- &::before {
39
- content: none;
40
- }
41
-
42
- div:first-child {
43
- &::before {
44
- filter: grayscale(0);
45
- }
46
- }
47
- }
48
- }
49
-
50
- .menuAction__sub_menu_action_container {
51
- display: flex;
52
- justify-content: space-between;
53
- align-items: center;
54
- width: 100%;
55
- user-select: none;
56
- padding-left: 12px;
57
- padding-right: 12px;
58
- min-width: 150px;
59
-
60
- .icon {
61
- filter: grayscale(1);
62
-
63
- span {
64
- margin-right: 8px;
65
- }
66
- }
67
-
68
- .extraDesc,
69
- .shortcut {
70
- justify-content: right;
71
- text-align: center;
72
- color: var(--kt-menu-descriptionForeground);
73
- font-size: 12px;
74
- }
75
-
76
- .icon,
77
- .submenuIcon {
78
- text-align: center;
79
- display: flex;
80
- justify-content: center;
81
- align-items: center;
82
-
83
- :global(.kt-icon) {
84
- color: var(--design-text-foreground);
85
- }
86
- }
87
-
88
- .label {
89
- flex: 1;
90
- padding-right: 16px;
91
- }
92
-
93
- &.disabled {
94
- .shortcut {
95
- color: var(--kt-menu-disableForeground);
96
- }
97
- }
98
-
99
- &:not(.disabled):hover {
100
- background: var(--menu-selectionBackground) !important;
101
- color: var(--menu-selectionForeground) !important;
102
-
103
- .shortcut {
104
- color: var(--menu-selectionForeground);
105
- }
106
- }
107
-
108
- &:focus {
109
- .shortcut {
110
- color: var(--menu-selectionForeground);
111
- }
112
- }
113
-
114
- .label {
115
- font-size: 12px;
116
- display: flex;
117
- align-items: center;
118
- // stop Flexbox removing trailing whitespace
119
- // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
120
- white-space: pre-wrap;
121
- }
122
-
123
- .submenuIcon {
124
- span {
125
- font-size: 16px;
126
- }
127
- }
128
- }
129
-
130
- :global(.design-light) {
131
- .editor_tab_block_container {
132
- > div:first-child {
133
- &::before {
134
- filter: grayscale(0);
135
- }
136
- }
137
- }
138
- }
package/src/browser/override/override.module.less DELETED
@@ -1,138 +0,0 @@
1
- .design-editor_tab_block_container {
2
- display: flex;
3
- align-items: center;
4
- height: 36px;
5
- border-radius: 12px 12px 0 0;
6
- padding: 0 8px;
7
- margin-right: 0 !important;
8
-
9
- &::before {
10
- content: '';
11
- position: absolute;
12
- left: 0;
13
- top: 12px;
14
- display: inline-block;
15
- width: 1px;
16
- height: 12px;
17
- background-color: var(--editorGroup-border);
18
- }
19
-
20
- > div:first-child {
21
- margin-right: 4px !important;
22
- flex-shrink: 0;
23
- flex-grow: 0;
24
-
25
- &::before {
26
- font-size: 14px;
27
- background-size: 14px;
28
- background-position: 2px;
29
- filter: grayscale(1);
30
- color: var(--design-icon-foreground);
31
- }
32
- }
33
-
34
- &.active {
35
- background-color: var(--tab-activeBackground);
36
- color: var(--tab-activeForeground);
37
-
38
- &::before {
39
- content: none;
40
- }
41
-
42
- div:first-child {
43
- &::before {
44
- filter: grayscale(0);
45
- }
46
- }
47
- }
48
- }
49
-
50
- .menuAction__sub_menu_action_container {
51
- display: flex;
52
- justify-content: space-between;
53
- align-items: center;
54
- width: 100%;
55
- user-select: none;
56
- padding-left: 12px;
57
- padding-right: 12px;
58
- min-width: 150px;
59
-
60
- .icon {
61
- filter: grayscale(1);
62
-
63
- span {
64
- margin-right: 8px;
65
- }
66
- }
67
-
68
- .extraDesc,
69
- .shortcut {
70
- justify-content: right;
71
- text-align: center;
72
- color: var(--kt-menu-descriptionForeground);
73
- font-size: 12px;
74
- }
75
-
76
- .icon,
77
- .submenuIcon {
78
- text-align: center;
79
- display: flex;
80
- justify-content: center;
81
- align-items: center;
82
-
83
- :global(.kt-icon) {
84
- color: var(--design-text-foreground);
85
- }
86
- }
87
-
88
- .label {
89
- flex: 1;
90
- padding-right: 16px;
91
- }
92
-
93
- &.disabled {
94
- .shortcut {
95
- color: var(--kt-menu-disableForeground);
96
- }
97
- }
98
-
99
- &:not(.disabled):hover {
100
- background: var(--menu-selectionBackground) !important;
101
- color: var(--menu-selectionForeground) !important;
102
-
103
- .shortcut {
104
- color: var(--menu-selectionForeground);
105
- }
106
- }
107
-
108
- &:focus {
109
- .shortcut {
110
- color: var(--menu-selectionForeground);
111
- }
112
- }
113
-
114
- .label {
115
- font-size: 12px;
116
- display: flex;
117
- align-items: center;
118
- // stop Flexbox removing trailing whitespace
119
- // see https://www.mattstobbs.com/flexbox-removing-trailing-whitespace/
120
- white-space: pre-wrap;
121
- }
122
-
123
- .submenuIcon {
124
- span {
125
- font-size: 16px;
126
- }
127
- }
128
- }
129
-
130
- :global(.design-light) {
131
- .editor_tab_block_container {
132
- > div:first-child {
133
- &::before {
134
- filter: grayscale(0);
135
- }
136
- }
137
- }
138
- }