Skip to content

docs: update customize workbench #705

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

Merged
wewoor merged 2 commits into from
Mar 10, 2022
Merged

docs: update customize workbench #705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8bdb43
docs: update customize workbench
Mar 9, 2022
8becabb
ci: update gh-pages deployment action (#707)
kiwiwong Mar 10, 2022
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
2 changes: 2 additions & 0 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ jobs:
node-version: 14.x
cache: yarn
cache-dependency-path: website/yarn.lock
- name: Install dependencies
run: yarn
- name: Build website
working-directory: website
run: |
Expand Down
2 changes: 2 additions & 0 deletions .github/workflows/test-deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ jobs:
node-version: 14.x
cache: yarn
cache-dependency-path: website/yarn.lock
- name: Install dependencies
run: yarn
- name: Test build
working-directory: website
run: |
Expand Down
185 changes: 90 additions & 95 deletions website/docs/advanced/customize-workbench.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,46 +26,51 @@ At present, the top fixed layout for the **MenuBar** is integrated in Molecule.
First, open the [source code](https://github.com/DTStack/molecule) of Molecule, and find the `src/workbench` directory, then copy the `workbench.tsx` file to the `views` or other directories of your project, and rename it to `myWorkbench.tsx`:

```tsx
<div className={workbenchFinalClassName}>
<Display visible={isMenuBarHorizontal}>
<MenuBarView mode={MenuBarMode.horizontal} />
</Display>
<div className={mainBenchClassName}>
<div className={compositeBarClassName}>
<Display visible={isMenuBarVertical}>
<MenuBarView mode={MenuBarMode.vertical} />
</Display>
<Display
visible={!activityBar.hidden}
className={displayActivityBarClassName}
>
<ActivityBarView />
</Display>
</div>
<SplitPane
split="vertical"
primary="first"
allowResize={true}
onChange={onPaneSizeChange as any}
>
<Pane
minSize="170px"
initialSize={splitPanePos[0]}
maxSize="80%"
className={sidebar.hidden ? 'hidden' : ''}
>
<SidebarView />
</Pane>
<div id={ID_APP} className={appClassName} tabIndex={0}>
<div className={workbenchFinalClassName}>
<Display visible={isMenuBarHorizontal}>
<MenuBarView mode={MenuBarMode.horizontal} />
</Display>
<div className={mainBenchClassName}>
<div className={compositeBarClassName}>
<Display visible={isMenuBarVertical}>
<MenuBarView mode={MenuBarMode.vertical} />
</Display>
<Display
visible={!activityBar.hidden}
className={displayActivityBarClassName}
>
<ActivityBarView />
</Display>
</div>
<SplitPane
primary="first"
split="horizontal"
allowResize={true}
onChange={onHorizontalPaneSizeChange as any}
sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
split="vertical"
allowResize={[false]}
onChange={handleSideBarChanged}
onResizeStrategy={() => ['keep', 'pave']}
>
{getContent(!!panel.panelMaximized, !!panel.hidden)}
<Pane minSize={170} maxSize="80%">
<SidebarView />
</Pane>
<SplitPane
sizes={getSizes()}
allowResize={[false]}
split="horizontal"
onChange={handleEditorChanged}
onResizeStrategy={() => ['pave', 'keep']}
>
<Pane minSize="10%" maxSize="80%">
<EditorView />
</Pane>
<PanelView />
</SplitPane>
</SplitPane>
</SplitPane>
</div>
</div>
<Display visible={!statusBar.hidden}>
<StatusBarView />
</Display>
</div>
```

Expand All @@ -74,80 +79,70 @@ In the code, the `MenuBarView` in `horizontal` mode and `vertical` mode are plac
The specific transformation is as follows:

```tsx title="/src/views/myWorkbench.tsx"
<div className={workbenchClassName}>
{!menuBar.hidden && <MyMenuBarView />}
<div className={mainBenchClassName}>
<div className={compositeBarClassName}>
{!activityBar.hidden && <ActivityBarView />}
</div>
<SplitPane
split="vertical"
primary="first"
allowResize={true}
onChange={onPaneSizeChange as any}
>
<Pane
minSize="170px"
initialSize={splitPanePos[0]}
maxSize="80%"
className={sidebar.hidden && 'hidden'}
>
<SidebarView />
</Pane>
<div
id={ID_APP}
className={classNames(appClassName, 'myMolecule')}
tabIndex={0}
>
<div className={workbenchFinalClassName}>
<Display visible={isMenuBarHorizontal}>
<MenuBarView mode={MenuBarMode.horizontal} />
</Display>
<div className={mainBenchClassName}>
<div className={compositeBarClassName}>
<Display visible={isMenuBarVertical}>
<MenuBarView mode={MenuBarMode.vertical} />
</Display>
<Display
visible={!activityBar.hidden}
className={displayActivityBarClassName}
>
<ActivityBarView />
</Display>
</div>
<SplitPane
primary="first"
split="horizontal"
allowResize={true}
onChange={onHorizontalPaneSizeChange as any}
sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
split="vertical"
allowResize={[false, true]}
onChange={handleSideBarChanged}
onResizeStrategy={() => ['keep', 'pave']}
>
{getContent(!!panel.panelMaximized, !!panel.hidden)}
<Pane minSize={170} maxSize="80%">
<SidebarView />
</Pane>
<SplitPane
sizes={getSizes()}
allowResize={[false, true]}
split="horizontal"
onChange={handleEditorChanged}
onResizeStrategy={() => ['pave', 'keep']}
>
<Pane minSize="10%" maxSize="80%">
<EditorView />
</Pane>
<PanelView />
</SplitPane>
</SplitPane>
<Pane
minSize="40px"
initialSize="240px"
maxSize="40%"
className={'rightSidebar'}
>
<div style={{ width: 300 }}>
<Sidebar current={MySidePane.id} panes={[MySidePane]} />
</Pane>
</SplitPane>
</div>
</div>
</div>
<Display visible={!statusBar.hidden}>
<StatusBarView />
</Display>
</div>
```

:::caution
The above code is only part of the `myWorkbench.tsx` file, the complete code can refer to [molecule-demo](https://github.com/DTStack/molecule-examples/tree/main/packages/molecule-demo/src/views/myWorkbench.tsx).
:::

We removed the MenuBar in the `vertical` mode, and directly rendered the custom `MyMenuBarView` component based on the `menuBar.hidden`. A new panel with a `className` of `rightSidebar` is added to the `SplitPane` component, which uses a built-in `Sidebar` component, and a custom `MySidePane` component is used in this `Sidebar` component.

### Custom MenuBar

In the picture above, the MenuBar contains a custom **Logo** element, and the MenuBar uses a **Horizontal** layout. Like Workbench, we copy the default `menuBar.tsx` component from `src/workbench/menuBar` and rename it to `myMenuBar.tsx`:

```tsx title="/src/views/myMenuBar/index.tsx"
<div className="myMenuBar">
<Logo alt="logo" src="[email protected]" />
<Menu
role="menu"
mode={MenuMode.Horizontal}
trigger="click"
onClick={handleClick}
style={{ width: '100%' }}
data={addKeybindingForData(data)}
/>
</div>
```

The `Logo` component is added to the code, and the original [DropDown](../api/namespaces/molecule.component#dropdown) is replaced with [Menu](../api/namespaces/molecule.component#menu) Components.

:::tip
The custom **Logo** and **Horizontal** layout functions of the above MenuBar are currently built-in. For details, please refer to [MenuBar](../guides/extend-workbench#menubar)
:::
We added a `RightSidebar`, which uses a built-in `Sidebar` component, and a custom `MySidePane` component is used in this `Sidebar` component.

### Custom RightSideBar

Slightly different from `MenuBar`, because the built-in [Sidebar](../api/namespaces/molecule#sidebar-1) component is reused, here we only need to pass in [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane) type components:
We reuse the built-in [Sidebar](../api/namespaces/molecule#sidebar-1) component, we only need to pass in the component of type [ISidebarPane](../api/interfaces/molecule.model.ISidebarPane):

```tsx title="/src/views/mySidePane.tsx"
import React from 'react';
Expand Down
6 changes: 2 additions & 4 deletions website/docs/guides/extend-keybinding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,9 @@ All code demos in this part are based on the [molecule-demo](https://github.com/
First, we define the `KeybindingAction` object based on the `Action2` abstract class:

```ts title="src/extensions/action/keybindingAction.ts"
import {
Action2,
KeybindingWeight,
} from '@dtinsight/molecule/esm/monaco/common';
import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
//@ts-ignore
import { KeyChord } from 'monaco-editor/esm/vs/base/common/keyCodes';

Expand Down
6 changes: 2 additions & 4 deletions website/docs/guides/extend-quick-access.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ The **"Quick Access Search"** panel in the picture is opened by the shortcut key
First, let's create a new `quickOpenAction.ts` file, which defines the `QuickOpenAction` Action object:

```ts title="/src/extensions/theFirstExtension/quickOpenAction.ts"
import {
Action2,
KeybindingWeight,
} from '@dtinsight/molecule/esm/monaco/common';
import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
import {
IQuickInputService,
//@ts-ignore
Expand Down
Loading