From ee42817588fba59a491b8f5fbefa39edcd1808c9 Mon Sep 17 00:00:00 2001 From: nmd Date: Sat, 9 Sep 2023 11:51:40 +0100 Subject: [PATCH] v0.7.10 --- ChangeLog.txt | 6 ++++++ README.md | 11 ++++++++++- examples/demo/App.tsx | 22 ++++++++++++---------- package.json | 2 +- src/view/BorderTabSet.tsx | 30 +++++++++++++++++++++++------- src/view/TabSet.tsx | 39 +++++++++++++++++++-------------------- 6 files changed, 71 insertions(+), 39 deletions(-) diff --git a/ChangeLog.txt b/ChangeLog.txt index fdf47a4c..3487c8d9 100644 --- a/ChangeLog.txt +++ b/ChangeLog.txt @@ -1,3 +1,9 @@ +0.7.10 +Fix for #399 - the overflow button in a tabset is now placed after +any sticky buttons (additional buttons that stick to the last tab of a tabset) +but before any other buttons. +Enabled sticky buttons in border tabsets + 0.7.9 Fix drag issue found when used in devtool extension Fix double render in popout when in strict mode diff --git a/README.md b/README.md index 15e57887..3a830614 100755 --- a/README.md +++ b/README.md @@ -58,7 +58,15 @@ import { createRoot } from "react-dom/client"; import * as FlexLayout from "flexlayout-react"; ``` -Include the light, underline, gray or dark style in your html: +Include the light, underline, gray or dark theme by either: + +Adding an additional import: + +``` +import 'flexlayout-react/style/light.css'; +``` + +or by adding the css to your html: ``` @@ -614,6 +622,7 @@ To build the npm distribution run 'yarn build', this will create the artifacts i | Name | Repository | | ------------- |:-------------| | rc-dock | https://github.com/ticlo/rc-dock | +| Dockview | https://dockview.dev/ | | lumino | https://github.com/jupyterlab/lumino | | golden-layout | https://github.com/golden-layout/golden-layout | | react-mosaic | https://github.com/nomcopter/react-mosaic | diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx index 2f0157dd..1bb1eab2 100755 --- a/examples/demo/App.tsx +++ b/examples/demo/App.tsx @@ -401,16 +401,18 @@ class App extends React.Component { if (this.state.layoutFile === "default") { //renderValues.headerContent = "-- " + renderValues.headerContent + " --"; - //renderValues.buttons.push(); - renderValues.stickyButtons.push( - Add this.onAddFromTabSetButton(node)} - />); + //renderValues.buttons.push(); + if (node instanceof TabSetNode) { // don't show + button on border tabsets + renderValues.stickyButtons.push( + Add this.onAddFromTabSetButton(node)} + />); + } } } diff --git a/package.json b/package.json index 7c324ac1..075615e4 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flexlayout-react", - "version": "0.7.9", + "version": "0.7.10", "description": "A multi-tab docking layout manager", "main": "lib/index.js", "types": "./declarations/index.d.ts", diff --git a/src/view/BorderTabSet.tsx b/src/view/BorderTabSet.tsx index da6ef716..f199fbf1 100755 --- a/src/view/BorderTabSet.tsx +++ b/src/view/BorderTabSet.tsx @@ -30,7 +30,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => { const overflowbuttonRef = React.useRef(null); const stickyButtonsRef = React.useRef(null); - const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef); + const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef); const onAuxMouseClick = (event: React.MouseEvent) => { if (isAuxMouseEvent(event)) { @@ -42,7 +42,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => { layout.showContextMenu(border, event); }; - const onInterceptMouseDown = (event: React.MouseEvent | React.MouseEvent | React.TouchEvent) => { + const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => { event.stopPropagation(); }; @@ -116,12 +116,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => { // allow customization of tabset right/bottom buttons let buttons: any[] = []; - const renderState = { headerContent: undefined, buttons, stickyButtons: [], headerButtons: [] }; + let stickyButtons: any[] = []; + const renderState = { headerContent: undefined, buttons, stickyButtons: stickyButtons, headerButtons: [] }; layout.customizeTabSet(border, renderState); buttons = renderState.buttons; - let toolbar; - if (hiddenTabs.length > 0) { const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip); let overflowContent; @@ -133,7 +132,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
{hiddenTabs.length}
); } - buttons.push( + buttons.unshift( ); } + + if (stickyButtons.length > 0) { + if (tabsTruncated) { + buttons = [...stickyButtons, ...buttons]; + } else { + tabs.push(
{ e.preventDefault() }} + className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)} + > + {stickyButtons} +
); + } + } const selectedIndex = border.getSelected(); if (selectedIndex !== -1) { @@ -167,7 +183,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => { ); } } - toolbar = ( + const toolbar = (
{buttons}
diff --git a/src/view/TabSet.tsx b/src/view/TabSet.tsx index 53aeac37..135f9b6f 100755 --- a/src/view/TabSet.tsx +++ b/src/view/TabSet.tsx @@ -167,24 +167,6 @@ export const TabSet = (props: ITabSetProps) => { buttons = renderState.buttons; headerButtons = renderState.headerButtons; - if (stickyButtons.length > 0) { - if (tabsTruncated) { - buttons = [...stickyButtons, ...buttons]; - } else { - tabs.push(
{ e.preventDefault() }} - className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)} - > - {stickyButtons} -
); - } - } - - let toolbar; if (hiddenTabs.length > 0) { const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip); let overflowContent; @@ -196,7 +178,7 @@ export const TabSet = (props: ITabSetProps) => {
{hiddenTabs.length}
); } - buttons.push( + buttons.unshift(