moved unit selector to above the graph #209

ruuvi · Aug 13, 2024 · 702fd2e · 702fd2e
1 parent af8698d
commit 702fd2e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 22 deletions.
diff --git a/src/components/SensorTypePicker.js b/src/components/SensorTypePicker.js
@@ -23,7 +23,7 @@ export default function SensorTypePicker(props) {
         variant: "shareSensorSelect",
         style: { fontFamily: "mulish", fontSize: 15, fontWeight: 800, width: "250px", textAlign: "left" }
     }
-    if (props.normalStyle) {
+    if (!props.altStyle) {
         style = {
             variant: "ddl",
             className: "durationPicker",
@@ -36,7 +36,7 @@ export default function SensorTypePicker(props) {
                 rightIcon={<MdArrowDropDown size={26} className="buttonSideIcon" style={{ marginLeft: -10, marginRight: -8 }} />}
                 {...style}
                 borderRadius='4px'>
-                <Box pl={1}  className={props.normalStyle ? "ddlItemAlt" : ""}>
+                <Box pl={1}  className={props.altStyle ? "" : "ddlItemAlt"}>
                     {current}
                 </Box>
             </MenuButton>

diff --git a/src/states/Dashboard.js b/src/states/Dashboard.js
@@ -265,7 +265,7 @@ class Dashboard extends Component {
         else SessionStore.setBackRoute("/")
         const dropdowns = <>
             <DashboardViewType value={this.state.cardType} onChange={this.setDashboardViewType.bind(this)} showResetOrder={this.getOrder() !== null} resetOrder={() => this.setState({ ...this.state, showResetOrderConfirmation: true })} />
-            <SensorTypePicker value={this.state.graphType} onChange={type => this.setGraphType(type)} normalStyle />
+            <SensorTypePicker value={this.state.graphType} onChange={type => this.setGraphType(type)} />
             <DurationPicker value={this.state.from} onChange={v => this.updateFrom(v)} dashboard disabled={this.shouldDurationBeDisabled()} />
         </>
         const search = width => {

diff --git a/src/states/SensorCompare.js b/src/states/SensorCompare.js
@@ -89,7 +89,6 @@ function SensorCompare(props) {
         </Flex>
     </>
 
-    const selectUnitTitle = <div style={{ marginTop: 8, paddingRight: 8, fontWeight: 800, fontFamily: "mulish" }}>{i18next.t("unit")}</div>
     const selectUnit = <>
         <SensorTypePicker value={dataKey} onChange={v => setDataKey(v)} />
     </>
@@ -149,14 +148,6 @@ function SensorCompare(props) {
                                 {selectSensor}
                             </td>
                         </tr>
-                        <tr>
-                            <td valign="top">
-                                {selectUnitTitle}
-                            </td>
-                            <td>
-                                {selectUnit}
-                            </td>
-                        </tr>
                         <tr>
                             <td valign="top">
                             </td>
@@ -176,15 +167,6 @@ function SensorCompare(props) {
                             {selectSensor}
                         </Box>
                     </Box>
-
-                    <Box display="block" mb={4}>
-                        <Box p={2}>
-                            {selectUnitTitle}
-                        </Box>
-                        <Box flex={1} ml={{ md: 2, base: 1 }}>
-                            {selectUnit}
-                        </Box>
-                    </Box>
                     <Box ml={{ md: 2, base: 1 }}>
                         {loadButton}
                     </Box>
@@ -205,10 +187,11 @@ function SensorCompare(props) {
 
                                 </td>
                                 <td>
-                                    <Flex justify="end" gap={"6px"}>
+                                    <Flex justify="end" flexWrap="wrap" gap={"6px"}>
                                         {(viewData && !loading) && <>
                                             {graphCtrl()}
                                         </>}
+                                        {selectUnit}
                                         {durationPicker}
                                     </Flex>
                                 </td>
@@ -230,6 +213,7 @@ function SensorCompare(props) {
                                         {(viewData && !loading) && <>
                                             {graphCtrl(true)}
                                         </>}
+                                        {selectUnit}
                                         {durationPicker}
                                     </Flex>
                                 </td>