flexlayout-react 0.5.18 → 0.5.19

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 (53) hide show
  1. package/ChangeLog.txt +8 -0
  2. package/README.md +109 -96
  3. package/declarations/Types.d.ts +7 -1
  4. package/declarations/view/Layout.d.ts +5 -0
  5. package/dist/flexlayout.js +12 -12
  6. package/dist/flexlayout_min.js +1 -1
  7. package/lib/PopupMenu.js +14 -9
  8. package/lib/PopupMenu.js.map +1 -1
  9. package/lib/Types.js +6 -0
  10. package/lib/Types.js.map +1 -1
  11. package/lib/model/BorderNode.js +8 -7
  12. package/lib/model/BorderNode.js.map +1 -1
  13. package/lib/model/Model.js +7 -3
  14. package/lib/model/Model.js.map +1 -1
  15. package/lib/model/RowNode.js +19 -5
  16. package/lib/model/RowNode.js.map +1 -1
  17. package/lib/model/TabSetNode.js +8 -4
  18. package/lib/model/TabSetNode.js.map +1 -1
  19. package/lib/view/BorderButton.js +14 -3
  20. package/lib/view/BorderButton.js.map +1 -1
  21. package/lib/view/BorderTabSet.js +15 -4
  22. package/lib/view/BorderTabSet.js.map +1 -1
  23. package/lib/view/Layout.js +81 -48
  24. package/lib/view/Layout.js.map +1 -1
  25. package/lib/view/TabButton.js +11 -2
  26. package/lib/view/TabButton.js.map +1 -1
  27. package/lib/view/TabFloating.js +23 -11
  28. package/lib/view/TabFloating.js.map +1 -1
  29. package/lib/view/TabSet.js +43 -18
  30. package/lib/view/TabSet.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/PopupMenu.tsx +28 -10
  33. package/src/Types.ts +6 -0
  34. package/src/model/BorderNode.ts +8 -7
  35. package/src/model/Model.ts +7 -3
  36. package/src/model/RowNode.ts +8 -5
  37. package/src/model/TabSetNode.ts +8 -4
  38. package/src/view/BorderButton.tsx +22 -3
  39. package/src/view/BorderTabSet.tsx +21 -4
  40. package/src/view/Layout.tsx +100 -58
  41. package/src/view/TabButton.tsx +16 -1
  42. package/src/view/TabFloating.tsx +36 -19
  43. package/src/view/TabSet.tsx +56 -17
  44. package/style/_base.scss +65 -41
  45. package/style/dark.css +81 -59
  46. package/style/dark.css.map +1 -1
  47. package/style/dark.scss +20 -20
  48. package/style/gray.css +81 -59
  49. package/style/gray.css.map +1 -1
  50. package/style/gray.scss +20 -20
  51. package/style/light.css +81 -59
  52. package/style/light.css.map +1 -1
  53. package/style/light.scss +18 -18
package/style/light.css CHANGED
@@ -1,4 +1,17 @@
1
1
  .flexlayout__layout {
2
+ --color-text: black;
3
+ --color-background: white;
4
+ --color-base: white;
5
+ --color-1: #f7f7f7;
6
+ --color-2: #f0f0f0;
7
+ --color-3: #e9e9e9;
8
+ --color-4: #e2e2e2;
9
+ --color-5: #dbdbdb;
10
+ --color-6: #d4d4d4;
11
+ --color-drag1: red;
12
+ --color-drag2: green;
13
+ --font-size: medium;
14
+ --font-family: Roboto, Arial, sans-serif;
2
15
  left: 0;
3
16
  top: 0;
4
17
  right: 0;
@@ -7,11 +20,13 @@
7
20
  overflow: hidden;
8
21
  }
9
22
  .flexlayout__splitter {
10
- background-color: #f7f7f7;
23
+ background-color: var(--color-1);
11
24
  }
12
25
  @media (hover: hover) {
13
26
  .flexlayout__splitter:hover {
14
- background-color: #e2e2e2;
27
+ transition: background-color ease-in 0.1s;
28
+ transition-delay: 0.05s;
29
+ background-color: var(--color-4);
15
30
  }
16
31
  }
17
32
  .flexlayout__splitter_border {
@@ -19,7 +34,7 @@
19
34
  }
20
35
  .flexlayout__splitter_drag {
21
36
  z-index: 1000;
22
- background-color: #e2e2e2;
37
+ background-color: var(--color-4);
23
38
  }
24
39
  .flexlayout__splitter_extra {
25
40
  background-color: transparent;
@@ -28,14 +43,14 @@
28
43
  position: absolute;
29
44
  pointer-events: none;
30
45
  box-sizing: border-box;
31
- border: 2px solid red;
46
+ border: 2px solid var(--color-drag1);
32
47
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
33
48
  border-radius: 5px;
34
49
  z-index: 1000;
35
50
  }
36
51
  .flexlayout__outline_rect_edge {
37
52
  pointer-events: none;
38
- border: 2px solid green;
53
+ border: 2px solid var(--color-drag2);
39
54
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2);
40
55
  border-radius: 5px;
41
56
  z-index: 1000;
@@ -51,9 +66,9 @@
51
66
  .flexlayout__drag_rect {
52
67
  position: absolute;
53
68
  cursor: move;
54
- color: black;
55
- background-color: #f7f7f7;
56
- border: 2px solid #e2e2e2;
69
+ color: var(--color-text);
70
+ background-color: var(--color-1);
71
+ border: 2px solid var(--color-4);
57
72
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
58
73
  border-radius: 5px;
59
74
  z-index: 1000;
@@ -66,16 +81,16 @@
66
81
  overflow: hidden;
67
82
  padding: 10px;
68
83
  word-wrap: break-word;
69
- font-size: medium;
70
- font-family: Roboto, Arial, sans-serif;
84
+ font-size: var(--font-size);
85
+ font-family: var(--font-family);
71
86
  }
72
87
  .flexlayout__tabset {
73
88
  overflow: hidden;
74
- background-color: #f7f7f7;
89
+ background-color: var(--color-1);
75
90
  box-sizing: border-box;
76
- font-size: medium;
77
- font-family: Roboto, Arial, sans-serif;
78
- background-color: white;
91
+ font-size: var(--font-size);
92
+ font-family: var(--font-family);
93
+ background-color: var(--color-background);
79
94
  }
80
95
  .flexlayout__tabset_header {
81
96
  position: absolute;
@@ -85,28 +100,28 @@
85
100
  right: 0;
86
101
  padding: 3px 3px 3px 5px;
87
102
  box-sizing: border-box;
88
- border-bottom: 1px solid #e9e9e9;
89
- color: black;
90
- background-color: white;
103
+ border-bottom: 1px solid var(--color-3);
104
+ color: var(--color-text);
105
+ background-color: var(--color-background);
91
106
  }
92
107
  .flexlayout__tabset_header_content {
93
108
  flex-grow: 1;
94
109
  }
95
110
  .flexlayout__tabset_tabbar_outer {
96
111
  box-sizing: border-box;
97
- background-color: #f7f7f7;
112
+ background-color: var(--color-1);
98
113
  position: absolute;
99
114
  left: 0;
100
115
  right: 0;
101
116
  overflow: hidden;
102
117
  display: flex;
103
- background-color: white;
118
+ background-color: var(--color-background);
104
119
  }
105
120
  .flexlayout__tabset_tabbar_outer_top {
106
- border-bottom: 1px solid #e9e9e9;
121
+ border-bottom: 1px solid var(--color-3);
107
122
  }
108
123
  .flexlayout__tabset_tabbar_outer_bottom {
109
- border-top: 1px solid #e9e9e9;
124
+ border-top: 1px solid var(--color-3);
110
125
  }
111
126
  .flexlayout__tabset_tabbar_inner {
112
127
  position: relative;
@@ -130,17 +145,17 @@
130
145
  border-bottom: 2px solid transparent;
131
146
  }
132
147
  .flexlayout__tabset-selected {
133
- background-color: #f7f7f7;
148
+ background-color: var(--color-1);
134
149
  }
135
150
  .flexlayout__tabset-maximized {
136
- background-color: #d4d4d4;
151
+ background-color: var(--color-6);
137
152
  }
138
153
  .flexlayout__tab {
139
154
  overflow: auto;
140
155
  position: absolute;
141
156
  box-sizing: border-box;
142
- color: black;
143
- background-color: white;
157
+ color: var(--color-text);
158
+ background-color: var(--color-background);
144
159
  }
145
160
  .flexlayout__tab_button {
146
161
  display: inline-flex;
@@ -151,13 +166,13 @@
151
166
  cursor: pointer;
152
167
  }
153
168
  .flexlayout__tab_button--selected {
154
- background-color: #e9e9e9;
155
- color: black;
169
+ background-color: var(--color-3);
170
+ color: var(--color-text);
156
171
  }
157
172
  @media (hover: hover) {
158
173
  .flexlayout__tab_button:hover {
159
- background-color: #e9e9e9;
160
- color: black;
174
+ background-color: var(--color-3);
175
+ color: var(--color-text);
161
176
  }
162
177
  }
163
178
  .flexlayout__tab_button--unselected {
@@ -171,8 +186,12 @@
171
186
  }
172
187
  .flexlayout__tab_button_textbox {
173
188
  border: none;
174
- color: green;
175
- background-color: #e9e9e9;
189
+ font-family: var(--font-family);
190
+ font-size: var(--font-size);
191
+ color: var(--color-text);
192
+ background-color: var(--color-5);
193
+ border: 1px inset var(--color-1);
194
+ border-radius: 3px;
176
195
  }
177
196
  .flexlayout__tab_button_textbox:focus {
178
197
  outline: none;
@@ -235,8 +254,8 @@
235
254
  overflow: auto;
236
255
  position: absolute;
237
256
  box-sizing: border-box;
238
- color: black;
239
- background-color: white;
257
+ color: var(--color-text);
258
+ background-color: var(--color-background);
240
259
  display: flex;
241
260
  justify-content: center;
242
261
  align-items: center;
@@ -259,25 +278,25 @@
259
278
  box-sizing: border-box;
260
279
  overflow: hidden;
261
280
  display: flex;
262
- font-size: medium;
263
- font-family: Roboto, Arial, sans-serif;
264
- background-color: white;
281
+ font-size: var(--font-size);
282
+ font-family: var(--font-family);
283
+ background-color: var(--color-background);
265
284
  }
266
285
  .flexlayout__border_top {
267
- border-bottom: 1px solid #e9e9e9;
286
+ border-bottom: 1px solid var(--color-3);
268
287
  align-items: center;
269
288
  }
270
289
  .flexlayout__border_bottom {
271
- border-top: 1px solid #e9e9e9;
290
+ border-top: 1px solid var(--color-3);
272
291
  align-items: center;
273
292
  }
274
293
  .flexlayout__border_left {
275
- border-right: 1px solid #e9e9e9;
294
+ border-right: 1px solid var(--color-3);
276
295
  align-content: center;
277
296
  flex-direction: column;
278
297
  }
279
298
  .flexlayout__border_right {
280
- border-left: 1px solid #e9e9e9;
299
+ border-left: 1px solid var(--color-3);
281
300
  align-content: center;
282
301
  flex-direction: column;
283
302
  }
@@ -314,16 +333,16 @@
314
333
  margin: 2px;
315
334
  box-sizing: border-box;
316
335
  white-space: nowrap;
317
- background-color: #f0f0f0;
336
+ background-color: var(--color-2);
318
337
  }
319
338
  .flexlayout__border_button--selected {
320
- background-color: #e9e9e9;
321
- color: black;
339
+ background-color: var(--color-3);
340
+ color: var(--color-text);
322
341
  }
323
342
  @media (hover: hover) {
324
343
  .flexlayout__border_button:hover {
325
- background-color: #e9e9e9;
326
- color: black;
344
+ background-color: var(--color-3);
345
+ color: var(--color-text);
327
346
  }
328
347
  }
329
348
  .flexlayout__border_button--unselected {
@@ -389,23 +408,26 @@
389
408
  margin-top: 5px;
390
409
  }
391
410
  .flexlayout__popup_menu {
392
- font-size: medium;
393
- font-family: Roboto, Arial, sans-serif;
411
+ font-size: var(--font-size);
412
+ font-family: var(--font-family);
394
413
  }
395
414
  .flexlayout__popup_menu_item {
415
+ margin: 2px;
396
416
  padding: 2px 10px 2px 10px;
397
417
  white-space: nowrap;
418
+ cursor: pointer;
419
+ border-radius: 2px;
398
420
  }
399
421
  @media (hover: hover) {
400
422
  .flexlayout__popup_menu_item:hover {
401
- background-color: #d4d4d4;
423
+ background-color: var(--color-6);
402
424
  }
403
425
  }
404
426
  .flexlayout__popup_menu_container {
405
427
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
406
- border: 1px solid #d4d4d4;
407
- color: black;
408
- background: white;
428
+ border: 1px solid var(--color-6);
429
+ color: var(--color-text);
430
+ background: var(--color-background);
409
431
  border-radius: 3px;
410
432
  position: absolute;
411
433
  z-index: 1000;
@@ -431,8 +453,8 @@
431
453
  bottom: 0;
432
454
  position: absolute;
433
455
  box-sizing: border-box;
434
- background-color: white;
435
- color: black;
456
+ background-color: var(--color-background);
457
+ color: var(--color-text);
436
458
  }
437
459
  .flexlayout__error_boundary_container {
438
460
  left: 0;
@@ -450,20 +472,20 @@
450
472
  .flexlayout__tabset_sizer {
451
473
  padding-top: 5px;
452
474
  padding-bottom: 3px;
453
- font-size: medium;
454
- font-family: Roboto, Arial, sans-serif;
475
+ font-size: var(--font-size);
476
+ font-family: var(--font-family);
455
477
  }
456
478
  .flexlayout__tabset_header_sizer {
457
479
  padding-top: 3px;
458
480
  padding-bottom: 3px;
459
- font-size: medium;
460
- font-family: Roboto, Arial, sans-serif;
481
+ font-size: var(--font-size);
482
+ font-family: var(--font-family);
461
483
  }
462
484
  .flexlayout__border_sizer {
463
485
  padding-top: 6px;
464
486
  padding-bottom: 5px;
465
- font-size: medium;
466
- font-family: Roboto, Arial, sans-serif;
487
+ font-size: var(--font-size);
488
+ font-family: var(--font-family);
467
489
  }
468
490
 
469
491
  /*# sourceMappingURL=light.css.map */
package/style/light.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["_base.scss","light.scss"],"names":[],"mappings":"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","file":"light.css"}
1
+ {"version":3,"sourceRoot":"","sources":["_base.scss","light.scss"],"names":[],"mappings":"AASI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAtBJ;EACA;EACA;EACA;EACA;EAqBI;;AAGJ;ECoDA;;ADjDI;EACI;IACI;IACA;ICkDZ;;;AD9CI;EACI;;AAGJ;EACI;EC6CR;;AD1CI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EC3FJ;;AD8FI;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EChGR;;ADmGQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ECrHZ;;ADyHQ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;ECnJJ;;ADuJI;ECnJJ;;ADwJA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EC3JR;EACA;;AD6JQ;EACI;ICtJZ;IACA;;;AD0JQ;EC/JR;;AD2KQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;IACI;IACA;;;AAGR;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;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;EC3RJ;;AD8RI;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;EACA;EACA;EACA;EACA;EACA;EACA;ECnVR;;ADsVQ;EClVR;EACA;;ADoVQ;EACI;IC7UZ;IACA;;;ADiVQ;ECtVR;;AD0VQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;IACA;;;AAIR;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAMhB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EAnhBJ;EACA;EACA;EACA;EACA;;AAmhBI;EACI;EAxhBR;EACA;EACA;EACA;EACA;EAuhBQ;EACA;EACA;;AAIR;EAjiBA;EACA;EACA;EACA;EACA;EA+hBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"light.css"}
package/style/light.scss CHANGED
@@ -14,23 +14,23 @@ $font-size: medium !default;
14
14
  $font-family: Roboto, Arial, sans-serif !default;
15
15
 
16
16
  @mixin tabset_mixin {
17
- background-color: $color_background;
17
+ background-color: var(--color-background);
18
18
  }
19
19
 
20
20
  @mixin tabset_tabbar_mixin {
21
- background-color: $color_background;
21
+ background-color: var(--color-background);
22
22
  }
23
23
 
24
24
  @mixin tabset_header_mixin {
25
- background-color: $color_background;
25
+ background-color: var(--color-background);
26
26
  }
27
27
 
28
28
  @mixin tabset_selected_mixin {
29
- background-color: $color_1;
29
+ background-color: var(--color-1);
30
30
  }
31
31
 
32
32
  @mixin tabset_maximized_mixin {
33
- background-color: $color_6;
33
+ background-color: var(--color-6);
34
34
  }
35
35
 
36
36
  @mixin tab_top_mixin {
@@ -43,8 +43,8 @@ $font-family: Roboto, Arial, sans-serif !default;
43
43
  }
44
44
 
45
45
  @mixin tab_button_selected_mixin {
46
- background-color: $color_3;
47
- color: $color_text;
46
+ background-color: var(--color-3);
47
+ color: var(--color-text);
48
48
  }
49
49
 
50
50
  @mixin tab_button_unselected_mixin {
@@ -52,21 +52,21 @@ $font-family: Roboto, Arial, sans-serif !default;
52
52
  }
53
53
 
54
54
  @mixin tab_button_hovered_mixin {
55
- background-color: $color_3;
56
- color: $color_text;
55
+ background-color: var(--color-3);
56
+ color: var(--color-text);
57
57
  }
58
58
 
59
59
  @mixin border_mixin {
60
- background-color: $color_background;
60
+ background-color: var(--color-background);
61
61
  }
62
62
 
63
63
  @mixin border_button_mixin {
64
- background-color: $color_2;
64
+ background-color: var(--color-2);
65
65
  }
66
66
 
67
67
  @mixin border_button_selected_mixin {
68
- background-color: $color_3;
69
- color: $color_text;
68
+ background-color: var(--color-3);
69
+ color: var(--color-text);
70
70
  }
71
71
 
72
72
  @mixin border_button_unselected_mixin {
@@ -74,20 +74,20 @@ $font-family: Roboto, Arial, sans-serif !default;
74
74
  }
75
75
 
76
76
  @mixin border_button_hovered_mixin {
77
- background-color: $color_3;
78
- color: $color_text;
77
+ background-color: var(--color-3);
78
+ color: var(--color-text);
79
79
  }
80
80
 
81
81
  @mixin splitter_mixin {
82
- background-color: $color_1;
82
+ background-color: var(--color-1);
83
83
  }
84
84
 
85
85
  @mixin splitter_hover_mixin {
86
- background-color: $color_4;
86
+ background-color: var(--color-4);
87
87
  }
88
88
 
89
89
  @mixin splitter_drag_mixin {
90
- background-color: $color_4;
90
+ background-color: var(--color-4);
91
91
  }
92
92
 
93
93
  @mixin splitter_border_mixin {