Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ (entity selector) render drawer within the Grapher frame #3500

Merged
merged 1 commit into from
May 3, 2024
Merged

✨ (entity selector) render drawer within the Grapher frame #3500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 8 additions & 16 deletions packages/@ourworldindata/grapher/src/core/Grapher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ import {
STATIC_EXPORT_DETAIL_SPACING,
GRAPHER_LIGHT_TEXT,
GRAPHER_LOADED_EVENT_NAME,
GRAPHER_DRAWER_ID,
isContinentsVariableId,
isPopulationVariableId,
} from "../core/GrapherConstants"
Expand Down Expand Up @@ -3163,21 +3162,14 @@ export class Grapher
}

@computed get showEntitySelectorAs(): GrapherWindowType {
const isLarge = this.frameBounds.width > 940

// show the panel in full screen mode if the grapher is large enough
if (this.isInFullScreenMode && isLarge) return GrapherWindowType.panel

// don't use the panel or drawer if the grapher is embedded
if (this.isInIFrame || this.isEmbeddedInAnOwidPage)
return GrapherWindowType.modal

if (isLarge) return GrapherWindowType.panel

// if there is no empty drawer element on the page, use the modal
const hasDrawer =
document.querySelector(`nav#${GRAPHER_DRAWER_ID}`) !== null
if (!hasDrawer) return GrapherWindowType.modal
if (
this.frameBounds.width > 940 &&
// don't use the panel if the grapher is embedded
((!this.isInIFrame && !this.isEmbeddedInAnOwidPage) ||
// unless we're in full-screen mode
this.isInFullScreenMode)
)
return GrapherWindowType.panel

return this.isSemiNarrow
? GrapherWindowType.modal
Expand Down
1 change: 0 additions & 1 deletion packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"

export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
export const GRAPHER_DRAWER_ID = "grapher-drawer"
export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
export const GRAPHER_TIMELINE_CLASS = "timeline-component"
export const GRAPHER_SIDE_PANEL_CLASS = "side-panel"
Expand Down
11 changes: 7 additions & 4 deletions packages/@ourworldindata/grapher/src/core/grapher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ $zindex-controls-drawer: 150;
@import "../tabs/ExpandableTabs.scss";
@import "../slideInDrawer/SlideInDrawer.scss";
@import "../sidePanel/SidePanel.scss";
@import "../closeButton/CloseButton.scss";
@import "../controls/RadioButton.scss";
@import "../controls/Dropdown.scss";
@import "../core/OverlayHeader.scss";
}

// These rules are currently used elsewhere in the site. e.g. Explorers
Expand All @@ -86,10 +90,6 @@ $zindex-controls-drawer: 150;
@import "../controls/globalEntitySelector/GlobalEntitySelector.scss";
@import "../fullScreen/FullScreen.scss";
@import "../../../components/src/Checkbox.scss";
@import "../closeButton/CloseButton.scss";
@import "../controls/RadioButton.scss";
@import "../controls/Dropdown.scss";
@import "../core/OverlayHeader.scss";

.grapher_dark {
color: $dark-text;
Expand Down Expand Up @@ -123,6 +123,9 @@ $zindex-controls-drawer: 150;
border: 1px solid $frame-color;
z-index: $zindex-chart;

// important for the slide-in drawer
overflow-x: clip;

* {
box-sizing: border-box;
}
Expand Down
Loading
Loading