From b56ab1c5eb75c56f1167c6185922aa5506b03fa9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 2 Aug 2024 08:43:49 +0000 Subject: [PATCH] Deploy Github Action --- classes/docklayout.docklayout-1.html | 30 +- examples/adv-save-layout.html.html | 2 +- examples/adv-tab-update.html.html | 2 +- examples/basic.html.html | 2 +- examples/controlled-layout.html.html | 2 +- examples/dark-theme.html.html | 2 +- examples/disable-dock.html.html | 2 +- examples/divider-box.html.html | 2 +- examples/drag-new-tab.html.html | 2 +- examples/drop-mode.html.html | 2 +- examples/gesture.html.html | 2 +- examples/index.html.html | 2 +- examples/new-window.html.html | 2 +- examples/panel-extra.html.html | 2 +- examples/panel-style.html.html | 2 +- examples/panel-style.js | 6 +- examples/panel-style.jsx.html | 6 +- examples/save-layout.html.html | 2 +- examples/standalone-divider.html.html | 2 +- examples/style-dark.css | 883 +++++++++++++++++++++++-- examples/style.css | 97 +-- examples/tab-cache.html.html | 2 +- examples/tab-min-size.html.html | 2 +- examples/tab-update.html.html | 2 +- interfaces/dockdata.boxbase.html | 8 +- interfaces/dockdata.boxdata.html | 18 +- interfaces/dockdata.dockcontext.html | 10 +- interfaces/dockdata.floatposition.html | 8 +- interfaces/dockdata.floatsize.html | 4 +- interfaces/dockdata.layoutbase.html | 8 +- interfaces/dockdata.layoutdata.html | 8 +- interfaces/dockdata.panelbase.html | 20 +- interfaces/dockdata.paneldata.html | 32 +- interfaces/dockdata.tabbase.html | 2 +- interfaces/dockdata.tabdata.html | 18 +- interfaces/dockdata.tabgroup.html | 24 +- interfaces/dockdata.tabpanecache.html | 8 +- interfaces/docklayout.layoutprops.html | 24 +- 38 files changed, 1028 insertions(+), 224 deletions(-) diff --git a/classes/docklayout.docklayout-1.html b/classes/docklayout.docklayout-1.html index 91494496..285428f5 100644 --- a/classes/docklayout.docklayout-1.html +++ b/classes/docklayout.docklayout-1.html @@ -135,7 +135,7 @@

constructor

Parameters

@@ -158,7 +158,7 @@

_isMounted

@@ -168,7 +168,7 @@

_onWindowResize

_onWindowResize: any = ...
@@ -179,7 +179,7 @@

_pendingDestroy

@@ -197,7 +197,7 @@

destroyRemovedPane

Returns void

@@ -215,7 +215,7 @@

dockMove

@@ -265,7 +265,7 @@

find

@@ -297,7 +297,7 @@

getGroup

@@ -325,7 +325,7 @@

getLayout

  • Returns LayoutData

    @@ -342,7 +342,7 @@

    loadLayout

  • @@ -372,7 +372,7 @@

    navigateToPanel

    @@ -405,7 +405,7 @@

    saveLayout

  • Returns LayoutBase

    @@ -422,7 +422,7 @@

    setLayout

  • Parameters

    @@ -446,7 +446,7 @@

    updateTab

    @@ -489,7 +489,7 @@

    Static getDerivedState

  • Parameters

    diff --git a/examples/adv-save-layout.html.html b/examples/adv-save-layout.html.html index 5b36630d..c9691d3d 100644 --- a/examples/adv-save-layout.html.html +++ b/examples/adv-save-layout.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/adv-tab-update.html.html b/examples/adv-tab-update.html.html index ac2f6d90..09ddeb36 100644 --- a/examples/adv-tab-update.html.html +++ b/examples/adv-tab-update.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/basic.html.html b/examples/basic.html.html index 28f2883d..cdd2d89f 100644 --- a/examples/basic.html.html +++ b/examples/basic.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/controlled-layout.html.html b/examples/controlled-layout.html.html index 9c27138b..ccc69d70 100644 --- a/examples/controlled-layout.html.html +++ b/examples/controlled-layout.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/dark-theme.html.html b/examples/dark-theme.html.html index df39608c..fabccdf5 100644 --- a/examples/dark-theme.html.html +++ b/examples/dark-theme.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style-dark.less"> + <link rel="stylesheet" href="./style-dark.scss"> <style> </style> diff --git a/examples/disable-dock.html.html b/examples/disable-dock.html.html index 8ffda252..8f05b697 100644 --- a/examples/disable-dock.html.html +++ b/examples/disable-dock.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/divider-box.html.html b/examples/divider-box.html.html index bfaa24e9..00376bb5 100644 --- a/examples/divider-box.html.html +++ b/examples/divider-box.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/drag-new-tab.html.html b/examples/drag-new-tab.html.html index 5d8ac175..6c401737 100644 --- a/examples/drag-new-tab.html.html +++ b/examples/drag-new-tab.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/drop-mode.html.html b/examples/drop-mode.html.html index 3fdc777f..ca02c9c5 100644 --- a/examples/drop-mode.html.html +++ b/examples/drop-mode.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/gesture.html.html b/examples/gesture.html.html index 4c3685dd..6bcfe882 100644 --- a/examples/gesture.html.html +++ b/examples/gesture.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> div { diff --git a/examples/index.html.html b/examples/index.html.html index d58074a3..78064bac 100644 --- a/examples/index.html.html +++ b/examples/index.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> html, body { width: 100%; diff --git a/examples/new-window.html.html b/examples/new-window.html.html index 666746fb..c617a8f2 100644 --- a/examples/new-window.html.html +++ b/examples/new-window.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/panel-extra.html.html b/examples/panel-extra.html.html index 872759a8..58d083aa 100644 --- a/examples/panel-extra.html.html +++ b/examples/panel-extra.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> .my-panel-extra-btn { cursor: pointer; diff --git a/examples/panel-style.html.html b/examples/panel-style.html.html index 4c584128..32052e55 100644 --- a/examples/panel-style.html.html +++ b/examples/panel-style.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> .github-icon { diff --git a/examples/panel-style.js b/examples/panel-style.js index fb750c17..712318f7 100644 --- a/examples/panel-style.js +++ b/examples/panel-style.js @@ -244,7 +244,7 @@ require("_bundle_loader")(require.resolve('./shared-import')).then(({ headless: { // the css class for this would be dock-panel-headless // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss floatable: true, maximizable: true }, @@ -269,14 +269,14 @@ require("_bundle_loader")(require.resolve('./shared-import')).then(({ } }, /*#__PURE__*/React.createElement("p", null, "Hide border and header."), "Move mouse near top border to show header."), // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss group: 'headless' }; let cardTab = { title: 'card-style', content: /*#__PURE__*/React.createElement("div", null, "card style"), // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss group: 'card' }; let customTab = { diff --git a/examples/panel-style.jsx.html b/examples/panel-style.jsx.html index c46cce66..342d3197 100644 --- a/examples/panel-style.jsx.html +++ b/examples/panel-style.jsx.html @@ -13,7 +13,7 @@ headless: { // the css class for this would be dock-panel-headless // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss floatable: true, maximizable: true, }, @@ -42,7 +42,7 @@ </div> ), // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss group: 'headless' }; let cardTab = { @@ -53,7 +53,7 @@ </div> ), // this is a pre-defined style, defined here: - // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less + // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss group: 'card' }; let customTab = { diff --git a/examples/save-layout.html.html b/examples/save-layout.html.html index 9b264cc9..7e7d6508 100644 --- a/examples/save-layout.html.html +++ b/examples/save-layout.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/standalone-divider.html.html b/examples/standalone-divider.html.html index 123dbb2c..cd5be7e8 100644 --- a/examples/standalone-divider.html.html +++ b/examples/standalone-divider.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> div { diff --git a/examples/style-dark.css b/examples/style-dark.css index c9beb065..f9c47610 100644 --- a/examples/style-dark.css +++ b/examples/style-dark.css @@ -1,19 +1,801 @@ +@charset "UTF-8"; +body > .dragging-layer { + position: absolute !important; + z-index: 9999; + overflow: visible; + margin: 0; + padding: 0; + border: none; + pointer-events: none; + opacity: 0.6; + font-size: 14px; + line-height: 1.5; + white-space: nowrap; + --default-background-color: #fff; + /* dragging element */ + /* icon */ +} +body > .dragging-layer > *:first-child { + pointer-events: none !important; + overflow: hidden !important; + transform: translate(-50%, -50%) !important; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.1); +} +body > .dragging-layer > .dragging { + /* prevent double translucent layers */ + opacity: 1 !important; +} +body > .dragging-layer > div:last-child { + position: absolute; + left: 12px; + top: 12px; +} + +.drag-initiator { + user-select: none; + -webkit-user-select: none; + touch-action: none; +} + +.drag-accept-reject::after { + content: "🚫"; +} + +.dock { + box-sizing: border-box; + width: 100%; + height: 100%; + position: absolute; + overflow: hidden; + display: flex; +} +.dock-bar { + font-size: 14px; + line-height: 1.5; + box-sizing: border-box; + overflow: hidden; + position: relative; + white-space: nowrap; + outline: none; + zoom: 1; +} +.dock-ink-bar { + position: absolute; + box-sizing: border-box; + margin-top: -3px; + background-color: #108ee9; + transform-origin: 0 0; + width: 0; + height: 0; +} +.dock-tab-btn-disabled { + cursor: default; + color: #ccc; +} +.dock-nav-animated { + transition: transform 0.25s cubic-bezier(0.35, 0, 0.25, 1); +} +.dock-tab { + box-sizing: border-box; + position: relative; + display: block; + min-width: 30px; + height: 30px; + text-align: center; + transition: color 0.25s cubic-bezier(0.35, 0, 0.25, 1); + padding: 0; + font-weight: 500; + border-bottom: 1px solid #ddd; + cursor: pointer; + float: left; + margin-right: 10px; + background: #fafafd; + outline: none; +} +.dock-tab.dragging { + opacity: 0.3; +} +.dock-tab > div { + padding: 4px 14px; + outline-color: #108ee9; +} +.dock-tab:hover { + color: #349fec; +} +.dock-tab-active, .dock-tab-active:hover { + color: #108ee9; + cursor: default; + transform: translateZ(0); +} +.dock-tab-disabled { + cursor: default; + color: #ccc; +} +.dock-tab-disabled:hover { + color: #ccc; +} +.dock-content-animated { + transition: margin 0.3s; +} +.dock-bottom > .dock-nav .dock-ink-bar-animated, .dock-bottom > div > .dock-nav .dock-ink-bar-animated, .dock-top > .dock-nav .dock-ink-bar-animated, .dock-top > div > .dock-nav .dock-ink-bar-animated { + transition: width 0.3s, left 0.3s, right 0.3s; +} +.dock-content-animated .dock-tabpane { + flex-shrink: 0; +} +.no-flexbox .dock-content { + transform: none !important; + overflow: auto; +} +.dock-tabpane:not(.dock-tabpane-active) { + animation-name: dock-fadeOut; + animation-duration: 0.5s; +} +@keyframes dock-fadeOut { + from { + height: 100%; + visibility: visible; + } + to { + height: 100%; + visibility: visible; + } +} +.dock-top { + flex-direction: column; +} +.dock-top .dock-bar { + flex: 0 0 auto; + background: #fafafd; + border-bottom: 1px solid #f3f3f3; + padding-left: 8px; +} +.dock-top .dock-content-animated { + flex-direction: row; +} +.dock-top .dock-tab-next { + right: 2px; +} +.dock-top .dock-ink-bar { + height: 2px; + bottom: 0; + left: 0; +} +.dock-tab-close-btn { + position: absolute; + cursor: pointer; + font-family: "Fredoka One", sans-serif; + color: #ddd; + right: -3px; + font-size: 12px; + width: 16px; + text-align: center; + top: 6px; + outline: none; + transition: all 0.25s ease-in-out; +} +.dock-tab-close-btn:before { + content: "X"; +} +.dock-tab-close-btn:hover, .dock-tab-close-btn:focus { + color: #666; + transform: scale(1.1, 1.1); +} +.dock-tab:hover .dock-tab-close-btn, .dock-tab-close-btn:focus { + opacity: 1; + color: #a2a2a2; +} +.dock-tab-hit-area { + position: absolute; + pointer-events: none; + top: 0; + bottom: 0; + left: -5px; + right: -5px; +} +.dock-pane-cache { + width: 100%; + height: 100%; +} +.dock-content { + display: flex; + width: 100%; + height: 100%; +} +.dock-content-holder { + flex: auto; +} +.dock-top > .dock-content-holder { + /* work around for the height issue in content holder*/ + height: 0; +} +.dock-content .dock-tabpane { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + outline: none; + flex: none; +} +.dock-nav { + display: flex; + flex: none; + position: relative; +} +.dock-nav-operations { + display: flex; +} +.dock-nav-more { + height: 30px; + border: none; + color: rgba(0, 0, 0, 0.85); + background: transparent; + cursor: pointer; + position: relative; + align-self: flex-end; +} +.dock-nav-more::after { + position: absolute; + z-index: 1; + content: ""; + pointer-events: none; + width: 30px; + height: 30px; + left: -30px; + top: 0; + box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08); +} +.dock-nav-wrap { + position: relative; + display: flex; + flex: auto; + align-self: stretch; + overflow: hidden; + white-space: nowrap; + transform: translate(0); +} +.dock-nav-list { + display: flex; + position: relative; + transition: transform 0.3s; +} +.dock-extra-content { + display: flex; + height: 30px; +} +.dock-extra-content .dock-tab-close-btn { + position: relative; + right: 4px; +} +.dock-dropdown { + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0, 0, 0, 0.85); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + font-feature-settings: "tnum"; + position: absolute; + top: -9999px; + left: -9999px; + z-index: 1050; + display: block; +} +.dock-dropdown-hidden { + display: none; +} +.dock-dropdown-menu { + max-height: 200px; + margin: 0; + padding: 4px 0; + overflow-x: hidden; + overflow-y: auto; + text-align: left; + list-style-type: none; + background-color: #fff; + background-clip: padding-box; + border-radius: 2px; + outline: none; + box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); +} +.dock-dropdown-menu-item { + min-width: 120px; + margin: 0; + padding: 5px 12px; + overflow: hidden; + color: rgba(0, 0, 0, 0.85); + font-weight: 400; + font-size: 14px; + line-height: 22px; + white-space: nowrap; + text-overflow: ellipsis; + cursor: pointer; + transition: all 0.3s; + position: relative; +} +.dock-dropdown-menu-item .dock-tab-hit-area { + left: 0; + right: 0; +} +.dock-dropdown-menu-item .dock-tab-close-btn { + right: 2px; +} +.dock-dropdown-menu-item:hover { + background: #f5f5f5; +} +.dock-dropdown-menu-item-disabled, .dock-dropdown-menu-item-disabled:hover { + color: #ccc; + background: 0 0; + cursor: not-allowed; +} + +body.dock-dragging .dock-tab-hit-area { + pointer-events: inherit; +} + +body.dock-dragging { + user-select: none; + -webkit-user-select: none; +} +body.dock-dragging iframe { + pointer-events: none; +} + +.dock-panel { + box-sizing: border-box; + position: relative; + color: rgba(0, 0, 0, 0.85); + background: #fff; + border: 1px solid #ddd; +} +.dock-panel.dragging { + opacity: 0.3; +} +.dock-panel-drag-size { + position: absolute; + z-index: 300; +} +.dock-panel-drag-size-t { + top: -4px; + left: 4px; + right: 4px; + height: 8px; + cursor: ns-resize; +} +.dock-panel-drag-size-b { + bottom: -4px; + left: 4px; + right: 4px; + height: 8px; + cursor: ns-resize; +} +.dock-panel-drag-size-l { + left: -4px; + top: 4px; + bottom: 4px; + width: 8px; + cursor: ew-resize; +} +.dock-panel-drag-size-r { + right: -4px; + top: 4px; + bottom: 4px; + width: 8px; + cursor: ew-resize; +} +.dock-panel-drag-size-t-l { + top: -4px; + left: -4px; + width: 8px; + height: 8px; + cursor: nwse-resize; +} +.dock-panel-drag-size-t-r { + top: -4px; + right: -4px; + width: 8px; + height: 8px; + cursor: nesw-resize; +} +.dock-panel-drag-size-b-l { + bottom: -4px; + left: -4px; + width: 8px; + height: 8px; + cursor: nesw-resize; +} +.dock-panel-drag-size-b-r { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='rgba(0, 0, 0, 0.1)' d='M2 12 L12 2 L12 12z'/%3E%3C/svg%3E"); + bottom: -4px; + right: -4px; + width: 17px; + height: 17px; + cursor: nwse-resize; +} + +.dock-box { + box-sizing: border-box; + display: flex; + align-items: stretch; +} + +.divider-box { + box-sizing: border-box; + display: flex; + align-items: stretch; +} +.divider-box > *:nth-child(odd) { + flex: 1 1 auto; +} + +.dock-divider { + box-sizing: border-box; + flex: 0 0 4px; + background: rgba(0, 0, 0, 0); + z-index: 1; +} + +.dock-hbox > .dock-divider { + transform: scaleX(3); + cursor: ew-resize; +} + +.dock-vbox { + flex-direction: column; +} +.dock-vbox > .dock-divider { + transform: scaleY(3); + cursor: ns-resize; +} + +.dock-fbox { + pointer-events: none; + z-index: 200; +} +.dock-fbox > .dock-panel { + position: absolute; + pointer-events: visible; + box-shadow: 0 0 4px #aaaaaa; +} +.dock-fbox > .dock-panel.dragging { + opacity: 0.8; + pointer-events: none; +} + +.dock-mbox { + z-index: 250; + width: 100%; + height: 100%; +} +.dock-mbox > .dock-panel { + width: 100%; + height: 100%; + box-shadow: 0 0 4px #aaaaaa; +} +.dock-mbox.dock-mbox-show { + visibility: visible; + animation: dock-mbox-show 0.2s ease; +} +.dock-mbox.dock-mbox-hide { + pointer-events: none; + visibility: hidden; + opacity: 0; + animation: dock-mbox-hide 0.2s ease; +} + +@keyframes dock-mbox-show { + from { + transform: scale(0.9, 0.9); + visibility: visible; + } + to { + transform: scale(1, 1); + visibility: visible; + } +} +@keyframes dock-mbox-hide { + from { + transform: scale(1, 1); + visibility: visible; + opacity: 1; + } + to { + transform: scale(0.9, 0.9); + visibility: visible; + opacity: 0; + } +} +.dock-wbox { + position: absolute; + width: 100%; + height: 100%; +} +.dock-wbox > .dock-panel { + border: none; + width: 100%; + height: 100%; +} + +.dock-layout { + overflow: hidden; + position: relative; +} +.dock-layout > .dock-box { + position: absolute; + width: 100%; + height: 100%; +} +.dock-layout > .dock-drop-indicator { + position: absolute; + box-sizing: border-box; + pointer-events: none; + z-index: 400; + border: solid 1px #fff; + background: #88c7f4; + opacity: 0.5; + box-shadow: 0 0 4px #ddd; + display: none; + transition: all 0.1s ease-out; +} + +.dock-drop-edge { + position: absolute; + top: 30px; + left: 0; + right: 0; + bottom: 0; + z-index: 100; + background: white; + border: none; + opacity: 0.01; +} + +.dock-drop-layer { + position: absolute; + pointer-events: none; + top: 30px; + left: 0; + right: 0; + bottom: 0; +} +.dock-drop-layer .dock-drop-square { + position: absolute; + box-sizing: border-box; + pointer-events: visible; + z-index: 300; + width: 32px; + height: 32px; + font-family: "Fredoka One", sans-serif; + color: #ddd; + background: #fff; + border: 1px solid transparent; + left: calc(50% - 16px); + top: calc(50% - 16px); +} +.dock-drop-layer .dock-drop-square .dock-drop-square-box { + box-sizing: border-box; + border: 1px solid #ddd; + width: 100%; + height: 100%; +} +.dock-drop-layer .dock-drop-square::before { + position: absolute; + width: 100%; + height: 100%; + display: block; + line-height: 30px; + text-align: center; +} +.dock-drop-layer .dock-drop-float { + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + opacity: 0.01; +} +.dock-drop-layer .dock-drop-left { + left: calc(50% - 48px); +} +.dock-drop-layer .dock-drop-left.dock-drop-deep { + left: calc(50% - 64px); + width: 16px; +} +.dock-drop-layer .dock-drop-left::before { + content: ">"; + transform: rotate(180deg); +} +.dock-drop-layer .dock-drop-right { + left: calc(50% + 16px); +} +.dock-drop-layer .dock-drop-right.dock-drop-deep { + left: calc(50% + 48px); + width: 16px; +} +.dock-drop-layer .dock-drop-right::before { + content: ">"; +} +.dock-drop-layer .dock-drop-top { + top: calc(50% - 48px); +} +.dock-drop-layer .dock-drop-top.dock-drop-deep { + top: calc(50% - 64px); + height: 16px; +} +.dock-drop-layer .dock-drop-top.dock-drop-deep::before { + line-height: 14px; +} +.dock-drop-layer .dock-drop-top::before { + content: ">"; + transform: rotate(270deg); +} +.dock-drop-layer .dock-drop-bottom { + top: calc(50% + 16px); +} +.dock-drop-layer .dock-drop-bottom.dock-drop-deep { + top: calc(50% + 48px); + height: 16px; +} +.dock-drop-layer .dock-drop-bottom.dock-drop-deep::before { + line-height: 14px; +} +.dock-drop-layer .dock-drop-bottom::before { + content: ">"; + transform: rotate(90deg); +} +.dock-drop-layer .dock-drop-square-dropping { + background: #88c7f4; + color: white; +} + +.dock-panel.dock-panel-dropping .dock-tab-close-btn { + pointer-events: none; +} + +.dock-panel-max-btn, .dock-panel-min-btn { + height: 25px; + width: 21px; + font-family: "Fredoka One", sans-serif; + margin: 2px 2px 2px 0; + padding: 6px 4px 4px 2px; + cursor: pointer; + transition: all 0.25s ease-in-out; + outline: none; + user-select: none; + box-sizing: border-box; +} +.dock-panel-max-btn:before, .dock-panel-min-btn:before { + position: absolute; + content: " "; + border: 2px solid #ddd; + border-radius: 1px; + width: 13px; + height: 13px; + box-sizing: border-box; +} +.dock-panel-max-btn:hover, .dock-panel-max-btn:focus, .dock-panel-min-btn:hover, .dock-panel-min-btn:focus { + color: #a2a2a2; +} +.dock-panel-max-btn:hover:before, .dock-panel-max-btn:focus:before, .dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { + border-color: #a2a2a2; +} +.dock-panel-max-btn:hover, .dock-panel-min-btn:hover { + transform: scale(1.1); +} + +.dock-panel-min-btn:before { + position: absolute; + border-radius: 1px; + width: 9px; + height: 9px; + border: none; + content: "-"; + color: #666; + font-size: 20px; + line-height: 4px; +} +.dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { + color: #999; +} + +.dock-panel.dock-style-place-holder { + border: none; +} +.dock-panel.dock-style-place-holder .dock-bar { + display: none; +} + +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless { + border: none; +} +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar { + position: absolute; + z-index: 1; + opacity: 0; + height: 20px; + width: 100%; + transition: all 0.15s ease-in-out; +} +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar { + opacity: 1; + height: 31px; +} +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-content { + height: 100%; +} + +.dock-panel.dock-style-main { + border: none; +} +.dock-panel.dock-style-main .dock-bar { + background: none; + border-bottom: 1px solid #eee; +} +.dock-panel.dock-style-main .dock-tab { + background: #fff; +} + +.dock-panel.dock-style-card .dock-tab { + margin-right: 2px; + border: 1px solid #ddd; + border-radius: 5px 5px 0 0; +} +.dock-panel.dock-style-card .dock-tab.dock-tab-active { + border-bottom: 1px solid #fff; + background: #fff; +} +.dock-panel.dock-style-card .dock-bar { + border-bottom: 1px solid #ddd; + overflow: visible; +} +.dock-panel.dock-style-card .dock-nav-wrap { + padding-top: 5px; + transform: translate(0, 1px); +} +.dock-panel.dock-style-card .dock-ink-bar { + /* hide animated ink bar */ + background: #fff; + opacity: 0; +} +.dock-panel.dock-style-card .dock-tab-hit-area { + /* cover the border area */ + left: -2px; + right: -2px; +} +.dock-panel.dock-style-card .dock-panel-max-btn, .dock-panel.dock-style-card .dock-panel-min-btn { + margin-top: 4px; +} +.dock-panel.dock-style-card .dock-tab-close-btn { + right: 0; + font-size: 10px; + top: 8px; +} +.dock-panel.dock-style-card .dock-extra-content { + height: 35px; +} + body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; height: 100%; margin: 0; - background: #000; - color: rgba(255, 255, 255, 0.85); + background: #fff; + color: rgba(0, 0, 0, 0.85); } + .dock-tabpane > div { padding: 20px; } + .top-panel { position: absolute; display: flex; align-items: center; padding: 0 20px; } + .btn { display: inline-block; margin: 5px; @@ -23,7 +805,7 @@ body { user-select: none; -webkit-user-select: none; color: #212529; - background-color: #141414; + background-color: #fff; border: 1px solid #e9ecef; padding: 3px 10px; font-size: 1rem; @@ -31,27 +813,32 @@ body { border-radius: 0.25rem; cursor: pointer; } + .btn:hover { color: #000; background-color: #f8f8f8; border-color: #cbd3da; text-decoration: none; } + .btn:focus { outline: 0; } + .btn.disabled { color: #ccc; background-color: #f8f8f8; border-color: #e9ecef; opacity: 0.65; } + iframe { box-sizing: border-box; border: none; width: 100%; height: 100%; } + body > .dragging-layer { position: absolute !important; z-index: 9999; @@ -83,14 +870,17 @@ body > .dragging-layer > div:last-child { left: 12px; top: 12px; } + .drag-initiator { user-select: none; -webkit-user-select: none; touch-action: none; } + .drag-accept-reject::after { content: "🚫"; } + .dock { box-sizing: border-box; width: 100%; @@ -152,8 +942,7 @@ body > .dragging-layer > div:last-child { .dock-tab:hover { color: #40a5ed; } -.dock-tab-active, -.dock-tab-active:hover { +.dock-tab-active, .dock-tab-active:hover { color: #108ee9; cursor: default; transform: translateZ(0); @@ -168,10 +957,7 @@ body > .dragging-layer > div:last-child { .dock-content-animated { transition: margin 0.3s; } -.dock-bottom > .dock-nav .dock-ink-bar-animated, -.dock-top > .dock-nav .dock-ink-bar-animated, -.dock-bottom > div > .dock-nav .dock-ink-bar-animated, -.dock-top > div > .dock-nav .dock-ink-bar-animated { +.dock-bottom > .dock-nav .dock-ink-bar-animated, .dock-bottom > div > .dock-nav .dock-ink-bar-animated, .dock-top > .dock-nav .dock-ink-bar-animated, .dock-top > div > .dock-nav .dock-ink-bar-animated { transition: width 0.3s, left 0.3s, right 0.3s; } .dock-content-animated .dock-tabpane { @@ -218,7 +1004,7 @@ body > .dragging-layer > div:last-child { .dock-tab-close-btn { position: absolute; cursor: pointer; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; color: #444; right: -3px; font-size: 12px; @@ -231,13 +1017,11 @@ body > .dragging-layer > div:last-child { .dock-tab-close-btn:before { content: "X"; } -.dock-tab-close-btn:hover, -.dock-tab-close-btn:focus { +.dock-tab-close-btn:hover, .dock-tab-close-btn:focus { color: #fff; transform: scale(1.1, 1.1); } -.dock-tab:hover .dock-tab-close-btn, -.dock-tab-close-btn:focus { +.dock-tab:hover .dock-tab-close-btn, .dock-tab-close-btn:focus { opacity: 1; color: #a2a2a2; } @@ -293,7 +1077,7 @@ body > .dragging-layer > div:last-child { .dock-nav-more::after { position: absolute; z-index: 1; - content: ''; + content: ""; pointer-events: none; width: 30px; height: 30px; @@ -379,17 +1163,18 @@ body > .dragging-layer > div:last-child { right: 2px; } .dock-dropdown-menu-item:hover { - background: #2b2b2b; + background: #2c2c2c; } -.dock-dropdown-menu-item-disabled, -.dock-dropdown-menu-item-disabled:hover { +.dock-dropdown-menu-item-disabled, .dock-dropdown-menu-item-disabled:hover { color: #ccc; background: 0 0; cursor: not-allowed; } + body.dock-dragging .dock-tab-hit-area { pointer-events: inherit; } + body.dock-dragging { user-select: none; -webkit-user-select: none; @@ -397,6 +1182,7 @@ body.dock-dragging { body.dock-dragging iframe { pointer-events: none; } + .dock-panel { box-sizing: border-box; position: relative; @@ -468,11 +1254,13 @@ body.dock-dragging iframe { height: 17px; cursor: nwse-resize; } + .dock-box { box-sizing: border-box; display: flex; align-items: stretch; } + .divider-box { box-sizing: border-box; display: flex; @@ -481,16 +1269,19 @@ body.dock-dragging iframe { .divider-box > *:nth-child(odd) { flex: 1 1 auto; } + .dock-divider { box-sizing: border-box; flex: 0 0 4px; background: rgba(0, 0, 0, 0); z-index: 1; } + .dock-hbox > .dock-divider { transform: scaleX(3); cursor: ew-resize; } + .dock-vbox { flex-direction: column; } @@ -498,6 +1289,7 @@ body.dock-dragging iframe { transform: scaleY(3); cursor: ns-resize; } + .dock-fbox { pointer-events: none; z-index: 200; @@ -511,6 +1303,7 @@ body.dock-dragging iframe { opacity: 0.8; pointer-events: none; } + .dock-mbox { z-index: 250; width: 100%; @@ -531,6 +1324,7 @@ body.dock-dragging iframe { opacity: 0; animation: dock-mbox-hide 0.2s ease; } + @keyframes dock-mbox-show { from { transform: scale(0.9, 0.9); @@ -563,6 +1357,7 @@ body.dock-dragging iframe { width: 100%; height: 100%; } + .dock-layout { overflow: hidden; position: relative; @@ -584,6 +1379,7 @@ body.dock-dragging iframe { display: none; transition: all 0.1s ease-out; } + .dock-drop-edge { position: absolute; top: 30px; @@ -595,6 +1391,7 @@ body.dock-dragging iframe { border: none; opacity: 0.01; } + .dock-drop-layer { position: absolute; pointer-events: none; @@ -610,7 +1407,7 @@ body.dock-dragging iframe { z-index: 300; width: 32px; height: 32px; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; color: #444; background: #141414; border: 1px solid transparent; @@ -648,7 +1445,7 @@ body.dock-dragging iframe { width: 16px; } .dock-drop-layer .dock-drop-left::before { - content: '>'; + content: ">"; transform: rotate(180deg); } .dock-drop-layer .dock-drop-right { @@ -659,7 +1456,7 @@ body.dock-dragging iframe { width: 16px; } .dock-drop-layer .dock-drop-right::before { - content: '>'; + content: ">"; } .dock-drop-layer .dock-drop-top { top: calc(50% - 48px); @@ -672,7 +1469,7 @@ body.dock-dragging iframe { line-height: 14px; } .dock-drop-layer .dock-drop-top::before { - content: '>'; + content: ">"; transform: rotate(270deg); } .dock-drop-layer .dock-drop-bottom { @@ -686,21 +1483,22 @@ body.dock-dragging iframe { line-height: 14px; } .dock-drop-layer .dock-drop-bottom::before { - content: '>'; + content: ">"; transform: rotate(90deg); } .dock-drop-layer .dock-drop-square-dropping { background: #125d94; color: white; } + .dock-panel.dock-panel-dropping .dock-tab-close-btn { pointer-events: none; } -.dock-panel-max-btn, -.dock-panel-min-btn { + +.dock-panel-max-btn, .dock-panel-min-btn { height: 25px; width: 21px; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; margin: 2px 2px 2px 0; padding: 6px 4px 4px 2px; cursor: pointer; @@ -709,8 +1507,7 @@ body.dock-dragging iframe { user-select: none; box-sizing: border-box; } -.dock-panel-max-btn:before, -.dock-panel-min-btn:before { +.dock-panel-max-btn:before, .dock-panel-min-btn:before { position: absolute; content: " "; border: 2px solid #444; @@ -719,22 +1516,16 @@ body.dock-dragging iframe { height: 13px; box-sizing: border-box; } -.dock-panel-max-btn:hover, -.dock-panel-min-btn:hover, -.dock-panel-max-btn:focus, -.dock-panel-min-btn:focus { +.dock-panel-max-btn:hover, .dock-panel-max-btn:focus, .dock-panel-min-btn:hover, .dock-panel-min-btn:focus { color: #a2a2a2; } -.dock-panel-max-btn:hover:before, -.dock-panel-min-btn:hover:before, -.dock-panel-max-btn:focus:before, -.dock-panel-min-btn:focus:before { +.dock-panel-max-btn:hover:before, .dock-panel-max-btn:focus:before, .dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { border-color: #a2a2a2; } -.dock-panel-max-btn:hover, -.dock-panel-min-btn:hover { +.dock-panel-max-btn:hover, .dock-panel-min-btn:hover { transform: scale(1.1); } + .dock-panel-min-btn:before { position: absolute; border-radius: 1px; @@ -746,16 +1537,17 @@ body.dock-dragging iframe { font-size: 20px; line-height: 4px; } -.dock-panel-min-btn:hover:before, -.dock-panel-min-btn:focus:before { +.dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { color: #999; } + .dock-panel.dock-style-place-holder { border: none; } .dock-panel.dock-style-place-holder .dock-bar { display: none; } + .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless { border: none; } @@ -767,15 +1559,14 @@ body.dock-dragging iframe { width: 100%; transition: all 0.15s ease-in-out; } -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar { +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar { opacity: 1; height: 31px; } .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-content { height: 100%; } + .dock-panel.dock-style-main { border: none; } @@ -786,6 +1577,7 @@ body.dock-dragging iframe { .dock-panel.dock-style-main .dock-tab { background: #141414; } + .dock-panel.dock-style-card .dock-tab { margin-right: 2px; border: 1px solid #434343; @@ -813,8 +1605,7 @@ body.dock-dragging iframe { left: -2px; right: -2px; } -.dock-panel.dock-style-card .dock-panel-max-btn, -.dock-panel.dock-style-card .dock-panel-min-btn { +.dock-panel.dock-style-card .dock-panel-max-btn, .dock-panel.dock-style-card .dock-panel-min-btn { margin-top: 4px; } .dock-panel.dock-style-card .dock-tab-close-btn { @@ -824,4 +1615,4 @@ body.dock-dragging iframe { } .dock-panel.dock-style-card .dock-extra-content { height: 35px; -} +} \ No newline at end of file diff --git a/examples/style.css b/examples/style.css index f20cca0a..fe9d5f1d 100644 --- a/examples/style.css +++ b/examples/style.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; body > .dragging-layer { position: absolute !important; z-index: 9999; @@ -29,14 +30,17 @@ body > .dragging-layer > div:last-child { left: 12px; top: 12px; } + .drag-initiator { user-select: none; -webkit-user-select: none; touch-action: none; } + .drag-accept-reject::after { content: "🚫"; } + .dock { box-sizing: border-box; width: 100%; @@ -98,8 +102,7 @@ body > .dragging-layer > div:last-child { .dock-tab:hover { color: #349fec; } -.dock-tab-active, -.dock-tab-active:hover { +.dock-tab-active, .dock-tab-active:hover { color: #108ee9; cursor: default; transform: translateZ(0); @@ -114,10 +117,7 @@ body > .dragging-layer > div:last-child { .dock-content-animated { transition: margin 0.3s; } -.dock-bottom > .dock-nav .dock-ink-bar-animated, -.dock-top > .dock-nav .dock-ink-bar-animated, -.dock-bottom > div > .dock-nav .dock-ink-bar-animated, -.dock-top > div > .dock-nav .dock-ink-bar-animated { +.dock-bottom > .dock-nav .dock-ink-bar-animated, .dock-bottom > div > .dock-nav .dock-ink-bar-animated, .dock-top > .dock-nav .dock-ink-bar-animated, .dock-top > div > .dock-nav .dock-ink-bar-animated { transition: width 0.3s, left 0.3s, right 0.3s; } .dock-content-animated .dock-tabpane { @@ -164,7 +164,7 @@ body > .dragging-layer > div:last-child { .dock-tab-close-btn { position: absolute; cursor: pointer; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; color: #ddd; right: -3px; font-size: 12px; @@ -177,13 +177,11 @@ body > .dragging-layer > div:last-child { .dock-tab-close-btn:before { content: "X"; } -.dock-tab-close-btn:hover, -.dock-tab-close-btn:focus { +.dock-tab-close-btn:hover, .dock-tab-close-btn:focus { color: #666; transform: scale(1.1, 1.1); } -.dock-tab:hover .dock-tab-close-btn, -.dock-tab-close-btn:focus { +.dock-tab:hover .dock-tab-close-btn, .dock-tab-close-btn:focus { opacity: 1; color: #a2a2a2; } @@ -239,7 +237,7 @@ body > .dragging-layer > div:last-child { .dock-nav-more::after { position: absolute; z-index: 1; - content: ''; + content: ""; pointer-events: none; width: 30px; height: 30px; @@ -327,15 +325,16 @@ body > .dragging-layer > div:last-child { .dock-dropdown-menu-item:hover { background: #f5f5f5; } -.dock-dropdown-menu-item-disabled, -.dock-dropdown-menu-item-disabled:hover { +.dock-dropdown-menu-item-disabled, .dock-dropdown-menu-item-disabled:hover { color: #ccc; background: 0 0; cursor: not-allowed; } + body.dock-dragging .dock-tab-hit-area { pointer-events: inherit; } + body.dock-dragging { user-select: none; -webkit-user-select: none; @@ -343,6 +342,7 @@ body.dock-dragging { body.dock-dragging iframe { pointer-events: none; } + .dock-panel { box-sizing: border-box; position: relative; @@ -414,11 +414,13 @@ body.dock-dragging iframe { height: 17px; cursor: nwse-resize; } + .dock-box { box-sizing: border-box; display: flex; align-items: stretch; } + .divider-box { box-sizing: border-box; display: flex; @@ -427,16 +429,19 @@ body.dock-dragging iframe { .divider-box > *:nth-child(odd) { flex: 1 1 auto; } + .dock-divider { box-sizing: border-box; flex: 0 0 4px; background: rgba(0, 0, 0, 0); z-index: 1; } + .dock-hbox > .dock-divider { transform: scaleX(3); cursor: ew-resize; } + .dock-vbox { flex-direction: column; } @@ -444,6 +449,7 @@ body.dock-dragging iframe { transform: scaleY(3); cursor: ns-resize; } + .dock-fbox { pointer-events: none; z-index: 200; @@ -457,6 +463,7 @@ body.dock-dragging iframe { opacity: 0.8; pointer-events: none; } + .dock-mbox { z-index: 250; width: 100%; @@ -477,6 +484,7 @@ body.dock-dragging iframe { opacity: 0; animation: dock-mbox-hide 0.2s ease; } + @keyframes dock-mbox-show { from { transform: scale(0.9, 0.9); @@ -509,6 +517,7 @@ body.dock-dragging iframe { width: 100%; height: 100%; } + .dock-layout { overflow: hidden; position: relative; @@ -530,6 +539,7 @@ body.dock-dragging iframe { display: none; transition: all 0.1s ease-out; } + .dock-drop-edge { position: absolute; top: 30px; @@ -541,6 +551,7 @@ body.dock-dragging iframe { border: none; opacity: 0.01; } + .dock-drop-layer { position: absolute; pointer-events: none; @@ -556,7 +567,7 @@ body.dock-dragging iframe { z-index: 300; width: 32px; height: 32px; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; color: #ddd; background: #fff; border: 1px solid transparent; @@ -594,7 +605,7 @@ body.dock-dragging iframe { width: 16px; } .dock-drop-layer .dock-drop-left::before { - content: '>'; + content: ">"; transform: rotate(180deg); } .dock-drop-layer .dock-drop-right { @@ -605,7 +616,7 @@ body.dock-dragging iframe { width: 16px; } .dock-drop-layer .dock-drop-right::before { - content: '>'; + content: ">"; } .dock-drop-layer .dock-drop-top { top: calc(50% - 48px); @@ -618,7 +629,7 @@ body.dock-dragging iframe { line-height: 14px; } .dock-drop-layer .dock-drop-top::before { - content: '>'; + content: ">"; transform: rotate(270deg); } .dock-drop-layer .dock-drop-bottom { @@ -632,21 +643,22 @@ body.dock-dragging iframe { line-height: 14px; } .dock-drop-layer .dock-drop-bottom::before { - content: '>'; + content: ">"; transform: rotate(90deg); } .dock-drop-layer .dock-drop-square-dropping { background: #88c7f4; color: white; } + .dock-panel.dock-panel-dropping .dock-tab-close-btn { pointer-events: none; } -.dock-panel-max-btn, -.dock-panel-min-btn { + +.dock-panel-max-btn, .dock-panel-min-btn { height: 25px; width: 21px; - font-family: 'Fredoka One', sans-serif; + font-family: "Fredoka One", sans-serif; margin: 2px 2px 2px 0; padding: 6px 4px 4px 2px; cursor: pointer; @@ -655,8 +667,7 @@ body.dock-dragging iframe { user-select: none; box-sizing: border-box; } -.dock-panel-max-btn:before, -.dock-panel-min-btn:before { +.dock-panel-max-btn:before, .dock-panel-min-btn:before { position: absolute; content: " "; border: 2px solid #ddd; @@ -665,22 +676,16 @@ body.dock-dragging iframe { height: 13px; box-sizing: border-box; } -.dock-panel-max-btn:hover, -.dock-panel-min-btn:hover, -.dock-panel-max-btn:focus, -.dock-panel-min-btn:focus { +.dock-panel-max-btn:hover, .dock-panel-max-btn:focus, .dock-panel-min-btn:hover, .dock-panel-min-btn:focus { color: #a2a2a2; } -.dock-panel-max-btn:hover:before, -.dock-panel-min-btn:hover:before, -.dock-panel-max-btn:focus:before, -.dock-panel-min-btn:focus:before { +.dock-panel-max-btn:hover:before, .dock-panel-max-btn:focus:before, .dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { border-color: #a2a2a2; } -.dock-panel-max-btn:hover, -.dock-panel-min-btn:hover { +.dock-panel-max-btn:hover, .dock-panel-min-btn:hover { transform: scale(1.1); } + .dock-panel-min-btn:before { position: absolute; border-radius: 1px; @@ -692,16 +697,17 @@ body.dock-dragging iframe { font-size: 20px; line-height: 4px; } -.dock-panel-min-btn:hover:before, -.dock-panel-min-btn:focus:before { +.dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before { color: #999; } + .dock-panel.dock-style-place-holder { border: none; } .dock-panel.dock-style-place-holder .dock-bar { display: none; } + .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless { border: none; } @@ -713,15 +719,14 @@ body.dock-dragging iframe { width: 100%; transition: all 0.15s ease-in-out; } -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, -.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar { +.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar { opacity: 1; height: 31px; } .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-content { height: 100%; } + .dock-panel.dock-style-main { border: none; } @@ -732,6 +737,7 @@ body.dock-dragging iframe { .dock-panel.dock-style-main .dock-tab { background: #fff; } + .dock-panel.dock-style-card .dock-tab { margin-right: 2px; border: 1px solid #ddd; @@ -759,8 +765,7 @@ body.dock-dragging iframe { left: -2px; right: -2px; } -.dock-panel.dock-style-card .dock-panel-max-btn, -.dock-panel.dock-style-card .dock-panel-min-btn { +.dock-panel.dock-style-card .dock-panel-max-btn, .dock-panel.dock-style-card .dock-panel-min-btn { margin-top: 4px; } .dock-panel.dock-style-card .dock-tab-close-btn { @@ -771,6 +776,7 @@ body.dock-dragging iframe { .dock-panel.dock-style-card .dock-extra-content { height: 35px; } + body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; height: 100%; @@ -778,15 +784,18 @@ body { background: #fff; color: rgba(0, 0, 0, 0.85); } + .dock-tabpane > div { padding: 20px; } + .top-panel { position: absolute; display: flex; align-items: center; padding: 0 20px; } + .btn { display: inline-block; margin: 5px; @@ -804,24 +813,28 @@ body { border-radius: 0.25rem; cursor: pointer; } + .btn:hover { color: #000; background-color: #f8f8f8; border-color: #cbd3da; text-decoration: none; } + .btn:focus { outline: 0; } + .btn.disabled { color: #ccc; background-color: #f8f8f8; border-color: #e9ecef; opacity: 0.65; } + iframe { box-sizing: border-box; border: none; width: 100%; height: 100%; -} +} \ No newline at end of file diff --git a/examples/tab-cache.html.html b/examples/tab-cache.html.html index d94ab4dd..9957a17c 100644 --- a/examples/tab-cache.html.html +++ b/examples/tab-cache.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/tab-min-size.html.html b/examples/tab-min-size.html.html index 09979963..53cc02f0 100644 --- a/examples/tab-min-size.html.html +++ b/examples/tab-min-size.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/examples/tab-update.html.html b/examples/tab-update.html.html index d69d1652..b9045582 100644 --- a/examples/tab-update.html.html +++ b/examples/tab-update.html.html @@ -11,7 +11,7 @@ <meta name="viewport" content="width=device-width"> <title>rc-dock</title> <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous"> - <link rel="stylesheet" href="./style.less"> + <link rel="stylesheet" href="./style.scss"> <style> </style> diff --git a/interfaces/dockdata.boxbase.html b/interfaces/dockdata.boxbase.html index 3531ca02..0d5e8bb1 100644 --- a/interfaces/dockdata.boxbase.html +++ b/interfaces/dockdata.boxbase.html @@ -103,7 +103,7 @@

    children

    children: (PanelBase | BoxBase)[]
    @@ -113,7 +113,7 @@

    Optional id

    id: string
    @@ -128,7 +128,7 @@

    mode

    mode: DockMode
    @@ -138,7 +138,7 @@

    Optional size

    size: number
    diff --git a/interfaces/dockdata.boxdata.html b/interfaces/dockdata.boxdata.html index d0cb81dc..227ef675 100644 --- a/interfaces/dockdata.boxdata.html +++ b/interfaces/dockdata.boxdata.html @@ -119,7 +119,7 @@

    children

    @@ -130,7 +130,7 @@

    Optional heightFlex

    @@ -141,7 +141,7 @@

    Optional id

    @@ -157,7 +157,7 @@

    Optional minHeight

    @@ -168,7 +168,7 @@

    Optional minWidth

    @@ -179,7 +179,7 @@

    mode

    @@ -190,7 +190,7 @@

    Optional parent

    @@ -201,7 +201,7 @@

    Optional size

    @@ -218,7 +218,7 @@

    Optional widthFlex

    diff --git a/interfaces/dockdata.dockcontext.html b/interfaces/dockdata.dockcontext.html index 0620fc8f..a8672218 100644 --- a/interfaces/dockdata.dockcontext.html +++ b/interfaces/dockdata.dockcontext.html @@ -109,7 +109,7 @@

    dockMove

  • @@ -167,7 +167,7 @@

    find

  • @@ -198,7 +198,7 @@

    getGroup

  • @@ -226,7 +226,7 @@

    navigateToPanel

  • @@ -259,7 +259,7 @@

    updateTab

  • diff --git a/interfaces/dockdata.floatposition.html b/interfaces/dockdata.floatposition.html index 621d62fa..a4dc0264 100644 --- a/interfaces/dockdata.floatposition.html +++ b/interfaces/dockdata.floatposition.html @@ -104,7 +104,7 @@

    height

    @@ -114,7 +114,7 @@

    left

    left: number
    @@ -124,7 +124,7 @@

    top

    top: number
    @@ -135,7 +135,7 @@

    width

    diff --git a/interfaces/dockdata.floatsize.html b/interfaces/dockdata.floatsize.html index 397164a8..bbbe0a94 100644 --- a/interfaces/dockdata.floatsize.html +++ b/interfaces/dockdata.floatsize.html @@ -101,7 +101,7 @@

    height

    height: number
    @@ -111,7 +111,7 @@

    width

    width: number
    diff --git a/interfaces/dockdata.layoutbase.html b/interfaces/dockdata.layoutbase.html index 4118d41e..ca3be50b 100644 --- a/interfaces/dockdata.layoutbase.html +++ b/interfaces/dockdata.layoutbase.html @@ -103,7 +103,7 @@

    dockbox

    dockbox: BoxBase
    @@ -113,7 +113,7 @@

    Optional floatbox

    floatbox: BoxBase
    @@ -123,7 +123,7 @@

    Optional maxbox

    maxbox: BoxBase
    @@ -133,7 +133,7 @@

    Optional windowbox

    windowbox: BoxBase
    diff --git a/interfaces/dockdata.layoutdata.html b/interfaces/dockdata.layoutdata.html index 3edabbb5..c3b5d5e1 100644 --- a/interfaces/dockdata.layoutdata.html +++ b/interfaces/dockdata.layoutdata.html @@ -104,7 +104,7 @@

    dockbox

    @@ -120,7 +120,7 @@

    Optional floatbox

    @@ -137,7 +137,7 @@

    Optional maxbox

    @@ -154,7 +154,7 @@

    Optional windowbox

    diff --git a/interfaces/dockdata.panelbase.html b/interfaces/dockdata.panelbase.html index bce8e5a3..56fcca86 100644 --- a/interfaces/dockdata.panelbase.html +++ b/interfaces/dockdata.panelbase.html @@ -109,7 +109,7 @@

    Optional activeId

    activeId: string
    @@ -124,7 +124,7 @@

    Optional group

    group: string
    @@ -139,7 +139,7 @@

    Optional h

    h: number
    @@ -154,7 +154,7 @@

    Optional id

    id: string
    @@ -169,7 +169,7 @@

    Optional size

    size: number
    @@ -185,7 +185,7 @@

    tabs

    tabs: TabBase[]
    @@ -195,7 +195,7 @@

    Optional w

    w: number
    @@ -210,7 +210,7 @@

    Optional x

    x: number
    @@ -225,7 +225,7 @@

    Optional y

    y: number
    @@ -240,7 +240,7 @@

    Optional z

    z: number
    diff --git a/interfaces/dockdata.paneldata.html b/interfaces/dockdata.paneldata.html index 7d44732a..155acb9e 100644 --- a/interfaces/dockdata.paneldata.html +++ b/interfaces/dockdata.paneldata.html @@ -126,7 +126,7 @@

    Optional activeId

    @@ -142,7 +142,7 @@

    Optional group

    @@ -158,7 +158,7 @@

    Optional h

    @@ -174,7 +174,7 @@

    Optional heightFlex

    @@ -185,7 +185,7 @@

    Optional id

    @@ -201,7 +201,7 @@

    Optional minHeight

    @@ -212,7 +212,7 @@

    Optional minWidth

    @@ -222,7 +222,7 @@

    Optional panelLock

    panelLock: PanelLock
    @@ -240,7 +240,7 @@

    Optional parent

    @@ -251,7 +251,7 @@

    Optional size

    @@ -268,7 +268,7 @@

    tabs

    @@ -279,7 +279,7 @@

    Optional w

    @@ -295,7 +295,7 @@

    Optional widthFlex

    @@ -306,7 +306,7 @@

    Optional x

    @@ -322,7 +322,7 @@

    Optional y

    @@ -338,7 +338,7 @@

    Optional z

    diff --git a/interfaces/dockdata.tabbase.html b/interfaces/dockdata.tabbase.html index 39016dd4..60ce463a 100644 --- a/interfaces/dockdata.tabbase.html +++ b/interfaces/dockdata.tabbase.html @@ -100,7 +100,7 @@

    Optional id

    id: string
    diff --git a/interfaces/dockdata.tabdata.html b/interfaces/dockdata.tabdata.html index 09025366..e570dc63 100644 --- a/interfaces/dockdata.tabdata.html +++ b/interfaces/dockdata.tabdata.html @@ -111,7 +111,7 @@

    Optional cacheContext

    cacheContext: Context<any>
    @@ -128,7 +128,7 @@

    Optional cached

    cached: boolean
    @@ -147,7 +147,7 @@

    Optional closable

    closable: boolean
    @@ -157,7 +157,7 @@

    content

    content: ReactElement<any, string | JSXElementConstructor<any>> | ((tab: TabData) => ReactElement<any, string | JSXElementConstructor<any>>)
    @@ -167,7 +167,7 @@

    Optional group

    group: string
    @@ -187,7 +187,7 @@

    Optional id

    @@ -203,7 +203,7 @@

    Optional minHeight

    @@ -214,7 +214,7 @@

    Optional minWidth

    @@ -224,7 +224,7 @@

    title

    title: ReactChild
    diff --git a/interfaces/dockdata.tabgroup.html b/interfaces/dockdata.tabgroup.html index b98c2946..0d5cae8e 100644 --- a/interfaces/dockdata.tabgroup.html +++ b/interfaces/dockdata.tabgroup.html @@ -106,7 +106,7 @@

    Optional animated

    animated: boolean
    @@ -122,7 +122,7 @@

    Optional disableDock

    disableDock: boolean
    @@ -138,7 +138,7 @@

    Optional floatable

    floatable: boolean | "singleTab"
    @@ -155,7 +155,7 @@

    Optional heightFlex

    heightFlex: number
    @@ -170,7 +170,7 @@

    Optional maximizable

    maximizable: boolean
    @@ -186,7 +186,7 @@

    Optional moreIcon

    moreIcon: ReactNode
    @@ -201,7 +201,7 @@

    Optional newWindow

    newWindow: boolean
    @@ -217,7 +217,7 @@

    Optional panelExtra

    panelExtra: (panel: PanelData, context: DockContext) => ReactElement<any, string | JSXElementConstructor<any>>
    @@ -258,7 +258,7 @@

    Optional preferredFloatpreferredFloatHeight: [number, number]

    @@ -275,7 +275,7 @@

    Optional preferredFloatpreferredFloatWidth: [number, number]

    @@ -292,7 +292,7 @@

    Optional tabLocked

    tabLocked: boolean
    @@ -308,7 +308,7 @@

    Optional widthFlex

    widthFlex: number
    diff --git a/interfaces/dockdata.tabpanecache.html b/interfaces/dockdata.tabpanecache.html index 54d7c0db..f994a120 100644 --- a/interfaces/dockdata.tabpanecache.html +++ b/interfaces/dockdata.tabpanecache.html @@ -98,7 +98,7 @@

    div

    div: HTMLDivElement
    @@ -108,7 +108,7 @@

    id

    id: string
    @@ -118,7 +118,7 @@

    owner

    owner: any
    @@ -128,7 +128,7 @@

    Optional portal

    portal: ReactPortal
    diff --git a/interfaces/docklayout.layoutprops.html b/interfaces/docklayout.layoutprops.html index d2d2801b..37b755c6 100644 --- a/interfaces/docklayout.layoutprops.html +++ b/interfaces/docklayout.layoutprops.html @@ -111,7 +111,7 @@

    Optional defaultLayoutdefaultLayout: LayoutData

    @@ -129,7 +129,7 @@

    Optional dockId

    dockId: string
    @@ -145,7 +145,7 @@

    Optional dropMode

    dropMode: "default" | "edge"
    @@ -166,7 +166,7 @@

    Optional groups

    groups: {}
    @@ -189,7 +189,7 @@

    Optional layout

    layout: LayoutBase
    @@ -205,7 +205,7 @@

    Optional maximizeTo

    maximizeTo: string | HTMLElement
    @@ -221,7 +221,7 @@

    Optional style

    style: CSSProperties
    @@ -238,7 +238,7 @@

    Optional afterPanelL
  • @@ -273,7 +273,7 @@

    Optional afterPanelS
  • @@ -304,7 +304,7 @@

    Optional loadTab

  • @@ -336,7 +336,7 @@

    Optional onLayoutCha

  • Parameters

    @@ -374,7 +374,7 @@

    Optional saveTab