flexlayout-react 0.7.15 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/ChangeLog.txt +28 -0
  2. package/README.md +157 -330
  3. package/Screenshot_light.png +0 -0
  4. package/Screenshot_rounded.png +0 -0
  5. package/declarations/Attribute.d.ts +1 -1
  6. package/declarations/AttributeDefinitions.d.ts +1 -1
  7. package/declarations/DockLocation.d.ts +12 -12
  8. package/declarations/DropInfo.d.ts +12 -12
  9. package/declarations/I18nLabel.d.ts +12 -14
  10. package/declarations/Orientation.d.ts +7 -7
  11. package/declarations/PopupMenu.d.ts +1 -1
  12. package/declarations/Rect.d.ts +41 -28
  13. package/declarations/Types.d.ts +95 -79
  14. package/declarations/examples/demo/Utils.d.ts +4 -0
  15. package/declarations/index.d.ts +21 -22
  16. package/declarations/model/Action.d.ts +5 -5
  17. package/declarations/model/Actions.d.ts +127 -110
  18. package/declarations/model/BorderNode.d.ts +30 -34
  19. package/declarations/model/BorderSet.d.ts +3 -4
  20. package/declarations/model/ICloseType.d.ts +5 -5
  21. package/declarations/model/IDraggable.d.ts +2 -2
  22. package/declarations/model/IDropTarget.d.ts +2 -2
  23. package/declarations/model/IJsonModel.d.ts +811 -149
  24. package/declarations/model/LayoutWindow.d.ts +28 -0
  25. package/declarations/model/Model.d.ts +91 -86
  26. package/declarations/model/Node.d.ts +17 -17
  27. package/declarations/model/RowNode.d.ts +10 -11
  28. package/declarations/model/TabNode.d.ts +44 -37
  29. package/declarations/model/TabSetNode.d.ts +44 -41
  30. package/declarations/model/Utils.d.ts +1 -1
  31. package/declarations/model/WindowLayout.d.ts +24 -0
  32. package/declarations/src/Attribute.d.ts +1 -0
  33. package/declarations/src/AttributeDefinitions.d.ts +1 -0
  34. package/declarations/src/DockLocation.d.ts +12 -0
  35. package/declarations/src/DropInfo.d.ts +12 -0
  36. package/declarations/src/I18nLabel.d.ts +10 -0
  37. package/declarations/src/Orientation.d.ts +7 -0
  38. package/declarations/src/PopupMenu.d.ts +1 -0
  39. package/declarations/src/Rect.d.ts +31 -0
  40. package/declarations/src/Types.d.ts +92 -0
  41. package/declarations/src/index.d.ts +20 -0
  42. package/declarations/src/model/Action.d.ts +5 -0
  43. package/declarations/src/model/Actions.d.ts +110 -0
  44. package/declarations/src/model/BorderNode.d.ts +28 -0
  45. package/declarations/src/model/BorderSet.d.ts +3 -0
  46. package/declarations/src/model/ICloseType.d.ts +5 -0
  47. package/declarations/src/model/IDraggable.d.ts +2 -0
  48. package/declarations/src/model/IDropTarget.d.ts +2 -0
  49. package/declarations/src/model/IJsonModel.d.ts +153 -0
  50. package/declarations/src/model/Model.d.ts +98 -0
  51. package/declarations/src/model/Node.d.ts +16 -0
  52. package/declarations/src/model/RowNode.d.ts +11 -0
  53. package/declarations/src/model/TabNode.d.ts +36 -0
  54. package/declarations/src/model/TabSetNode.d.ts +37 -0
  55. package/declarations/src/model/Utils.d.ts +1 -0
  56. package/declarations/src/view/BorderButton.d.ts +1 -0
  57. package/declarations/src/view/BorderTab.d.ts +2 -0
  58. package/declarations/src/view/BorderTabSet.d.ts +1 -0
  59. package/declarations/src/view/DragContainer.d.ts +1 -0
  60. package/declarations/src/view/ErrorBoundary.d.ts +1 -0
  61. package/declarations/src/view/FloatingWindow.d.ts +1 -0
  62. package/declarations/src/view/Icons.d.ts +7 -0
  63. package/declarations/src/view/Layout.d.ts +113 -0
  64. package/declarations/src/view/Overlay.d.ts +1 -0
  65. package/declarations/src/view/PopupMenu.d.ts +1 -0
  66. package/declarations/src/view/Row.d.ts +1 -0
  67. package/declarations/src/view/Splitter.d.ts +1 -0
  68. package/declarations/src/view/Tab.d.ts +1 -0
  69. package/declarations/src/view/TabButton.d.ts +1 -0
  70. package/declarations/src/view/TabButtonStamp.d.ts +1 -0
  71. package/declarations/src/view/TabOverflowHook.d.ts +1 -0
  72. package/declarations/src/view/TabSet.d.ts +1 -0
  73. package/declarations/src/view/Utils.d.ts +4 -0
  74. package/declarations/view/BorderButton.d.ts +1 -1
  75. package/declarations/view/BorderTab.d.ts +2 -0
  76. package/declarations/view/BorderTabSet.d.ts +1 -1
  77. package/declarations/view/DragContainer.d.ts +1 -0
  78. package/declarations/view/ErrorBoundary.d.ts +1 -1
  79. package/declarations/view/ExtendedResizeObserver.d.ts +23 -0
  80. package/declarations/view/FloatingWindow.d.ts +1 -1
  81. package/declarations/view/Icons.d.ts +8 -7
  82. package/declarations/view/Layout.d.ts +140 -161
  83. package/declarations/view/Overlay.d.ts +1 -0
  84. package/declarations/view/PopoutWindow.d.ts +1 -0
  85. package/declarations/view/PopupMenu.d.ts +1 -0
  86. package/declarations/view/Row.d.ts +1 -0
  87. package/declarations/view/SizeTracker.d.ts +10 -0
  88. package/declarations/view/Splitter.d.ts +1 -1
  89. package/declarations/view/Tab.d.ts +1 -1
  90. package/declarations/view/TabButton.d.ts +1 -1
  91. package/declarations/view/TabButtonStamp.d.ts +1 -1
  92. package/declarations/view/TabOverflowHook.d.ts +1 -1
  93. package/declarations/view/TabSet.d.ts +1 -1
  94. package/declarations/view/Utils.d.ts +11 -1
  95. package/dist/bundles/demo.js +232052 -0
  96. package/dist/bundles/demo.js.map +1 -0
  97. package/dist/flexlayout.js +122 -92
  98. package/dist/flexlayout_min.js +1 -1
  99. package/lib/Attribute.js +42 -31
  100. package/lib/Attribute.js.map +1 -1
  101. package/lib/AttributeDefinitions.js +131 -108
  102. package/lib/AttributeDefinitions.js.map +1 -1
  103. package/lib/DockLocation.js +120 -124
  104. package/lib/DockLocation.js.map +1 -1
  105. package/lib/DropInfo.js +9 -13
  106. package/lib/DropInfo.js.map +1 -1
  107. package/lib/I18nLabel.js +13 -18
  108. package/lib/I18nLabel.js.map +1 -1
  109. package/lib/Orientation.js +22 -26
  110. package/lib/Orientation.js.map +1 -1
  111. package/lib/Rect.js +104 -72
  112. package/lib/Rect.js.map +1 -1
  113. package/lib/Types.js +96 -83
  114. package/lib/Types.js.map +1 -1
  115. package/lib/index.js +21 -38
  116. package/lib/index.js.map +1 -1
  117. package/lib/model/Action.js +6 -10
  118. package/lib/model/Action.js.map +1 -1
  119. package/lib/model/Actions.js +169 -155
  120. package/lib/model/Actions.js.map +1 -1
  121. package/lib/model/BorderNode.js +385 -406
  122. package/lib/model/BorderNode.js.map +1 -1
  123. package/lib/model/BorderSet.js +66 -121
  124. package/lib/model/BorderSet.js.map +1 -1
  125. package/lib/model/ICloseType.js +6 -9
  126. package/lib/model/ICloseType.js.map +1 -1
  127. package/lib/model/IDraggable.js +1 -2
  128. package/lib/model/IDropTarget.js +1 -2
  129. package/lib/model/IJsonModel.js +1 -2
  130. package/lib/model/LayoutWindow.js +83 -0
  131. package/lib/model/LayoutWindow.js.map +1 -0
  132. package/lib/model/Model.js +614 -496
  133. package/lib/model/Model.js.map +1 -1
  134. package/lib/model/Node.js +217 -228
  135. package/lib/model/Node.js.map +1 -1
  136. package/lib/model/RowNode.js +491 -504
  137. package/lib/model/RowNode.js.map +1 -1
  138. package/lib/model/TabNode.js +289 -184
  139. package/lib/model/TabNode.js.map +1 -1
  140. package/lib/model/TabSetNode.js +459 -446
  141. package/lib/model/TabSetNode.js.map +1 -1
  142. package/lib/model/Utils.js +47 -82
  143. package/lib/model/Utils.js.map +1 -1
  144. package/lib/view/BorderButton.js +129 -138
  145. package/lib/view/BorderButton.js.map +1 -1
  146. package/lib/view/BorderTab.js +47 -0
  147. package/lib/view/BorderTab.js.map +1 -0
  148. package/lib/view/BorderTabSet.js +134 -128
  149. package/lib/view/BorderTabSet.js.map +1 -1
  150. package/lib/view/DragContainer.js +16 -0
  151. package/lib/view/DragContainer.js.map +1 -0
  152. package/lib/view/ErrorBoundary.js +23 -27
  153. package/lib/view/ErrorBoundary.js.map +1 -1
  154. package/lib/view/Icons.js +40 -45
  155. package/lib/view/Icons.js.map +1 -1
  156. package/lib/view/Layout.js +919 -907
  157. package/lib/view/Layout.js.map +1 -1
  158. package/lib/view/Overlay.js +9 -0
  159. package/lib/view/Overlay.js.map +1 -0
  160. package/lib/view/PopoutWindow.js +129 -0
  161. package/lib/view/PopoutWindow.js.map +1 -0
  162. package/lib/view/PopupMenu.js +71 -0
  163. package/lib/view/PopupMenu.js.map +1 -0
  164. package/lib/view/Row.js +45 -0
  165. package/lib/view/Row.js.map +1 -0
  166. package/lib/view/SizeTracker.js +11 -0
  167. package/lib/view/SizeTracker.js.map +1 -0
  168. package/lib/view/Splitter.js +191 -147
  169. package/lib/view/Splitter.js.map +1 -1
  170. package/lib/view/Tab.js +86 -60
  171. package/lib/view/Tab.js.map +1 -1
  172. package/lib/view/TabButton.js +127 -135
  173. package/lib/view/TabButton.js.map +1 -1
  174. package/lib/view/TabButtonStamp.js +16 -21
  175. package/lib/view/TabButtonStamp.js.map +1 -1
  176. package/lib/view/TabOverflowHook.js +150 -149
  177. package/lib/view/TabOverflowHook.js.map +1 -1
  178. package/lib/view/TabSet.js +272 -234
  179. package/lib/view/TabSet.js.map +1 -1
  180. package/lib/view/Utils.js +126 -68
  181. package/lib/view/Utils.js.map +1 -1
  182. package/package.json +36 -30
  183. package/src/Attribute.ts +23 -0
  184. package/src/AttributeDefinitions.ts +38 -15
  185. package/src/DockLocation.ts +13 -13
  186. package/src/I18nLabel.ts +7 -9
  187. package/src/Rect.ts +53 -1
  188. package/src/Types.ts +16 -0
  189. package/src/index.ts +1 -2
  190. package/src/model/Actions.ts +49 -29
  191. package/src/model/BorderNode.ts +208 -214
  192. package/src/model/BorderSet.ts +42 -91
  193. package/src/model/IJsonModel.ts +883 -103
  194. package/src/model/LayoutWindow.ts +121 -0
  195. package/src/model/Model.ts +488 -366
  196. package/src/model/Node.ts +98 -111
  197. package/src/model/RowNode.ts +323 -319
  198. package/src/model/TabNode.ts +294 -110
  199. package/src/model/TabSetNode.ts +303 -242
  200. package/src/model/Utils.ts +6 -32
  201. package/src/view/BorderButton.tsx +36 -52
  202. package/src/view/BorderTab.tsx +70 -0
  203. package/src/view/BorderTabSet.tsx +64 -52
  204. package/src/view/DragContainer.tsx +32 -0
  205. package/src/view/Icons.tsx +6 -0
  206. package/src/view/Layout.tsx +1053 -1046
  207. package/src/view/Overlay.tsx +22 -0
  208. package/src/view/PopoutWindow.tsx +152 -0
  209. package/src/{PopupMenu.tsx → view/PopupMenu.tsx} +36 -31
  210. package/src/view/Row.tsx +68 -0
  211. package/src/view/SizeTracker.tsx +20 -0
  212. package/src/view/Splitter.tsx +167 -112
  213. package/src/view/Tab.tsx +76 -42
  214. package/src/view/TabButton.tsx +39 -54
  215. package/src/view/TabButtonStamp.tsx +5 -9
  216. package/src/view/TabOverflowHook.tsx +14 -9
  217. package/src/view/TabSet.tsx +221 -176
  218. package/src/view/Utils.tsx +119 -39
  219. package/style/_base.scss +140 -34
  220. package/style/dark.css +140 -35
  221. package/style/dark.css.map +1 -1
  222. package/style/dark.scss +3 -1
  223. package/style/gray.css +139 -34
  224. package/style/gray.css.map +1 -1
  225. package/style/gray.scss +2 -0
  226. package/style/light.css +141 -36
  227. package/style/light.css.map +1 -1
  228. package/style/light.scss +4 -2
  229. package/style/rounded.css +697 -0
  230. package/style/rounded.css.map +1 -0
  231. package/style/rounded.scss +194 -0
  232. package/style/underline.css +139 -34
  233. package/style/underline.css.map +1 -1
  234. package/style/underline.scss +2 -0
  235. package/cypress.config.ts +0 -16
  236. package/lib/DragDrop.js +0 -316
  237. package/lib/DragDrop.js.map +0 -1
  238. package/lib/PopupMenu.js +0 -68
  239. package/lib/PopupMenu.js.map +0 -1
  240. package/lib/model/SplitterNode.js +0 -72
  241. package/lib/model/SplitterNode.js.map +0 -1
  242. package/lib/view/FloatingWindow.js +0 -123
  243. package/lib/view/FloatingWindow.js.map +0 -1
  244. package/lib/view/FloatingWindowTab.js +0 -19
  245. package/lib/view/FloatingWindowTab.js.map +0 -1
  246. package/lib/view/TabFloating.js +0 -66
  247. package/lib/view/TabFloating.js.map +0 -1
  248. package/src/DragDrop.ts +0 -392
  249. package/src/model/SplitterNode.ts +0 -78
  250. package/src/view/FloatingWindow.tsx +0 -140
  251. package/src/view/FloatingWindowTab.tsx +0 -29
  252. package/src/view/TabFloating.tsx +0 -101
@@ -0,0 +1,194 @@
1
+ $color_text: black !default;
2
+ $color_background: #f2f6fb !default;
3
+ $color_base: #f2f6fb !default;
4
+ $color_1: scale_color($color_base, $lightness: -3%) !default;
5
+ $color_2: scale_color($color_1, $lightness: -3%) !default;
6
+ $color_3: scale_color($color_2, $lightness: -3%) !default;
7
+ $color_4: scale_color($color_3, $lightness: -3%) !default;
8
+ $color_5: scale_color($color_4, $lightness: -3%) !default;
9
+ $color_6: scale_color($color_5, $lightness: -3%) !default;
10
+ $color_drag1: rgb(95, 134, 196) !default;
11
+ $color_drag2: rgb(119, 166, 119) !default;
12
+ $color_drag1_background: rgba(95, 134, 196, 0.1) !default;
13
+ $color_drag2_background: rgba(119, 166, 119, 0.075) !default;
14
+
15
+ $font-size: medium !default;
16
+ $font-family: Roboto, Arial, sans-serif !default;
17
+
18
+ .flexlayout {
19
+ &__layout {
20
+
21
+ --color-text: #{$color_text};
22
+ --color-background: transparent;
23
+ --color-base: #{$color_base};
24
+ --color-1: #{$color_1};
25
+ --color-2: #{$color_2};
26
+ --color-3: #{$color_3};
27
+ --color-4: #{$color_4};
28
+ --color-5: #{$color_5};
29
+ --color-6: #{$color_6};
30
+ --color-drag1: #{$color_drag1};
31
+ --color-drag2: #{$color_drag1};
32
+ --color-drag1-background: #{$color_drag1_background};
33
+ --color-drag2-background: #{$color_drag1_background};
34
+
35
+ --font-size: #{$font_size};
36
+ --font-family: #{$font_family};
37
+
38
+ --color-overflow: #999db2;
39
+ --color-icon: #999db2;
40
+
41
+ --color-tabset-background: white;
42
+ --color-tabset-background-selected: white;
43
+ --color-tabset-background-maximized: var(--color-2);
44
+ --color-tabset-divider-line: white;
45
+
46
+ --color-tabset-header-background: var(--color-background);
47
+ --color-tabset-header: var(--color-text);
48
+
49
+ --color-border-tab-content: white;
50
+ --color-border-background: var(--color-background);
51
+ --color-border-divider-line: var(--color-background);
52
+
53
+ --color-tab-content: white;
54
+ --color-tab-selected: var(--color-text);
55
+ --color-tab-selected-background: var(--color-2);
56
+ --color-tab-unselected: gray;
57
+ --color-tab-unselected-background: transparent;
58
+ --color-tab-textbox: var(--color-text);
59
+ --color-tab-textbox-background: var(--color-3);
60
+
61
+ --color-border-tab-selected: var(--color-text);
62
+ --color-border-tab-selected-background: var(--color-2);
63
+ --color-border-tab-unselected: gray;
64
+ --color-border-tab-unselected-background: var(--color-2);
65
+
66
+ --color-splitter: #{$color_background};
67
+ --color-splitter-hover: var(--color-4);
68
+ --color-splitter-drag: var(--color-4);
69
+
70
+ --color-drag-rect-border: #ccc;
71
+ --color-drag-rect-background: var(--color-5);
72
+ --color-drag-rect: var(--color-text);
73
+
74
+ --color-popup-border: var(--color-6);
75
+ --color-popup-unselected: var(--color-text);
76
+ --color-popup-unselected-background: #{$color_background};
77
+ --color-popup-selected: var(--color-text);
78
+ --color-popup-selected-background: var(--color-3);
79
+
80
+ --color-edge-marker: #a6bbdf;
81
+ --color-edge-icon: #555;
82
+ }
83
+ }
84
+
85
+ @mixin tabset_mixin {
86
+ border-radius:10px;
87
+ }
88
+
89
+ @mixin tabset_tabbar_mixin {
90
+ }
91
+
92
+ @mixin tabset_header_mixin {
93
+ }
94
+
95
+ @mixin tabset_selected_mixin {
96
+ }
97
+
98
+ @mixin tabset_maximized_mixin {
99
+ }
100
+
101
+ @mixin tab_top_mixin {
102
+ }
103
+
104
+ @mixin tab_bottom_mixin {
105
+ }
106
+
107
+ @mixin tab_button_mixin {
108
+ border-radius: 10px;
109
+ padding: 2px 0.6em;
110
+ }
111
+
112
+ @mixin tab_button_selected_mixin {
113
+ }
114
+
115
+ @mixin tab_button_unselected_mixin {
116
+ color: gray;
117
+ }
118
+
119
+ @mixin tab_button_hovered_mixin {
120
+ }
121
+
122
+ @mixin tab_button_stretch_mixin {
123
+ }
124
+
125
+ @mixin tab_button_stretch_hovered_mixin {
126
+ }
127
+
128
+ @mixin close_button_hovered_mixin {
129
+ background-color:var(--color-3);
130
+ }
131
+
132
+ @mixin toolbar_button_hovered_mixin {
133
+ background-color:var(--color-2);
134
+ }
135
+
136
+ @mixin border_mixin {
137
+ }
138
+
139
+ @mixin border_button_mixin {
140
+ border-radius: 10px;
141
+ padding: 2px 0.7em;
142
+ }
143
+
144
+ @mixin border_button_selected_mixin {
145
+ }
146
+
147
+ @mixin border_button_unselected_mixin {
148
+ }
149
+
150
+ @mixin border_button_hovered_mixin {
151
+ }
152
+
153
+ @mixin splitter_mixin {
154
+ }
155
+
156
+ @mixin splitter_hover_mixin {
157
+ }
158
+
159
+ @mixin splitter_drag_mixin {
160
+ }
161
+
162
+ @mixin splitter_border_mixin {
163
+ }
164
+
165
+ @mixin tabset_tab_divider_mixin {
166
+ }
167
+
168
+ @mixin border_tab_divider_mixin {
169
+ }
170
+
171
+ @import "_base";
172
+
173
+ .flexlayout__tabset_content {
174
+ padding: 1px 5px 5px 5px;
175
+ border-bottom-left-radius: 10px;
176
+ border-bottom-right-radius: 10px;
177
+ }
178
+
179
+ .flexlayout__tab_border {
180
+ border-radius: 10px;
181
+ padding:3px;
182
+ }
183
+
184
+ .flexlayout__tabset_tabbar_outer_top {
185
+ border-bottom:unset;
186
+ }
187
+
188
+ .flexlayout__border_tab_contents {
189
+ background-color: white;
190
+ }
191
+
192
+ .flexlayout__border_tab_contents {
193
+ border-radius: 10px;
194
+ }
@@ -22,8 +22,10 @@
22
22
  --color-tabset-divider-line: var(--color-3);
23
23
  --color-tabset-header-background: var(--color-background);
24
24
  --color-tabset-header: var(--color-text);
25
+ --color-border-tab-content: var(--color-background);
25
26
  --color-border-background: var(--color-background);
26
27
  --color-border-divider-line: var(--color-3);
28
+ --color-tab-content: var(--color-background);
27
29
  --color-tab-selected: var(--color-text);
28
30
  --color-tab-selected-background: transparent;
29
31
  --color-tab-unselected: gray;
@@ -58,10 +60,60 @@
58
60
  right: 0;
59
61
  bottom: 0;
60
62
  position: absolute;
61
- overflow: hidden;
63
+ display: flex;
64
+ }
65
+ .flexlayout__layout_overlay {
66
+ left: 0;
67
+ top: 0;
68
+ right: 0;
69
+ bottom: 0;
70
+ position: absolute;
71
+ z-index: 1000;
72
+ }
73
+ .flexlayout__layout_tab_stamps {
74
+ position: absolute;
75
+ top: -10000px;
76
+ z-index: 100;
77
+ display: flex;
78
+ flex-direction: column;
79
+ align-items: start;
80
+ }
81
+ .flexlayout__layout_moveables {
82
+ visibility: hidden;
83
+ position: absolute;
84
+ width: 100px;
85
+ height: 100px;
86
+ top: -20000px;
87
+ }
88
+ .flexlayout__layout_main {
89
+ display: flex;
90
+ flex-basis: 0px;
91
+ min-width: 0;
92
+ min-height: 0;
93
+ flex-grow: 1;
94
+ position: relative;
95
+ }
96
+ .flexlayout__layout_border_container {
97
+ display: flex;
98
+ flex-basis: 0px;
99
+ min-width: 0;
100
+ min-height: 0;
101
+ flex-grow: 1;
102
+ }
103
+ .flexlayout__layout_border_container_inner {
104
+ display: flex;
105
+ flex-basis: 0px;
106
+ min-width: 0;
107
+ min-height: 0;
108
+ flex-grow: 1;
62
109
  }
63
110
  .flexlayout__splitter {
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
64
114
  background-color: var(--color-splitter);
115
+ touch-action: none;
116
+ z-index: 10;
65
117
  }
66
118
  @media (hover: hover) {
67
119
  .flexlayout__splitter:hover {
@@ -70,14 +122,28 @@
70
122
  transition-delay: 0.05s;
71
123
  }
72
124
  }
73
- .flexlayout__splitter_border {
74
- z-index: 10;
75
- }
76
125
  .flexlayout__splitter_drag {
126
+ position: absolute;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
77
130
  z-index: 1000;
78
131
  background-color: var(--color-splitter-drag);
79
132
  }
133
+ .flexlayout__splitter_handle {
134
+ background-color: #ccc;
135
+ border-radius: 3px;
136
+ }
137
+ .flexlayout__splitter_handle_horz {
138
+ width: 3px;
139
+ height: 30px;
140
+ }
141
+ .flexlayout__splitter_handle_vert {
142
+ width: 30px;
143
+ height: 3px;
144
+ }
80
145
  .flexlayout__splitter_extra {
146
+ touch-action: none;
81
147
  background-color: transparent;
82
148
  }
83
149
  .flexlayout__outline_rect {
@@ -107,33 +173,47 @@
107
173
  justify-content: center;
108
174
  }
109
175
  .flexlayout__drag_rect {
110
- position: absolute;
111
- cursor: move;
112
176
  color: var(--color-drag-rect);
113
177
  background-color: var(--color-drag-rect-background);
114
178
  border: 2px solid var(--color-drag-rect-border);
115
179
  border-radius: 5px;
116
- z-index: 1000;
117
180
  box-sizing: border-box;
118
- opacity: 0.9;
119
- text-align: center;
120
181
  display: flex;
121
182
  justify-content: center;
122
183
  flex-direction: column;
123
184
  overflow: hidden;
124
- padding: 0.3em 1em;
185
+ padding: 0.3em 0.8em;
125
186
  word-wrap: break-word;
126
187
  font-size: var(--font-size);
127
188
  font-family: var(--font-family);
128
189
  }
190
+ .flexlayout__row {
191
+ display: flex;
192
+ flex-basis: 0px;
193
+ min-width: 0;
194
+ min-height: 0;
195
+ position: relative;
196
+ box-sizing: border-box;
197
+ overflow: hidden;
198
+ }
129
199
  .flexlayout__tabset {
130
200
  display: flex;
131
201
  flex-direction: column;
132
- overflow: hidden;
202
+ position: relative;
133
203
  background-color: var(--color-tabset-background);
134
204
  box-sizing: border-box;
135
- font-size: var(--font-size);
136
205
  font-family: var(--font-family);
206
+ overflow: hidden;
207
+ flex-grow: 1;
208
+ }
209
+ .flexlayout__tabset_container {
210
+ display: flex;
211
+ flex-basis: 0px;
212
+ min-width: 0;
213
+ min-height: 0;
214
+ flex-direction: column;
215
+ overflow: hidden;
216
+ flex-grow: 1;
137
217
  }
138
218
  .flexlayout__tabset_tab_divider {
139
219
  width: 4px;
@@ -143,9 +223,12 @@
143
223
  }
144
224
  .flexlayout__tabset_content {
145
225
  display: flex;
226
+ flex-basis: 0px;
227
+ min-width: 0;
228
+ min-height: 0;
146
229
  flex-grow: 1;
147
- align-items: center;
148
- justify-content: center;
230
+ box-sizing: border-box;
231
+ position: relative;
149
232
  }
150
233
  .flexlayout__tabset_header {
151
234
  display: flex;
@@ -155,6 +238,7 @@
155
238
  border-bottom: 1px solid var(--color-tabset-divider-line);
156
239
  color: var(--color-tabset-header);
157
240
  background-color: var(--color-tabset-header-background);
241
+ font-size: var(--font-size);
158
242
  }
159
243
  .flexlayout__tabset_header_content {
160
244
  flex-grow: 1;
@@ -164,11 +248,14 @@
164
248
  background-color: var(--color-tabset-background);
165
249
  overflow: hidden;
166
250
  display: flex;
251
+ font-size: var(--font-size);
167
252
  }
168
253
  .flexlayout__tabset_tabbar_outer_top {
254
+ padding: 0px 2px 0px 2px;
169
255
  border-bottom: 1px solid var(--color-tabset-divider-line);
170
256
  }
171
257
  .flexlayout__tabset_tabbar_outer_bottom {
258
+ padding: 0px 2px 0px 2px;
172
259
  border-top: 1px solid var(--color-tabset-divider-line);
173
260
  }
174
261
  .flexlayout__tabset_tabbar_inner {
@@ -179,14 +266,12 @@
179
266
  overflow: hidden;
180
267
  }
181
268
  .flexlayout__tabset_tabbar_inner_tab_container {
269
+ position: relative;
182
270
  display: flex;
183
271
  padding-left: 4px;
184
272
  padding-right: 4px;
185
273
  box-sizing: border-box;
186
- position: absolute;
187
- top: 0;
188
- bottom: 0;
189
- width: 10000px;
274
+ white-space: nowrap;
190
275
  }
191
276
  .flexlayout__tabset_tabbar_inner_tab_container_top {
192
277
  border-top: 2px solid transparent;
@@ -208,11 +293,28 @@
208
293
  box-sizing: border-box;
209
294
  }
210
295
  .flexlayout__tab {
211
- overflow: auto;
212
- position: absolute;
296
+ overflow: hidden;
213
297
  box-sizing: border-box;
214
- background-color: var(--color-background);
298
+ background-color: var(--color-tab-content);
215
299
  color: var(--color-text);
300
+ position: relative;
301
+ }
302
+ .flexlayout__tab_moveable {
303
+ position: relative;
304
+ height: 100%;
305
+ min-width: 1px;
306
+ min-height: 1px;
307
+ overflow: auto;
308
+ box-sizing: border-box;
309
+ }
310
+ .flexlayout__tab_overlay {
311
+ z-index: 20;
312
+ position: absolute;
313
+ top: 0;
314
+ left: 0;
315
+ right: 0;
316
+ bottom: 0;
317
+ background-color: rgba(0, 0, 0, 0.2392156863);
216
318
  }
217
319
  .flexlayout__tab_button {
218
320
  display: flex;
@@ -263,6 +365,7 @@
263
365
  }
264
366
  .flexlayout__tab_button_content {
265
367
  display: flex;
368
+ text-wrap: nowrap;
266
369
  }
267
370
  .flexlayout__tab_button_textbox {
268
371
  border: none;
@@ -308,6 +411,14 @@
308
411
  padding-left: 0.5em;
309
412
  padding-right: 0.3em;
310
413
  }
414
+ .flexlayout__tab_toolbar_icon {
415
+ border: none;
416
+ outline: none;
417
+ font-size: inherit;
418
+ margin: 0px;
419
+ background-color: transparent;
420
+ padding: 1px;
421
+ }
311
422
  .flexlayout__tab_toolbar_button {
312
423
  border: none;
313
424
  outline: none;
@@ -361,6 +472,11 @@
361
472
  color: var(--color-border);
362
473
  background-color: var(--color-border-background);
363
474
  }
475
+ .flexlayout__border_tab_contents {
476
+ box-sizing: border-box;
477
+ overflow: hidden;
478
+ background-color: var(--color-border-tab-content);
479
+ }
364
480
  .flexlayout__border_top {
365
481
  border-bottom: 1px solid var(--color-border-divider-line);
366
482
  align-items: center;
@@ -393,8 +509,6 @@
393
509
  padding-right: 2px;
394
510
  box-sizing: border-box;
395
511
  position: absolute;
396
- top: 0;
397
- bottom: 0;
398
512
  width: 10000px;
399
513
  }
400
514
  .flexlayout__border_inner_tab_container_right {
@@ -535,17 +649,6 @@
535
649
  bottom: 0;
536
650
  position: absolute;
537
651
  }
538
- .flexlayout__floating_window_tab {
539
- overflow: auto;
540
- left: 0;
541
- top: 0;
542
- right: 0;
543
- bottom: 0;
544
- position: absolute;
545
- box-sizing: border-box;
546
- background-color: var(--color-background);
547
- color: var(--color-text);
548
- }
549
652
  .flexlayout__error_boundary_container {
550
653
  left: 0;
551
654
  top: 0;
@@ -572,6 +675,8 @@
572
675
  font-family: var(--font-family);
573
676
  }
574
677
  .flexlayout__border_sizer {
678
+ position: absolute;
679
+ top: -30000px;
575
680
  padding-top: 6px;
576
681
  padding-bottom: 5px;
577
682
  font-size: var(--font-size);
@@ -1 +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;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"}
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;EACA;EAEA;EACA;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;;;ACnEJ;EAfA;EACA;EACA;EACA;EACA;EAaI;;AAEA;EAnBJ;EACA;EACA;EACA;EACA;EAiBQ;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAjCJ;EACA;EACA;EACA;EAgCQ;EACA;;AAIR;EAxCA;EACA;EACA;EACA;EAuCI;;AAGJ;EA7CA;EACA;EACA;EACA;EA4CI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;IACA;IACA;;;AAOR;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAIR;EACI;EACA;;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;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAlJA;EACA;EACA;EACA;EAiJI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EApKJ;EACA;EACA;EACA;EAmKQ;EACA;EACA;;AAGJ;EACI;EDVR;EACA;EACA;;ACYI;EAhLJ;EACA;EACA;EACA;EA+KQ;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;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;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EDvMR;;AC0MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;IACI;;;AAMZ;EACI;EACA;ED7NZ;;ACgOQ;EACI;IACI;IACA;ID1NhB;;;AC+NQ;EACI;EACA;EDtOZ;EACA;;ACiPQ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrQZ;;AC6QQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtThB;;;ACwUQ;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;EACA;;AAGJ;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;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDjYR;EACA;EACA;;ACmYI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED/aR;;ACkbQ;EACI;EACA;EDhbZ;;ACmbQ;EACI;IACI;IACA;ID9ahB;;;ACmbQ;EACI;EACA;EDzbZ;;AC6bQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDleZ;;AC0eQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID3gBhB;;;ACmhBY;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;EA7sBJ;EACA;EACA;EACA;EACA;;AA8sBA;EAltBA;EACA;EACA;EACA;EACA;EAgtBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AD7jBR;EACI","file":"underline.css"}
@@ -45,9 +45,11 @@ $font-family: Roboto, Arial, sans-serif !default;
45
45
  --color-tabset-header-background: var(--color-background);
46
46
  --color-tabset-header: var(--color-text);
47
47
 
48
+ --color-border-tab-content: var(--color-background);
48
49
  --color-border-background: var(--color-background);
49
50
  --color-border-divider-line: var(--color-3);
50
51
 
52
+ --color-tab-content: var(--color-background);
51
53
  --color-tab-selected: var(--color-text);
52
54
  --color-tab-selected-background: transparent;
53
55
  --color-tab-unselected: gray;
package/cypress.config.ts DELETED
@@ -1,16 +0,0 @@
1
- import { defineConfig } from "cypress";
2
-
3
- export default defineConfig({
4
- component: {
5
- devServer: {
6
- framework: "react",
7
- bundler: "webpack",
8
- },
9
- setupNodeEvents(on, config) {},
10
- viewportWidth: 1024,
11
- viewportHeight: 768,
12
- videoCompression: false,
13
- specPattern: "test/**/*.test.{js,ts,jsx,tsx}",
14
- }
15
-
16
- });