Skip to content

Commit 091b658

Browse files
kiwiwongkiwiwong
authored
docs: update customize workbench (#705)
* docs: update customize workbench * ci: update gh-pages deployment action (#707)
1 parent 814c5b2 commit 091b658

File tree

8 files changed

+192
-206
lines changed

8 files changed

+192
-206
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ jobs:
1616
node-version: 14.x
1717
cache: yarn
1818
cache-dependency-path: website/yarn.lock
19+
- name: Install dependencies
20+
run: yarn
1921
- name: Build website
2022
working-directory: website
2123
run: |

‎.github/workflows/test-deploy.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ jobs:
1616
node-version: 14.x
1717
cache: yarn
1818
cache-dependency-path: website/yarn.lock
19+
- name: Install dependencies
20+
run: yarn
1921
- name: Test build
2022
working-directory: website
2123
run: |

‎website/docs/advanced/customize-workbench.md‎

Lines changed: 90 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -26,46 +26,51 @@ At present, the top fixed layout for the **MenuBar** is integrated in Molecule.
2626
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`:
2727

2828
```tsx
29-
<div className={workbenchFinalClassName}>
30-
<Display visible={isMenuBarHorizontal}>
31-
<MenuBarView mode={MenuBarMode.horizontal} />
32-
</Display>
33-
<div className={mainBenchClassName}>
34-
<div className={compositeBarClassName}>
35-
<Display visible={isMenuBarVertical}>
36-
<MenuBarView mode={MenuBarMode.vertical} />
37-
</Display>
38-
<Display
39-
visible={!activityBar.hidden}
40-
className={displayActivityBarClassName}
41-
>
42-
<ActivityBarView />
43-
</Display>
44-
</div>
45-
<SplitPane
46-
split="vertical"
47-
primary="first"
48-
allowResize={true}
49-
onChange={onPaneSizeChange as any}
50-
>
51-
<Pane
52-
minSize="170px"
53-
initialSize={splitPanePos[0]}
54-
maxSize="80%"
55-
className={sidebar.hidden ? 'hidden' : ''}
56-
>
57-
<SidebarView />
58-
</Pane>
29+
<div id={ID_APP} className={appClassName} tabIndex={0}>
30+
<div className={workbenchFinalClassName}>
31+
<Display visible={isMenuBarHorizontal}>
32+
<MenuBarView mode={MenuBarMode.horizontal} />
33+
</Display>
34+
<div className={mainBenchClassName}>
35+
<div className={compositeBarClassName}>
36+
<Display visible={isMenuBarVertical}>
37+
<MenuBarView mode={MenuBarMode.vertical} />
38+
</Display>
39+
<Display
40+
visible={!activityBar.hidden}
41+
className={displayActivityBarClassName}
42+
>
43+
<ActivityBarView />
44+
</Display>
45+
</div>
5946
<SplitPane
60-
primary="first"
61-
split="horizontal"
62-
allowResize={true}
63-
onChange={onHorizontalPaneSizeChange as any}
47+
sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
48+
split="vertical"
49+
allowResize={[false]}
50+
onChange={handleSideBarChanged}
51+
onResizeStrategy={() => ['keep', 'pave']}
6452
>
65-
{getContent(!!panel.panelMaximized, !!panel.hidden)}
53+
<Pane minSize={170} maxSize="80%">
54+
<SidebarView />
55+
</Pane>
56+
<SplitPane
57+
sizes={getSizes()}
58+
allowResize={[false]}
59+
split="horizontal"
60+
onChange={handleEditorChanged}
61+
onResizeStrategy={() => ['pave', 'keep']}
62+
>
63+
<Pane minSize="10%" maxSize="80%">
64+
<EditorView />
65+
</Pane>
66+
<PanelView />
67+
</SplitPane>
6668
</SplitPane>
67-
</SplitPane>
69+
</div>
6870
</div>
71+
<Display visible={!statusBar.hidden}>
72+
<StatusBarView />
73+
</Display>
6974
</div>
7075
```
7176

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

7681
```tsx title="/src/views/myWorkbench.tsx"
77-
<div className={workbenchClassName}>
78-
{!menuBar.hidden && <MyMenuBarView />}
79-
<div className={mainBenchClassName}>
80-
<div className={compositeBarClassName}>
81-
{!activityBar.hidden && <ActivityBarView />}
82-
</div>
83-
<SplitPane
84-
split="vertical"
85-
primary="first"
86-
allowResize={true}
87-
onChange={onPaneSizeChange as any}
88-
>
89-
<Pane
90-
minSize="170px"
91-
initialSize={splitPanePos[0]}
92-
maxSize="80%"
93-
className={sidebar.hidden && 'hidden'}
94-
>
95-
<SidebarView />
96-
</Pane>
82+
<div
83+
id={ID_APP}
84+
className={classNames(appClassName, 'myMolecule')}
85+
tabIndex={0}
86+
>
87+
<div className={workbenchFinalClassName}>
88+
<Display visible={isMenuBarHorizontal}>
89+
<MenuBarView mode={MenuBarMode.horizontal} />
90+
</Display>
91+
<div className={mainBenchClassName}>
92+
<div className={compositeBarClassName}>
93+
<Display visible={isMenuBarVertical}>
94+
<MenuBarView mode={MenuBarMode.vertical} />
95+
</Display>
96+
<Display
97+
visible={!activityBar.hidden}
98+
className={displayActivityBarClassName}
99+
>
100+
<ActivityBarView />
101+
</Display>
102+
</div>
97103
<SplitPane
98-
primary="first"
99-
split="horizontal"
100-
allowResize={true}
101-
onChange={onHorizontalPaneSizeChange as any}
104+
sizes={sidebar.hidden ? [0, '100%'] : splitPanePos}
105+
split="vertical"
106+
allowResize={[false, true]}
107+
onChange={handleSideBarChanged}
108+
onResizeStrategy={() => ['keep', 'pave']}
102109
>
103-
{getContent(!!panel.panelMaximized, !!panel.hidden)}
110+
<Pane minSize={170} maxSize="80%">
111+
<SidebarView />
112+
</Pane>
113+
<SplitPane
114+
sizes={getSizes()}
115+
allowResize={[false, true]}
116+
split="horizontal"
117+
onChange={handleEditorChanged}
118+
onResizeStrategy={() => ['pave', 'keep']}
119+
>
120+
<Pane minSize="10%" maxSize="80%">
121+
<EditorView />
122+
</Pane>
123+
<PanelView />
124+
</SplitPane>
104125
</SplitPane>
105-
<Pane
106-
minSize="40px"
107-
initialSize="240px"
108-
maxSize="40%"
109-
className={'rightSidebar'}
110-
>
126+
<div style={{ width: 300 }}>
111127
<Sidebar current={MySidePane.id} panes={[MySidePane]} />
112-
</Pane>
113-
</SplitPane>
128+
</div>
129+
</div>
114130
</div>
131+
<Display visible={!statusBar.hidden}>
132+
<StatusBarView />
133+
</Display>
115134
</div>
116135
```
117136

118137
:::caution
119138
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).
120139
:::
121140

122-
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.
123-
124-
### Custom MenuBar
125-
126-
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`:
127-
128-
```tsx title="/src/views/myMenuBar/index.tsx"
129-
<div className="myMenuBar">
130-
<Logo alt="logo" src="[email protected]" />
131-
<Menu
132-
role="menu"
133-
mode={MenuMode.Horizontal}
134-
trigger="click"
135-
onClick={handleClick}
136-
style={{ width: '100%' }}
137-
data={addKeybindingForData(data)}
138-
/>
139-
</div>
140-
```
141-
142-
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.
143-
144-
:::tip
145-
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)
146-
:::
141+
We added a `RightSidebar`, which uses a built-in `Sidebar` component, and a custom `MySidePane` component is used in this `Sidebar` component.
147142

148143
### Custom RightSideBar
149144

150-
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:
145+
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):
151146

152147
```tsx title="/src/views/mySidePane.tsx"
153148
import React from 'react';

‎website/docs/guides/extend-keybinding.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,9 @@ All code demos in this part are based on the [molecule-demo](https://github.com/
1616
First, we define the `KeybindingAction` object based on the `Action2` abstract class:
1717

1818
```ts title="src/extensions/action/keybindingAction.ts"
19-
import {
20-
Action2,
21-
KeybindingWeight,
22-
} from '@dtinsight/molecule/esm/monaco/common';
19+
import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
2320
import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
21+
import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
2422
//@ts-ignore
2523
import { KeyChord } from 'monaco-editor/esm/vs/base/common/keyCodes';
2624

‎website/docs/guides/extend-quick-access.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,9 @@ The **"Quick Access Search"** panel in the picture is opened by the shortcut key
2626
First, let's create a new `quickOpenAction.ts` file, which defines the `QuickOpenAction` Action object:
2727

2828
```ts title="/src/extensions/theFirstExtension/quickOpenAction.ts"
29-
import {
30-
Action2,
31-
KeybindingWeight,
32-
} from '@dtinsight/molecule/esm/monaco/common';
29+
import { KeybindingWeight } from '@dtinsight/molecule/esm/monaco/common';
3330
import { KeyCode, KeyMod } from '@dtinsight/molecule/esm/monaco';
31+
import { Action2 } from '@dtinsight/molecule/esm/monaco/action';
3432
import {
3533
IQuickInputService,
3634
//@ts-ignore

0 commit comments

Comments
 (0)