Skip to content

Commit 88cbbf5

Browse files
nealusnealus
committed
v0.7.15
1 parent 9b05a77 commit 88cbbf5

15 files changed

+70
-20
lines changed

‎ChangeLog.txt

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
0.7.15
2+
Added arrow icon to edge indicators
3+
14
0.7.14
25
Added attribute tabsetClassName to tab nodes, this will add the classname to the parent
36
tabset when there is a single stretched tab. Updated mosaic layout in demo to use this to color headers.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flexlayout-react",
3-
"version": "0.7.14",
3+
"version": "0.7.15",
44
"description": "A multi-tab docking layout manager",
55
"main": "lib/index.js",
66
"types": "./declarations/index.d.ts",

‎src/view/Icons.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ export const OverflowIcon = () => {
2323
);
2424
}
2525

26+
export const EdgeIcon = () => {
27+
return (
28+
<svg xmlns="http://www.w3.org/2000/svg" style={{display:"block", width:10, height:10}} preserveAspectRatio="none" viewBox="0 0 100 100"><path fill="var(--color-edge-icon)" stroke="var(--color-edge-icon)"
29+
d="M10 30 L90 30 l-40 40 Z" /></svg>
30+
);
31+
}
32+
2633
export const PopoutIcon = () => {
2734
return (
2835
// <svg xmlns="http://www.w3.org/2000/svg" style={style} viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none"/><path stroke="var(--color-icon)" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>

‎src/view/Layout.tsx

+24-5
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { FloatingWindowTab } from "./FloatingWindowTab";
2626
import { TabFloating } from "./TabFloating";
2727
import { IJsonTabNode } from "../model/IJsonModel";
2828
import { Orientation } from "../Orientation";
29-
import { CloseIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
29+
import { CloseIcon, EdgeIcon, MaximizeIcon, OverflowIcon, PopoutIcon, RestoreIcon } from "./Icons";
3030
import { TabButtonStamp } from "./TabButtonStamp";
3131

3232
export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
@@ -136,6 +136,7 @@ export interface IIcons {
136136
maximize?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
137137
restore?: (React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode));
138138
more?: (React.ReactNode | ((tabSetNode: (TabSetNode | BorderNode), hiddenTabs: { node: TabNode; index: number }[]) => React.ReactNode));
139+
edgeArrow?: React.ReactNode ;
139140
}
140141

141142
const defaultIcons = {
@@ -145,6 +146,7 @@ const defaultIcons = {
145146
maximize: <MaximizeIcon />,
146147
restore: <RestoreIcon />,
147148
more: <OverflowIcon />,
149+
edgeArrow: <EdgeIcon />
148150
};
149151

150152
export interface ICustomDropDestination {
@@ -519,17 +521,34 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
519521
}
520522

521523
const edges: React.ReactNode[] = [];
524+
const arrowIcon = this.icons.edgeArrow;
522525
if (this.state.showEdges) {
523526
const r = this.centerRect;
524527
const length = this.edgeRectLength;
525528
const width = this.edgeRectWidth;
526529
const offset = this.edgeRectLength / 2;
527530
const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
528531
const radius = 50;
529-
edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP)}></div>);
530-
edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT)}></div>);
531-
edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM)}></div>);
532-
edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT)}></div>);
532+
edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_TOP)}>
533+
<div style={{transform: "rotate(180deg)"}}>
534+
{arrowIcon}
535+
</div>
536+
</div>);
537+
edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_LEFT)}>
538+
<div style={{transform: "rotate(90deg)"}}>
539+
{arrowIcon}
540+
</div>
541+
</div>);
542+
edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_BOTTOM)}>
543+
<div>
544+
{arrowIcon}
545+
</div>
546+
</div>);
547+
edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className + " " + this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT_RIGHT)}>
548+
<div style={{transform: "rotate(-90deg)"}}>
549+
{arrowIcon}
550+
</div>
551+
</div>);
533552
}
534553

535554
// this.layoutTime = (Date.now() - this.start);

‎style/_base.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,11 @@
6060
&__edge_rect {
6161
position: absolute;
6262
z-index: 1000;
63-
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
6463
background-color: var(--color-edge-marker);
6564
pointer-events: none;
65+
display:flex;
66+
align-items: center;
67+
justify-content: center;
6668
}
6769

6870
&__drag_rect {

‎style/dark.css

+4-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/dark.scss

+1
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ $font-family: Roboto, Arial, sans-serif !default;
7575
--color-popup-selected-background: var(--color-4);
7676

7777
--color-edge-marker: gray;
78+
--color-edge-icon: #eee;
7879
}
7980
}
8081
@mixin tabset_mixin {

‎style/gray.css

+5-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/gray.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ $font_family: Roboto, Arial, sans-serif !default;
7373
--color-popup-selected: var(--color-text);
7474
--color-popup-selected-background: var(--color-3);
7575

76-
--color-edge-marker: gray;
76+
--color-edge-marker: #aaa;
77+
--color-edge-icon: #555;
7778
}
7879
}
7980

‎style/light.css

+5-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/light.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default;
7474
--color-popup-selected: var(--color-text);
7575
--color-popup-selected-background: var(--color-3);
7676

77-
--color-edge-marker: gray;
77+
--color-edge-marker: #aaa;
78+
--color-edge-icon: #555;
7879
}
7980
}
8081

‎style/underline.css

+5-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/underline.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/underline.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ $font-family: Roboto, Arial, sans-serif !default;
7474
--color-popup-selected: var(--color-text);
7575
--color-popup-selected-background: var(--color-3);
7676

77-
--color-edge-marker: gray;
77+
--color-edge-marker: #aaa;
78+
--color-edge-icon: #555;
7879

7980
--color-underline: rgb(65, 105, 225);
8081
--color-underline-hover: #aaa;

‎test/style/light.css

+5-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)