Adds width and height to expander icon to center it to the label (#1338)

Adds shared inspector palette styling to main inspector palette component.
concord-consortium · Jul 11, 2024 · 5060a16 · 5060a16
1 parent 9c65969
commit 5060a16
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 59 deletions.
diff --git a/v3/src/components/data-display/inspector/display-item-format-control.tsx b/v3/src/components/data-display/inspector/display-item-format-control.tsx
@@ -33,8 +33,8 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
   const catPointColorSettingArr: ReactElement[] = []
   categoriesRef.current?.forEach(cat => {
     catPointColorSettingArr.push(
-      <Flex direction="row" key={cat} className="palette-row cat-color-picker">
-        <FormLabel className="form-label">{cat}</FormLabel>
+      <Flex direction="row" key={cat} className="palette-row color-picker-row cat-color-picker">
+        <FormLabel className="form-label color-picker">{cat}</FormLabel>
         <Input type="color" className="color-picker-thumb categorical"
                value={dataConfiguration?.getLegendColorForCategory(cat) || missingColor}
                onChange={e => displayItemDescription.setPointColor(e.target.value)}/>
@@ -47,8 +47,8 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
       return (
         <div>
           <FormControl isDisabled={isTransparent}>
-            <Flex className="palette-row">
-              <FormLabel className="form-label">{t("DG.Inspector.backgroundColor")}</FormLabel>
+            <Flex className="palette-row color-picker-row">
+              <FormLabel className="form-label color-picker">{t("DG.Inspector.backgroundColor")}</FormLabel>
               <Input type="color" className="color-picker-thumb" value={plotBackgroundColor}
                      onChange={e => setPlotBackgroundColor(e.target.value)}/>
             </Flex>
@@ -99,8 +99,8 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
       { renderSliderControlIfAny() }
 
       <FormControl isDisabled={displayItemDescription.pointStrokeSameAsFill} className="palette-form-control">
-        <Flex className="palette-row">
-          <FormLabel className="form-label stroke">{t("DG.Inspector.stroke")}</FormLabel>
+        <Flex className="palette-row color-picker-row">
+          <FormLabel className="form-label color-picker stroke">{t("DG.Inspector.stroke")}</FormLabel>
           <Input type="color" className="color-picker-thumb" value={displayItemDescription.pointStrokeColor}
                  onChange={(e) => {
                    displayItemDescription.applyModelChange(
@@ -120,19 +120,19 @@ export const DisplayItemFormatControl = observer(function PointFormatControl(pro
             : attrType === "numeric"
               ?(
               <FormControl className="num-color-setting">
-                <Flex className="palette-row">
+                <Flex className="palette-row color-picker-row">
                   {/* Sets the min and max colors for numeric legend. Currently not implemented so
                                 this sets the same color for all the points*/}
-                  <FormLabel className="form-label legend">{t("DG.Inspector.legendColor")}</FormLabel>
+                  <FormLabel className="form-label color-picker legend">{t("DG.Inspector.legendColor")}</FormLabel>
                   <Input type="color" className="color-picker-thumb" value={missingColor}
                          onChange={e => displayItemDescription.setPointColor(e.target.value)}/>
                   <Input type="color" className="color-picker-thumb" value={missingColor}
                          onChange={e => displayItemDescription.setPointColor(e.target.value)}/>
                 </Flex>
               </FormControl>)
               :(
-              <Flex className="palette-row">
-                <FormLabel className="form-label color">{t("DG.Inspector.color")}</FormLabel>
+              <Flex className="palette-row color-picker-row">
+                <FormLabel className="form-label color-picker color">{t("DG.Inspector.color")}</FormLabel>
                 <Input type="color" className="color-picker-thumb"
                        value={displayItemDescription.pointColor}
                        onChange={e => {

diff --git a/v3/src/components/data-display/inspector/inspector-panel.scss b/v3/src/components/data-display/inspector/inspector-panel.scss
@@ -1,21 +1,6 @@
 @import "../../vars";
 
 .inspector-panel.data-display {
-  .palette-form {
-    margin: 0 0 10px 20px;
-
-    .palette-row {
-      flex-direction: row;
-      align-items: center;
-      height: 20px;
-      label {
-        margin: 0;
-      }
-      margin: 5px;
-      white-space: nowrap;
-    }
-  }
-
   .sub-options {
     margin-bottom: 5px;
     margin-left: 20px;

diff --git a/v3/src/components/graph/components/inspector-panel/graph-measure-group.scss b/v3/src/components/graph/components/inspector-panel/graph-measure-group.scss
@@ -6,6 +6,11 @@
   height: 24px!important;
   padding-inline-start: 0!important;
   border: none!important;
+
+  svg {
+    height: 24px !important;
+    width: 24px !important;
+  }
 }
 
 .measure-items {

diff --git a/v3/src/components/inspector-panel.scss b/v3/src/components/inspector-panel.scss
@@ -58,6 +58,10 @@ $inspector-panel-width: 50px;
   height: fit-content;
   font-family: "museo-sans", sans-serif;
   z-index: 5;
+  font-size: 12px;
+  min-width: 205px;
+  min-height: 100px;
+  font-weight: bold;
 
   .codap-inspector-palette-header {
     position: relative;
@@ -92,7 +96,21 @@ $inspector-panel-width: 50px;
   .palette-form {
     position: relative;
     left: 0;
+    margin: 5px 0 10px 20px;
     background-color: #EEE;
+    height: fit-content;
+
+    .palette-row {
+      flex-direction: row;
+      align-items: center;
+      height: 20px;
+      margin: 5px;
+      white-space: nowrap;
+
+      &.color-picker-row {
+        height: 30px;
+      }
+    }
 
     .form-title {
       font-family: "museo-sans", sans-serif !important;
@@ -104,7 +122,28 @@ $inspector-panel-width: 50px;
       display: flex;
       flex-direction: row;
       white-space: nowrap;
+      &.color-picker {
+        margin-right: 4px;
+        &.color {
+          margin-right: 8px;
+        }
+      }
     }
+
+    .palette-checkbox {
+      height: 20px;
+      width: 180px;
+      margin: 2px 0;
+    }
+
+    .chakra-radio__control {
+      border-color: #cfcfcf;
+    }
+
+    [data-checked] {
+      border-color: #3182ce;
+    }
+
     .inline-input-group {
       background: rgba(231, 231, 231, 0.7);
       display: flex;

diff --git a/v3/src/components/map/components/inspector-panel/map-inspector.scss b/v3/src/components/map/components/inspector-panel/map-inspector.scss
@@ -1,39 +1,16 @@
-.inspector-panel.map.data-display {
-  .codap-inspector-palette {
-    font-size: 12px;
-    min-width: 205px;
-    min-height: 100px;
-    font-weight: bold;
-
-    .palette-form {
-      height: fit-content;
-
-      .palette-row {
-        height: 30px;
-
-        .form-label.color {
-          margin-right: 4px;
-        }
-      }
-
-      .palette-checkbox {
-        height: 20px;
-        width: 180px;
-        margin: 2px 0;
-      }
-
-      .map-values-controls {
-        display: flex;
-        flex-direction: column;
-        margin: 5px;
+.map-values-controls {
+  display: flex;
+  flex-direction: column;
+  margin: 5px;
 
-        .map-values-layer-label{
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
+  .map-values-layer-label{
+    display: flex;
+    align-items: center;
+  }
+}
 
+.inspector-panel.map.data-display {
+  .codap-inspector-palette {
     .map-base-control {
       margin: 1px;