Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improve editor actions #234

Merged
merged 4 commits into from
Jul 15, 2021
Merged

fix: improve editor actions #234

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
203472d
refactor: rename update actions and create a new update actions function
mortalYoung Jul 13, 2021
a225911
fix: improve editor actions
mortalYoung Jul 13, 2021
0f6058a
fix: improve interface name
mortalYoung Jul 15, 2021
d67e205
fix: rename ellipsisActions
mortalYoung Jul 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: improve editor actions
  • Loading branch information
@mortalYoung
mortalYoung committed Jul 15, 2021
commit a225911fa74e4880988abd13568f900b0f30b15d
30 changes: 26 additions & 4 deletions src/controller/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import {
EDITOR_MENU_CLOSE_TO_RIGHT,
EDITOR_MENU_CLOSE_TO_LEFT,
EDITOR_MENU_CLOSE_ALL,
EditorActionsProps,
EDITOR_MENU_SHOW_OPENEDITORS,
EDITOR_MENU_SPILIT,
} from 'mo/model/workbench/editor';
import { undoRedoMenu } from 'mo/model/workbench/menuBar';
import { Controller } from 'mo/react/controller';
Expand Down Expand Up @@ -47,7 +50,7 @@ export interface IEditorController {
) => void;
onMoveTab?: <T = any>(updateTabs: IEditorTab<T>[], group: number) => void;
onSelectTab?: (tabId: string, group: number) => void;
onSplitEditorRight?: () => void;
onClickActions: (action: EditorActionsProps) => void;
onUpdateEditorIns?: (editorInstance: any, groupId: number) => void;
onPaneSizeChange?: (newSize: number) => void;
}
Expand Down Expand Up @@ -190,9 +193,28 @@ export class EditorController extends Controller implements IEditorController {
});
};

public onSplitEditorRight = () => {
this.editorService.cloneGroup();
this.emit(EditorEvent.OnSplitEditorRight);
public onClickActions = (action: EditorActionsProps) => {
const { current } = this.editorService.getState();
if (!current) return;

switch (action.id) {
case EDITOR_MENU_CLOSE_ALL: {
this.onCloseAll(current.id!);
break;
}
case EDITOR_MENU_SHOW_OPENEDITORS: {
// TODO
break;
}
case EDITOR_MENU_SPILIT: {
this.editorService.cloneGroup();
this.emit(EditorEvent.OnSplitEditorRight);
break;
}
default: {
this.emit(EditorEvent.onActionsClick, action.id, current);
}
}
};

public onPaneSizeChange = (newSize) => {
Expand Down
1 change: 1 addition & 0 deletions src/extensions/theme-defaults/themes/dark_defaults.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"inputValidation.warningBorder": "#B89500",
"inputValidation.errorBackground": "#5A1D1D",
"inputValidation.errorBorder": "#BE1100",
"icon.foreground": "#C5C5C5",
"settings.textInputBackground": "#292929",
"settings.numberInputBackground": "#292929",
"menu.background": "#252526",
Expand Down
1 change: 1 addition & 0 deletions src/extensions/theme-defaults/themes/light_defaults.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"inputValidation.warningBorder": "#B89500",
"inputValidation.errorBackground": "#F2DEDE",
"inputValidation.errorBorder": "#BE1100",
"icon.foreground": "#424242",
"searchEditor.textInputBorder": "#CECECE",
"diffEditor.insertedTextBackground": "#9bb95533",
"diffEditor.removedTextBackground": "#ff000033",
Expand Down
25 changes: 20 additions & 5 deletions src/model/workbench/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,19 @@ interface BuiltInEditorTabDataType {
modified?: boolean;
}

export interface EditorActionsProps extends IMenuItemProps {
mortalYoung marked this conversation as resolved.
Show resolved Hide resolved
id: string;
/**
* Mark the action placed in More menus or outer
*/
place?: 'outer';
}

export interface IEditorTab<T = BuiltInEditorTabDataType> extends ITabProps<T> {
breadcrumb?: IBreadcrumbItemProps[];
}
export interface IEditorAction {
actions?: IMenuItemProps[];
actions?: EditorActionsProps[];
menu?: IMenuItemProps[];
}
export interface IEditorGroup<E = any, T = any> extends ITabsProps<T> {
Expand All @@ -37,7 +45,7 @@ export interface IEditorGroup<E = any, T = any> extends ITabsProps<T> {
* Current editor group tab
*/
tab?: IEditorTab<T>;
actions?: IMenuItemProps[];
actions?: EditorActionsProps[];
menu?: IMenuItemProps[];
editorInstance?: E;
}
Expand All @@ -57,6 +65,7 @@ export const EDITOR_MENU_CLOSE_OTHERS = 'editor.closeOthers';
export const EDITOR_MENU_CLOSE_SAVED = 'editor.closeSaved';
export const EDITOR_MENU_CLOSE = 'editor.close';
export const EDITOR_MENU_SHOW_OPENEDITORS = 'editor.showOpenEditors';
export const EDITOR_MENU_SPILIT = 'editor.split';

export function getBaseMenu() {
return [
Expand All @@ -67,8 +76,14 @@ export function getBaseMenu() {
];
}

export function getEditorInitialActions(): IMenuItemProps[] {
export function getEditorInitialActions(): EditorActionsProps[] {
return [
{
id: EDITOR_MENU_SPILIT,
name: 'Split Editor Right',
icon: 'split-horizontal',
place: 'outer',
},
{
id: EDITOR_MENU_SHOW_OPENEDITORS,
name: 'Show Opened Editors',
Expand Down Expand Up @@ -103,15 +118,15 @@ export class EditorGroupModel<E = any, T = any> implements IEditorGroup<E, T> {
id: number;
tab: IEditorTab<T>;
data: IEditorTab<T>[];
actions: IMenuItemProps[];
actions: EditorActionsProps[];
menu: IMenuItemProps[];
editorInstance: E | undefined;

constructor(
id: number,
tab: IEditorTab<T>,
data: IEditorTab<T>[],
actions: IMenuItemProps[] = getEditorInitialActions(),
actions: EditorActionsProps[] = getEditorInitialActions(),
menu: IMenuItemProps[] = getEditorInitialMenu(),
editorInstance?: E
) {
Expand Down
110 changes: 73 additions & 37 deletions src/workbench/editor/action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,67 @@
import * as React from 'react';
import { memo, useCallback } from 'react';
import { memo } from 'react';
import { Icon } from 'mo/components/icon';
import { Menu } from 'mo/components/menu';
import { DropDown, DropDownRef } from 'mo/components/dropdown';
import { IEditorAction } from 'mo/model';
import { groupActionsClassName, groupActionsItemClassName } from './base';
import { EditorActionsProps, IEditorAction } from 'mo/model';
import {
groupActionItemDisabledClassName,
groupActionsClassName,
groupActionsItemClassName,
} from './base';
import { IEditorController } from 'mo/controller/editor';
import { classNames } from 'mo/common/className';

export interface IEditorActionProps extends IEditorAction {
isActiveGroup: boolean;
}

const MAX_ACTIONS_LENGTH = 6;

function splitActions(actions: EditorActionsProps[]) {
const outerActions: EditorActionsProps[] = [];
const ellipsisActions: EditorActionsProps[] = [];

actions.forEach((action) => {
if (action.place === 'outer') {
outerActions.push(action);
} else {
ellipsisActions.push(action);
mumiao marked this conversation as resolved.
Show resolved Hide resolved
}
});

if (outerActions.length > MAX_ACTIONS_LENGTH) {
const surplusActions = outerActions.splice(
0,
MAX_ACTIONS_LENGTH - outerActions.length
);

ellipsisActions.concat(surplusActions);
mumiao marked this conversation as resolved.
Show resolved Hide resolved
}

return [outerActions, ellipsisActions];
mumiao marked this conversation as resolved.
Show resolved Hide resolved
}

function EditorAction(props: IEditorActionProps & IEditorController) {
const {
actions = [],
isActiveGroup = false,
onClickContextMenu,
onSplitEditorRight,
} = props;
const { actions = [], isActiveGroup = false, onClickActions } = props;
const [outer, ellipsis] = splitActions(actions);

const childRef = React.useRef<DropDownRef>(null);

const handleOnMenuClick = (e: React.MouseEvent, item) => {
onClickContextMenu?.(e, item);
(childRef.current as any)!.dispose();
const handleOnMenuClick = (_, item) => {
onClickActions(item);
childRef.current?.dispose();
};

const handleActionsClick = (action) => {
onClickActions(action);
};

const overlay =
actions.length > 0 ? (
ellipsis.length > 0 ? (
<Menu
style={{ width: 200 }}
data={actions}
data={ellipsis}
onClick={handleOnMenuClick}
/>
) : (
Expand All @@ -44,33 +75,38 @@ function EditorAction(props: IEditorActionProps & IEditorController) {
</span>
);

const handleSplitEditor = useCallback(
(e: React.MouseEvent) => {
onSplitEditorRight?.();
},
[actions]
);
return (
<div className={groupActionsClassName}>
{isActiveGroup ? (
<div
onClick={handleSplitEditor}
{isActiveGroup &&
outer.map((action) => (
<div
key={action.id}
onClick={() => handleActionsClick(action)}
className={classNames(
groupActionsItemClassName,
action.disabled && groupActionItemDisabledClassName
)}
title={action.name?.toString()}
wewoor marked this conversation as resolved.
Show resolved Hide resolved
>
{action.icon ? (
<Icon type={action.icon} />
) : (
action.name
)}
</div>
))}
{Boolean(ellipsis.length) && (
<DropDown
ref={childRef}
placement="bottom"
className={groupActionsItemClassName}
title="Split Editor Right"
trigger="click"
title="More Actions..."
overlay={overlay}
>
<Icon type="split-horizontal" />
</div>
) : null}
<DropDown
ref={childRef}
placement="bottom"
className={groupActionsItemClassName}
trigger="click"
title="More Actions..."
overlay={overlay}
>
<Icon type="ellipsis" />
</DropDown>
<Icon type="ellipsis" />
</DropDown>
)}
</div>
);
}
Expand Down
11 changes: 10 additions & 1 deletion src/workbench/editor/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { getBEMElement, prefixClaName } from 'mo/common/className';
import {
getBEMElement,
getBEMModifier,
prefixClaName,
} from 'mo/common/className';

export const defaultEditorClassName = prefixClaName('editor');
export const groupClassName = getBEMElement(defaultEditorClassName, 'group');
Expand All @@ -23,6 +27,11 @@ export const groupActionsItemClassName = getBEMElement(
'group-actions-item'
);

export const groupActionItemDisabledClassName = getBEMModifier(
groupActionsItemClassName,
'disabled'
);

export const groupBreadcrumbClassName = getBEMElement(
defaultEditorClassName,
'group-breadcrumb'
Expand Down
4 changes: 2 additions & 2 deletions src/workbench/editor/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function Editor(props: IEditor & IEditorController) {
onSelectTab,
groupSplitPos = [],
onChangeEditorProps,
onSplitEditorRight,
onClickActions,
onUpdateEditorIns,
onPaneSizeChange,
} = props;
Expand All @@ -30,7 +30,7 @@ export function Editor(props: IEditor & IEditorController) {
onMoveTab: (tabs) => onMoveTab?.(tabs, groupId),
onCloseTab: (tabKey) => onCloseTab?.(tabKey, groupId),
onSelectTab: (tabKey) => onSelectTab?.(tabKey, groupId),
onSplitEditorRight,
onClickActions,
onUpdateEditorIns,
onChangeEditorProps,
onClickContextMenu,
Expand Down
5 changes: 2 additions & 3 deletions src/workbench/editor/group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function EditorGroup(props: IEditorGroupProps & IEditorController) {
onClickContextMenu,
onChangeEditorProps,
onSelectTab,
onSplitEditorRight,
onClickActions,
onUpdateEditorIns,
} = props;

Expand Down Expand Up @@ -79,8 +79,7 @@ export function EditorGroup(props: IEditorGroupProps & IEditorController) {
isActiveGroup={isActiveGroup}
actions={actions}
menu={menu}
onSplitEditorRight={onSplitEditorRight}
onClickContextMenu={onClickContextMenu}
onClickActions={onClickActions}
/>
</div>
<EditorBreadcrumb breadcrumbs={tab.breadcrumb} />
Expand Down
10 changes: 10 additions & 0 deletions src/workbench/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,21 @@

&-item {
align-items: center;
color: var(--icon-foreground);
cursor: pointer;
display: flex;
height: 35px;
justify-content: center;
padding: 0 8px 0 4px;

&:not(#{$editor}__group-actions-item--disabled):hover {
color: var(--activityBar-activeBorder);
}

&--disabled {
cursor: default;
opacity: 0.4;
}
}
}

Expand Down