Merge pull request #1875: Adjust placement of focus toggle

nextstrain · Oct 23, 2024 · 7bb1245 · 7bb1245
2 parents 21abe33 + af09673
commit 7bb1245
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+* Moved the "Focus on Selected" toggle next to the "Show confidence intervals" toggle.
+  ([#1875](https://github.com/nextstrain/auspice/pull/1875))
+
 ## version 2.59.0 - 2024/10/22
 
 

diff --git a/src/components/controls/choose-explode-attr.js b/src/components/controls/choose-explode-attr.js
@@ -40,8 +40,8 @@ class ChooseExplodeAttr extends React.Component {
     return (
       <div style={{paddingTop: 10}}>
         <SidebarSubtitleFlex data-tip data-for="explode_tree">
-          <span>
-            <ImLab style={{ marginRight: "5px" }}/>
+          <span style={{ position: "relative" }}>
+            <ImLab style={{ position: "absolute", left: "-14px", top: "2px", fontSize: "10px" }}/>
             {t("sidebar:Explode Tree By")}
           </span>
           {tooltip && !this.props.mobileDisplay && (

diff --git a/src/components/controls/choose-metric.js b/src/components/controls/choose-metric.js
@@ -52,7 +52,7 @@ class ChooseMetric extends React.Component {
 
         {this.props.showTreeToo ?
           null : (
-            <div style={{margin: 5}}>
+            <div style={{marginBottom: 5}}>
               <Toggle
                 display={this.props.temporalConfidence.display}
                 on={this.props.temporalConfidence.on}

diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
@@ -66,8 +66,8 @@ function Controls() {
           tooltip={TreeInfo}
           options={<>
             <ChooseLayout />
-            <ToggleFocus tooltip={ToggleFocusInfo} />
             <ChooseMetric />
+            <ToggleFocus tooltip={ToggleFocusInfo} />
             <ChooseBranchLabelling />
             <ChooseTipLabel />
             <ChooseSecondTree />

diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js
@@ -6,6 +6,7 @@ import { SidebarSubtitle } from "./styles";
 const ToggleContainer = styled.div`
   // Same as ToggleBackground, necessary for panel toggles.
   height: 21px;
+  position: relative;
 `
 
 const ToggleBackground = styled.label`
@@ -31,7 +32,10 @@ const ToggleSubtitle = styled(SidebarSubtitle)`
 
 const ExperimentalIcon = styled.span`
   color: ${(props) => props.theme.color};
-  margin-right: 5px;
+  font-size: 10px;
+  position: absolute;
+  left: -12px;
+  top: 6px;
 `
 
 const Slider = styled.div`