feat(dock-manager): add support for floating panes

telerik · Dec 9, 2024 · 3787056 · 3787056
1 parent cc44471
commit 3787056
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 1 deletion.
diff --git a/packages/default/scss/dock-manager/_layout.scss b/packages/default/scss/dock-manager/_layout.scss
@@ -157,6 +157,10 @@
         z-index: 10;
     }
 
+    .k-floating-pane:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin kendo-dock-navigator--layout() {

diff --git a/packages/fluent/scss/dock-manager/_layout.scss b/packages/fluent/scss/dock-manager/_layout.scss
@@ -154,6 +154,10 @@
         border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
     }
 
+    .k-floating-pane:has(.k-pane) .k-window-content {
+        padding: 0;
+    }
+
 }
 
 @mixin  kendo-dock-indicator--layout() {

diff --git a/packages/html/src/dock-manager/index.ts b/packages/html/src/dock-manager/index.ts
@@ -6,3 +6,6 @@ export * from './dock-navigator';
 export * from './pane-scrollable';
 export * from './templates/dock-manager-normal';
 export * from './templates/dock-manager-unpinned-pane';
+export * from './templates/dock-manager-floating-pane';
+export * from './templates/dock-manager-floating-pane-with-tabstrip';
+export * from './templates/dock-manager-floating-pane-with-splitter';
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-splitter.tsx
@@ -0,0 +1,48 @@
+import { Button } from "../../button";
+import { MenuButton } from "../../menu-button";
+import { SplitterPane } from "../../splitter";
+import { WindowNormal } from "../../window";
+import DockManagerSplitter from "../dock-manager-splitter";
+import PaneScrollable from "../pane-scrollable";
+
+export const DockManagerFloatingPaneWithSplitter = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        title="Pane Title 1"
+        actions={["window-minimize", "window", "more-vertical"]}
+        children={
+        <>
+            <DockManagerSplitter>
+                <SplitterPane>
+                    <PaneScrollable title="Pane Title 1" actions={
+                        <>
+                            <Button fillMode="flat" icon="pin"></Button>
+                            <MenuButton fillMode="flat" icon="more-vertical" showArrow={false}></MenuButton>
+                        </>
+                    }>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus perspiciatis mollitia dicta expedita numquam reprehenderit assumenda rem eum id voluptas laborum pariatur ab alias iure accusantium blanditiis, corporis, ut maxime?
+                            Ea assumenda minus debitis excepturi ipsum facere inventore aperiam delectus maxime tenetur hic vel, cum ab est voluptas in laborum deserunt. Ipsum possimus nam aspernatur quia aliquid in doloremque ex.
+                        </p>
+                    </PaneScrollable>
+                </SplitterPane>
+                <SplitterPane>
+                    <PaneScrollable title="Pane Title 2" actions={
+                        <>
+                            <Button fillMode="flat" icon="pin"></Button>
+                            <MenuButton fillMode="flat" icon="more-vertical" showArrow={false}></MenuButton>
+                        </>
+                    }>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus perspiciatis mollitia dicta expedita numquam reprehenderit assumenda rem eum id voluptas laborum pariatur ab alias iure accusantium blanditiis, corporis, ut maxime?
+                            Ea assumenda minus debitis excepturi ipsum facere inventore aperiam delectus maxime tenetur hic vel, cum ab est voluptas in laborum deserunt. Ipsum possimus nam aspernatur quia aliquid in doloremque ex.
+                        </p>
+                    </PaneScrollable>
+                </SplitterPane>
+
+            </DockManagerSplitter>
+        </>
+    }
+    {...props}
+    />
+);
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane-with-tabstrip.tsx
@@ -0,0 +1,53 @@
+import { Button } from "../../button";
+import { MenuButton } from "../../menu-button";
+import { TabStripNormal, TabStripItem, TabStripContent } from "../../tabstrip";
+import { WindowNormal } from "../../window";
+
+export const DockManagerFloatingPaneWithTabStrip = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        title="Pane Title 1"
+        actions={["window-minimize", "window", "more-vertical"]}
+        children={
+        <TabStripNormal
+            tabStripItems={
+                <>
+                    <TabStripItem
+                        first
+                        value="Pane Title 1"
+                        active
+                        actions={
+                        <>
+                            <Button fillMode="flat" icon="pin"></Button>
+                            <MenuButton
+                                fillMode="flat"
+                                icon="more-vertical"
+                                showArrow={false}
+                            ></MenuButton>
+                        </>
+                        }
+                    ></TabStripItem>
+                    <TabStripItem
+                        last
+                        value="Pane Title 2"
+                        actions={
+                        <>
+                            <Button fillMode="flat" icon="pin"></Button>
+                            <MenuButton
+                                fillMode="flat"
+                                icon="more-vertical"
+                                showArrow={false}
+                            ></MenuButton>
+                        </>
+                        }
+                    ></TabStripItem>
+                </>
+            }>
+                <TabStripContent active>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi suscipit porro optio veritatis obcaecati nostrum molestias dolor maxime! Molestias ducimus placeat quia possimus esse atque odio, a recusandae iste exercitationem.
+                </TabStripContent>
+        </TabStripNormal>
+    }
+    {...props}
+    />
+);
diff --git a/packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx b/packages/html/src/dock-manager/templates/dock-manager-floating-pane.tsx
@@ -0,0 +1,17 @@
+import { WindowNormal } from "../../window";
+
+export const DockManagerFloatingPane = (props) => (
+    <WindowNormal
+        className="k-floating-pane"
+        title="Pane Title"
+        actions={["window-minimize", "window", "more-vertical"]}
+        children={
+        <p>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur error repudiandaecorrupti qui. Ipsum corporis, voluptates numquam distinctio et dolorem illum. Ipsa, laborumsoluta cum asperiores sit fuga iure ad.
+            Deleniti veniam totam debitis quidem vitae id sunt, fuga at ipsa sed deserunt nulla ipsumquam!
+        </p>
+    }
+    {...props}
+    />
+
+);
diff --git a/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx b/packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx
@@ -0,0 +1,28 @@
+import { DockManagerFloatingPane, DockManagerFloatingPaneWithTabStrip, DockManagerFloatingPaneWithSplitter } from "../";
+
+const style = `
+    .k-window {
+        position: relative;
+        top: 1rem;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid k-grid-cols-2">
+        <section>
+            <span>Floating Pane</span>
+            <DockManagerFloatingPane/>
+        </section>
+        <section>
+            <span>Floating Pane with TabStrip</span>
+            <DockManagerFloatingPaneWithTabStrip style={{ width: "350px" }}/>
+        </section>
+        <section>
+            <span>Floating Pane with Splitter</span>
+            <DockManagerFloatingPaneWithSplitter />
+        </section>
+    </div>
+  </>
+);
diff --git a/packages/html/src/window/window.spec.tsx b/packages/html/src/window/window.spec.tsx
@@ -1,5 +1,6 @@
 import { ActionButtons } from '../action-buttons';
 import { Button } from '../button';
+import { MenuButton } from '../menu-button';
 import { classNames, optionClassNames, ThemeColor } from '../misc';
 
 export const WINDOW_CLASSNAME = `k-window`;
@@ -60,7 +61,20 @@ export const Window = (
                     {actions && <>
                         <div className="k-window-titlebar-actions">
                             {actions.map(actionName =>
-                                <Button key={actionName} icon={actionName} fillMode="flat" className="k-window-titlebar-action"></Button>
+                                actionName === "more-vertical" ?
+                                    <MenuButton
+                                        key={actionName}
+                                        icon={actionName}
+                                        fillMode="flat"
+                                        showArrow={false}
+                                        className="k-window-titlebar-action"
+                                    ></MenuButton> :
+                                    <Button
+                                        key={actionName}
+                                        icon={actionName}
+                                        fillMode="flat"
+                                        className="k-window-titlebar-action"
+                                    ></Button>
                             )}
                         </div>
                     </>}