From fe00e65fbc37d2ad18b341645dd1b56c51b90c49 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 13 Sep 2021 16:59:58 +0200 Subject: convert petros icons to SVG --- .../site/projects/museum/views/petros.icons.js | 152 +++++++++++++++++++++ frontend/site/projects/museum/views/petros.nav.css | 18 +++ frontend/site/projects/museum/views/petros.nav.js | 29 ++-- 3 files changed, 186 insertions(+), 13 deletions(-) create mode 100644 frontend/site/projects/museum/views/petros.icons.js (limited to 'frontend/site/projects') diff --git a/frontend/site/projects/museum/views/petros.icons.js b/frontend/site/projects/museum/views/petros.icons.js new file mode 100644 index 0000000..16d0677 --- /dev/null +++ b/frontend/site/projects/museum/views/petros.icons.js @@ -0,0 +1,152 @@ +/** + * Icons for Petros + */ + +import React from 'react' + +export const PetrosIcons = [ + ( // 1 + + + + + + + ), + ( // 2 + + + + + + + ), + ( // 3 + + + + + + + ), + ( // 4 + + + + + + + ), + ( // 5 + + + + + + + + + + + + + + + + + + + + ), + ( // 6 + + + + + + + + + + + + + + ), + ( // 7 + + + + + + + ), +] diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css index cb9b523..a23c657 100644 --- a/frontend/site/projects/museum/views/petros.nav.css +++ b/frontend/site/projects/museum/views/petros.nav.css @@ -28,6 +28,24 @@ pointer-events: none; } +.petros-text svg { + pointer-events: none; + width: 100px; + height: 101px; +} +.petros-text svg path { + fill: none; + stroke: #ff780c; + stroke-width: 0.0762; + stroke-linecap: butt; + stroke-linejoin: miter; + stroke-miterlimit: 2.61313; + stroke-opacity: 1; +} +.petros-text.white svg path { + stroke: #fff; +} + .petros-left.visible.noclick { pointer-events: none !important; } diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js index 4eb6d5e..7a54c72 100644 --- a/frontend/site/projects/museum/views/petros.nav.js +++ b/frontend/site/projects/museum/views/petros.nav.js @@ -13,6 +13,7 @@ import actions from "site/actions" import { generateTransform } from 'app/views/tile/tile.utils' import PetrosText from "./petros.text" +import { PetrosIcons } from "./petros.icons" const RESET_STATE = { ready: false, @@ -52,10 +53,10 @@ const INITIAL_VIEW = { // set this to 0.1 in development, 1.0 otherwise :) const FASTFORWARD = 1.0 -const LOOP_TIMEOUT = 6000 * FASTFORWARD -const MOVEMENT_TIMEOUT = 45000 * FASTFORWARD -const TEXT_LOAD_TIMEOUT = 15000 * FASTFORWARD -const SHOW_NAV_TIMEOUT = 10000 * FASTFORWARD +const LOOP_TIMEOUT = 2000 * FASTFORWARD +const MOVEMENT_TIMEOUT = 41000 * FASTFORWARD +const TEXT_LOAD_TIMEOUT = 6000 * FASTFORWARD +const SHOW_NAV_TIMEOUT = 2000 * FASTFORWARD const TEXT_HIDE_TIMEOUT = 20000 * FASTFORWARD const SUBTITLE_COUNT = 12 @@ -135,7 +136,7 @@ class PetrosNav extends Component { page.tiles.some(tile => { if (tile.settings.popup_group === "glyph") { let transform = generateTransform(tile, null, bounds, videoBounds) - transform = transform.replace(/scale(\d+\.\d+)/g, "scale(0.9)") + transform = transform.replace(/scale\([^)]+\)/g, "") this.setState({ glyphTransform: { transform @@ -179,7 +180,7 @@ class PetrosNav extends Component { this.setState({ textPrep: true, }) - }, 1000) + }, 250) this.textTimeout = setTimeout(() => { // Turn off the glyph @@ -274,17 +275,19 @@ class PetrosNav extends Component { } /> - + > + {PetrosIcons[(index - 1)]} + {ready && (