Skip to content

Commit

Permalink
chore: update visual previews
Browse files Browse the repository at this point in the history
  • Loading branch information
@kendo-bot
kendo-bot committed Dec 10, 2024
1 parent 07fea71 commit 6a0be66
Show file tree
Hide file tree
Showing 6 changed files with 229 additions and 0 deletions.
Binary file added tests/_output/bootstrap/dock-manager/dock-manager-floating-panes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/_output/classic/dock-manager/dock-manager-floating-panes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/_output/default/dock-manager/dock-manager-floating-panes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/_output/fluent/dock-manager/dock-manager-floating-panes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/_output/material/dock-manager/dock-manager-floating-panes.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
229 changes: 229 additions & 0 deletions tests/dock-manager/dock-manager-floating-panes.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!doctype html>
<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
<head>
<title>Document</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
<link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
<link rel="stylesheet" href="/packages/html/assets/styles.css">
<script src="/packages/html/assets/scripts.js"></script>
</head>
<body id="app" class="k-body">
<style>
.k-window {
position: relative;
top: 1rem;
}

</style>
<div id="test-area" class="k-d-grid k-grid-cols-2">
<section>
<span>Floating Pane</span>
<div class="k-pane-floating k-window">
<div class="k-window-titlebar">
<span class="k-window-title">Pane Title</span>
<div class="k-window-titlebar-actions">
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window-minimize">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M416 288v64H96v-64z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M96 96v320h320V96zm288 288H128V192h256z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</div>
</div>
<div class="k-window-content">
<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>
</div>
</div>
</section>
<section>
<span>Floating Pane with TabStrip</span>
<div class="k-pane-floating k-window" style="width: 466px;">
<div class="k-window-titlebar">
<span class="k-window-title">Pane Title 1</span>
<div class="k-window-titlebar-actions">
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window-minimize">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M416 288v64H96v-64z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M96 96v320h320V96zm288 288H128V192h256z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</div>
</div>
<div class="k-window-content">
<div class="k-tabstrip k-tabstrip-top">
<div class="k-tabstrip-items-wrapper k-hstack">
<ul class="k-tabstrip-items k-reset k-tabstrip-items-start">
<li class="k-item k-tabstrip-item k-active k-first">
<span class="k-link">
<span class="k-link-text">Pane Title 1</span>
</span>
<span class="k-item-actions">
<button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-pin">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M320 256V96c0-17.6-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32v160H96v32h128v160h32V288h128v-32zm-128 0V96h64v160z"></path>
</svg>
</span>
</button>
<button class="k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</span>
</li>
<li class="k-item k-tabstrip-item k-last">
<span class="k-link">
<span class="k-link-text">Pane Title 2</span>
</span>
<span class="k-item-actions">
<button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-pin">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M320 256V96c0-17.6-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32v160H96v32h128v160h32V288h128v-32zm-128 0V96h64v160z"></path>
</svg>
</span>
</button>
<button class="k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</span>
</li>
</ul>
</div>
<div class="k-tabstrip-content k-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.</div>
</div>
</div>
</div>
</section>
<section>
<span>Floating Pane with Splitter</span>
<div class="k-pane-floating k-window">
<div class="k-window-titlebar">
<span class="k-window-title">Pane Title 1</span>
<div class="k-window-titlebar-actions">
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window-minimize">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M416 288v64H96v-64z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-window">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M96 96v320h320V96zm288 288H128V192h256z"></path>
</svg>
</span>
</button>
<button class="k-window-titlebar-action k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</div>
</div>
<div class="k-window-content">
<div class="k-dock-manager-splitter k-splitter k-splitter-horizontal k-splitter-flex">
<div class="k-pane">
<div class="k-pane-scrollable">
<div class="k-pane-header">
<span class="k-pane-title">Pane Title 1</span>
<div class="k-pane-actions">
<button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-pin">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M320 256V96c0-17.6-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32v160H96v32h128v160h32V288h128v-32zm-128 0V96h64v160z"></path>
</svg>
</span>
</button>
<button class="k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</div>
</div>
<div class="k-pane-content">
<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>
</div>
</div>
</div>
<div class="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal">
<div class="k-resize-handle"></div>
</div>
<div class="k-pane">
<div class="k-pane-scrollable">
<div class="k-pane-header">
<span class="k-pane-title">Pane Title 2</span>
<div class="k-pane-actions">
<button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-pin">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M320 256V96c0-17.6-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32v160H96v32h128v160h32V288h128v-32zm-128 0V96h64v160z"></path>
</svg>
</span>
</button>
<button class="k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
<span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M240 128c26.4 0 48-21.6 48-48s-21.6-48-48-48-48 21.6-48 48 21.6 48 48 48m0 64c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48m0 160c-26.4 0-48 21.6-48 48s21.6 48 48 48 48-21.6 48-48-21.6-48-48-48"></path>
</svg>
</span>
</button>
</div>
</div>
<div class="k-pane-content">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>

0 comments on commit 6a0be66

Please sign in to comment.