Skip to content

Commit

Permalink
🔨 (grapher) add CloseButton component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Apr 15, 2024
1 parent 2e584a7 commit c4f2b45
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 204 deletions.
39 changes: 39 additions & 0 deletions packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.close-button {
// keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
$size: 32px;

$light-stroke: #e7e7e7;

$active-fill: #dbe5f0;
$hover-fill: #f2f2f2;

display: flex;
align-items: center;
justify-content: center;

position: relative;
height: $size;
width: $size;
padding: 7px;

color: $light-text;
background: white;
border: 1px solid $light-stroke !important;
border-radius: 50%;

&:hover {
background: $hover-fill;
cursor: pointer;
color: $dark-text;
}

&:active {
background: $active-fill;
border: 1px solid $active-fill;
}

svg {
height: 14px;
width: 14px;
}
}
28 changes: 28 additions & 0 deletions packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from "react"
import cx from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
import { faXmark } from "@fortawesome/free-solid-svg-icons"

// keep in sync with $size in CloseButton.scss
const CLOSE_BUTTON_SIZE = 32

export const CLOSE_BUTTON_WIDTH = CLOSE_BUTTON_SIZE
export const CLOSE_BUTTON_HEIGHT = CLOSE_BUTTON_SIZE

export function CloseButton({
onClick,
className,
}: {
onClick: React.MouseEventHandler<HTMLButtonElement>
className?: string
}) {
return (
<button
type="button"
className={cx("close-button", className)}
onClick={onClick}
>
<FontAwesomeIcon icon={faXmark} />
</button>
)
}
24 changes: 12 additions & 12 deletions packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,18 @@ export class EntitySelectionToggle extends React.Component<{
icon: <FontAwesomeIcon icon={faEye} />,
}
: canChangeEntity
? {
action: "Change",
entity: entityType,
icon: <FontAwesomeIcon icon={faRightLeft} />,
}
: canAddEntities
? {
action: "Edit",
entity: entityTypePlural,
icon: <FontAwesomeIcon icon={faPencilAlt} />,
}
: null
? {
action: "Change",
entity: entityType,
icon: <FontAwesomeIcon icon={faRightLeft} />,
}
: canAddEntities
? {
action: "Edit",
entity: entityTypePlural,
icon: <FontAwesomeIcon icon={faPencilAlt} />,
}
: null
}

render(): JSX.Element | null {
Expand Down
57 changes: 22 additions & 35 deletions packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $control-row-height: 32px;

nav.controlsRow .chart-controls .settings-menu {
// the pop-up version of the settings menu
.settings-menu-controls {
.settings-menu-wrapper {
position: absolute;
width: 300px;
right: $indent;
Expand All @@ -42,6 +42,27 @@ nav.controlsRow .chart-controls .settings-menu {
}

.settings-menu-contents {
//
// chart-type label
//
.settings-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 9px $indent 3px $indent;
position: sticky;
top: 0;
z-index: 1;

.settings-menu-title {
text-transform: uppercase;
letter-spacing: 0.1em;
color: $light-text;
font: $bold 12px/16px $lato;
}
}

.settings-menu-controls {
//
// shared button coloring & behaviors
Expand Down Expand Up @@ -79,40 +100,6 @@ nav.controlsRow .chart-controls .settings-menu {
}
}

//
// chart-type label and close button
//
.config-header {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 9px $indent 3px $indent;
position: sticky;
top: 0;
z-index: 1;

.config-title {
text-transform: uppercase;
letter-spacing: 0.1em;
color: $light-text;
font: $bold 12px/16px $lato;
}

button.close {
position: relative;
border-radius: 50%;
height: 32px;
width: 32px;
text-align: center;
justify-content: center;
svg {
height: 14px;
width: 14px;
}
}
}

//
// each titled block of control widgets (with optional info-circle + tooltip)
//
Expand Down
117 changes: 60 additions & 57 deletions packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { computed, action, observable } from "mobx"
import { observer } from "mobx-react"
import classnames from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
import { faXmark, faGear } from "@fortawesome/free-solid-svg-icons"
import { faGear } from "@fortawesome/free-solid-svg-icons"
import { EntityName, ChartTypeName, FacetStrategy } from "@ourworldindata/types"
import { SelectionArray } from "../selection/SelectionArray"
import { ChartDimension } from "../chart/ChartDimension"
import { makeSelectionArray } from "../chart/ChartUtils.js"
import { AxisConfig } from "../axis/AxisConfig"
import { CloseButton } from "../closeButton/CloseButton.js"

import { AxisScaleToggle } from "./settings/AxisScaleToggle"
import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"
Expand Down Expand Up @@ -309,68 +310,70 @@ export class SettingsMenu extends React.Component<{
onClick={this.toggleVisibility}
></div>
<div
className="settings-menu-controls"
className="settings-menu-wrapper"
style={{
...this.layout,
}}
>
<div className="config-header">
<div className="config-title">{menuTitle}</div>
<button
className="clickable close"
onClick={this.toggleVisibility}
>
<FontAwesomeIcon icon={faXmark} />
</button>
<div className="settings-menu-header">
<div className="settings-menu-title">{menuTitle}</div>
<CloseButton onClick={() => this.toggleVisibility()} />
</div>

<SettingsGroup
title="Chart view"
active={
isOnChartTab &&
(showAbsRelToggle ||
showZoomToggle ||
showNoDataAreaToggle ||
showFacetControl ||
showFacetYDomainToggle)
}
>
{showFacetControl && (
<FacetStrategySelector manager={manager} />
)}
{showFacetYDomainToggle && (
<FacetYDomainToggle manager={manager} />
)}
{showAbsRelToggle && <AbsRelToggle manager={manager} />}
{showNoDataAreaToggle && (
<NoDataAreaToggle manager={manager} />
)}
{showZoomToggle && <ZoomToggle manager={manager} />}
</SettingsGroup>
<SettingsGroup
title="Axis scale"
active={
isOnChartTab &&
(showYScaleToggle || showXScaleToggle)
}
>
{showYScaleToggle && (
<AxisScaleToggle
axis={yAxis!}
subtitle={omitLoneAxisLabel ? "" : yLabel}
/>
)}
{showXScaleToggle && (
<AxisScaleToggle axis={xAxis!} subtitle={xLabel} />
)}
<div className="config-subtitle">
A linear scale evenly spaces values, where each
increment represents a consistent change. A
logarithmic scale uses multiples of the starting
value, with each increment representing the same
percentage increase.
</div>
</SettingsGroup>
<div className="settings-menu-controls">
<SettingsGroup
title="Chart view"
active={
isOnChartTab &&
(showAbsRelToggle ||
showZoomToggle ||
showNoDataAreaToggle ||
showFacetControl ||
showFacetYDomainToggle)
}
>
{showFacetControl && (
<FacetStrategySelector manager={manager} />
)}
{showFacetYDomainToggle && (
<FacetYDomainToggle manager={manager} />
)}
{showAbsRelToggle && (
<AbsRelToggle manager={manager} />
)}
{showNoDataAreaToggle && (
<NoDataAreaToggle manager={manager} />
)}
{showZoomToggle && <ZoomToggle manager={manager} />}
</SettingsGroup>
<SettingsGroup
title="Axis scale"
active={
isOnChartTab &&
(showYScaleToggle || showXScaleToggle)
}
>
{showYScaleToggle && (
<AxisScaleToggle
axis={yAxis!}
subtitle={omitLoneAxisLabel ? "" : yLabel}
/>
)}
{showXScaleToggle && (
<AxisScaleToggle
axis={xAxis!}
subtitle={xLabel}
/>
)}
<div className="config-subtitle">
A linear scale evenly spaces values, where each
increment represents a consistent change. A
logarithmic scale uses multiples of the starting
value, with each increment representing the same
percentage increase.
</div>
</SettingsGroup>
</div>
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions packages/@ourworldindata/grapher/src/core/Grapher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3133,8 +3133,8 @@ export class Grapher
return this.canHighlightEntities
? `Select ${this.entityTypePlural}`
: this.canChangeEntity
? `Change ${a(this.entityType)}`
: `Add/remove ${this.entityTypePlural}`
? `Change ${a(this.entityType)}`
: `Add/remove ${this.entityTypePlural}`
}

@computed get canSelectMultipleEntities(): boolean {
Expand Down
1 change: 1 addition & 0 deletions packages/@ourworldindata/grapher/src/core/grapher.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ $zindex-controls-drawer: 150;
@import "../sparkBars/SparkBars.scss";
@import "../fullScreen/FullScreen.scss";
@import "../../../components/src/Checkbox.scss";
@import "../closeButton/CloseButton.scss";

.GrapherComponent,
.GrapherComponent h2,
Expand Down
33 changes: 1 addition & 32 deletions packages/@ourworldindata/grapher/src/modal/Modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,37 +31,10 @@ $modal-padding: 1.5em;
flex-direction: column;
}

.modalDismiss {
$light-stroke: #e7e7e7;
$hover-fill: #f2f2f2;
$active-fill: #dbe5f0;

font-size: 13px;
color: $dark-text;
border: 1px solid $light-stroke;
border-radius: 50%;
width: 32px;
height: 32px;
background-color: #fff;
z-index: 1;

// center icon
display: flex;
align-items: center;
justify-content: center;

.close-button--top-right {
position: absolute;
top: $modal-padding;
right: $modal-padding;

&:hover {
border-color: $hover-fill;
background: $hover-fill;
cursor: pointer;
}
&:active {
background-color: $active-fill;
}
}

.modalHeader {
Expand All @@ -83,10 +56,6 @@ $modal-padding: 1.5em;
letter-spacing: 1.2px;
margin: 0;
}

.modalDismiss {
position: static;
}
}

.modalScrollable {
Expand Down
Loading

0 comments on commit c4f2b45

Please sign in to comment.