Skip to content

Commit

Permalink
fix: design module styles (#3569)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ricbet
Ricbet authored Apr 22, 2024
1 parent ab51474 commit 340989b
Show file tree
Hide file tree
Showing 32 changed files with 102 additions and 94 deletions.
2 changes: 1 addition & 1 deletion packages/comments/src/browser/tree/comment-node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const CommentNodeRendered: React.FC<ICommentNodeRenderedProps> = ({
onClick,
onTwistierClick,
}: ICommentNodeRenderedProps) => {
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');
const handleClick = useCallback(
(ev: React.MouseEvent) => {
if (item.onSelect) {
Expand Down
8 changes: 4 additions & 4 deletions packages/core-browser/src/components/actions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const EllipsisWidget: React.FC<{
onClick?: React.MouseEventHandler<HTMLElement>;
title?: string;
}> = ({ type, icon, disabled, onClick, title }) => {
const styles_btnAction = useDesignStyles(styles.btnAction);
const styles_btnAction = useDesignStyles(styles.btnAction, 'btnAction');
if (type === 'icon') {
return (
<Button
Expand Down Expand Up @@ -229,8 +229,8 @@ const InlineActionWidget: React.FC<
iconService?: IMenubarIconService;
} & React.HTMLAttributes<HTMLElement>
> = React.memo(({ iconService, type = 'icon', data, context = [], className, afterClick, ...restProps }) => {
const styles_iconAction = useDesignStyles(styles.iconAction);
const styles_btnAction = useDesignStyles(styles.btnAction);
const styles_iconAction = useDesignStyles(styles.iconAction, 'iconAction');
const styles_btnAction = useDesignStyles(styles.btnAction, 'btnAction');
const [loading, setLoading] = useState(false);
const handleClick = React.useCallback(
async (event?: React.MouseEvent<HTMLElement>, ...extraArgs: any[]) => {
Expand Down Expand Up @@ -408,7 +408,7 @@ export const TitleActionList: React.FC<
}) => {
const ctxMenuRenderer = useInjectable<ICtxMenuRenderer>(ICtxMenuRenderer);
const abstractMenuService = useInjectable<AbstractMenuService>(AbstractMenuService);
const styles_titleActions = useDesignStyles(styles.titleActions);
const styles_titleActions = useDesignStyles(styles.titleActions, 'titleActions');
const [primary, secondary] = regroup(nav, more);
const handleShowMore = React.useCallback(
(e: React.MouseEvent<HTMLElement>) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/core-browser/src/components/layout/box-panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const BoxPanel: React.FC<{
// convert children to list
const arrayChildren = React.Children.toArray(children) as ChildComponent[];
const appConfig = useInjectable<AppConfig>(AppConfig);
const styles_box_panel = useDesignStyles(styles['box-panel']);
const styles_box_panel = useDesignStyles(styles['box-panel'], 'box-panel');

return (
<div
Expand Down
11 changes: 2 additions & 9 deletions packages/core-browser/src/design/design.style.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class DesignStyleService implements IDesignStyleService {
this._styles = model;
}

wrapStyles(styles?: string): string {
wrapStyles(styles: string, key: string): string {
if (!this._styles) {
return styles || '';
}
Expand All @@ -27,13 +27,6 @@ export class DesignStyleService implements IDesignStyleService {
return '';
}

let _cls = styles.replace(/___\w{5}/, '');

// Styles of the design module need to add a 'design' prefix
if (!_cls.startsWith(prefix)) {
_cls = prefix + _cls;
}

return cls(styles, this._styles[_cls]);
return cls(styles, this._styles[prefix + key]);
}
}
2 changes: 1 addition & 1 deletion packages/core-browser/src/design/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ export type TDesignStyles = { [key in string]: string };
export interface IDesignStyleService {
styles: TDesignStyles;
setStyles(model: TDesignStyles): void;
wrapStyles(style?: string): string;
wrapStyles(style: string, key: string): string;
}
4 changes: 2 additions & 2 deletions packages/core-browser/src/utils/react-hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,14 @@ export function usePreference<T>(key: string, defaultValue: T) {
return value;
}

export function useDesignStyles(styles: string) {
export function useDesignStyles(styles: string, key: string) {
const designStyleService = useInjectable<IDesignStyleService>(IDesignStyleService);

if (!styles) {
return '';
}

const designStyle = useMemo(() => designStyleService.wrapStyles(styles), [designStyleService, styles]);
const designStyle = useMemo(() => designStyleService.wrapStyles(styles, key), [designStyleService, styles, key]);

return designStyle;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/debug/src/browser/view/configuration/debug-toolbar.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const FloatDebugToolbarView = observer(() => {
const preference = useInjectable<PreferenceService>(PreferenceService);
const { isElectronRenderer, layoutViewSize } = useInjectable<AppConfig>(AppConfig);
const debugToolbarService = useInjectable<DebugToolbarService>(DebugToolbarService);
const styles_debug_toolbar_wrapper = useDesignStyles(styles.debug_toolbar_wrapper);
const styles_debug_toolbar_wrapper = useDesignStyles(styles.debug_toolbar_wrapper, 'debug_toolbar_wrapper');
const [toolbarOffsetTop, setToolbarOffsetTop] = useState<number>(0);
const { state } = debugToolbarService;

Expand Down
4 changes: 2 additions & 2 deletions packages/debug/src/browser/view/console/debug-console-filter.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export const DebugConsoleFilterView = observer(() => {
const debugConsoleFilterService = useInjectable<DebugConsoleFilterService>(DebugConsoleFilterService);
const [filterValue, setFilterValue] = React.useState<string>('');
const [historyApi, setHistoryApi] = React.useState<IHistoryInputBoxHandler>();
const styles_debug_console_filter = useDesignStyles(styles.debug_console_filter);
const styles_filter_input = useDesignStyles(styles.filter_input);
const styles_debug_console_filter = useDesignStyles(styles.debug_console_filter, 'debug_console_filter');
const styles_filter_input = useDesignStyles(styles.filter_input, 'filter_input');

const onDebounceValueChange = debounce((value: string) => {
setFilterValue(value);
Expand Down
6 changes: 3 additions & 3 deletions packages/debug/src/browser/view/console/debug-console.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export const DebugConsoleView = observer(({ viewState }: { viewState: ViewState
const wrapperRef = React.useRef<HTMLDivElement | null>(null);
const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);

const styles_debug_console_output = useDesignStyles(styles.debug_console_output);
const styles_variable_repl_bar = useDesignStyles(styles.variable_repl_bar);
const styles_debug_console_output = useDesignStyles(styles.debug_console_output, 'debug_console_output');
const styles_variable_repl_bar = useDesignStyles(styles.variable_repl_bar, 'variable_repl_bar');

React.useEffect(() => {
if (debugInputRef && debugInputRef.current) {
Expand Down Expand Up @@ -267,7 +267,7 @@ export const DebugConsoleRenderedNode: React.FC<IDebugConsoleNodeRenderedProps>
const linkDetector: LinkDetector = useInjectable<LinkDetector>(LinkDetector);
const [computedStyle, setComputedStyle] = React.useState<string>();

const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');

React.useEffect(() => {
const computed = window.getComputedStyle(
Expand Down
2 changes: 1 addition & 1 deletion packages/debug/src/browser/view/variables/debug-variables.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export const DebugVariableRenderedNode: React.FC<IDebugVariableNodeRenderedProps
onContextMenu,
itemType,
}: IDebugVariableNodeRenderedProps) => {
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');

const handleClick = (ev: React.MouseEvent) => {
onClick(ev, item, CompositeTreeNode.is(item) ? TreeNodeType.CompositeTreeNode : TreeNodeType.TreeNode);
Expand Down
2 changes: 1 addition & 1 deletion packages/debug/src/browser/view/watch/debug-watch.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export const DebugWatchRenderedNode: React.FC<IDebugWatchNodeRenderedProps> = ({
onContextMenu,
itemType,
}: IDebugWatchNodeRenderedProps) => {
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');

const isRenamePrompt = itemType === TreeNodeType.RenamePrompt;
const isNewPrompt = itemType === TreeNodeType.NewPrompt;
Expand Down
6 changes: 3 additions & 3 deletions packages/editor/src/browser/editor.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const EditorView = () => {
const rightWidgetInfo = componentRegistry.getComponentRegistryInfo('editor-widget-right');
const RightWidget: React.ComponentType<any> | undefined = rightWidgetInfo && rightWidgetInfo.views[0].component;
const [ready, setReady] = React.useState<boolean>(workbenchEditorService.gridReady);
const styles_kt_workbench_editor = useDesignStyles(styles.kt_workbench_editor);
const styles_kt_workbench_editor = useDesignStyles(styles.kt_workbench_editor, 'kt_workbench_editor');

React.useEffect(() => {
if (!ready) {
Expand Down Expand Up @@ -240,7 +240,7 @@ export const EditorGroupView = observer(({ group }: { group: EditorGroup }) => {

const preferenceService = useInjectable(PreferenceService) as PreferenceService;
const [isEmpty, setIsEmpty] = React.useState(group.resources.length === 0);
const styles_kt_editor_group = useDesignStyles(styles.kt_editor_group);
const styles_kt_editor_group = useDesignStyles(styles.kt_editor_group, 'kt_editor_group');

const appConfig = useInjectable(AppConfig);
const { editorBackgroundImage } = appConfig;
Expand Down Expand Up @@ -327,7 +327,7 @@ export const EditorGroupBody = observer(({ group }: { group: EditorGroup }) => {
const editorBodyRef = React.useRef<HTMLDivElement>(null);
const editorService = useInjectable(WorkbenchEditorService) as WorkbenchEditorServiceImpl;
const eventBus = useInjectable(IEventBus) as IEventBus;
const styles_kt_editor_component = useDesignStyles(styles.kt_editor_component);
const styles_kt_editor_component = useDesignStyles(styles.kt_editor_component, 'kt_editor_component');
const components: React.ReactNode[] = [];
const codeEditorRef = React.useRef<HTMLDivElement>(null);
const diffEditorRef = React.useRef<HTMLDivElement>(null);
Expand Down
10 changes: 5 additions & 5 deletions packages/editor/src/browser/navigation.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ import { EditorGroup } from './workbench-editor.service';

export const NavigationBar = ({ editorGroup }: { editorGroup: EditorGroup }) => {
const breadCrumbService = useInjectable<IBreadCrumbService>(IBreadCrumbService);
const styles_navigation_container = useDesignStyles(styles.navigation_container);
const styles_navigation_icon = useDesignStyles(styles.navigation_icon);
const styles_navigation_container = useDesignStyles(styles.navigation_container, 'navigation_container');
const styles_navigation_icon = useDesignStyles(styles.navigation_icon, 'navigation_icon');

useUpdateOnGroupTabChange(editorGroup);

Expand Down Expand Up @@ -74,7 +74,7 @@ export const NavigationItem = memo(({ part, editorGroup }: { part: IBreadCrumbPa
const viewService = useInjectable<NavigationBarViewService>(NavigationBarViewService);
const breadcrumbsMenuService = useInjectable<BreadCrumbsMenuService>(BreadCrumbsMenuService);
const itemRef = useRef<HTMLSpanElement>();
const styles_navigation_part = useDesignStyles(styles['navigation-part']);
const styles_navigation_part = useDesignStyles(styles['navigation-part'], 'navigation-part');

const onClick = useCallback(async () => {
if (part.getSiblings && itemRef.current) {
Expand Down Expand Up @@ -117,8 +117,8 @@ export const NavigationMenu = observer(({ model }: { model: NavigationMenuModel
}

const scrollerContainer = useRef<HTMLDivElement | null>();
const styles_navigation_menu = useDesignStyles(styles.navigation_menu);
const styles_navigation_menu_item = useDesignStyles(styles.navigation_menu_item);
const styles_navigation_menu = useDesignStyles(styles.navigation_menu, 'navigation_menu');
const styles_navigation_menu_item = useDesignStyles(styles.navigation_menu_item, 'navigation_menu_item');
const viewService = useInjectable(NavigationBarViewService) as NavigationBarViewService;

const scrollToCurrent = useCallback(() => {
Expand Down
38 changes: 25 additions & 13 deletions packages/editor/src/browser/tab.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,30 @@ export const Tabs = ({ group }: ITabsProps) => {
const editorTabService = useInjectable<IEditorTabService>(IEditorTabService);
const appConfig = useInjectable<AppConfig>(AppConfig);

const styles_tab_right = useDesignStyles(styles.tab_right);
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);
const styles_kt_editor_tabs_scroll_wrapper = useDesignStyles(styles.kt_editor_tabs_scroll_wrapper);
const styles_tab_right = useDesignStyles(styles.tab_right, 'tab_right');
const styles_close_tab = useDesignStyles(styles.close_tab, 'close_tab');
const styles_kt_editor_close_icon = useDesignStyles(styles.kt_editor_close_icon, 'kt_editor_close_icon');
const styles_kt_editor_tabs_content = useDesignStyles(styles.kt_editor_tabs_content, 'kt_editor_tabs_content');
const styles_kt_editor_tabs_current_last = useDesignStyles(
styles.kt_editor_tabs_current_last,
'kt_editor_tabs_current_last',
);
const styles_kt_editor_tab = useDesignStyles(styles.kt_editor_tab, 'kt_editor_tab');
const styles_kt_editor_tab_current_prev = useDesignStyles(
styles.kt_editor_tab_current_prev,
'kt_editor_tab_current_prev',
);
const styles_kt_editor_tab_current_next = useDesignStyles(
styles.kt_editor_tab_current_next,
'kt_editor_tab_current_next',
);
const styles_kt_editor_tab_current = useDesignStyles(styles.kt_editor_tab_current, 'kt_editor_tab_current');
const styles_kt_editor_tab_dirty = useDesignStyles(styles.kt_editor_tab_dirty, 'kt_editor_tab_dirty');
const styles_kt_editor_tabs = useDesignStyles(styles.kt_editor_tabs, 'kt_editor_tabs');
const styles_kt_editor_tabs_scroll_wrapper = useDesignStyles(
styles.kt_editor_tabs_scroll_wrapper,
'kt_editor_tabs_scroll_wrapper',
);

const [tabsLoadingMap, setTabsLoadingMap] = useState<{ [resource: string]: boolean }>({});
const [wrapMode, setWrapMode] = useState<boolean>(!!preferenceService.get<boolean>('editor.wrapTab'));
Expand Down Expand Up @@ -500,7 +512,7 @@ export type IEditorActionsProps = IEditorActionsBaseProps & HTMLAttributes<HTMLD

export const EditorActions = forwardRef<HTMLDivElement, IEditorActionsProps>(
(props: IEditorActionsProps, ref: Ref<typeof EditorActions>) => {
const styles_editor_actions = useDesignStyles(styles.editor_actions);
const styles_editor_actions = useDesignStyles(styles.editor_actions, 'editor_actions');
const { group, className } = props;

const acquireArgs = useCallback(
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-manager/src/browser/extension/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ interface IExtensionViewProps {

export const Extension = React.memo(
({ extension: extension, onInstall, onClick, type, installedExtensions, openVSXRegistry }: IExtensionViewProps) => {
const styles_extension_item = useDesignStyles(styles.extension_item);
const styles_extension_item = useDesignStyles(styles.extension_item, 'extension_item');
const [installing, setInstalling] = useState<boolean>();
const installedExtension = installedExtensions?.find(
(installed) => installed.namespace === extension.namespace && installed.name === extension.name,
Expand Down
4 changes: 2 additions & 2 deletions packages/extension/src/browser/components/extension-tree-view-node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export const TreeViewNode: FC<TreeViewNodeRenderedProps> = ({
onDrop,
}: TreeViewNodeRenderedProps) => {
const iconService = useInjectable<IIconService>(IIconService);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_tree_view_node = useDesignStyles(styles.tree_view_node);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');
const styles_tree_view_node = useDesignStyles(styles.tree_view_node, 'tree_view_node');
const [decoration, setDecoration] = useState(item.uri && decorationService.getDecoration(item.uri, false));

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/file-tree-next/src/browser/dialog/file-dialog-node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export const FileTreeDialogNode: React.FC<FileTreeDialogNodeRenderedProps> = ({
const isNewPrompt = itemType === TreeNodeType.NewPrompt;
const isPrompt = isRenamePrompt || isNewPrompt;

const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_file_tree_node = useDesignStyles(styles.file_tree_node);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');
const styles_file_tree_node = useDesignStyles(styles.file_tree_node, 'file_tree_node');

const handleClick = (ev: React.MouseEvent) => {
if (itemType === TreeNodeType.TreeNode || itemType === TreeNodeType.CompositeTreeNode) {
Expand Down
4 changes: 2 additions & 2 deletions packages/file-tree-next/src/browser/file-tree-node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ export const FileTreeNode: React.FC<FileTreeNodeRenderedProps> = ({
const isPrompt = isRenamePrompt || isNewPrompt;
const isCompactName = !isPrompt && item.name.indexOf(Path.separator) >= 0;

const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle);
const styles_file_tree_node = useDesignStyles(styles.file_tree_node);
const styles_expansion_toggle = useDesignStyles(styles.expansion_toggle, 'expansion_toggle');
const styles_file_tree_node = useDesignStyles(styles.file_tree_node, 'file_tree_node');

const decoration = isPrompt ? null : decorationService.getDecoration(item.uri, Directory.is(item));

Expand Down
10 changes: 5 additions & 5 deletions packages/main-layout/src/browser/accordion/section.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ export const AccordionSection = ({
alignment,
}: CollapsePanelProps) => {
const iconService = useInjectable<IIconService>(IIconService);
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 styles_actions_wrap = useDesignStyles(styles.actions_wrap, 'actions_wrap');
const styles_kt_split_panel = useDesignStyles(styles.kt_split_panel, 'kt_split_panel');
const styles_kt_split_panel_header = useDesignStyles(styles.kt_split_panel_header, 'kt_split_panel_header');
const styles_kt_split_panel_body = useDesignStyles(styles.kt_split_panel_body, 'kt_split_panel_body');
const styles_section_badge = useDesignStyles(styles.section_badge, 'section_badge');
const contentRef = React.useRef<HTMLDivElement | null>(null);

const [metadata, setMetadata] = React.useState({
Expand Down
2 changes: 1 addition & 1 deletion packages/main-layout/src/browser/accordion/titlebar.view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const TitleBar: React.FC<{
menubar?: React.ReactNode;
height?: number;
}> = React.memo((props) => {
const styles_titlebar = useDesignStyles(styles.titlebar);
const styles_titlebar = useDesignStyles(styles.titlebar, 'titlebar');
return (
<div className={styles_titlebar} style={{ height: props.height }}>
<h1>{props.title}</h1>
Expand Down
Loading

1 comment on commit 340989b

@opensumi
Copy link
Contributor

@opensumi opensumi bot commented on 340989b Apr 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Release Candidate Summary:

Released 🚀 2.27.3-rc-1713762805.0

2.27.3-rc-1713762805.0

user input ref: main

340989b fix: design module styles (#3569)

Please sign in to comment.