style changes

caplin · Oct 25, 2021 · 377bf18 · 377bf18
1 parent f53bba3
commit 377bf18
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 52 deletions.
diff --git a/examples/demo/App.tsx b/examples/demo/App.tsx
@@ -7,6 +7,7 @@ import { ILayoutProps, ITabRenderValues, ITabSetRenderValues } from "../../src/v
 import { TabStorage } from "./TabStorage";
 import Utils from "./Utils";
 import { showPopup } from "./PopupMenu";
+import { NewFeatures } from "./NewFeatures";
 
 var fields = ["Name", "Field1", "Field2", "Field3", "Field4", "Field5"];
 
@@ -164,7 +165,7 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
             event.stopPropagation();
             console.log(node, event);
             showPopup(
-                node instanceof TabNode? "Tab: " + node.getName() : "Type: " + node.getType(),
+                node instanceof TabNode ? "Tab: " + node.getName() : "Type: " + node.getType(),
                 (this.refs.layout as FlexLayout.Layout).getRootDiv(),
                 event.clientX, event.clientY,
                 ["Option 1", "Option 2"],
@@ -297,7 +298,10 @@ class App extends React.Component<any, { layoutFile: string | null, model: FlexL
             } catch (e) {
                 console.log(e);
             }
-        }
+        } 
+        else if (component === "newfeatures") {
+            return <NewFeatures />;
+        } 
         else if (component === "multitype") {
             try {
                 const config = node.getConfig();

diff --git a/examples/demo/newfeatures.html → examples/demo/NewFeatures.tsx b/examples/demo/newfeatures.html → examples/demo/NewFeatures.tsx
@@ -1,63 +1,44 @@
-<!DOCTYPE html>
-<html>
+import * as React from "react";
 
-<head>
-    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
-    <link id="page-stylesheet" rel="stylesheet" href="gray.css" />
-    <style>
-        body {
-            overflow: auto;
-        }
-        ul {
-            margin-right: 1em;
-        }
-        li {
-            margin-bottom: 1em;
-        }
-    </style>
-</head>
-
-<body>
-
-    <ul>
+export function NewFeatures() {
+    return (
+        <ul>
         <li>
-            Help text (tooltip) option on tabs: <br>
+            Help text (tooltip) option on tabs: <br/>
             <small>Hover over this tab button</small>
         </li>
         <li>
-            Action to close tabset:<br>
+            Action to close tabset:<br/>
             <small>See added x button in this tabset</small>
         </li>
         <li>
-            Intercept drag drop to allow dropping tabs into custom areas:<br>
+            Intercept drag drop to allow dropping tabs into custom areas:<br/>
             <small>See Tab Storage tab</small>
         </li>
         <li>
-            Allow narrow splitters with extended hit test areas:<br>
+            Allow narrow splitters with extended hit test areas:<br/>
             <small>Uses the splitterExtra global attribute</small>
         </li>
         <li>
-            Tab attributes: borderWidth, borderHeight to allow tabs to have individual sizes in borders:<br>
+            Tab attributes: borderWidth, borderHeight to allow tabs to have individual sizes in borders:<br/>
             <small>Try the 'With border sizes' tab</small>
         </li>
         <li>
-            Customize the drag rectangle using the callback property: onRenderDragRect <br>
+            Customize the drag rectangle using the callback property: onRenderDragRect <br/>
             <small>In this layout all drag rectangles are custom rendered</small>
         </li>
         <li>
-            New border attribute: enableAutoHide, to hide border if it has zero tabs:<br>
+            New border attribute: enableAutoHide, to hide border if it has zero tabs:<br/>
             <small>Try moving all tabs from any of the borders</small>
         </li>
         <li>
-            New onRenderFloatingTabPlaceholder prop:<br>
+            New onRenderFloatingTabPlaceholder prop:<br/>
             <small>Popout one of the tabs to see the custom rendered placeholder</small>
         </li>
         <li>
-            New onContextMenu prop:<br>
+            New onContextMenu prop:<br/>
             <small>All tabs and tabsets in this layout have a custom context menu</small>
         </li>
     </ul>
-</body>
-
-</html>
+    );
+}
diff --git a/examples/demo/dark.css b/examples/demo/dark.css
@@ -111,3 +111,17 @@ html,body
 .tab-storage > .tab-storage-tabs > .tab-storage-entry:last-child {
 	margin-bottom: 0;
 }
+
+small {
+    color: lightgray;
+}
+
+li {
+    color:white
+    ;
+    margin-bottom: 1em;
+}
+
+ul {
+    margin-right: 1em;
+}
diff --git a/examples/demo/gray.css b/examples/demo/gray.css
@@ -117,4 +117,9 @@ small {
 
 li {
     color: #444;
+    margin-bottom: 1em;
+}
+
+ul {
+    margin-right: 1em;
 }
diff --git a/examples/demo/layouts/newfeatures.layout b/examples/demo/layouts/newfeatures.layout
@@ -21,11 +21,7 @@
 						"type": "tab",
 						"name": "New",
                         "helpText": "this tab has helpText defined",
-						"component": "multitype",
-                        "config": {
-                            "type":"url",
-                            "data":"newfeatures.html"
-                            }
+						"component": "newfeatures"
 					},
 					{
 						"type": "tab",

diff --git a/examples/demo/light.css b/examples/demo/light.css
@@ -111,3 +111,16 @@ select, button {
 	margin-bottom: 0;
 }
 
+
+small {
+    color: gray;
+}
+
+li {
+    color: #444;
+    margin-bottom: 1em;
+}
+
+ul {
+    margin-right: 1em;
+}
diff --git a/examples/demo/popupmenu.css b/examples/demo/popupmenu.css
@@ -3,6 +3,7 @@
     font-family: var(--font-family);
 }
 .popup_menu_title {
+    margin: 2px;
     padding: 2px 10px 2px 10px;
     white-space: nowrap;
     color: var(--color-text);
@@ -11,9 +12,11 @@
     cursor: default;
 }
 .popup_menu_item {
+    margin: 2px;
     padding: 2px 10px 2px 10px;
     white-space: nowrap;
     cursor:pointer;
+    border-radius: 2px;
 }
 @media (hover: hover) {
     .popup_menu_item:hover {

diff --git a/src/model/Model.ts b/src/model/Model.ts
@@ -281,13 +281,17 @@ class Model {
                 const node = this._idMap[action.data.node];
 
                 if (node instanceof TabSetNode) {
-                    // first delete all child tabs
+                    // first delete all child tabs that are closeable
                     const children = [...node.getChildren()];
                     children.forEach((child, i) => {
-                        (child as TabNode)._delete();
+                        if ((child as TabNode).isEnableClose()) {
+                            (child as TabNode)._delete();
+                        }
                     });
 
-                    node._delete();
+                    if (node.getChildren().length === 0) {
+                        node._delete();
+                    }
                     this._tidy();
                 }
                 break;

diff --git a/style/_base.scss b/style/_base.scss
@@ -229,8 +229,12 @@
 
             &_textbox {
                 border: none;
-                color: green;
-                background-color: var(--color-3);
+                font-family: var(--font-family);
+                font-size: var(--font-size);
+                color: var(--color-text);
+                background-color: var(--color-5);
+                border: 1px inset var(--color-1);
+                border-radius: 3px;
             }
 
             &_textbox:focus {
@@ -494,9 +498,11 @@
         font-family: var(--font-family);
 
         &_item {
+            margin: 2px;
             padding: 2px 10px 2px 10px;
             white-space: nowrap;
             cursor: pointer;
+            border-radius: 2px;
         }
 
         @media (hover: hover) {

diff --git a/style/dark.css b/style/dark.css
diff --git a/style/gray.css b/style/gray.css
diff --git a/style/light.css b/style/light.css