✨ (tables): move filter control out of settings drawer

owid · Oct 11, 2023 · 85aa9f0 · 85aa9f0
1 parent 053fe9a
commit 85aa9f0
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 86 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss
@@ -0,0 +1,98 @@
+$light-fill: #dadada;
+$active-fill: #dbe5f0;
+
+$light-text: #858585;
+$dark-text: #5b5b5b;
+
+$info-icon: #a1a1a1;
+$active-switch: #6e87a2;
+
+$medium: 400;
+$lato: $sans-serif-font-stack;
+
+@at-root {
+    // placed either directly in controls row or in settings menu
+    .controlsRow .controls,
+    .settings-menu-contents {
+        // on/off switch with label written to the right
+        .labeled-switch {
+            display: flex;
+            color: $light-text;
+            font: $medium 13px/16px $lato;
+            letter-spacing: 0.01em;
+
+            position: relative;
+            margin: 8px 0;
+            -webkit-user-select: none;
+            user-select: none;
+
+            label {
+                color: $dark-text;
+                padding-left: 35px;
+                white-space: nowrap;
+
+                &:hover {
+                    cursor: pointer;
+                }
+
+                svg {
+                    color: $info-icon;
+                    height: 13px;
+                    padding: 0 0.333em;
+                }
+            }
+
+            .labeled-switch-subtitle {
+                // only show subtitle in settings menu, otherwise use icon + tooltip
+                display: none;
+            }
+
+            input {
+                position: absolute;
+                opacity: 0;
+                left: 0;
+            }
+
+            .outer {
+                position: absolute;
+                left: 0;
+                top: 0;
+                content: " ";
+                width: 29px;
+                height: 16px;
+                background: $light-fill;
+                border-radius: 8px;
+                pointer-events: none;
+                .inner {
+                    position: relative;
+                    content: " ";
+                    width: 10px;
+                    height: 10px;
+                    background: $light-text;
+                    border-radius: 5px;
+                    top: 3px;
+                    left: 3px;
+                    pointer-events: none;
+                    transition: transform 333ms;
+                }
+            }
+
+            &:hover {
+                .outer .inner {
+                    background: $dark-text;
+                }
+            }
+
+            input:checked + .outer {
+                background: $active-fill;
+                .inner {
+                    background: $active-switch;
+                    transform: translate(13px, 0);
+                }
+            }
+            &:hover input:checked + .outer .inner {
+                background: darken($active-switch, 13%);
+            }
+        }
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx
@@ -16,7 +16,7 @@ export class LabeledSwitch extends React.Component<{
         const { label, value, tooltip, tracking } = this.props
 
         return (
-            <div className="config-switch">
+            <div className="labeled-switch">
                 <label>
                     <input
                         type="checkbox"
@@ -40,7 +40,9 @@ export class LabeledSwitch extends React.Component<{
                         </Tippy>
                     )}
                 </label>
-                {tooltip && <div className="config-subtitle">{tooltip}</div>}
+                {tooltip && (
+                    <div className="labeled-switch-subtitle">{tooltip}</div>
+                )}
             </div>
         )
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -73,12 +73,12 @@ nav.controlsRow .controls .settings-menu {
             z-index: $zindex-controls-backdrop;
         }
 
-        .config-switch {
+        .labeled-switch {
             label > svg {
                 display: none;
             }
 
-            .config-subtitle {
+            .labeled-switch-subtitle {
                 display: block;
             }
         }
@@ -192,6 +192,7 @@ nav.controlsRow .controls .settings-menu {
                     }
                 }
 
+                .labeled-switch .labeled-switch-subtitle,
                 .config-subtitle {
                     font-size: 13px;
                     margin: 5px 0;
@@ -227,76 +228,9 @@ nav.controlsRow .controls .settings-menu {
                 }
 
                 // on/off switch with label written to the right
-                .config-switch {
-                    position: relative;
+                .labeled-switch {
                     margin: 14px 0;
-                    -webkit-user-select: none;
-                    user-select: none;
-
-                    label {
-                        color: $dark-text;
-                        padding-left: 35px;
-                        &:hover {
-                            cursor: pointer;
-                        }
-
-                        svg {
-                            color: $info-icon;
-                            height: 13px;
-                            padding: 0 0.333em;
-                        }
-                    }
-
-                    .config-subtitle {
-                        display: none;
-                    }
-
-                    input {
-                        position: absolute;
-                        opacity: 0;
-                        left: 0;
-                    }
-
-                    .outer {
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        content: " ";
-                        width: 29px;
-                        height: 16px;
-                        background: $light-fill;
-                        border-radius: 8px;
-                        pointer-events: none;
-                        .inner {
-                            position: relative;
-                            content: " ";
-                            width: 10px;
-                            height: 10px;
-                            background: $light-text;
-                            border-radius: 5px;
-                            top: 3px;
-                            left: 3px;
-                            pointer-events: none;
-                            transition: transform 333ms;
-                        }
-                    }
-
-                    &:hover {
-                        .outer .inner {
-                            background: $dark-text;
-                        }
-                    }
-
-                    input:checked + .outer {
-                        background: $active-fill;
-                        .inner {
-                            background: $active-switch;
-                            transform: translate(13px, 0);
-                        }
-                    }
-                    &:hover input:checked + .outer .inner {
-                        background: darken($active-switch, 13%);
-                    }
+                    display: block;
                 }
 
                 // vertical list of options (for selecting faceting mode)

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -307,7 +307,6 @@ export class SettingsMenu extends React.Component<{
             showFacetControl,
             showFacetYDomainToggle,
             showAbsRelToggle,
-            showTableFilterToggle,
         } = this
 
         const {
@@ -378,13 +377,6 @@ export class SettingsMenu extends React.Component<{
                         )}
                         {showZoomToggle && <ZoomToggle manager={manager} />}
                     </SettingsGroup>
-
-                    <SettingsGroup title="Data rows" active={isOnTableTab}>
-                        {showTableFilterToggle && (
-                            <TableFilterToggle manager={manager} />
-                        )}
-                    </SettingsGroup>
-
                     <SettingsGroup
                         title="Axis scale"
                         active={
@@ -414,21 +406,42 @@ export class SettingsMenu extends React.Component<{
         )
     }
 
-    render(): JSX.Element | null {
-        const { showSettingsMenuToggle, active } = this
-        return showSettingsMenuToggle ? (
+    renderChartSettings(): JSX.Element {
+        const { active } = this
+        return (
             <div className="settings-menu">
                 <button
                     className={classnames("menu-toggle", { active })}
                     onClick={this.toggleVisibility}
                     data-track-note="chart_settings_menu_toggle"
+                    title="Chart settings"
                 >
                     <FontAwesomeIcon icon={faGear} />
                     <span className="label"> Settings</span>
                 </button>
                 {this.menu}
             </div>
-        ) : null
+        )
+    }
+
+    renderTableControls(): JSX.Element {
+        // Since tables only have a single control, display it inline rather than
+        // placing it in the settings menu
+        return <TableFilterToggle manager={this.manager} />
+    }
+
+    render(): JSX.Element | null {
+        const {
+            manager: { isOnChartTab, isOnTableTab },
+            showSettingsMenuToggle,
+            showTableFilterToggle,
+        } = this
+
+        return isOnTableTab && showTableFilterToggle
+            ? this.renderTableControls()
+            : isOnChartTab && showSettingsMenuToggle
+            ? this.renderChartSettings()
+            : null
     }
 }
 

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -59,6 +59,8 @@ $zindex-controls-drawer: 140;
 // e.g. &.narrow is equivalent to .GrapherComponent.narrow
 .GrapherComponent {
     @import "../controls/CommandPalette.scss";
+    @import "../controls/LabeledSwitch.scss";
+    @import "../controls/Checkbox.scss";
     @import "../controls/Controls.scss";
     @import "../controls/SettingsMenu.scss";
     @import "../controls/MapProjectionMenu.scss";
@@ -79,7 +81,6 @@ $zindex-controls-drawer: 140;
     @import "../loadingIndicator/LoadingIndicator.scss";
     @import "../footer/Footer.scss";
     @import "../header/Header.scss";
-    @import "../controls/Checkbox.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers