Color ramp drop down css

Author: gjmooney

packages/base/src/dialogs/components/symbology/CanvasSelectComponent.tsx

@@ -131,7 +131,7 @@ const CanvasSelectComponent = ({
 
       ctx.fillRect(i * 2, 0, 2, 50);
     }
-    cv.style.visibility = '';
+    cv.style.visibility = 'initial';
   };
 
   useEffect(() => {
@@ -142,14 +142,22 @@ const CanvasSelectComponent = ({
   }, []);
 
   return (
-    <div ref={containerRef} className="jp-select-wrapper">
+    <div ref={containerRef} className="jp-gis-canvas-button-wrapper">
       <Button
+        id="jp-gis-canvas-button"
         onClick={toggleDropdown}
-        className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+        className="jp-Dialog-button jp-gis-canvas-button"
+        // style={{ visibility: 'hidden' }}
       >
-        <canvas width="354" height="30" id="cv"></canvas>
+        <canvas
+          id="cv"
+          className="jp-gis-color-canvas-display"
+          height="30"
+        ></canvas>
       </Button>
-      <div className={`dropdown ${isOpen ? 'open' : ''}`}>
+      <div
+        className={`jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}`}
+      >
         {colorMaps.map((item, index) => (
           <ColorRampEntry index={index} colorMap={item} onClick={selectItem} />
         ))}

packages/base/src/dialogs/components/symbology/ColorRamp.tsx

@@ -63,6 +63,7 @@ const ColorRamp = ({ layerId, modeOptions, classifyFunc }: IColorRampProps) => {
             name="class-number-input"
             type="number"
             value={numberOfShades}
+            min={9}
             onChange={event => setNumberOfShades(event.target.value)}
           />
         </div>

packages/base/src/dialogs/components/symbology/ColorRampEntry.tsx

@@ -8,8 +8,8 @@ interface IColorRampEntryProps {
 }
 
 const ColorRampEntry = ({ index, colorMap, onClick }: IColorRampEntryProps) => {
-  const canvasWidth = 345;
-  const canvasHeight = 38;
+  // const canvasWidth = 345;
+  const canvasHeight = 30;
 
   useEffect(() => {
     const cv = document.getElementById(`cv-${index}`) as HTMLCanvasElement;
@@ -36,12 +36,12 @@ const ColorRampEntry = ({ index, colorMap, onClick }: IColorRampEntryProps) => {
     <div
       key={colorMap.name}
       onClick={() => onClick(colorMap.name)}
-      className="jp-gis-color-ramp-entry jp-mod-styled"
+      className="jp-gis-color-ramp-entry"
     >
       <span className="jp-gis-color-label">{colorMap.name}</span>
       <canvas
         id={`cv-${index}`}
-        width={canvasWidth}
+        // width={canvasWidth}
         height={canvasHeight}
         className="jp-gis-color-canvas"
       ></canvas>

packages/base/style/symbologyDialog.css

@@ -1,3 +1,8 @@
+select,
+select option {
+  text-transform: capitalize;
+}
+
 .jp-gis-symbology-dialog .jp-Dialog-header {
   font-weight: bold;
 }
@@ -50,7 +55,7 @@
 .jp-gis-band-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 13px;
 }
 
 .jp-gis-layer-symbology-container {
@@ -71,10 +76,6 @@
   gap: 13px;
 }
 
-.jp-gis-band-container .jp-gis-symbology-row:last-child {
-  margin-bottom: 12px;
-}
-
 .jp-gis-stop-container {
   display: flex;
   flex-direction: column;
@@ -147,7 +148,7 @@
   }
 }
 
-.dropdown {
+.jp-gis-color-ramp-dropdown {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -169,20 +170,22 @@
   -moz-appearance: none;
 }
 
-.open {
+.jp-gis-open {
   visibility: visible;
 }
 
-.dropdown > jp-gis-color-ramp-entry:hover {
+/* .jp-gis-color-ramp-dropdown > .jp-gis-color-ramp-entry:hover {
   background-color: #f1f1f1;
-}
+} */
 
 .jp-gis-color-ramp-entry {
   display: flex;
   align-items: center;
   font-size: var(--jp-ui-font-size2);
   color: var(--jp-ui-font-color0);
   appearance: none;
+  text-transform: capitalize;
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -193,6 +196,26 @@
 
 .jp-gis-color-canvas {
   margin: 0 -7px;
-  border-radius: 8px;
-  width: 99%;
+  border-radius: 4px;
+  width: 354px;
+}
+
+.jp-gis-color-canvas-display {
+  width: 100%;
+  height: 30px;
+  visibility: initial;
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+}
+
+.jp-gis-canvas-button-wrapper {
+  flex: 1 0 50%;
+  max-width: 50%;
+  position: relative;
+}
+
+#jp-gis-canvas-button.jp-gis-canvas-button {
+  visibility: hidden;
+  margin: 0;
+  padding: 0 1px 0 0;
+  width: 100%;
 }