From da38cddb828981a83d1146bd4d6444a7af31355c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?= <1682504+fspoettel@users.noreply.github.com> Date: Tue, 22 Mar 2022 21:21:38 +0100 Subject: [PATCH 1/2] chore: extract `ToolbarButton` component --- src/components/Toolbar.js | 16 ++++++---------- src/components/controls/atoms/ToolbarButton.js | 12 ++++++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 src/components/controls/atoms/ToolbarButton.js diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 63da701..87d9bc9 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -21,6 +21,7 @@ import { getCategoryIdxs, getFilterIdx, } from "../common/utilities.js"; +import { ToolbarButton } from "./controls/atoms/ToolbarButton"; class Toolbar extends React.Component { constructor(props) { @@ -179,20 +180,15 @@ class Toolbar extends React.Component { } renderToolbarTab(_selected, label, iconKey) { - const isActive = this.state._selected === _selected; - const classes = isActive ? "toolbar-tab active" : "toolbar-tab"; - return ( -
{ this.selectTab(_selected); }} - > - {iconKey} -
{label}
-
+ /> ); } diff --git a/src/components/controls/atoms/ToolbarButton.js b/src/components/controls/atoms/ToolbarButton.js new file mode 100644 index 0000000..a8520d9 --- /dev/null +++ b/src/components/controls/atoms/ToolbarButton.js @@ -0,0 +1,12 @@ +export function ToolbarButton({ isActive, iconKey, onClick, label }) { + return ( +
+ {iconKey} +
{label}
+
+ ); +} From 26c8432acf41a27d758135d7407cd6081cf7937e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?= <1682504+fspoettel@users.noreply.github.com> Date: Tue, 22 Mar 2022 22:03:34 +0100 Subject: [PATCH 2/2] feat(Toolbar): add fullscreen toggle --- config.js | 1 + package-lock.json | 17 +++++++ package.json | 1 + src/common/data/copy.json | 4 +- src/components/Toolbar.js | 4 ++ src/components/controls/FullScreenToggle.js | 52 +++++++++++++++++++++ src/scss/toolbar.scss | 1 - 7 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 src/components/controls/FullScreenToggle.js diff --git a/config.js b/config.js index e08a445..e3d41a8 100644 --- a/config.js +++ b/config.js @@ -118,6 +118,7 @@ module.exports = { COLOR_BY_CATEGORY: false, COLOR_BY_ASSOCIATION: true, USE_ASSOCIATIONS: true, + USE_FULLSCREEN: true, USE_SOURCES: true, USE_SPOTLIGHTS: false, USE_SHAPES: false, diff --git a/package-lock.json b/package-lock.json index 85b6326..b3f72fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,6 +80,7 @@ "resolve": "1.18.1", "resolve-url-loader": "^3.1.2", "sass-loader": "10.2.1", + "screenfull": "^5.2.0", "semver": "7.3.2", "style-loader": "1.3.0", "supercluster": "^7.1.0", @@ -22138,6 +22139,17 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/screenfull": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz", + "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==", + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/scriptjs": { "version": "2.5.9", "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz", @@ -43298,6 +43310,11 @@ "ajv-keywords": "^3.5.2" } }, + "screenfull": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz", + "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==" + }, "scriptjs": { "version": "2.5.9", "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz", diff --git a/package.json b/package.json index 4eba5e0..6495aae 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "resolve": "1.18.1", "resolve-url-loader": "^3.1.2", "sass-loader": "10.2.1", + "screenfull": "^5.2.0", "semver": "7.3.2", "style-loader": "1.3.0", "supercluster": "^7.1.0", diff --git a/src/common/data/copy.json b/src/common/data/copy.json index e2ba701..ce8f20d 100644 --- a/src/common/data/copy.json +++ b/src/common/data/copy.json @@ -149,7 +149,9 @@ "shapes": "Shapes", "shapes_label": "Shapes", "explore_by_shapes__title": "Explore events by shape breakdown", - "explore_by_shape__description": "Shapes map to a given type of event that appears on the timeline.

Select the shape marker to toggle this type of event on / off" + "explore_by_shape__description": "Shapes map to a given type of event that appears on the timeline.

Select the shape marker to toggle this type of event on / off", + "fullscreen_enter": "Fullscreen", + "fullscreen_exit": "Exit Fullscreen" }, "timeline": { "labels_title": "Testimonies", diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 87d9bc9..d8aaf72 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -22,6 +22,7 @@ import { getFilterIdx, } from "../common/utilities.js"; import { ToolbarButton } from "./controls/atoms/ToolbarButton"; +import { FullscreenToggle } from "./controls/FullScreenToggle"; class Toolbar extends React.Component { constructor(props) { @@ -298,6 +299,9 @@ class Toolbar extends React.Component { panels.shapes.icon ) : null} + {features.USE_FULLSCREEN && ( + + )} + ); + } +} diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index 39520fa..912c8ba 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -228,7 +228,6 @@ display: block; text-align: center; font-size: $xsmall; - margin-top: -2px; letter-spacing: 0.05em; }