Fixes for more panel styling (#147)

* Fix for vis transform * Fix for format * Update screenshot
multiprocessio · Jan 14, 2022 · a2a009c · a2a009c
1 parent 88deb35
commit a2a009c
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 23 deletions.
diff --git a/screenshot.png b/screenshot.png
diff --git a/ui/components/CodeEditor.tsx b/ui/components/CodeEditor.tsx
@@ -58,7 +58,7 @@ export function CodeEditor({
         singleLine ? 'editor-container--singleLine vertical-align-center' : ''
       }`}
     >
-      {label && <label className="label">{label}</label>}
+      {label && <label className="label input-label">{label}</label>}
       <AceEditor
         mode={language}
         theme={theme === 'dark' ? 'dracula' : 'github'}

diff --git a/ui/components/FieldPicker.tsx b/ui/components/FieldPicker.tsx
@@ -190,18 +190,18 @@ export function FieldPicker({
 
   return (
     <React.Fragment>
-      {onDelete && (
-        <Button icon onClick={onDelete} type="outline">
-          delete
-        </Button>
-      )}
       {fieldPicker}
       <Input
         label="Label"
         value={labelValue}
         onChange={labelOnChangeWrapper}
         tooltip={tooltip}
       />
+      {onDelete && (
+        <Button icon onClick={onDelete} type="outline">
+          delete
+        </Button>
+      )}
     </React.Fragment>
   );
 }
diff --git a/ui/components/Radio.tsx b/ui/components/Radio.tsx
@@ -23,7 +23,7 @@ export function Radio({
     }
   });
 
-  const radioClass = 'radio';
+  const radioClass = 'radio' + (vertical ? ' radio--vertical' : '');
 
   const radio = (
     <span
@@ -53,7 +53,7 @@ export function Radio({
 
   if (label) {
     return (
-      <label className={radioClass + ' vertical-align-center'}>
+      <label className={radioClass + ' radio-wrapper vertical-align-center'}>
         <span className="radio-label">{label}</span>
         {radio}
       </label>

diff --git a/ui/components/TimeSeriesRange.tsx b/ui/components/TimeSeriesRange.tsx
@@ -144,8 +144,8 @@ export function TimeSeriesRange({
       <div className="flex">
         <div className="form-row">
           <Radio
-            disabled={!range.field}
             vertical
+            disabled={!range.field}
             name={fieldName}
             value={range.rangeType}
             onChange={setTab}

diff --git a/ui/panels/FilterAggregatePanel.tsx b/ui/panels/FilterAggregatePanel.tsx
@@ -251,7 +251,7 @@ export function FilterAggregatePanelDetails({
             )}
           </FormGroup>
           <FormGroup label="Sort">
-            <div className="form-row">
+            <div className="form-row form-row--multi">
               <FieldPicker
                 preferredDefaultType="number"
                 label="Field"
@@ -278,6 +278,7 @@ export function FilterAggregatePanelDetails({
           <FormGroup label="Limit">
             <div className="form-row">
               <Input
+                label="Limit"
                 onChange={(value: string) => {
                   panel.filagg.limit = +value;
                   updatePanel(panel);

diff --git a/ui/panels/GraphPanel.tsx b/ui/panels/GraphPanel.tsx
@@ -343,7 +343,10 @@ export function GraphPanelDetails({
             }
           >
             {panel.graph.ys.map((y, i) => (
-              <div className="form-row vertical-align-center" key={y.field + i}>
+              <div
+                className="form-row form-row--multi vertical-align-center"
+                key={y.field + i}
+              >
                 <FieldPicker
                   used={[...panel.graph.ys.map((y) => y.field), panel.graph.x]}
                   onDelete={() => {

diff --git a/ui/panels/HTTPPanel.tsx b/ui/panels/HTTPPanel.tsx
@@ -92,17 +92,7 @@ export function HTTPPanelDetails({
       <FormGroup label="Headers">
         {panel.http.http.headers.map(
           (header: { value: string; name: string }, headerIndex: number) => (
-            <div className="form-row form-row--collapse vertical-align-center">
-              <Button
-                icon
-                onClick={() => {
-                  panel.http.http.headers.splice(headerIndex, 1);
-                  updatePanel(panel);
-                }}
-                type="outline"
-              >
-                delete
-              </Button>
+            <div className="form-row form-row--multi vertical-align-center">
               <Input
                 label="Name"
                 value={header.name}
@@ -119,6 +109,16 @@ export function HTTPPanelDetails({
                   updatePanel(panel);
                 }}
               />
+              <Button
+                icon
+                onClick={() => {
+                  panel.http.http.headers.splice(headerIndex, 1);
+                  updatePanel(panel);
+                }}
+                type="outline"
+              >
+                delete
+              </Button>
             </div>
           )
         )}

diff --git a/ui/style.css b/ui/style.css
@@ -128,12 +128,15 @@ label,
 }
 
 .panel-details {
+  overflow-x: auto;
+
   .radio-label,
   .input-label,
   .select-label {
     display: inline-block;
     text-align: right;
     width: 200px; /* 200px should be more than enough for anyone */
+    padding-right: 15px;
   }
 
   .form-row .form-row,
@@ -144,6 +147,16 @@ label,
       width: initial;
     }
   }
+
+  .radio-wrapper .input-label {
+    width: initial;
+  }
+}
+
+.panel-details .form-row--multi .input:not(:first-of-type) .input-label,
+.panel-details .form-row--multi .select:not(:first-of-type) .select-label,
+.panel-details .form-row--multi .input:not(:first-of-type) .input-label {
+  width: initial;
 }
 
 input[type='date'],
@@ -168,7 +181,7 @@ input[type='radio'] {
 }
 
 /* cssplus broken : parsing */
-.radio .radio-element:not(:last-of-type) {
+.radio--vertical .radio-element:not(:last-of-type) {
   padding-bottom: 15px;
 }
 
@@ -178,6 +191,10 @@ input[type='radio'] {
   text-align: right;
 }
 
+.radio:not(.radio--vertical) .radio-element {
+  padding-right: 30px;
+}
+
 .toggle {
   display: inline-flex;
   align-items: center;