@jupyterlab/settingeditor 4.0.0-beta.1 → 4.0.0-rc.0

package/src/tokens.ts

@@ -10,14 +10,20 @@ import { SettingsEditor } from './settingseditor';
  * The setting editor tracker token.
  */
 export const ISettingEditorTracker = new Token<ISettingEditorTracker>(
-  '@jupyterlab/settingeditor:ISettingEditorTracker'
+  '@jupyterlab/settingeditor:ISettingEditorTracker',
+  `A widget tracker for the interactive setting editor.
+  Use this if you want to be able to iterate over and interact with setting editors
+  created by the application.`
 );
 
 /**
  * The setting editor tracker token.
  */
 export const IJSONSettingEditorTracker = new Token<IJSONSettingEditorTracker>(
-  '@jupyterlab/settingeditor:IJSONSettingEditorTracker'
+  '@jupyterlab/settingeditor:IJSONSettingEditorTracker',
+  `A widget tracker for the JSON setting editor.
+  Use this if you want to be able to iterate over and interact with setting editors
+  created by the application.`
 );
 
 /**

package/style/base.css

@@ -11,6 +11,7 @@
   --jp-private-settingeditor-toolbar-height: 28px;
   --jp-private-settingeditor-type-width: 75px;
   --jp-private-settingeditor-modifier-indent: 5px;
+  --jp-private-settingeditor-header-spacing: 8px;
 }
 
 .jp-SettingsPanel,
@@ -41,29 +42,7 @@
   background-color: var(--jp-border-color2);
 }
 
-#json-setting-editor .jp-SettingEditorInstructions {
-  text-align: center;
-}
-
-#json-setting-editor .jp-SettingEditorInstructions-icon {
-  display: inline-block;
-  height: 78px;
-  margin: 2px 5px 2px 8px;
-  width: 60px;
-}
-
-#json-setting-editor .jp-SettingEditorInstructions-title {
-  color: var(--jp-ui-font-color0);
-  font-size: 32px;
-  font-weight: 200;
-  line-height: 78px;
-  vertical-align: top;
-}
-
-#json-setting-editor .jp-SettingEditorInstructions-text {
-  color: var(--jp-ui-font-color0);
-  font-size: var(--jp-ui-font-size2);
-}
+/** Plugin list **/
 
 .jp-PluginList {
   min-width: 175px;
@@ -125,18 +104,6 @@
   background-color: var(--jp-error-color0);
 }
 
-.jp-SettingEditor-header {
-  font-size: var(--jp-content-font-size4);
-  font-weight: var(--jp-content-heading-font-weight);
-  color: var(--jp-ui-font-color0);
-  padding: 20px 0 10px 20px;
-  border-bottom: 1px solid var(--jp-border-color2);
-  position: sticky;
-  top: 0;
-  z-index: 999;
-  background-color: var(--jp-layout-color0);
-}
-
 .jp-PluginList-icon {
   display: flex;
   height: 20px;
@@ -145,6 +112,52 @@
   position: relative;
 }
 
+.jp-PluginList-wrapper > .jp-FilterBox {
+  margin: 8px 12px 0;
+}
+
+.jp-PluginList mark {
+  background-color: transparent;
+  font-weight: bold;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-PluginList-entry {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  background: transparent;
+  overflow: hidden;
+  padding: 4px 0 4px 4px;
+  white-space: nowrap;
+}
+
+.jp-PluginList-entry:hover {
+  background: var(--jp-layout-color1);
+}
+
+.jp-PluginList-entry li {
+  margin-left: 27px;
+  margin-top: 5px;
+  color: var(--jp-ui-font-color1);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.jp-PluginList-entry-label {
+  display: flex;
+}
+
+.jp-PluginList-entry-label-text {
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
+  color: var(--jp-ui-font-color1);
+  line-height: var(--jp-cell-collapser-min-height);
+}
+
+/** Raw editor **/
+
 .jp-SettingsRawEditor .jp-Toolbar {
   color: var(--jp-ui-font-color0);
   font-size: var(--jp-ui-font-size1);
@@ -180,6 +193,8 @@
   height: 100%;
 }
 
+/** Panel **/
+
 .jp-SettingsPanel .checkbox p {
   font-size: var(--jp-content-font-size1);
 }
@@ -195,143 +210,78 @@
   margin-top: 5px;
 }
 
-.jp-SettingsPanel .jp-SaveSettingsBanner {
-  position: absolute;
-  bottom: 0;
+.jp-SettingsPanel .jp-SettingsEditor {
   padding: 20px;
-  width: 100%;
-  background: var(--jp-border-color3);
-}
-
-.jp-SettingsPanel .jp-SaveSettingsBanner button {
-  box-shadow: none;
-  outline: none;
-  border: none;
-  color: var(--jp-brand-color1);
-  font-size: var(--jp-ui-font-size1);
-  cursor: pointer;
 }
 
-.jp-SettingsPanel .jp-SaveSettingsBanner button:hover {
-  color: var(--jp-brand-color0);
-}
-
-.jp-SettingsPanel .jp-SettingsHeader h2 {
-  font-size: var(--jp-content-font-size3);
-  color: var(--jp-ui-font-color0);
-  font-weight: 300;
-  margin: 1em;
-}
-
-.jp-SettingsPanel .jp-SettingsHeader-description {
-  font-size: var(--jp-content-font-size2);
-  color: var(--jp-ui-font-color1);
-  font-weight: 200;
-  margin: 1em;
-  line-height: var(--jp-content-font-size3);
-}
-
-.jp-SettingsPanel .jp-SettingsTitle {
-  display: flex;
-  align-items: center;
-  padding-left: 1em;
-}
-
-.jp-SettingsPanel .jp-SettingsTitle-caret {
-  width: 2em;
-  flex-shrink: 0;
+.jp-SettingsPanel {
+  overflow-y: auto;
+  height: 100%;
 }
 
 .jp-SettingsForm {
   position: relative;
 }
 
-.jp-SettingsPanel .jp-SettingsHeader {
-  display: flex;
-  flex: auto;
-  justify-content: space-between;
-  cursor: pointer;
-  border: 1px solid var(--jp-border-color2);
+.jp-SettingsForm > .rjsf > .form-group {
+  padding-top: 0;
+  margin-top: 0;
 }
 
-.jp-PluginList .jp-FilterBox {
-  margin: 8px 12px 0;
-}
+/** Settings header **/
 
-.jp-PluginList mark {
-  background-color: transparent;
-  font-weight: bold;
-  color: var(--jp-ui-font-color1);
-}
-
-.jp-PluginList-entry {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid transparent;
-  background: transparent;
-  overflow: hidden;
-  padding: 4px 0 4px 4px;
-  white-space: nowrap;
+.jp-SettingsHeader {
+  display: grid;
+  grid-template:
+    'title buttonbar'
+    'description buttonbar';
+  grid-template-columns: 1fr max-content;
+  padding: 0 var(--jp-private-settingeditor-header-spacing);
+  border-bottom: 1px solid var(--jp-border-color2);
 }
 
-.jp-PluginList-entry:hover {
-  background: var(--jp-layout-color1);
+.jp-SettingsHeader-title {
+  font-size: var(--jp-content-font-size3);
+  color: var(--jp-ui-font-color0);
+  font-weight: 400;
+  grid-area: title;
+  padding: 0;
+  margin-top: calc(var(--jp-private-settingeditor-header-spacing) * 2);
+  margin-bottom: calc(var(--jp-private-settingeditor-header-spacing) / 2);
 }
 
-.jp-PluginList-entry li {
-  margin-left: 27px;
-  margin-top: 5px;
+.jp-SettingsHeader-description {
+  grid-area: description;
+  padding-bottom: var(--jp-private-settingeditor-header-spacing);
   color: var(--jp-ui-font-color1);
-  overflow-x: hidden;
-  text-overflow: ellipsis;
 }
 
-.jp-PluginList-entry-label {
-  display: flex;
-}
-
-.jp-PluginList-entry-label-text {
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  white-space: nowrap;
-  color: var(--jp-ui-font-color1);
-  line-height: var(--jp-cell-collapser-min-height);
+.jp-SettingsHeader-buttonbar {
+  margin: auto var(--jp-private-settingeditor-header-spacing);
+  grid-row: span 2;
 }
 
-.jp-SettingsPanel .jp-SettingsHeader-Name {
-  text-transform: inherit;
-  font-size: var(--jp-content-font-size3);
+.jp-SettingsHeader-buttonbar > .jp-RestoreButton {
+  background-color: var(--jp-warn-color-normal);
+  border: 0;
+  color: var(--jp-ui-inverse-font-color0);
 }
 
-.jp-SettingsPanel .jp-SettingsEditor {
-  padding: 20px;
+.jp-PluginEditor {
+  overflow: auto;
 }
 
-.jp-SettingsPanel .jp-SettingEditor-Switch .jp-switch {
-  position: absolute;
-  bottom: 0;
-  z-index: 999;
-  background-color: var(--jp-border-color3);
-  border: 1px solid var(--jp-border-color1);
-}
+/** Placeholder **/
 
-.jp-SettingsPanel {
-  overflow-y: auto;
-  height: 100%;
+.jp-SettingsEditor-placeholder {
+  text-align: center;
 }
 
-.jp-SettingsForm button.jp-RestoreButton {
-  white-space: nowrap;
-  background: none;
-  border: none;
-  outline: none;
-  box-shadow: none;
-  font-size: var(--jp-content-font-size2);
-  color: var(--jp-brand-color1);
-  cursor: pointer;
-  margin-right: 5px;
+.jp-SettingsEditor-placeholderContent {
+  color: var(--jp-content-font-color2);
+  padding: 8px;
 }
 
-.jp-PluginEditor {
-  overflow: auto;
+.jp-SettingsEditor-placeholderContent > h3 {
+  margin-bottom: var(--jp-content-heading-margin-bottom);
 }