diff --git a/packages/design/src/browser/override/override.module.less b/packages/design/src/browser/override/override.module.less
index 31fb8f1bf6..db0f445ffd 100644
--- a/packages/design/src/browser/override/override.module.less
+++ b/packages/design/src/browser/override/override.module.less
@@ -6,10 +6,10 @@
padding: 0 8px;
margin-right: 0 !important;
- &::after {
+ &::before {
content: '';
position: absolute;
- right: 0;
+ left: 0;
top: 12px;
display: inline-block;
width: 1px;
@@ -32,10 +32,10 @@
}
&.active {
- background-color: var(--panel-background);
+ background-color: var(--tab-activeBackground);
color: var(--tab-activeForeground);
- &::after {
+ &::before {
content: none;
}
diff --git a/packages/design/src/browser/style/design.module.less b/packages/design/src/browser/style/design.module.less
index ddb93af398..09a21877ef 100644
--- a/packages/design/src/browser/style/design.module.less
+++ b/packages/design/src/browser/style/design.module.less
@@ -71,8 +71,8 @@
align-items: center;
background-color: transparent;
- &:last-child {
- > div::after {
+ &:first-child {
+ > div::before {
content: none;
}
}
@@ -119,6 +119,25 @@
display: block;
}
}
+
+ &.design-kt_editor_tab_current_prev {
+ background-color: var(--panel-background);
+ div[class*='design-editor_tab_block_container__'] {
+ border-radius: 0 0 12px 0;
+ background-color: var(--editorGroupHeader-tabsBackground);
+ }
+ }
+
+ &.design-kt_editor_tab_current_next {
+ background-color: var(--panel-background);
+ div[class*='design-editor_tab_block_container__'] {
+ background-color: var(--editorGroupHeader-tabsBackground);
+ border-radius: 0 0 0 12px;
+ &::before {
+ content: none;
+ }
+ }
+ }
}
.design-kt_editor_tab_dirty {
@@ -132,6 +151,32 @@
}
}
}
+ &.design-kt_editor_tabs_current_last {
+ .design-kt_editor_tab_current {
+ padding-right: 12px !important;
+ &::before {
+ content: '';
+ position: absolute;
+ left: auto;
+ right: 0;
+ top: 0;
+ width: 12px;
+ height: 100%;
+ background-color: var(--editorGroupHeader-tabsBackground);
+ border-radius: 0 0 0 12px;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ left: auto;
+ top: 0;
+ right: 0;
+ width: 12px;
+ height: 100%;
+ background-color: var(--panel-background);
+ }
+ }
+ }
}
.design-kt_editor_tabs {
@@ -323,7 +368,6 @@ div[class*='design-editor_tab_block_container__'] {
:global(.kt-select-value-small) {
height: 24px;
- border: 0 none;
border-radius: 4px;
}
@@ -340,7 +384,6 @@ div[class*='design-editor_tab_block_container__'] {
border-radius: 4px;
width: 240px;
max-width: 240px;
- border: 0 none;
}
}
@@ -353,7 +396,6 @@ div[class*='design-editor_tab_block_container__'] {
border-radius: 4px;
width: 240px;
max-width: 240px;
- border: 0 none;
:global(.kt-icon) {
color: var(--design-input-color);
@@ -372,10 +414,13 @@ div[class*='design-editor_tab_block_container__'] {
.design-item_container {
border: 0 none;
- &::after {
+ &:first-child::before {
+ display: none;
+ }
+ &::before {
content: '';
position: absolute;
- right: 0;
+ left: 0;
top: 12px;
display: inline-block;
width: 1px;
@@ -426,7 +471,8 @@ div[class*='design-editor_tab_block_container__'] {
}
}
- .design-tab_item_selected {
+ .design-tab_item_selected,
+ .design-tab_item_selected + div {
&::before,
&::after {
display: none;
@@ -471,6 +517,7 @@ div[class*='design-editor_tab_block_container__'] {
}
.design-kt_split_panel {
+ padding-bottom: 8px;
&::-webkit-scrollbar {
width: 4px;
}
@@ -486,6 +533,16 @@ div[class*='design-editor_tab_block_container__'] {
}
}
+ .design-scmMenu {
+ button {
+ border-radius: 4px !important;
+ }
+ }
+
+ .design-section_badge {
+ border-radius: 4px !important;
+ }
+
.design-titleActions {
> span {
display: flex;
@@ -635,3 +692,11 @@ div[class*='design-editor_tab_block_container__'] {
border-radius: 8px;
}
}
+
+/* 左侧面板滚动条 */
+.design-kt_split_panel_body {
+ &::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ }
+}
diff --git a/packages/design/src/browser/style/global.less b/packages/design/src/browser/style/global.less
index ad0dce9ad1..91ac6a2f88 100644
--- a/packages/design/src/browser/style/global.less
+++ b/packages/design/src/browser/style/global.less
@@ -106,6 +106,10 @@ html {
width: 4px !important;
}
+ .find-widget {
+ border-radius: 6px;
+ }
+
.minimap {
left: auto !important;
right: 4px !important;
@@ -158,12 +162,14 @@ html {
}
}
-.kt-modal-content {
+// 对话框
+.kt-modal-content,
+.ant-modal-content {
border-radius: 8px;
background-color: transparent;
}
-
-.kt-overlay .kt-modal-body {
+.kt-overlay .kt-modal-body,
+.ant-modal-body {
border-radius: 8px;
border: 0 none !important;
box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
@@ -178,12 +184,21 @@ html {
border-radius: 8px;
}
+// 全局按钮、下拉框、输入框设置调整
+.input-box .validate-message.popup {
+ padding: 8px;
+}
+.input-box .validate-message.popup.validate-warning {
+ border-radius: 6px;
+}
+
.kt-input {
border-radius: 6px;
}
.default-button-size,
-.kt-button {
+.kt-button,
+.ant-btn {
border-radius: 4px;
}
diff --git a/packages/design/src/browser/theme/default-theme.ts b/packages/design/src/browser/theme/default-theme.ts
index e012600c37..93ec7ce5a1 100644
--- a/packages/design/src/browser/theme/default-theme.ts
+++ b/packages/design/src/browser/theme/default-theme.ts
@@ -567,6 +567,7 @@ export default {
'inputValidation.warningBackground': '#332510',
'inputValidation.warningBorder': '#DBA936',
'inputValidation.warningText': '#DBA936',
+ 'inputValidation.warningForeground': '#d7dbde',
'keybinding.background': '#5F656B33',
'kt.accentForeground': '#FFFFFF',
'kt.actionbar.disableForeground': '#5F656B',
@@ -670,13 +671,13 @@ export default {
'kt.secondaryButton.hoverBorder': '#3895EB',
'kt.secondaryButton.hoverForeground': '#3895EB',
'kt.secondaryButton.background': '#00000000',
- 'kt.select.background': '#ffffff0f',
+ 'kt.select.background': '#ffffff14',
'kt.select.border': '#00000000',
'kt.select.disableBackground': '#5F656B40',
'kt.select.disableForeground': '#5F656B',
'kt.select.foreground': '#D7DBDE',
'kt.select.placeholderForeground': '#5F656B',
- 'kt.selectDropdown.background': '#35393D',
+ 'kt.selectDropdown.background': '#222830',
'kt.selectDropdown.foreground': '#D7DBDE',
'kt.selectDropdown.hoverBackground': '#ffffff14',
'kt.selectDropdown.selectionBackground': '#ffffff14',
@@ -756,7 +757,7 @@ export default {
'statusBarItem.activeBackground': '#FFFFFF40',
'statusBarItem.hoverBackground': '#FFFFFF03',
'statusBarItem.remoteBackground': '#6329B4',
- 'tab.activeBackground': '#ffffff0f',
+ 'tab.activeBackground': '#151b21',
'tab.activeForeground': '#FFFFFF',
'tab.border': '#e9e9e914',
'tab.inactiveBackground': '#00000000',
@@ -782,6 +783,7 @@ export default {
'editor.background': '#00000026',
'quickInput.background': '#222830',
'list.focusBackground': '#ffffff1f',
+ 'textLink.foreground': '#3c8dff',
},
semanticHighlighting: true,
semanticTokenColors: {
diff --git a/packages/design/src/browser/theme/light-theme.ts b/packages/design/src/browser/theme/light-theme.ts
index 3dc8c3507c..90631b41e0 100644
--- a/packages/design/src/browser/theme/light-theme.ts
+++ b/packages/design/src/browser/theme/light-theme.ts
@@ -583,9 +583,10 @@ export default {
'inputValidation.errorBorder': '#D21F28',
'inputValidation.errorForeground': '#D7DBDE',
'inputValidation.errorText': '#D21F28',
- 'inputValidation.warningBackground': '#332510',
+ 'inputValidation.warningBackground': '#fff',
'inputValidation.warningBorder': '#DBA936',
'inputValidation.warningText': '#DBA936',
+ 'inputValidation.warningForeground': '#151b21',
'keybinding.background': '#5F656B33',
'kt.accentForeground': '#FFFFFF',
'kt.actionbar.disableForeground': '#5F656B',
@@ -776,7 +777,7 @@ export default {
'statusBarItem.activeBackground': '#FFFFFF40',
'statusBarItem.hoverBackground': '#FFFFFF03',
'statusBarItem.remoteBackground': '#6329B4',
- 'tab.activeBackground': '#ffffff0f',
+ 'tab.activeBackground': '#ffffff',
'tab.activeForeground': '#151b21',
'tab.border': '#e9e9e914',
'tab.inactiveBackground': '#00000000',
@@ -802,6 +803,7 @@ export default {
'editor.background': '#F1F2F3',
'quickInput.background': '#fff',
'list.focusBackground': '#151b5814',
+ 'textLink.foreground': '#3c8dff',
},
semanticHighlighting: true,
semanticTokenColors: {
diff --git a/packages/editor/src/browser/editor.module.less b/packages/editor/src/browser/editor.module.less
index 300d5d0d00..44c1d58758 100644
--- a/packages/editor/src/browser/editor.module.less
+++ b/packages/editor/src/browser/editor.module.less
@@ -160,6 +160,9 @@
flex-wrap: wrap;
width: 100%;
background: var(--editorGroupHeader-tabsBackground);
+ &.kt_editor_tabs_current_last {
+ display: flex;
+ }
&::before {
content: '';
height: 1px;
@@ -315,6 +318,15 @@
}
}
}
+ &.kt_editor_tab_current_prev {
+ display: flex;
+ }
+ &.kt_editor_tab_current_next {
+ display: flex;
+ }
+ &.kt_editor_tab_dirty {
+ display: flex;
+ }
&.kt_on_drag_over {
background-color: var(--editorGroup-dropBackground);
}
diff --git a/packages/editor/src/browser/tab.view.tsx b/packages/editor/src/browser/tab.view.tsx
index 5bf59c1d30..0a30509e23 100644
--- a/packages/editor/src/browser/tab.view.tsx
+++ b/packages/editor/src/browser/tab.view.tsx
@@ -76,7 +76,10 @@ export const Tabs = ({ group }: ITabsProps) => {
const styles_close_tab = useDesignStyles(styles.close_tab);
const styles_kt_editor_close_icon = useDesignStyles(styles.kt_editor_close_icon);
const styles_kt_editor_tabs_content = useDesignStyles(styles.kt_editor_tabs_content);
+ const styles_kt_editor_tabs_current_last = useDesignStyles(styles.kt_editor_tabs_current_last);
const styles_kt_editor_tab = useDesignStyles(styles.kt_editor_tab);
+ const styles_kt_editor_tab_current_prev = useDesignStyles(styles.kt_editor_tab_current_prev);
+ const styles_kt_editor_tab_current_next = useDesignStyles(styles.kt_editor_tab_current_next);
const styles_kt_editor_tab_current = useDesignStyles(styles.kt_editor_tab_current);
const styles_kt_editor_tab_dirty = useDesignStyles(styles.kt_editor_tab_dirty);
const styles_kt_editor_tabs = useDesignStyles(styles.kt_editor_tabs);
@@ -372,81 +375,94 @@ export const Tabs = ({ group }: ITabsProps) => {
[editorTabService],
);
- const renderTabContent = () => (
-
- {group.resources.map((resource, i) => {
- let ref: HTMLDivElement | null;
- const decoration = resourceService.getResourceDecoration(resource.uri);
- return (
-
{
- tabTitleMenuService.show(event.nativeEvent.x, event.nativeEvent.y, resource && resource.uri, group);
- event.preventDefault();
- }}
- key={resource.uri.toString()}
- onMouseUp={(e) => {
- if (e.nativeEvent.which === 2) {
+ const renderTabContent = () => {
+ const curTabIndex = group.resources.findIndex((resource) => group.currentResource === resource);
+ return (
+
+ {group.resources.map((resource, i) => {
+ let ref: HTMLDivElement | null;
+ const decoration = resourceService.getResourceDecoration(resource.uri);
+ return (
+
{
+ tabTitleMenuService.show(event.nativeEvent.x, event.nativeEvent.y, resource && resource.uri, group);
+ event.preventDefault();
+ }}
+ key={resource.uri.toString()}
+ onMouseUp={(e) => {
+ if (e.nativeEvent.which === 2) {
+ e.preventDefault();
+ e.stopPropagation();
+ group.close(resource.uri);
+ }
+ }}
+ onMouseDown={(e) => {
+ if (e.nativeEvent.which === 1) {
+ group.open(resource.uri, { focus: true });
+ }
+ }}
+ data-uri={resource.uri.toString()}
+ onDragOver={(e) => {
e.preventDefault();
e.stopPropagation();
- group.close(resource.uri);
- }
- }}
- onMouseDown={(e) => {
- if (e.nativeEvent.which === 1) {
- group.open(resource.uri, { focus: true });
- }
- }}
- data-uri={resource.uri.toString()}
- onDragOver={(e) => {
- e.preventDefault();
- e.stopPropagation();
- if (ref) {
- ref.classList.add(styles.kt_on_drag_over);
- }
- }}
- onDragLeave={(e) => {
- if (ref) {
- ref.classList.remove(styles.kt_on_drag_over);
- }
- }}
- onDrop={(e) => {
- if (ref) {
- ref.classList.remove(styles.kt_on_drag_over);
- }
- if (onDrop) {
- onDrop(e, i, resource);
- }
- }}
- onDoubleClick={(e) => {
- group.pinPreviewed(resource.uri);
- }}
- ref={(el) => (ref = el)}
- onDragStart={(e) => {
- e.dataTransfer.setData('uri', resource.uri.toString());
- e.dataTransfer.setData('uri-source-group', group.name);
- }}
- >
- {renderEditorTab(resource, group.currentResource === resource)}
-
- );
- })}
- {wrapMode &&
}
-
- );
+ if (ref) {
+ ref.classList.add(styles.kt_on_drag_over);
+ }
+ }}
+ onDragLeave={(e) => {
+ if (ref) {
+ ref.classList.remove(styles.kt_on_drag_over);
+ }
+ }}
+ onDrop={(e) => {
+ if (ref) {
+ ref.classList.remove(styles.kt_on_drag_over);
+ }
+ if (onDrop) {
+ onDrop(e, i, resource);
+ }
+ }}
+ onDoubleClick={(e) => {
+ group.pinPreviewed(resource.uri);
+ }}
+ ref={(el) => (ref = el)}
+ onDragStart={(e) => {
+ e.dataTransfer.setData('uri', resource.uri.toString());
+ e.dataTransfer.setData('uri-source-group', group.name);
+ }}
+ >
+ {renderEditorTab(resource, group.currentResource === resource)}
+
+ );
+ })}
+ {wrapMode && (
+
+ )}
+
diff --git a/packages/main-layout/src/browser/accordion/section.view.tsx b/packages/main-layout/src/browser/accordion/section.view.tsx
index a12431c8f0..2da9159228 100644
--- a/packages/main-layout/src/browser/accordion/section.view.tsx
+++ b/packages/main-layout/src/browser/accordion/section.view.tsx
@@ -71,6 +71,8 @@ export const AccordionSection = ({
const styles_actions_wrap = useDesignStyles(styles.actions_wrap);
const styles_kt_split_panel = useDesignStyles(styles.kt_split_panel);
const styles_kt_split_panel_header = useDesignStyles(styles.kt_split_panel_header);
+ const styles_kt_split_panel_body = useDesignStyles(styles.kt_split_panel_body);
+ const styles_section_badge = useDesignStyles(styles.section_badge);
const contentRef = React.useRef(null);
const [metadata, setMetadata] = React.useState({
@@ -161,7 +163,7 @@ export const AccordionSection = ({
{transformLabelWithCodicon(metadata.description, {}, iconService.fromString.bind(iconService))}
)}
- {metadata.badge && {metadata.badge}
}
+ {metadata.badge && {metadata.badge}
}
{expanded && titleMenu && (
@@ -175,7 +177,7 @@ export const AccordionSection = ({
)}
diff --git a/packages/scm/src/browser/components/scm-resource-input.tsx b/packages/scm/src/browser/components/scm-resource-input.tsx
index e66035e35d..9b915cd8c2 100644
--- a/packages/scm/src/browser/components/scm-resource-input.tsx
+++ b/packages/scm/src/browser/components/scm-resource-input.tsx
@@ -1,7 +1,7 @@
import React, { FC, useCallback, useEffect, useState } from 'react';
import { IInputBaseProps } from '@opensumi/ide-components';
-import { DisposableStore, isMacintosh, strings, useInjectable } from '@opensumi/ide-core-browser';
+import { DisposableStore, isMacintosh, strings, useDesignStyles, useInjectable } from '@opensumi/ide-core-browser';
import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
import { IContextMenu } from '@opensumi/ide-core-browser/lib/menu/next';
import { useHotKey } from '@opensumi/ide-core-browser/lib/react-hooks/hot-key';
@@ -27,6 +27,7 @@ export const SCMResourceInput: FC<{
}> = ({ repository, menus }) => {
const commandService = useInjectable(CommandService);
const iconService = useInjectable(IIconService);
+ const styles_scmMenu = useDesignStyles(styles.scmMenu);
const [commitMsg, setCommitMsg] = useState('');
const [placeholder, setPlaceholder] = useState('');
@@ -138,7 +139,7 @@ export const SCMResourceInput: FC<{
{hasInputMenus && (
- className={styles.scmMenu}
+ className={styles_scmMenu}
context={[repository.provider, commitMsg]}
type='button'
moreIcon='down'
diff --git a/packages/theme/src/common/color-tokens/design.ts b/packages/theme/src/common/color-tokens/design.ts
index f7b6d3c288..bcd4f982fa 100644
--- a/packages/theme/src/common/color-tokens/design.ts
+++ b/packages/theme/src/common/color-tokens/design.ts
@@ -213,7 +213,7 @@ export const designRceBackground = registerColor(
export const designCharInputBackground = registerColor(
'design.charinput.background',
- { dark: new Color(new RGBA(255, 255, 255, 0.08)), light: '#fff', hcDark: null, hcLight: null },
+ { dark: new Color(new RGBA(0, 0, 0, 0.25)), light: '#fff', hcDark: null, hcLight: null },
'',
true,
);