Merge pull request #52 from brown-ccv/fix-styling

Fix styling on Controls menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-volume-viewer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Aframe container with custom controls for use in react applications",
   "author": "brown-ccv",
   "license": "MIT",

src/components/controls/ClipControls.jsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { Range } from "rc-slider";
 import "rc-slider/assets/index.css";
 
+import Section from "./Section.jsx";
 import { SLIDER_RANGE } from "../../constants/constants.js";
-import Title from "./SectionTitle.jsx";
 
 // TODO: Slider range should be 0-1000 with a step of 1 (changes needed in AframeScene)
 function ClipControls({ sliders, setSliders }) {
@@ -16,11 +16,10 @@ function ClipControls({ sliders, setSliders }) {
   }
 
   return (
-    <Wrapper>
-      <Title>Clip</Title>
+    <Section title="Clip">
       {["x", "y", "z"].map((axis) => (
         <SliderGroup key={axis}>
-          <h4> {axis.toUpperCase()} Axis</h4>
+          <Axis> {axis.toUpperCase()} Axis</Axis>
           <Range
             min={SLIDER_RANGE.min}
             max={SLIDER_RANGE.max}
@@ -31,15 +30,14 @@ function ClipControls({ sliders, setSliders }) {
           />
         </SliderGroup>
       ))}
-    </Wrapper>
+    </Section>
   );
 }
 
-const Wrapper = styled.div`
-  margin: 25px 0;
-  margin-bottom: 0;
-`;
-
 const SliderGroup = styled.div``;
 
+const Axis = styled.h4`
+  margin: 8px 0;
+`;
+
 export default ClipControls;

src/components/controls/ColorMapControls.jsx

@@ -10,13 +10,11 @@ import {
 } from "@reach/listbox";
 import "@reach/listbox/styles.css";
 
-import Title from "./SectionTitle.jsx";
+import Section from "./Section.jsx";
 
 function ColorMapControls({ colorMaps, colorMap, setColorMap }) {
   return (
-    <Wrapper>
-      <Title>Color Map</Title>
-
+    <Section title="Color Map">
       {colorMaps.length > 1 ? (
         <StyledListboxInput
           aria-labelledby="ColorMap dropdown"
@@ -26,7 +24,7 @@ function ColorMapControls({ colorMaps, colorMap, setColorMap }) {
           }
         >
           <ListboxButton>
-            <OutlinedImage
+            <OutlinedImg
               src={colorMap.path}
               alt="The current color map"
               height="20px"
@@ -37,36 +35,32 @@ function ColorMapControls({ colorMaps, colorMap, setColorMap }) {
           <ListboxPopover>
             <ListboxList>
               {colorMaps.map((color) => (
-                <ListboxOption key={color.name} value={color.name}>
-                  <img
+                <StyledListboxOption key={color.name} value={color.name}>
+                  <OptionText>{color.name}</OptionText>
+                  <OptionImg
                     src={color.path}
                     alt={color.name}
-                    height="15px"
-                    width="100%"
+                    width="0"
+                    height="auto"
                   />
-                </ListboxOption>
+                </StyledListboxOption>
               ))}
             </ListboxList>
           </ListboxPopover>
         </StyledListboxInput>
       ) : (
-        <OutlinedImage
+        <OutlinedImg
           src={colorMap.path}
           alt="The current color map"
           height="20px"
           width="100%"
         />
       )}
-    </Wrapper>
+    </Section>
   );
 }
 
-const Wrapper = styled.div`
-  margin: 25px 0;
-  margin-top: 0;
-`;
-
-const OutlinedImage = styled.img`
+const OutlinedImg = styled.img`
   outline: solid 1px;
 `;
 
@@ -85,4 +79,16 @@ const StyledListboxInput = styled(ListboxInput)`
   }
 `;
 
+const StyledListboxOption = styled(ListboxOption)`
+  display: flex;
+  gap: 8px;
+`;
+const OptionText = styled.div`
+  flex: 1;
+  align-self: center;
+`;
+const OptionImg = styled(OutlinedImg)`
+  flex: 3;
+`;
+
 export default ColorMapControls;

src/components/controls/Controls.jsx

@@ -9,11 +9,9 @@ function Controls({
   colorMaps,
   model,
   useTransferFunction,
-  initColorMap,
   initTransferFunction,
   colorMap,
   setColorMap,
-  transferFunction,
   setTransferFunction,
   sliders,
   setSliders,
@@ -42,18 +40,16 @@ function Controls({
 }
 
 const Wrapper = styled.div`
+  background-color: white;
   position: absolute;
-  overflow: auto;
-  left: 25px;
-  top: 25px;
-  bottom: 25px;
-  margin: auto 0;
-  width: 300px;
+  box-sizing: border-box;
+  padding: 0px 16px; // Section.jsx handles spacing on y axis
+  width: 320px;
+  left: 8px;
+  top: 8px;
   height: fit-content;
-  max-height: calc(100% - 50px); // Leaves 25px to the edge of the AframeScene
-  padding: 15px;
-  background-color: white;
-  border-radius: 5%;
+  max-height: calc(100% - 16px); // Leaves 8px to the bottom of the AframeScene
+  overflow: auto;
 `;
 
 const Button = styled.button``;

src/components/controls/OpacityControls.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styled from "styled-components";
 import { scaleLinear } from "d3-scale";
 
-import Title from "./SectionTitle.jsx";
+import Section from "./Section.jsx";
 import {
   DECIMALS,
   CANVAS_PADDING,
@@ -203,8 +203,7 @@ function OpacityControls({ range, initTransferFunction, setTransferFunction }) {
   }
 
   return (
-    <Wrapper>
-      <Title>Transfer Function</Title>
+    <Section title="Transfer Function">
       <OutlinedCanvas
         id="opacityControls"
         ref={canvasRef}
@@ -235,14 +234,10 @@ function OpacityControls({ range, initTransferFunction, setTransferFunction }) {
         Double-click to add a point to the transfer function. Right-click to
         remove a point. Drag points to change the function.
       </HelpText>
-    </Wrapper>
+    </Section>
   );
 }
 
-const Wrapper = styled.div`
-  margin: 25px 0;
-`;
-
 const OutlinedCanvas = styled.canvas`
   width: 100%;
   outline: 1px solid;
@@ -276,6 +271,7 @@ const RightLabel = styled(LabelText)`
 
 const HelpText = styled.p`
   margin: 5px 0;
+  font-size: 0.75rem;
 `;
 
 export default OpacityControls;

src/components/controls/Section.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+function Section({ title, children }) {
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      {children}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin: 16px 0px;
+`;
+
+const Title = styled.h2`
+  margin: 8px 0px;
+`;
+
+export default Section;