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

feat(DockView): add ShowPin parameter #155

Merged
merged 9 commits into from
Dec 3, 2024
Merged

feat(DockView): add ShowPin parameter #155

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
606410a
feta: Dockview添加自动隐藏功能
zhaijunlei955 Nov 4, 2024
b68ba40
feat: 增加 Pin 图标是否显示参数
ArgoZhang Nov 12, 2024
87139ce
refactor: 增加雪碧图
ArgoZhang Nov 12, 2024
16d144e
refactor: 更新图钉图标
ArgoZhang Nov 12, 2024
9b4c7fd
refactor: 更新图标样式
ArgoZhang Nov 12, 2024
c8a2820
refactor: dockview优化操作图标的状态
zhaijunlei955 Dec 3, 2024
4bff026
refactor: 更新样式
ArgoZhang Dec 3, 2024
83560d0
Merge branch 'master' into feat-dockview-autoHide
ArgoZhang Dec 3, 2024
ffac3f6
chore: bump version 9.0.1
ArgoZhang Dec 3, 2024
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
5 changes: 5 additions & 0 deletions src/components/BootstrapBlazor.DockView/Components/DockViewConfig.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ class DockViewConfig
/// </summary>
public bool ShowClose { get; set; }

/// <summary>
/// 获得/设置 是否显示显示图钉按钮 默认 true
/// </summary>
public bool ShowPin { get; set; } = true;

/// <summary>
/// 获得/设置 是否显示最大化按钮 默认 true
/// </summary>
Expand Down
2 changes: 2 additions & 0 deletions src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
<DockViewIcon IconName="float"></DockViewIcon>
<DockViewIcon IconName="dock"></DockViewIcon>
<DockViewIcon IconName="down"></DockViewIcon>
<DockViewIcon IconName="pin"></DockViewIcon>
<DockViewIcon IconName="pushpin"></DockViewIcon>
<DockViewDropdownIcon IconName="dropdown"></DockViewDropdownIcon>
}

Expand Down
7 changes: 7 additions & 0 deletions src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ public partial class DockViewV2
[Parameter]
public bool ShowFloat { get; set; } = true;

/// <summary>
/// 获得/设置 是否显示显示图钉按钮 默认 true
/// </summary>
[Parameter]
public bool ShowPin { get; set; } = true;

/// <summary>
/// 获得/设置 客户端渲染模式 默认 <see cref="DockViewRenderMode.OnlyWhenVisible"/> 客户端默认使用 always onlyWhenVisible 值
/// </summary>
Expand Down Expand Up @@ -183,6 +189,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
IsFloating = IsFloating,
ShowFloat = ShowFloat,
ShowClose = ShowClose,
ShowPin = ShowPin,
ShowMaximize = ShowMaximize,
Renderer = Renderer,
LayoutConfig = LayoutConfig,
Expand Down
90 changes: 89 additions & 1 deletion src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
width: 100%;
height: 100%;
border: var(--bs-border-width) solid var(--bs-border-color);
position: relative;
}

.bb-dockview .bb-dockview-panel {
Expand Down Expand Up @@ -135,6 +136,10 @@

.bb-dockview .dv-tab-on > .dv-default-tab-content + .dv-default-tab-action,
.bb-dockview .tabs-and-actions-container:has(.dv-tab-on) > .right-actions-container > .bb-dockview-control-icon-close,
.bb-dockview .right-actions-container:not(.bb-show-pin) .bb-dockview-control-icon-pin,
.bb-dockview .right-actions-container:not(.bb-show-pin) .bb-dockview-control-icon-pushpin,
.bb-dockview .right-actions-container:not(.bb-pin) .bb-dockview-control-icon-pin,
.bb-dockview .right-actions-container.bb-pin .bb-dockview-control-icon-pushpin,
.bb-dockview .right-actions-container:not(.bb-show-lock) .bb-dockview-control-icon-lock,
.bb-dockview .right-actions-container:not(.bb-show-lock) .bb-dockview-control-icon-unlock,
.bb-dockview .right-actions-container:not(.bb-lock) .bb-dockview-control-icon-lock,
Expand All @@ -156,7 +161,13 @@
.bb-dockview .tabs-and-actions-container:has(.bb-lock) .dv-default-tab-content + .dv-default-tab-action svg > *,
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-close > svg > *,
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-float > svg > *,
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-dock > svg > * {
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-dock > svg > *,
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-pin > svg > *,
.bb-dockview .right-actions-container.bb-lock .bb-dockview-control-icon-pushpin > svg > *,
.bb-dockview .groupview:has(.dv-resize-container) > .tabs-and-actions-container > .right-actions-container .bb-dockview-control-icon-pin > svg > *,
.bb-dockview .groupview:has(.dv-resize-container) > .tabs-and-actions-container > .right-actions-container .bb-dockview-control-icon-float > svg > *,
.bb-dockview .tabs-and-actions-container:has(.right-actions-container:not(.bb-pin)) + .content-container .bb-dockview .bb-dockview-control-icon-pin > svg > *,
.bb-dockview .tabs-and-actions-container:has(.right-actions-container:not(.bb-pin)) + .content-container .bb-dockview .bb-dockview-control-icon-float > svg > * {
stroke: var(--bb-dockview-control-icon-lock-color);
}

Expand Down Expand Up @@ -187,3 +198,80 @@
transition-delay: unset;
transition-duration: .3s;
}

.ribbon-body.ribbon-body > div,
.bb-dockview .split-view-container,
.bb-dockview .split-view-container .view-container .view {
overflow: initial;
}

.bb-dockview .split-view-container .view-container .view.bb-maximize {
z-index: 99;
}

.bb-dockview .split-view-container .view-container > .view > .groupview:not(.empty) {
overflow: initial !important;
}

.bb-dockview .dv-resize-container .groupview .tabs-and-actions-container {
z-index: 12;
}

.bb-dockview .bb-dockview-btn-wrapper {
cursor: pointer;
float: left;
position: absolute;
left: 0;
top: 0;
transform: translate(-100%);
user-select: none;
}

.bb-dockview .bb-dockview-btn-wrapper > div {
width: 20px;
padding: 2px 0;
margin-bottom: 10px;
position: relative;
writing-mode: vertical-lr;
text-orientation: sideways;
color: var(--dv-inactivegroup-visiblepanel-tab-color);
}

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

.bb-dockview .bb-dockview-btn-wrapper > div:hover::after,
.bb-dockview .bb-dockview-btn-wrapper > div.active::after {
content: '';
position: absolute;
left: -3px;
top: 0;
width: 3px;
height: 100%;
background-color: var(--bb-ribbon-menu-bg);
}

.bb-dockview .bb-dockview-btn-wrapper > div span {
display: block;
margin-bottom: -5px;
}

.bb-dockview:has(>.bb-dockview-btn-wrapper>div) {
margin-left: 23px;
width: calc(100% - 23px);
}

.bb-dockview .dv-resize-container.dv-resize-container-drawer > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .tabs-and-actions-container .bb-dockview-control-icon-float,
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .tabs-and-actions-container .bb-dockview-control-icon-dock,
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .tabs-and-actions-container .bb-dockview-control-icon-down,
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .tabs-and-actions-container .bb-dockview-control-icon-pin,
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .tabs-and-actions-container .bb-dockview-control-icon-pushpin {
display: none;
}

.bb-dockview .dv-resize-container-drawer {
height: calc(100% + 1px) !important;
}
20 changes: 20 additions & 0 deletions src/components/BootstrapBlazor.DockView/wwwroot/icon/dockview.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,14 @@
const saveConfig = dockview => {
if (dockview.params.options.enableLocalStorage && dockview._inited === true) {
saveParamsIsActive(dockview)
const json = dockview.toJSON()
const json = dockview.toJSON();
if(dockview.floatingGroups && dockview.floatingGroups.length > 0) {
json.floatingGroups.forEach((fg, index) => {
const width = dockview.floatingGroups[index].group.width

Check warning on line 310 in src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js#L310 

Generic Object Injection Sink
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Prefer object destructuring when accessing and using properties. (use-object-destructuring)

Suggested change
const width = dockview.floatingGroups[index].group.width
const {width} = dockview.floatingGroups[index].group


ExplanationObject destructuring can often remove an unnecessary temporary reference, as well as making your code more succinct.

From the Airbnb Javascript Style Guide

fg.position.width = fg.position.width || (width ? width + 2 : 300)
fg.position.height = fg.position.height || dockview.floatingGroups[index].group.height

Check warning on line 312 in src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js

View check run for this annotation

Codacy Production / Codacy Static Code Analysis

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js#L312 

Generic Object Injection Sink
})
}
localStorage.setItem(dockview.params.options.localStorageKey, JSON.stringify(json));
}
}
Expand Down
Loading
Loading