Skip to content

[Draft] Add support for popup (floating div) with toggleable docking mode #506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
emiljas-hexagon wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[Draft] Add support for popup (floating div) with toggleable docking mode #506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,7 @@ function App() {
<div className="toolbar" dir="ltr">
<select className="toolbar_control" onChange={onSelectLayout}>
<option value="default">Default</option>
<option value="popup">Popup</option>
<option value="newfeatures">New Features</option>
<option value="simple">Simple</option>
<option value="mosaic">Mosaic Style</option>
Expand Down
215 changes: 215 additions & 0 deletions demo/public/layouts/popup.layout
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
{
"global": {
"tabSetEnableSingleTabStretch": true
},
"borders": [],
"layout": {
"type": "row",
"id": "1",
"children": [
{
"type": "tabset",
"id": "2",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "3",
"name": "Layout JSON",
"component": "json",
"enablePopout": true
}
],
"active": true
},
{
"type": "tabset",
"id": "4",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "5",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg",
"enablePopout": true
},
{
"type": "tab",
"id": "5b",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg",
"enablePopout": true
}
]
}
]
},
"popups": {
"b0d755f6-b7ca-48d0-bafc-8d37241b3db4": {
"rect": {
"height": 200,
"width": 400,
"x": 100,
"y": 100
},
"layout": {
"type": "row",
"id": "6",
"children": [
{
"type": "tabset",
"id": "7",
"weight": 1,
"children": [
{
"type": "tab",
"id": "8",
"name": "Grid 2",
"component": "grid",
"icon": "images/article.svg"
},
{
"type": "tab",
"id": "9",
"name": "Grid 3",
"component": "grid",
"icon": "images/article.svg"
}
]
}
]
}
},
"6356e1d9-8b58-4139-9f7c-846ac1185ae0": {
"rect": {
"height": 200,
"width": 400,
"x": 600,
"y": 200
},
"layout": {
"type": "row",
"id": "6h",
"children": [
{
"type": "tabset",
"id": "7s",
"weight": 1,
"children": [
{
"type": "tab",
"id": "8a",
"name": "Grid 2dfg",
"component": "grid",
"icon": "images/article.svg"
}
]
}
]
}
},
"8bfed9a6-470d-4309-80f6-ea8ff367f5a4": {
"rect": {
"height": 100,
"width": 800,
"x": 100,
"y": 600
},
"layout": {
"type": "row",
"id": "feb0094c-0aac-421e-9154-1c4998a556c0",
"children": [
{
"type": "tabset",
"id": "2a9889d9-cf04-4269-87c9-bbc1759842cf",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "6c1e256f-ed5d-4500-88a2-6941fcd18e69",
"name": "Layout JSON",
"component": "json"
}
],
"active": true
},
{
"type": "tabset",
"id": "b0788f86-7a8b-4643-959f-600711f6cab7",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "0fe797bf-f9f0-42ff-9bad-28032303b087",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg"
},
{
"type": "tab",
"id": "d057cdeb-7420-467f-9165-6acf4323712c",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg"
}
]
}
]
}
}
},
"popouts": {
"2feb4a46-0d72-458c-9d29-82495938cda7": {
"rect": {
"height": 300,
"width": 800,
"x": 100,
"y": 600
},
"layout": {
"type": "row",
"id": "d0ec924c-3d4b-4484-8ff5-d44722775f70",
"children": [
{
"type": "tabset",
"id": "bac93933-288a-4a0b-b9f5-823ec9745570",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "2e3d0e6e-aee7-4476-b19b-10f24851b67c",
"name": "Layout JSON",
"component": "json"
}
],
"active": true
},
{
"type": "tabset",
"id": "cce5875c-263d-443a-ad54-3f9476f0ade9",
"weight": 0.2,
"children": [
{
"type": "tab",
"id": "0cafdc45-5694-412d-8cce-786c86925128",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg"
},
{
"type": "tab",
"id": "2857d7af-e201-47f6-bdac-5f1c145a2e7e",
"name": "Grid 1",
"component": "grid",
"icon": "images/article.svg"
}
]
}
]
}
}
}
}
1 change: 1 addition & 0 deletions src/I18nLabel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export enum I18nLabel {
Close_Tab = "Close",
Pin_Tab = "Toggle docking",
Close_Tabset = "Close tab set",
Active_Tabset = "Active tab set",
Move_Tabset = "Move tab set",
Expand Down
3 changes: 3 additions & 0 deletions src/Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,7 @@ export enum CLASSES {

FLEXLAYOUT__MINI_SCROLLBAR = "flexlayout__mini_scrollbar",
FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER = "flexlayout__mini_scrollbar_container",

FLEXLAYOUT__POPUP = "flexlayout__popup",
FLEXLAYOUT__POPUP_TABBAR_OUTER = "flexlayout__popup_tabbar_outer",
}
15 changes: 15 additions & 0 deletions src/model/Actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export class Actions {
static POPOUT_TABSET = "FlexLayout_PopoutTabset";
static CLOSE_WINDOW = "FlexLayout_CloseWindow";
static CREATE_WINDOW = "FlexLayout_CreateWindow";
static UPDATE_WINDOW_RECT = "FlexLayout_UpdateWindowRect";
static TOGGLE_DOCKING_MODE = "FlexLayout_ToggleDockingMode";
static BRING_TO_FRONT = "FlexLayout_BringToFront";

/**
* Adds a tab node to the given tabset node
Expand Down Expand Up @@ -185,4 +188,16 @@ export class Actions {
static createWindow(layout: IJsonRowNode, rect: IJsonRect): Action {
return new Action(Actions.CREATE_WINDOW, { layout, rect});
}

static updateWindowRect(windowId: string, updatedRect: {x?: number, y?: number, width?: number, height?: number}): Action {
return new Action(Actions.UPDATE_WINDOW_RECT, { windowId, ...updatedRect });
}

static toggleDockingMode(windowId: string): Action {
return new Action(Actions.TOGGLE_DOCKING_MODE, { windowId });
}

static bringToFront(windowId: string): Action {
return new Action(Actions.BRING_TO_FRONT, { windowId });
}
}
6 changes: 6 additions & 0 deletions src/model/IJsonModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface IJsonModel {
borders?: IJsonBorderNode[];
layout: IJsonRowNode; // top level 'row' is horizontal, rows inside rows take opposite orientation to parent row (ie can act as columns)
popouts?: Record<string, IJsonPopout>;
popups?: Record<string, IJsonPopup>;
}

export interface IJsonRect {
Expand All @@ -21,6 +22,11 @@ export interface IJsonPopout {
rect: IJsonRect ;
}

export interface IJsonPopup {
layout: IJsonRowNode;
rect: IJsonRect ;
}

export interface IJsonBorderNode extends IBorderAttributes {
location: IBorderLocation;
children: IJsonTabNode[];
Expand Down
Loading