flexlayout-react 0.8.4 → 0.8.6

package/ChangeLog.txt

@@ -1,3 +1,12 @@
+0.8.6
+Restructured scss files to remove use of deprecated @import rule
+Added combined.css containing all themes.
+Updated demo to use combined.css for simple theme switching using class names
+Added option in demo to show the layout structure
+
+0.8.5
+Changed the mini scrollbar to only show when tabs are hovered over 
+
 0.8.4
 Added attribute 'enableTabScrollbar' to TabSet and Border nodes 
   Enabling this attribute will show a mini 'scrollbar' for the tabs to indicate the scroll position

package/README.md

@@ -30,7 +30,7 @@ Features:
 *   popout tabs into new browser windows
 *	submodels, allow layouts inside layouts
 *	tab renaming (double click tab text to rename)
-*	theming - light, underline, gray, round and dark
+*	theming - light, dark, underline, gray, rounded and combined
 *	works on mobile devices (iPad, Android)
 *   add tabs using drag, add to active tab set, add to tab set by id
 *	tab and tab set attributes: enableTabStrip, enableDock, enableDrop...
@@ -52,7 +52,7 @@ Import FlexLayout in your modules:
 import {Layout, Model} from 'flexlayout-react';
 ```
 
-Include the light, underline, gray or dark theme by either:
+Include the light, dark, underline, gray, rounded or combined theme by either:
 
 Adding an additional import:
 
@@ -66,6 +66,9 @@ or by adding the css to your html:
 <link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
 ```
 
+[How to change the theme dynamically in code](#dynamically-changing-the-theme)
+
+
 ## Usage
 
 The `<Layout>` component renders the tab sets and splitters, it takes the following props:
@@ -173,6 +176,10 @@ The layout element is built up using 3 types of 'node':
 
 The layout structure is defined with rows within rows that contain tabsets that themselves contain tabs.
 
+Within the demo app you can show the layout structure by ticking the 'Show layout' checkbox, rows are shown in blue, tabsets in orange.
+
+![FlexLayout Demo Showing Layout](Screenshot_layout.png?raw=true "Demo showing layout")
+
 The optional borders element is made up of border nodes
 
 * border - borders contain a list of tabs and the index of the selected tab, they can only be used in the borders
@@ -196,6 +203,26 @@ tabs or drag and drop).
  global: {tabSetEnableTabStrip:false},
 ```
 
+## Dynamically Changing the Theme
+
+The 'combined.css' theme contains all the other themes and can be used for theme switching.
+
+When using combined.css, add a className (of the form "flexlayout__theme_[theme name]") to the div containing the `<Layout>` to select the applied theme.
+
+For example: 
+```
+    <div ref={containerRef} className="flexlayout__theme_light">
+        <Layout model={model} factory={factory} />
+    </div>
+```
+
+Change the theme in code by changing the className on the containing div.
+
+For example:
+```
+    containerRef.current!.className = "flexlayout__theme_dark"
+```
+
 ## Model Actions
 
 Once the model json has been loaded all changes to the model are applied through actions.

package/declarations/Types.d.ts

@@ -30,7 +30,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER = "flexlayout__error_boundary_container",
     FLEXLAYOUT__ERROR_BOUNDARY_CONTENT = "flexlayout__error_boundary_content",
     FLEXLAYOUT__FLOATING_WINDOW_CONTENT = "flexlayout__floating_window_content",
-    FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
     FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
     FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
@@ -56,11 +55,9 @@ export declare enum CLASSES {
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
     FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
     FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
-    FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
     FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
     FLEXLAYOUT__TABSET_MAXIMIZED = "flexlayout__tabset-maximized",
     FLEXLAYOUT__TABSET_SELECTED = "flexlayout__tabset-selected",
-    FLEXLAYOUT__TABSET_SIZER = "flexlayout__tabset_sizer",
     FLEXLAYOUT__TABSET_TAB_DIVIDER = "flexlayout__tabset_tab_divider",
     FLEXLAYOUT__TABSET_CONTENT = "flexlayout__tabset_content",
     FLEXLAYOUT__TABSET_TABBAR_INNER = "flexlayout__tabset_tabbar_inner",
@@ -80,8 +77,6 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_BUTTON_TEXTBOX = "flexlayout__tab_button_textbox",
     FLEXLAYOUT__TAB_BUTTON_TRAILING = "flexlayout__tab_button_trailing",
     FLEXLAYOUT__TAB_BUTTON_STAMP = "flexlayout__tab_button_stamp",
-    FLEXLAYOUT__TAB_FLOATING = "flexlayout__tab_floating",
-    FLEXLAYOUT__TAB_FLOATING_INNER = "flexlayout__tab_floating_inner",
     FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
     FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",
@@ -91,7 +86,8 @@ export declare enum CLASSES {
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE = "flexlayout__tab_toolbar_button-close",
     FLEXLAYOUT__POPUP_MENU_CONTAINER = "flexlayout__popup_menu_container",
     FLEXLAYOUT__POPUP_MENU_ITEM = "flexlayout__popup_menu_item",
+    FLEXLAYOUT__POPUP_MENU_ITEM__SELECTED = "flexlayout__popup_menu_item--selected",
     FLEXLAYOUT__POPUP_MENU = "flexlayout__popup_menu",
     FLEXLAYOUT__MINI_SCROLLBAR = "flexlayout__mini_scrollbar",
-    FLEXLAYOUT__MINI_SCROLLBAR_HIDDEN = "flexlayout__mini_scrollbar_hidden"
+    FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER = "flexlayout__mini_scrollbar_container"
 }

package/declarations/view/Layout.d.ts

@@ -12,6 +12,8 @@ export interface ILayoutProps {
     model: Model;
     /** factory function for creating the tab components */
     factory: (node: TabNode) => React.ReactNode;
+    /** sets a top level class name on popout windows */
+    popoutClassName?: string;
     /** object mapping keys among close, maximize, restore, more, popout to React nodes to use in place of the default icons, can alternatively return functions for creating the React nodes */
     icons?: IIcons;
     /** function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning undefined from the function will halt the action, otherwise return the action to continue */
@@ -96,7 +98,7 @@ export declare class Layout extends React.Component<ILayoutProps> {
     /** Get the root div element of the layout */
     getRootDiv(): HTMLDivElement | null;
 }
-export declare const FlexLayoutVersion = "0.8.4";
+export declare const FlexLayoutVersion = "0.8.6";
 export type DragRectRenderCallback = (content: React.ReactNode | undefined, node?: Node, json?: IJsonTabNode) => React.ReactNode | undefined;
 export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {