-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dock-manager): add support for floating panes
- Loading branch information
Showing
4 changed files
with
143 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
packages/html/src/dock-manager/tests/dock-manager-floating-panes.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import { Button } from "../../button"; | ||
| import { MenuButton } from "../../menu-button"; | ||
| import { SplitterPane } from "../../splitter"; | ||
| import { TabStripNormal, TabStripItem, TabStripContent } from "../../tabstrip"; | ||
| import { WindowNormal } from "../../window"; | ||
| import { DockManagerSplitter, PaneScrollable } 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> | ||
| <WindowNormal | ||
| className="k-dock-manager-window" | ||
| 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> | ||
| }/> | ||
| </section> | ||
| <section> | ||
| <span>Floating Pane with TabStrip</span> | ||
| <WindowNormal | ||
| style={{ width: "466px" }} | ||
| className="k-dock-manager-window" | ||
| 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> | ||
| }/> | ||
| </section> | ||
| <section> | ||
| <span>Floating Pane with Splitter</span> | ||
| <WindowNormal | ||
| className="k-dock-manager-window" | ||
| 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? | ||
| </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? | ||
| </p> | ||
| </PaneScrollable> | ||
| </SplitterPane> | ||
|
|
||
| </DockManagerSplitter> | ||
| </> | ||
| }/> | ||
| </section> | ||
| </div> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters