Skip to content

Commit

Permalink
docs: update customize workbench (#705)
Browse files Browse the repository at this point in the history
* docs: update customize workbench

* ci: update gh-pages deployment action (#707)
  • Loading branch information
kiwiwong authored Mar 10, 2022
1 parent 814c5b2 commit 091b658
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 206 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/deploy.yml
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
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
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
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
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

0 comments on commit 091b658

Please sign in to comment.