Make settings compact, display descriptions for all fields

except for shortcuts which would take a lot of screen. Use flex-wrap for responsive display
jupyterlab · Feb 13, 2022 · e0fe70a · e0fe70a
1 parent 9a808d2
commit e0fe70a
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 22 deletions.
diff --git a/packages/settingeditor/src/SettingsFormEditor.tsx b/packages/settingeditor/src/SettingsFormEditor.tsx
@@ -198,11 +198,18 @@ const CustomTemplate = (props: FieldTemplateProps) => {
     !schema.properties &&
     schema.type !== 'array' &&
     !JSONExt.deepEqual(formData, defaultValue);
+  const isRoot = schemaId === '';
+
+  const needsDescription =
+    !isRoot &&
+    schema.type != 'object' &&
+    id !=
+      'jp-SettingsEditor-@jupyterlab/shortcuts-extension:shortcuts_shortcuts';
 
   return (
     <div
       className={`form-group ${
-        (displayLabel || schema.type === 'boolean') && 'small-field'
+        displayLabel || schema.type === 'boolean' ? 'small-field' : ''
       }`}
     >
       {
@@ -213,11 +220,24 @@ const CustomTemplate = (props: FieldTemplateProps) => {
         // Shows a red indicator for fields that have validation errors
         rawErrors && <div className="jp-modifiedIndicator jp-errorIndicator" />
       }
-      <div>
-        {displayLabel && schemaId !== '' && <h3> {label} </h3>}
-        <div className={`${schemaId === '' ? 'root' : 'inputFieldWrapper'}`}>
+      <div className="jp-FormGroup-content">
+        {displayLabel && !isRoot && label && (
+          <h3 className="jp-FormGroup-fieldLabel">{label}</h3>
+        )}
+        <div
+          className={`${
+            isRoot
+              ? 'root'
+              : schema.type === 'object'
+              ? 'objectFieldWrapper'
+              : 'inputFieldWrapper'
+          }`}
+        >
           {children}
         </div>
+        {schema.description && needsDescription && (
+          <div className="jp-FormGroup-description">{schema.description}</div>
+        )}
         <div className="validationErrors">{errors}</div>
       </div>
     </div>

diff --git a/packages/settingeditor/style/base.css b/packages/settingeditor/style/base.css
@@ -10,6 +10,7 @@
   --jp-private-settingeditor-row-height: 16px;
   --jp-private-settingeditor-toolbar-height: 28px;
   --jp-private-settingeditor-type-width: 75px;
+  --jp-private-settingeditor-modifier-indent: 5px;
 }
 
 .jp-SettingsPanel,
@@ -231,38 +232,61 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
 .jp-SettingsPanel fieldset input[type='checkbox'] {
   position: relative;
   top: 2px;
+  margin-left: 0;
+}
+
+/** copy of `input.jp-mod-styled:focus` style */
+.jp-SettingsPanel fieldset input:focus {
+  border: var(--jp-border-width) solid var(--md-blue-500);
+  box-shadow: inset 0 0 4px var(--md-blue-300);
 }
 
 .jp-SettingsPanel .checkbox label {
   cursor: pointer;
 }
-.jp-SettingsPanel .checkbox label:not(:first-child) {
-  margin: 0.5em;
+
+.jp-SettingsPanel .checkbox .field-description {
+  /* Disable default description field for checkbox:
+   because other widgets do not have description fields,
+   we add descriptions to each widget on the field level.
+  */
+  display: none;
 }
 
 .jp-SettingsPanel button[type='submit'] {
   display: none;
 }
 
 .jp-SettingsPanel .form-group {
-  padding: 0 16px 16px 5px;
+  padding: 8px 8px 8px var(--jp-private-settingeditor-modifier-indent);
   display: flex;
   margin-top: 5px;
 }
 
-.jp-SettingsPanel #root__description {
-  display: none;
+.jp-SettingsPanel .jp-FormGroup-content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.jp-SettingsPanel .jp-FormGroup-description {
+  flex-basis: 100%;
+  padding: 4px 7px;
 }
 
-.jp-SettingsPanel .checkbox {
-  padding-top: 20px;
+.jp-SettingsPanel #root__description {
+  display: none;
 }
 
 .jp-SettingsPanel fieldset {
   border: none;
   padding: 0;
 }
 
+.jp-SettingsPanel fieldset:not(:first-child) {
+  margin-left: 7px;
+}
+
 .jp-SettingsPanel .jp-SaveSettingsBanner {
   position: absolute;
   bottom: 0;
@@ -339,6 +363,15 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   margin: 4px;
 }
 
+.jp-SettingsPanel .field-array-of-string .array-item {
+  /* Display `jp-ArrayOperations` buttons side-by-side with content except
+    for small screens where flex-wrap will place them one below the other.
+  */
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .jp-SettingsPanel .root > fieldset > legend {
   display: none;
 }
@@ -361,20 +394,20 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   line-height: var(--jp-content-font-size3);
 }
 
-.jp-SettingsPanel p {
-  font-size: var(--jp-content-font-size1);
-  margin: 0.5em;
-}
-
 .jp-SettingsPanel legend {
   font-size: var(--jp-content-font-size2);
   color: var(--jp-ui-font-color0);
   flex-basis: 100%;
-  padding: 0.5em;
+  padding: 4px 0;
   font-weight: var(--jp-content-header-font-weight);
   border-bottom: 1px solid var(--jp-border-color2);
 }
 
+.jp-SettingsPanel .field-description {
+  padding: 4px 0;
+  white-space: pre-wrap;
+}
+
 .jp-SettingsPanel .jp-SettingsTitle {
   display: flex;
   align-items: center;
@@ -383,6 +416,7 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
 
 .jp-SettingsPanel .jp-SettingsTitle-caret {
   width: 2em;
+  flex-shrink: 0;
 }
 
 .jp-SettingsForm {
@@ -422,14 +456,15 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   width: 5px;
   background-color: var(--jp-brand-color2);
   margin-top: 0;
-  margin-bottom: -16px;
-  margin-left: -5px;
+  margin-left: calc(var(--jp-private-settingeditor-modifier-indent) * -1);
+  flex-shrink: 0;
 }
 
-.jp-SettingsPanel .form-group h3 {
+.jp-SettingsPanel .jp-FormGroup-fieldLabel {
   font-size: var(--jp-content-font-size1);
-  font-weight: 500;
-  margin-left: 7px;
+  font-weight: normal;
+  margin: 0px 0px 0px 7px;
+  min-width: 120px;
 }
 
 .jp-SettingsPanel .inputFieldWrapper {