@jupyterlab/application 4.0.0-alpha.9 → 4.0.0-beta.0

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 (34) hide show
  1. package/lib/frontend.d.ts +2 -3
  2. package/lib/frontend.js.map +1 -1
  3. package/lib/lab.js +7 -3
  4. package/lib/lab.js.map +1 -1
  5. package/lib/layoutrestorer.d.ts +23 -2
  6. package/lib/layoutrestorer.js +71 -22
  7. package/lib/layoutrestorer.js.map +1 -1
  8. package/lib/mimerenderers.js +1 -1
  9. package/lib/mimerenderers.js.map +1 -1
  10. package/lib/shell.d.ts +110 -19
  11. package/lib/shell.js +197 -66
  12. package/lib/shell.js.map +1 -1
  13. package/lib/tokens.d.ts +1 -1
  14. package/lib/utils.js +9 -3
  15. package/lib/utils.js.map +1 -1
  16. package/package.json +27 -27
  17. package/src/connectionlost.ts +27 -0
  18. package/src/frontend.ts +412 -0
  19. package/src/index.ts +25 -0
  20. package/src/lab.ts +289 -0
  21. package/src/layoutrestorer.ts +870 -0
  22. package/src/mimerenderers.ts +180 -0
  23. package/src/router.ts +206 -0
  24. package/src/shell.ts +2285 -0
  25. package/src/status.ts +93 -0
  26. package/src/tokens.ts +220 -0
  27. package/src/treepathupdater.ts +20 -0
  28. package/src/utils.ts +153 -0
  29. package/style/buttons.css +10 -4
  30. package/style/core.css +4 -0
  31. package/style/menus.css +22 -3
  32. package/style/scrollbar.css +1 -1
  33. package/style/sidepanel.css +58 -81
  34. package/style/tabs.css +16 -23
package/style/sidepanel.css CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  .jp-SideBar.lm-TabBar,
25
25
  #jp-down-stack .lm-TabBar {
26
- color: var(--jp-ui-font-color1);
26
+ color: var(--jp-ui-font-color2);
27
27
  background: var(--jp-layout-color2);
28
28
  font-size: var(--jp-ui-font-size1);
29
29
  overflow: visible;
@@ -42,24 +42,25 @@
42
42
  align-items: stretch;
43
43
  list-style-type: none;
44
44
  height: var(--jp-private-sidebar-tab-width);
45
- transform-origin: 0 0 0;
46
45
  }
47
46
 
48
47
  .jp-SideBar .lm-TabBar-tab {
49
- padding: 0 16px;
48
+ padding: 16px 0;
50
49
  border: none;
51
50
  overflow: visible;
51
+ flex-direction: column;
52
+ position: relative;
52
53
  }
53
54
 
54
- .jp-SideBar .lm-TabBar-tab.lm-mod-current {
55
- min-height: calc(
56
- var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
57
- );
58
- max-height: calc(
59
- var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
60
- );
61
-
62
- /* transform: translateY(var(--jp-border-width)); */
55
+ .jp-SideBar .lm-TabBar-tab.lm-mod-current::after {
56
+ /* Internal border override pseudo-element */
57
+ position: absolute;
58
+ content: '';
59
+ bottom: 0;
60
+ right: 0;
61
+ top: 0;
62
+ left: 0;
63
+ border: var(--jp-border-width) solid var(--jp-layout-color1);
63
64
  }
64
65
 
65
66
  .jp-SideBar .lm-TabBar-tab:not(.lm-mod-current),
@@ -86,106 +87,81 @@
86
87
  background: var(--jp-layout-color1);
87
88
  }
88
89
 
89
- /* Left */
90
-
91
- /* Borders */
92
-
93
- .jp-SideBar.lm-TabBar.jp-mod-left {
94
- border-right: var(--jp-border-width) solid var(--jp-border-color0);
95
- }
96
-
97
- .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
98
- border-right: var(--jp-border-width) solid var(--jp-layout-color2);
90
+ .jp-SideBar.lm-TabBar::after {
91
+ /* Internal border pseudo-element */
92
+ position: absolute;
93
+ content: '';
94
+ bottom: 0;
95
+ right: 0;
96
+ top: 0;
97
+ left: 0;
98
+ pointer-events: none;
99
99
  }
100
100
 
101
- .jp-SideBar.lm-TabBar.jp-mod-left
102
- .lm-TabBar-tab.lm-mod-current
103
- + .lm-TabBar-tab {
104
- border-right: var(--jp-border-width) solid var(--jp-border-color0);
105
- }
101
+ /* Borders */
106
102
 
107
- .jp-SideBar.lm-TabBar.jp-mod-left
108
- .lm-TabBar-tab
109
- + .lm-TabBar-tab.lm-mod-current {
110
- border-right: var(--jp-border-width) solid var(--jp-border-color0);
103
+ .jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab {
104
+ border-top: var(--jp-border-width) solid var(--jp-layout-color2);
111
105
  }
112
106
 
113
- .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
114
- border-left: var(--jp-border-width) solid var(--jp-border-color0);
107
+ .jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current + .lm-TabBar-tab {
108
+ border-top: var(--jp-border-width) solid var(--jp-border-color0);
115
109
  }
116
110
 
117
- /* Transforms */
118
-
119
- .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
120
- flex-direction: row-reverse;
121
- transform: rotate(-90deg) translateX(-100%);
111
+ .jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab.lm-mod-current {
112
+ border-top: var(--jp-border-width) solid var(--jp-border-color0);
122
113
  }
123
114
 
124
- .jp-SideBar.lm-TabBar.jp-mod-left
125
- .lm-TabBar-tab:not(.lm-mod-current)
126
- .lm-TabBar-tabIcon {
127
- transform: rotate(90deg);
115
+ .jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current:last-child {
116
+ border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
128
117
  }
129
118
 
130
- .jp-SideBar.lm-TabBar.jp-mod-left
131
- .lm-TabBar-tab.lm-mod-current
132
- .lm-TabBar-tabIcon {
133
- transform: rotate(90deg)
134
- translate(
135
- calc(-0.5 * var(--jp-border-width)),
136
- calc(-0.5 * var(--jp-border-width))
137
- );
119
+ .jp-SideBar.lm-TabBar .lm-TabBar-tabLabel {
120
+ writing-mode: vertical-rl;
138
121
  }
139
122
 
140
- /* Right */
123
+ /* Left */
141
124
 
142
125
  /* Borders */
143
126
 
144
- .jp-SideBar.lm-TabBar.jp-mod-right {
145
- border-left: var(--jp-border-width) solid var(--jp-border-color0);
127
+ .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
128
+ /* Internal border spacing */
129
+ margin-right: var(--jp-border-width);
146
130
  }
147
131
 
148
- .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
149
- border-left: var(--jp-border-width) solid var(--jp-layout-color2);
132
+ .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current::after {
133
+ /* Internal border override */
134
+ right: calc(-1 * var(--jp-border-width));
150
135
  }
151
136
 
152
- .jp-SideBar.lm-TabBar.jp-mod-right
153
- .lm-TabBar-tab.lm-mod-current
154
- + .lm-TabBar-tab {
155
- border-left: var(--jp-border-width) solid var(--jp-border-color0);
137
+ .jp-SideBar.lm-TabBar.jp-mod-left::after {
138
+ /* Internal border */
139
+ border-right: var(--jp-border-width) solid var(--jp-border-color0);
156
140
  }
157
141
 
158
- .jp-SideBar.lm-TabBar.jp-mod-right
159
- .lm-TabBar-tab
160
- + .lm-TabBar-tab.lm-mod-current {
161
- border-left: var(--jp-border-width) solid var(--jp-border-color0);
162
- }
142
+ /* Transforms */
163
143
 
164
- .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
165
- border-right: var(--jp-border-width) solid var(--jp-border-color0);
144
+ .jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tabLabel {
145
+ transform: rotate(180deg);
166
146
  }
167
147
 
168
- /* Transforms */
148
+ /* Right */
149
+
150
+ /* Borders */
169
151
 
170
152
  .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
171
- flex-direction: row;
172
- transform: rotate(90deg) translateY(-100%);
153
+ /* Internal border spacing */
154
+ margin-left: var(--jp-border-width);
173
155
  }
174
156
 
175
- .jp-SideBar.lm-TabBar.jp-mod-right
176
- .lm-TabBar-tab:not(.lm-mod-current)
177
- .lm-TabBar-tabIcon {
178
- transform: rotate(-90deg);
157
+ .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current::after {
158
+ /* Internal border override */
159
+ left: calc(-1 * var(--jp-border-width));
179
160
  }
180
161
 
181
- .jp-SideBar.lm-TabBar.jp-mod-right
182
- .lm-TabBar-tab.lm-mod-current
183
- .lm-TabBar-tabIcon {
184
- transform: rotate(-90deg)
185
- translate(
186
- calc(0.5 * var(--jp-border-width)),
187
- calc(-0.5 * var(--jp-border-width))
188
- );
162
+ .jp-SideBar.lm-TabBar.jp-mod-right::after {
163
+ /* Internal border */
164
+ border-left: var(--jp-border-width) solid var(--jp-border-color0);
189
165
  }
190
166
 
191
167
  /* Down */
@@ -218,6 +194,7 @@
218
194
  #jp-left-stack > .lm-Widget,
219
195
  #jp-right-stack > .lm-Widget {
220
196
  min-width: var(--jp-sidebar-min-width);
197
+ background-color: var(--jp-layout-color1);
221
198
  }
222
199
 
223
200
  #jp-right-stack {
package/style/tabs.css CHANGED
@@ -20,7 +20,6 @@
20
20
 
21
21
  .lm-DockPanel-tabBar,
22
22
  .lm-TabPanel-tabBar {
23
- border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
24
23
  overflow: visible;
25
24
  color: var(--jp-ui-font-color1);
26
25
  font-size: var(--jp-ui-font-size1);
@@ -49,7 +48,7 @@
49
48
  flex: 0 1 var(--jp-private-horizontal-tab-width);
50
49
  align-items: center;
51
50
  min-height: calc(
52
- var(--jp-private-horizontal-tab-height) + var(--jp-border-width)
51
+ var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
53
52
  );
54
53
  min-width: 0;
55
54
  margin-left: calc(-1 * var(--jp-border-width));
@@ -64,6 +63,17 @@
64
63
  .lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current),
65
64
  .lm-TabPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
66
65
  background: var(--jp-layout-color1);
66
+ color: var(--jp-ui-font-color1);
67
+ }
68
+
69
+ .lm-DockPanel-tabBar .lm-TabBar-tab:not(.lm-mod-current)::after,
70
+ .lm-DockPanel-tabBar .lm-TabBar-addButton::after {
71
+ position: absolute;
72
+ content: '';
73
+ bottom: 0;
74
+ left: calc(-1 * var(--jp-border-width));
75
+ width: calc(100% + 2 * var(--jp-border-width));
76
+ border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
67
77
  }
68
78
 
69
79
  .lm-DockPanel-tabBar .lm-TabBar-tab:first-child,
@@ -74,16 +84,12 @@
74
84
  /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
75
85
  .lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
76
86
  background: var(--jp-layout-color1);
77
- color: var(--jp-ui-font-color0);
78
- min-height: calc(
79
- var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
80
- );
81
- transform: translateY(var(--jp-border-width));
87
+ color: var(--jp-ui-font-color1);
82
88
  }
83
89
 
84
90
  .lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current {
85
91
  background: var(--jp-layout-color1);
86
- color: var(--jp-ui-font-color0);
92
+ color: var(--jp-ui-font-color1);
87
93
  }
88
94
 
89
95
  /* This is the main application level current tab: only 1 exists. */
@@ -99,12 +105,8 @@
99
105
 
100
106
  /* This is the left tab bar current tab: only 1 exists. */
101
107
  .lm-TabBar-tab.lm-mod-current {
102
- color: var(--jp-ui-font-color0);
103
- background: var(--jp-layout-color1);
104
- }
105
-
106
- .lm-TabBar-tab.lm-mod-current:hover {
107
108
  background: var(--jp-layout-color1);
109
+ color: var(--jp-ui-font-color1);
108
110
  }
109
111
 
110
112
  .lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab,
@@ -147,21 +149,12 @@
147
149
  margin-right: 4px;
148
150
  }
149
151
 
150
- .lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon,
151
- .lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon {
152
- margin-bottom: var(--jp-border-width);
153
- }
154
-
155
- .lm-TabBar-WindowTabLabel {
156
- margin-top: 4px;
157
- }
158
-
159
152
  .lm-TabBar-tab.lm-mod-drag-image {
160
153
  background: var(--jp-layout-color1);
154
+ color: var(--jp-ui-font-color1);
161
155
  border: var(--jp-border-width) solid var(--jp-border-color1);
162
156
  border-top: var(--jp-border-width) solid var(--jp-brand-color1);
163
157
  box-shadow: var(--jp-elevation-z4);
164
- color: var(--jp-ui-font-color1);
165
158
  font-size: var(--jp-ui-font-size1);
166
159
  line-height: var(--jp-private-horizontal-tab-height);
167
160
  min-height: var(--jp-private-horizontal-tab-height);