✨ (entity selector) design feedback

owid · Apr 16, 2024 · e11f882 · e11f882
1 parent 58508ee
commit e11f882
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 63 deletions.
diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
@@ -18,11 +18,12 @@
 
     color: $light-text;
     background: white;
-    border: 1px solid $light-stroke !important;
+    border: 1px solid $light-stroke;
     border-radius: 50%;
 
     &:hover {
         background: $hover-fill;
+        border-color: $hover-fill;
         cursor: pointer;
         color: $dark-text;
     }

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -6,7 +6,8 @@
     align-items: center;
     padding: var(--padding) var(--padding) 16px;
 
-    button {
+    .close-button {
         margin-left: 8px;
+        flex-shrink: 0;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -4,16 +4,25 @@ import { CloseButton } from "../closeButton/CloseButton.js"
 
 export function OverlayHeader({
     title,
+    onTitleClick,
     onDismiss,
     className,
 }: {
     title: string
+    onTitleClick?: () => void
     onDismiss?: () => void
     className?: string
 }): JSX.Element {
     return (
         <div className={cx("overlay-header", className)}>
-            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            <h2
+                className={cx("grapher_h5-black-caps", "grapher_light", {
+                    clickable: !!onTitleClick,
+                })}
+                onClick={onTitleClick}
+            >
+                {title}
+            </h2>
             {onDismiss && <CloseButton onClick={onDismiss} />}
         </div>
     )

diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -1,6 +1,9 @@
 .entity-selector {
     --padding: var(--modal-padding, 16px);
 
+    $sort-button-size: 32px;
+    $sort-button-margin: 16px;
+
     color: $dark-text;
 
     // necessary for scrolling
@@ -114,22 +117,19 @@
         .label {
             flex-shrink: 0;
             margin-right: 8px;
-            color: $dark-text;
         }
 
         button.sort {
             flex-shrink: 0;
-            margin-left: 16px;
-
-            $size: 32px;
+            margin-left: $sort-button-margin;
 
             display: flex;
             align-items: center;
             justify-content: center;
 
             position: relative;
-            height: $size;
-            width: $size;
+            height: $sort-button-size;
+            width: $sort-button-size;
             padding: 7px;
 
             color: $dark-text;
@@ -185,6 +185,14 @@
             position: relative;
             cursor: pointer;
 
+            &.hovered {
+                background: rgba(219, 229, 240, 0.4);
+            }
+
+            &--with-bar.hovered {
+                background: rgba(219, 229, 240, 0.6);
+            }
+
             .value {
                 color: #a1a1a1;
                 white-space: nowrap;
@@ -263,10 +271,6 @@
             font-weight: 500;
             letter-spacing: 0.06em;
             text-transform: uppercase;
-
-            display: flex;
-            flex-wrap: wrap;
-            column-gap: 4px;
         }
 
         button {
@@ -287,4 +291,8 @@
             }
         }
     }
+
+    .grapher-dropdown .menu {
+        width: calc(100% + $sort-button-margin + $sort-button-size);
+    }
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useRef } from "react"
 import { observer } from "mobx-react"
 import { computed, action, reaction } from "mobx"
 import cx from "classnames"
@@ -112,6 +112,8 @@ export class EntitySelector extends React.Component<{
     scrollableContainer: React.RefObject<HTMLDivElement> = React.createRef()
     searchField: React.RefObject<HTMLInputElement> = React.createRef()
 
+    private dismissTimer?: NodeJS.Timeout
+
     private defaultSortConfig = {
         slug: this.table.entityNameSlug,
         order: SortOrder.asc,
@@ -133,6 +135,10 @@ export class EntitySelector extends React.Component<{
         )
     }
 
+    componentWillUnmount(): void {
+        if (this.dismissTimer) clearTimeout(this.dismissTimer)
+    }
+
     private set(newState: Partial<EntitySelectorState>): void {
         const correctedState = { ...newState }
 
@@ -568,6 +574,11 @@ export class EntitySelector extends React.Component<{
         )
     }
 
+    @action.bound onTitleClick(): void {
+        if (this.scrollableContainer.current)
+            this.scrollableContainer.current.scrollTop = 0
+    }
+
     @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
         const { searchResults } = this
         if (e.key === "Enter" && searchResults && searchResults.length > 0) {
@@ -581,7 +592,11 @@ export class EntitySelector extends React.Component<{
             this.selectionArray.toggleSelection(entityName)
         } else {
             this.selectionArray.setSelectedEntities([entityName])
-            if (this.props.onDismiss) this.props.onDismiss()
+            if (this.props.onDismiss) {
+                this.dismissTimer = setTimeout(() => {
+                    if (this.props.onDismiss) this.props.onDismiss()
+                }, 250)
+            }
         }
 
         this.set({ mostRecentlySelectedEntityName: entityName })
@@ -739,7 +754,9 @@ export class EntitySelector extends React.Component<{
     private renderSortBar(): JSX.Element {
         return (
             <div className="entity-selector__sort-bar">
-                <span className="label grapher_label-2-medium">Sort by</span>
+                <span className="label grapher_label-2-medium grapher_light">
+                    Sort by
+                </span>
                 <Dropdown
                     options={this.sortOptions}
                     onChange={this.onChangeSortSlug}
@@ -790,21 +807,56 @@ export class EntitySelector extends React.Component<{
     }
 
     private renderAllEntitiesInSingleMode(): JSX.Element {
+        const { selected, unselected } = this.partitionedAvailableEntities
         return (
-            <ul>
-                {this.sortedAvailableEntities.map((entity) => (
-                    <li key={entity.name}>
-                        <SelectableEntity
-                            name={entity.name}
-                            type="radio"
-                            checked={this.isEntitySelected(entity)}
-                            bar={this.getBarConfigForEntity(entity)}
-                            onChange={() => this.onChange(entity.name)}
-                            local={entity.local}
-                        />
-                    </li>
-                ))}
-            </ul>
+            <Flipper
+                spring={{
+                    stiffness: 300,
+                    damping: 33,
+                }}
+                flipKey={this.selectionArray.selectedEntityNames.join(",")}
+            >
+                <ul>
+                    {selected.map((entity) => (
+                        <Flipped
+                            key={entity.name}
+                            flipId={entity.name}
+                            translate
+                            opacity
+                        >
+                            <li key={entity.name}>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="radio"
+                                    checked={true}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                    {unselected.map((entity) => (
+                        <Flipped
+                            key={entity.name}
+                            flipId={entity.name}
+                            translate
+                            opacity
+                        >
+                            <li key={entity.name}>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="radio"
+                                    checked={false}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </li>
+                        </Flipped>
+                    ))}
+                </ul>
+            </Flipper>
         )
     }
 
@@ -937,48 +989,35 @@ export class EntitySelector extends React.Component<{
     }
 
     private renderFooter(): JSX.Element {
-        const { numSelectedEntities, selectedEntityNames } = this.selectionArray
+        const { numSelectedEntities } = this.selectionArray
         const { partitionedVisibleEntities: visibleEntities } = this
 
         return (
             <div className="entity-selector__footer">
-                {this.isMultiMode ? (
-                    <>
-                        <div className="footer__selected">
-                            {numSelectedEntities > 0
-                                ? `${numSelectedEntities} selected`
-                                : "Empty selection"}
-                        </div>
-                        <button
-                            type="button"
-                            onClick={this.onClear}
-                            disabled={visibleEntities.selected.length === 0}
-                        >
-                            Clear
-                        </button>
-                    </>
-                ) : (
-                    <div className="footer__selected">
-                        {selectedEntityNames.length > 0 ? (
-                            <>
-                                Current selection:
-                                <span className="entity-name">
-                                    {selectedEntityNames[0]}
-                                </span>
-                            </>
-                        ) : (
-                            "Empty selection"
-                        )}
-                    </div>
-                )}
+                <div className="footer__selected">
+                    {numSelectedEntities > 0
+                        ? `${numSelectedEntities} selected`
+                        : "Empty selection"}
+                </div>
+                <button
+                    type="button"
+                    onClick={this.onClear}
+                    disabled={visibleEntities.selected.length === 0}
+                >
+                    Clear
+                </button>
             </div>
         )
     }
 
     render(): JSX.Element {
         return (
             <div className="entity-selector">
-                <OverlayHeader title={this.title} onDismiss={this.onDismiss} />
+                <OverlayHeader
+                    title={this.title}
+                    onTitleClick={this.onTitleClick}
+                    onDismiss={this.onDismiss}
+                />
 
                 {this.renderSearchBar()}
 
@@ -996,7 +1035,7 @@ export class EntitySelector extends React.Component<{
                     </div>
                 </div>
 
-                {this.renderFooter()}
+                {this.isMultiMode && this.renderFooter()}
             </div>
         )
     }
@@ -1019,6 +1058,8 @@ function SelectableEntity({
     onChange: () => void
     local?: boolean
 }) {
+    const element = useRef<HTMLDivElement>(null)
+
     const Input = {
         checkbox: Checkbox,
         radio: RadioButton,
@@ -1041,7 +1082,13 @@ function SelectableEntity({
 
     return (
         <div
-            className="selectable-entity"
+            ref={element}
+            className={cx("selectable-entity", {
+                "selectable-entity--with-bar": bar && bar.width !== undefined,
+            })}
+            // can't use :hover because an element keeps its hover style while it's animated
+            onMouseEnter={() => element.current?.classList.add("hovered")}
+            onMouseLeave={() => element.current?.classList.remove("hovered")}
             // make the whole row clickable
             onClickCapture={(e) => {
                 e.stopPropagation()