feat(DockView): add ShowPin parameter (#155)

* feta: Dockview添加自动隐藏功能 * feat: 增加 Pin 图标是否显示参数 * refactor: 增加雪碧图 * refactor: 更新图钉图标 * refactor: 更新图标样式 * refactor: dockview优化操作图标的状态 * refactor: 更新样式 * chore: bump version 9.0.1 --------- Co-authored-by: zhaijunlei <276318515@qq.com>
BootstrapBlazor · Dec 3, 2024 · 2b3938f · 2b3938f
1 parent f37a73d
commit 2b3938f
Show file tree

Hide file tree

Showing 14 changed files with 1,565 additions and 634 deletions.
diff --git a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0</Version>
+    <Version>9.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>

diff --git a/src/components/BootstrapBlazor.DockView/Components/DockViewConfig.cs b/src/components/BootstrapBlazor.DockView/Components/DockViewConfig.cs
@@ -41,6 +41,11 @@ class DockViewConfig
     /// </summary>
     public bool ShowClose { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否显示显示图钉按钮 默认 true
+    /// </summary>
+    public bool ShowPin { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 是否显示最大化按钮 默认 true
     /// </summary>

diff --git a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor
@@ -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>
         }
 

diff --git a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs
@@ -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>
@@ -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,

diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css
@@ -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 {
@@ -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,
@@ -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);
         }
 
@@ -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;
+}
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/icon/dockview.svg b/src/components/BootstrapBlazor.DockView/wwwroot/icon/dockview.svg
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js
@@ -304,7 +304,14 @@ const getLeafNode = (contentItem, size, boxSize, parent, panels, getGroupId, opt
 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
+                fg.position.width = fg.position.width || (width ? width + 2 : 300)
+                fg.position.height = fg.position.height || dockview.floatingGroups[index].group.height
+            })
+        }
         localStorage.setItem(dockview.params.options.localStorageKey, JSON.stringify(json));
     }
 }