From 88cbbf55d005a94e9fc469c5ad7fd56fc363d31b Mon Sep 17 00:00:00 2001 From: nmd Date: Tue, 14 Nov 2023 20:13:16 +0000 Subject: [PATCH] v0.7.15 --- ChangeLog.txt | 3 +++ package.json | 2 +- src/view/Icons.tsx | 7 +++++++ src/view/Layout.tsx | 29 ++++++++++++++++++++++++----- style/_base.scss | 4 +++- style/dark.css | 5 ++++- style/dark.scss | 1 + style/gray.css | 7 +++++-- style/gray.scss | 3 ++- style/light.css | 7 +++++-- style/light.scss | 3 ++- style/underline.css | 7 +++++-- style/underline.css.map | 2 +- style/underline.scss | 3 ++- test/style/light.css | 7 +++++-- 15 files changed, 70 insertions(+), 20 deletions(-) diff --git a/ChangeLog.txt b/ChangeLog.txt index bdb64ad7..b1f5c3f4 100644 --- a/ChangeLog.txt +++ b/ChangeLog.txt @@ -1,3 +1,6 @@ +0.7.15 +Added arrow icon to edge indicators + 0.7.14 Added attribute tabsetClassName to tab nodes, this will add the classname to the parent tabset when there is a single stretched tab. Updated mosaic layout in demo to use this to color headers. diff --git a/package.json b/package.json index 159f4a3a..9e24cc1b 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flexlayout-react", - "version": "0.7.14", + "version": "0.7.15", "description": "A multi-tab docking layout manager", "main": "lib/index.js", "types": "./declarations/index.d.ts", diff --git a/src/view/Icons.tsx b/src/view/Icons.tsx index ef21bc78..f0768ddd 100644 --- a/src/view/Icons.tsx +++ b/src/view/Icons.tsx @@ -23,6 +23,13 @@ export const OverflowIcon = () => { ); } +export const EdgeIcon = () => { + return ( + + ); +} + export const PopoutIcon = () => { return ( // diff --git a/src/view/Layout.tsx b/src/view/Layout.tsx index 7d21db79..dcc39e79 100755 --- a/src/view/Layout.tsx +++ b/src/view/Layout.tsx @@ -26,7 +26,7 @@ import { FloatingWindowTab } from "./FloatingWindowTab"; import { TabFloating } from "./TabFloating"; import { IJsonTabNode } from "../model/IJsonModel"; import { Orientation } from "../Orientation"; -import { CloseIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons"; +import { CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons"; import { TabButtonStamp } from "./TabButtonStamp"; export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void; @@ -136,6 +136,7 @@ export interface IIcons { maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode)); restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode)); more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: { node: TabNode; index: number }[]) => React.ReactNode)); + edgeArrow?: React.ReactNode ; } const defaultIcons = { @@ -145,6 +146,7 @@ const defaultIcons = { maximize: , restore: , more: , + edgeArrow: }; export interface ICustomDropDestination { @@ -519,6 +521,7 @@ export class Layout extends React.Component { } const edges: React.ReactNode[] = []; + const arrowIcon = this.icons.edgeArrow; if (this.state.showEdges) { const r = this.centerRect; const length = this.edgeRectLength; @@ -526,10 +529,26 @@ export class Layout extends React.Component { const offset = this.edgeRectLength / 2; const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT); const radius = 50; - edges.push(
); - edges.push(
); - edges.push(
); - edges.push(
); + edges.push(
+
+ {arrowIcon} +
+
); + edges.push(
+
+ {arrowIcon} +
+
); + edges.push(
+
+ {arrowIcon} +
+
); + edges.push(
+
+ {arrowIcon} +
+
); } // this.layoutTime = (Date.now() - this.start); diff --git a/style/_base.scss b/style/_base.scss index 6abb73f1..58c81651 100755 --- a/style/_base.scss +++ b/style/_base.scss @@ -60,9 +60,11 @@ &__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display:flex; + align-items: center; + justify-content: center; } &__drag_rect { diff --git a/style/dark.css b/style/dark.css index 6cb24d2d..1f47cbc9 100644 --- a/style/dark.css +++ b/style/dark.css @@ -46,6 +46,7 @@ --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-4); --color-edge-marker: gray; + --color-edge-icon: #eee; } .flexlayout__layout { @@ -97,9 +98,11 @@ .flexlayout__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display: flex; + align-items: center; + justify-content: center; } .flexlayout__drag_rect { position: absolute; diff --git a/style/dark.scss b/style/dark.scss index 68971b46..5b047366 100755 --- a/style/dark.scss +++ b/style/dark.scss @@ -75,6 +75,7 @@ $font-family: Roboto, Arial, sans-serif !default; --color-popup-selected-background: var(--color-4); --color-edge-marker: gray; + --color-edge-icon: #eee; } } @mixin tabset_mixin { diff --git a/style/gray.css b/style/gray.css index 18feb3fd..3ad82ba9 100644 --- a/style/gray.css +++ b/style/gray.css @@ -45,7 +45,8 @@ --color-popup-unselected-background: white; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; } .flexlayout__layout { @@ -97,9 +98,11 @@ .flexlayout__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display: flex; + align-items: center; + justify-content: center; } .flexlayout__drag_rect { position: absolute; diff --git a/style/gray.scss b/style/gray.scss index e3bb3eea..e7e7a602 100755 --- a/style/gray.scss +++ b/style/gray.scss @@ -73,7 +73,8 @@ $font_family: Roboto, Arial, sans-serif !default; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; } } diff --git a/style/light.css b/style/light.css index b4b17183..85b3b8a5 100644 --- a/style/light.css +++ b/style/light.css @@ -45,7 +45,8 @@ --color-popup-unselected-background: white; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; } .flexlayout__layout { @@ -96,9 +97,11 @@ .flexlayout__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display: flex; + align-items: center; + justify-content: center; } .flexlayout__drag_rect { position: absolute; diff --git a/style/light.scss b/style/light.scss index 45e66a82..c2faeebc 100755 --- a/style/light.scss +++ b/style/light.scss @@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; } } diff --git a/style/underline.css b/style/underline.css index b6daf8da..2abf5835 100644 --- a/style/underline.css +++ b/style/underline.css @@ -45,7 +45,8 @@ --color-popup-unselected-background: white; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; --color-underline: rgb(65, 105, 225); --color-underline-hover: #aaa; --underline_height: 3px; @@ -99,9 +100,11 @@ .flexlayout__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display: flex; + align-items: center; + justify-content: center; } .flexlayout__drag_rect { position: absolute; diff --git a/style/underline.css.map b/style/underline.css.map index f1bd5d4a..ccf80e1d 100644 --- a/style/underline.css.map +++ b/style/underline.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;;;ACvEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EDmER;EACA;EACA;;ACjEI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;EDrGR;;ACwGQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED3HZ;;AC8HQ;EACI;IACI;IACA;IDxHhB;;;AC6HQ;EACI;EACA;EDpIZ;EACA;;AC+IQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDlKZ;;AC0KQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID1MhB;;;AC4NQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDjRR;EACA;EACA;;ACmRI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED/TR;;ACkUQ;EACI;EACA;EDhUZ;;ACmUQ;EACI;IACI;IACA;ID9ThB;;;ACmUQ;EACI;EACA;EDzUZ;;AC6UQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDlXZ;;AC0XQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3ZhB;;;ACmaY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA1lBJ;EACA;EACA;EACA;EACA;;AA0lBI;EACI;EA/lBR;EACA;EACA;EACA;EACA;EA8lBQ;EACA;EACA;;AAIR;EAxmBA;EACA;EACA;EACA;EACA;EAsmBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;ADpdR;EACI","file":"underline.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;;ACxEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EDkER;EACA;EACA;;AChEI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;EDtGR;;ACyGQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED5HZ;;AC+HQ;EACI;IACI;IACA;IDzHhB;;;AC8HQ;EACI;EACA;EDrIZ;EACA;;ACgJQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnKZ;;AC2KQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3MhB;;;AC6NQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDlRR;EACA;EACA;;ACoRI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDhUR;;ACmUQ;EACI;EACA;EDjUZ;;ACoUQ;EACI;IACI;IACA;ID/ThB;;;ACoUQ;EACI;EACA;ED1UZ;;AC8UQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDnXZ;;AC2XQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID5ZhB;;;ACoaY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EA5lBJ;EACA;EACA;EACA;EACA;;AA4lBI;EACI;EAjmBR;EACA;EACA;EACA;EACA;EAgmBQ;EACA;EACA;;AAIR;EA1mBA;EACA;EACA;EACA;EACA;EAwmBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;ADrdR;EACI","file":"underline.css"} \ No newline at end of file diff --git a/style/underline.scss b/style/underline.scss index 2ac30581..0618046c 100755 --- a/style/underline.scss +++ b/style/underline.scss @@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; --color-underline: rgb(65, 105, 225); --color-underline-hover: #aaa; diff --git a/test/style/light.css b/test/style/light.css index b4b17183..85b3b8a5 100644 --- a/test/style/light.css +++ b/test/style/light.css @@ -45,7 +45,8 @@ --color-popup-unselected-background: white; --color-popup-selected: var(--color-text); --color-popup-selected-background: var(--color-3); - --color-edge-marker: gray; + --color-edge-marker: #aaa; + --color-edge-icon: #555; } .flexlayout__layout { @@ -96,9 +97,11 @@ .flexlayout__edge_rect { position: absolute; z-index: 1000; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--color-edge-marker); pointer-events: none; + display: flex; + align-items: center; + justify-content: center; } .flexlayout__drag_rect { position: absolute;