Skip to content

Commit 20105fd

Browse files
ArgoZhangzhaijunlei955
ArgoZhang
and
zhaijunlei955
authored
feat(DockView2): collapse panel to nearest edge (#394)
* feat: dockview添加就近隐藏 * feat: dockview添加就近隐藏 * fix：修复浮动窗口收起时高度不准确 * fix：修复tab前自定义图标在窗口删除重新添加后消失 * style: 更新样式 * refactor: 更新命名规范 * refactor: 修改aside生成位置 * style: 调整样式 * chore: bump version 9.1.9 --------- Co-authored-by: zhaijunlei <276318515@qq.com>
1 parent 8bc4ce3 commit 20105fd

6 files changed

Lines changed: 148 additions & 113 deletions

File tree

‎src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.1.8</Version>
4+
<Version>9.1.9</Version>
55
</PropertyGroup>
66

77
<PropertyGroup>

‎src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css‎

Lines changed: 75 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,5 @@
11
@import './dockview.css';
22

3-
[data-bs-theme='dark'] .bb-dockview {
4-
--dv-background-color: black;
5-
--dv-paneview-active-outline-color: dodgerblue;
6-
--dv-tabs-and-actions-container-font-size: 13px;
7-
--dv-tabs-and-actions-container-height: 35px;
8-
--dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
9-
--dv-drag-over-border-color: white;
10-
--dv-tabs-container-scrollbar-color: #888;
11-
--dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
12-
--dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
13-
--dv-group-view-background-color: #1e1e1e;
14-
--dv-tabs-and-actions-container-background-color: #252526;
15-
--dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
16-
--dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;
17-
--dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;
18-
--dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;
19-
--dv-tab-divider-color: #1e1e1e;
20-
--dv-activegroup-visiblepanel-tab-color: white;
21-
--dv-activegroup-hiddenpanel-tab-color: #969696;
22-
--dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;
23-
--dv-inactivegroup-hiddenpanel-tab-color: #626262;
24-
--dv-separator-border: rgb(68, 68, 68);
25-
--dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
26-
--dv-active-sash-color: #595959;
27-
}
28-
293
.bb-dockview {
304
--bb-dockview-padding: .25rem;
315
--bb-dockview-tab-line-height: 21px;
@@ -36,6 +10,7 @@
3610
--bb-dockview-control-dropdown-padding-y: .25rem;
3711
--bb-dockview-control-dropdown-item-padding-x: 0;
3812
--bb-dockview-control-dropdown-item-padding-y: 3px;
13+
--bb-dockview-aside-width: calc(1.5em + .25rem);
3914
--dv-tabs-and-actions-container-font-size: 13px;
4015
--dv-tabs-and-actions-container-height: 35px;
4116
--dv-active-sash-color: #bcbcbc;
@@ -45,12 +20,12 @@
4520
position: relative;
4621
}
4722

48-
.bb-dockview > div {
49-
--dv-tabs-and-actions-container-height: 30px;
50-
--bb-dockview-tab-line-height: 30px;
51-
--bb-dockview-tab-padding: 0 3px;
52-
--dv-tabs-and-actions-container-font-size: 12px;
53-
}
23+
.bb-dockview > div {
24+
--dv-tabs-and-actions-container-height: 30px;
25+
--bb-dockview-tab-line-height: 30px;
26+
--bb-dockview-tab-padding: 0 3px;
27+
--dv-tabs-and-actions-container-font-size: 12px;
28+
}
5429

5530
.bb-dockview .bb-dockview-panel {
5631
height: 100%;
@@ -208,68 +183,92 @@
208183
transition-duration: .3s;
209184
}
210185

211-
.bb-dockview .bb-dockview-btn-wrapper {
212-
cursor: pointer;
213-
float: left;
214-
position: absolute;
215-
left: 0;
216-
top: 0;
217-
transform: translate(-100%);
218-
user-select: none;
186+
.ribbon-body.ribbon-body > div,
187+
.bb-dockview .dv-split-view-container,
188+
.bb-dockview .dv-split-view-container .dv-view-container .dv-view {
189+
overflow: initial;
219190
}
220191

221-
.bb-dockview .bb-dockview-btn-wrapper > div {
222-
width: 20px;
223-
padding: 2px 0;
224-
margin-bottom: 10px;
225-
position: relative;
226-
writing-mode: vertical-lr;
227-
text-orientation: sideways;
228-
color: var(--dv-inactivegroup-visiblepanel-tab-color);
192+
.bb-dockview .dv-split-view-container .dv-view-container > .dv-view > .dv-groupview:has(.dv-resize-container) {
193+
overflow: initial !important;
229194
}
230195

231-
.bb-dockview .bb-dockview-btn-wrapper > div:hover,
232-
.bb-dockview .bb-dockview-btn-wrapper > div.active {
233-
color: var(--dv-activegroup-visiblepanel-tab-color);
234-
}
235196

236-
.bb-dockview .bb-dockview-btn-wrapper > div:hover::after,
237-
.bb-dockview .bb-dockview-btn-wrapper > div.active::after {
238-
content: '';
239-
position: absolute;
240-
left: -3px;
241-
top: 0;
242-
width: 3px;
243-
height: 100%;
244-
background-color: var(--bb-ribbon-menu-bg);
245-
}
197+
.bb-dockview > div:has(> .bb-dockview-aside-left > div) {
198+
padding-left: var(--bb-dockview-aside-width);
199+
}
246200

247-
.bb-dockview .bb-dockview-btn-wrapper > div span {
248-
display: block;
249-
margin-bottom: -5px;
250-
}
201+
.bb-dockview > div:has(> .bb-dockview-aside-right > div) {
202+
padding-right: var(--bb-dockview-aside-width);
203+
}
204+
205+
.bb-dockview .bb-dockview-aside {
206+
position: absolute;
207+
height: 100%;
208+
top: 0;
209+
width: var(--bb-dockview-aside-width);
210+
display: flex;
211+
align-items: flex-start;
212+
justify-content: center;
213+
}
251214

252-
.bb-dockview:has(>.bb-dockview-btn-wrapper>div) {
253-
margin-left: 23px;
254-
width: calc(100% - 23px);
215+
.bb-dockview .bb-dockview-aside-left {
216+
left: 0
255217
}
256218

257-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
258-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-float,
259-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-dock,
260-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-down,
261-
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pin,
262-
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pushpin {
263-
display: none;
219+
.bb-dockview .bb-dockview-aside-right {
220+
right: 0
221+
}
222+
223+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button {
224+
position: relative;
225+
margin-inline: .25rem;
226+
padding-inline: .5rem;
227+
cursor: pointer;
228+
user-select: none;
229+
writing-mode: vertical-lr;
230+
text-orientation: sideways;
231+
color: var(--dv-inactivegroup-visiblepanel-tab-color);
232+
border-radius: 5px;
233+
}
234+
235+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button:hover,
236+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button.active {
237+
color: var(--dv-activegroup-visiblepanel-tab-color);
238+
background-color: var(--dv-icon-hover-background-color);
239+
}
240+
241+
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button:hover::after,
242+
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button.active::after {
243+
right: 0;
264244
}
265245

266246
.bb-dockview .dv-resize-container-drawer {
267247
height: 100% !important;
268248
}
269249

250+
.bb-dockview .dv-resize-container-drawer:not(.active) {
251+
z-index: -1 !important;
252+
}
253+
254+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right {
255+
box-shadow: -8px 8px 8px 0px rgba(83, 89, 93, 0.5);
256+
}
257+
258+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right > div:not(.dv-resize-handle-left):not(.dv-groupview-floating),
259+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-left > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
260+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-float,
261+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-dock,
262+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-down,
263+
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pin,
264+
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pushpin {
265+
display: none;
266+
}
267+
270268
.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
271269
display: none;
272270
}
271+
273272
.bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
274273
visibility: visible;
275274
}

‎src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7229,6 +7229,7 @@ class Overlay extends CompositeDisposable {
72297229
this.onDidChangeEnd = this._onDidChangeEnd.event;
72307230
this.addDisposables(this._onDidChange, this._onDidChangeEnd);
72317231
this._element.className = 'dv-resize-container';
7232+
this.options.className && this._element.classList.add(this.options.className);
72327233
this._isVisible = true;
72337234
this.setupResize('top');
72347235
this.setupResize('bottom');
@@ -8802,8 +8803,7 @@ class DockviewComponent extends BaseGrid {
88028803
};
88038804
}
88048805
const anchoredBox = getAnchoredBox();
8805-
const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), {
8806-
minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
8806+
const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element, className: options === null || options === void 0 ? void 0 : options.className }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
88078807
? undefined
88088808
: (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
88098809
? undefined

0 commit comments

Comments
 (0)