show close button on float panel if all tabs are closable

ticlo · May 30, 2024 · 1e60500 · 1e60500
1 parent 83ddbc4
commit 1e60500
Show file tree

Hide file tree

Showing 11 changed files with 712 additions and 32 deletions.
diff --git a/dist/rc-dock-dark.css b/dist/rc-dock-dark.css
@@ -265,6 +265,10 @@ body > .dragging-layer > div:last-child {
   display: flex;
   height: 30px;
 }
+.dock-extra-content .dock-tab-close-btn {
+  position: relative;
+  right: 4px;
+}
 .dock-dropdown {
   box-sizing: border-box;
   margin: 0;
@@ -640,24 +644,26 @@ body.dock-dragging iframe {
 }
 .dock-panel-max-btn,
 .dock-panel-min-btn {
-  height: 15px;
-  width: 15px;
+  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 #444;
   border-radius: 1px;
-  width: 9px;
-  height: 9px;
+  width: 13px;
+  height: 13px;
+  box-sizing: border-box;
 }
 .dock-panel-max-btn:hover,
 .dock-panel-min-btn:hover,

diff --git a/dist/rc-dock.css b/dist/rc-dock.css
@@ -265,6 +265,10 @@ body > .dragging-layer > div:last-child {
   display: flex;
   height: 30px;
 }
+.dock-extra-content .dock-tab-close-btn {
+  position: relative;
+  right: 4px;
+}
 .dock-dropdown {
   box-sizing: border-box;
   margin: 0;
@@ -640,24 +644,26 @@ body.dock-dragging iframe {
 }
 .dock-panel-max-btn,
 .dock-panel-min-btn {
-  height: 15px;
-  width: 15px;
+  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: 9px;
-  height: 9px;
+  width: 13px;
+  height: 13px;
+  box-sizing: border-box;
 }
 .dock-panel-max-btn:hover,
 .dock-panel-min-btn:hover,

diff --git a/es/DockTabs.d.ts b/es/DockTabs.d.ts
@@ -36,6 +36,7 @@ export declare class DockTabs extends React.PureComponent<Props> {
     onMaximizeClick: (e: React.MouseEvent) => void;
     onNewWindowClick: () => void;
     addNewWindowMenu(element: React.ReactElement, showWithLeftClick: boolean): JSX.Element;
+    onCloseAll: () => void;
     renderTabBar: (props: any, TabNavList: React.ComponentType) => JSX.Element;
     onTabChange: (activeId: string) => void;
     render(): React.ReactNode;

diff --git a/es/DockTabs.js b/es/DockTabs.js
@@ -54,7 +54,11 @@ export class TabCache {
             let panelElement = findParentPanel(this._ref);
             let tabGroup = this.context.getGroup(this.data.group);
             let [panelWidth, panelHeight] = getFloatPanelSize(panelElement, tabGroup);
-            e.setData({ tab: this.data, panelSize: [panelWidth, panelHeight], tabGroup: this.data.group }, this.context.getDockId());
+            e.setData({
+                tab: this.data,
+                panelSize: [panelWidth, panelHeight],
+                tabGroup: this.data.group
+            }, this.context.getDockId());
             e.startDrag(this._ref.parentElement, this._ref.parentElement);
         };
         this.onDragOver = (e) => {
@@ -171,6 +175,12 @@ export class DockTabs extends React.PureComponent {
             let { panelData } = this.props;
             this.context.dockMove(panelData, null, 'new-window');
         };
+        this.onCloseAll = () => {
+            let { panelData } = this.props;
+            for (let tab of panelData.tabs) {
+                this.context.dockMove(tab, null, 'remove');
+            }
+        };
         this.renderTabBar = (props, TabNavList) => {
             let { panelData, onPanelDragStart, onPanelDragMove, onPanelDragEnd } = this.props;
             let { group: groupName, panelLock } = panelData;
@@ -192,9 +202,18 @@ export class DockTabs extends React.PureComponent {
                 panelExtraContent = panelExtra(panelData, this.context);
             }
             else if (maximizable || showNewWindowButton) {
-                panelExtraContent = React.createElement("div", { className: panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn", onClick: maximizable ? this.onMaximizeClick : null });
+                let maxBtn = React.createElement("div", { className: panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn", onClick: maximizable ? this.onMaximizeClick : null });
                 if (showNewWindowButton) {
-                    panelExtraContent = this.addNewWindowMenu(panelExtraContent, !maximizable);
+                    maxBtn = this.addNewWindowMenu(maxBtn, !maximizable);
+                }
+                if (panelData.parent.mode === 'float' && !panelData.tabs.find((tab) => !tab.closable)) {
+                    panelExtraContent =
+                        React.createElement(React.Fragment, null,
+                            maxBtn,
+                            React.createElement("div", { className: "dock-tab-close-btn", onClick: this.onCloseAll }));
+                }
+                else {
+                    panelExtraContent = maxBtn;
                 }
             }
             return (React.createElement(DockTabBar, Object.assign({ onDragStart: onPanelDragStart, onDragMove: onPanelDragMove, onDragEnd: onPanelDragEnd, TabNavList: TabNavList, isMaximized: panelData.parent.mode === 'maximize' }, props, { extra: panelExtraContent })));

diff --git a/lib/DockTabs.d.ts b/lib/DockTabs.d.ts
@@ -36,6 +36,7 @@ export declare class DockTabs extends React.PureComponent<Props> {
     onMaximizeClick: (e: React.MouseEvent) => void;
     onNewWindowClick: () => void;
     addNewWindowMenu(element: React.ReactElement, showWithLeftClick: boolean): JSX.Element;
+    onCloseAll: () => void;
     renderTabBar: (props: any, TabNavList: React.ComponentType) => JSX.Element;
     onTabChange: (activeId: string) => void;
     render(): React.ReactNode;

diff --git a/lib/DockTabs.js b/lib/DockTabs.js
@@ -79,7 +79,11 @@ class TabCache {
             let panelElement = findParentPanel(this._ref);
             let tabGroup = this.context.getGroup(this.data.group);
             let [panelWidth, panelHeight] = Algorithm_1.getFloatPanelSize(panelElement, tabGroup);
-            e.setData({ tab: this.data, panelSize: [panelWidth, panelHeight], tabGroup: this.data.group }, this.context.getDockId());
+            e.setData({
+                tab: this.data,
+                panelSize: [panelWidth, panelHeight],
+                tabGroup: this.data.group
+            }, this.context.getDockId());
             e.startDrag(this._ref.parentElement, this._ref.parentElement);
         };
         this.onDragOver = (e) => {
@@ -197,6 +201,12 @@ class DockTabs extends React.PureComponent {
             let { panelData } = this.props;
             this.context.dockMove(panelData, null, 'new-window');
         };
+        this.onCloseAll = () => {
+            let { panelData } = this.props;
+            for (let tab of panelData.tabs) {
+                this.context.dockMove(tab, null, 'remove');
+            }
+        };
         this.renderTabBar = (props, TabNavList) => {
             let { panelData, onPanelDragStart, onPanelDragMove, onPanelDragEnd } = this.props;
             let { group: groupName, panelLock } = panelData;
@@ -218,9 +228,18 @@ class DockTabs extends React.PureComponent {
                 panelExtraContent = panelExtra(panelData, this.context);
             }
             else if (maximizable || showNewWindowButton) {
-                panelExtraContent = React.createElement("div", { className: panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn", onClick: maximizable ? this.onMaximizeClick : null });
+                let maxBtn = React.createElement("div", { className: panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn", onClick: maximizable ? this.onMaximizeClick : null });
                 if (showNewWindowButton) {
-                    panelExtraContent = this.addNewWindowMenu(panelExtraContent, !maximizable);
+                    maxBtn = this.addNewWindowMenu(maxBtn, !maximizable);
+                }
+                if (panelData.parent.mode === 'float' && !panelData.tabs.find((tab) => !tab.closable)) {
+                    panelExtraContent =
+                        React.createElement(React.Fragment, null,
+                            maxBtn,
+                            React.createElement("div", { className: "dock-tab-close-btn", onClick: this.onCloseAll }));
+                }
+                else {
+                    panelExtraContent = maxBtn;
                 }
             }
             return (React.createElement(DockTabBar_1.DockTabBar, Object.assign({ onDragStart: onPanelDragStart, onDragMove: onPanelDragMove, onDragEnd: onPanelDragEnd, TabNavList: TabNavList, isMaximized: panelData.parent.mode === 'maximize' }, props, { extra: panelExtraContent })));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-dock",
-  "version": "3.2.19",
+  "version": "3.3.0",
   "description": "dock layout for react component",
   "repository": {
     "type": "git",
@@ -48,7 +48,9 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/shelljs": "^0.8.11",
+    "deasync": "0.1.29",
     "less": "^4.1.2",
+    "node-gyp": "^10.1.0",
     "parcel": "1.12.4",
     "prismjs": "^1.26.0",
     "react": "^17.0.2",

diff --git a/src/DockTabs.tsx b/src/DockTabs.tsx
@@ -80,7 +80,11 @@ export class TabCache {
     let tabGroup = this.context.getGroup(this.data.group);
     let [panelWidth, panelHeight] = getFloatPanelSize(panelElement, tabGroup);
 
-    e.setData({tab: this.data, panelSize: [panelWidth, panelHeight], tabGroup: this.data.group}, this.context.getDockId());
+    e.setData({
+      tab: this.data,
+      panelSize: [panelWidth, panelHeight],
+      tabGroup: this.data.group
+    }, this.context.getDockId());
     e.startDrag(this._ref.parentElement, this._ref.parentElement);
   };
   onDragOver = (e: DragManager.DragState) => {
@@ -260,6 +264,13 @@ export class DockTabs extends React.PureComponent<Props> {
     );
   }
 
+  onCloseAll = () => {
+    let {panelData} = this.props;
+    for (let tab of panelData.tabs) {
+      this.context.dockMove(tab, null, 'remove');
+    }
+  }
+
   renderTabBar = (props: any, TabNavList: React.ComponentType) => {
     let {panelData, onPanelDragStart, onPanelDragMove, onPanelDragEnd} = this.props;
     let {group: groupName, panelLock} = panelData;
@@ -284,12 +295,21 @@ export class DockTabs extends React.PureComponent<Props> {
     if (panelExtra) {
       panelExtraContent = panelExtra(panelData, this.context);
     } else if (maximizable || showNewWindowButton) {
-      panelExtraContent = <div
-        className={panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn" }
+      let maxBtn = <div
+        className={panelData.parent.mode === 'maximize' ? "dock-panel-min-btn" : "dock-panel-max-btn"}
         onClick={maximizable ? this.onMaximizeClick : null}
       />;
       if (showNewWindowButton) {
-        panelExtraContent = this.addNewWindowMenu(panelExtraContent, !maximizable);
+        maxBtn = this.addNewWindowMenu(maxBtn, !maximizable);
+      }
+      if (panelData.parent.mode === 'float' && !panelData.tabs.find((tab) => !tab.closable)) {
+        panelExtraContent =
+        <>
+          {maxBtn}
+          <div className="dock-tab-close-btn" onClick={this.onCloseAll}/>
+        </>;
+      } else {
+        panelExtraContent = maxBtn;
       }
     }
     return (

diff --git a/style/panel.less b/style/panel.less
@@ -369,23 +369,25 @@ body.dock-dragging {
 }
 
 .dock-panel-max-btn, .dock-panel-min-btn {
-  height: 15px;
-  width: 15px;
+  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;
 
   &:before {
     position: absolute;
     content: " ";
     border: 2px solid @button-text-color;
     border-radius: 1px;
-    width: 9px;
-    height: 9px;
+    width: 13px;
+    height: 13px;
+    box-sizing: border-box;
   }
 
   &:hover, &:focus {

diff --git a/style/tabs.less b/style/tabs.less
@@ -272,6 +272,10 @@
   &-extra-content {
     display: flex;
     height: 30px;
+    .dock-tab-close-btn {
+      position: relative;
+      right: 4px;
+    }
   }
 
   &-dropdown {