Merge pull request #2159 from tf/theme-icons

Improve support for theme icons

entry_types/scrolled/package/spec/frontend/PlayerControls/PlayPauseButton-spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect'
-import {render} from '@testing-library/react'
+import {renderInEntry} from 'support'
 
 import {PlayPauseButton} from 'frontend/PlayerControls/PlayPauseButton';
 import {useFakeTranslations} from 'pageflow/testHelpers';
@@ -12,12 +12,12 @@ describe('PlayPauseButton', () => {
   });
 
   it('shows pause button when playing', () => {
-    const {getByLabelText} = render(<PlayPauseButton isPlaying={true}/>);
+    const {getByLabelText} = renderInEntry(<PlayPauseButton isPlaying={true}/>);
     expect(getByLabelText('Pause')).toBeVisible();
   });
 
   it('shows play button when paused', () => {
-    const {getByLabelText} = render(<PlayPauseButton isPlaying={false}/>);
+    const {getByLabelText} = renderInEntry(<PlayPauseButton isPlaying={false}/>);
     expect(getByLabelText('Play')).toBeVisible();
   });
 });

entry_types/scrolled/package/src/contentElements/hotspots/ScrollButton.module.css

@@ -26,29 +26,14 @@
   display: block;
   width: var(--theme-hotspts-scroll-button-size);
   height: var(--theme-hotspots-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
 .button:not(.disabled):active svg {
   transform: scale(1.2);
 }
 
-.icon {
-  position: relative;
-}
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .visuallyHidden {
   border: 0;
   clip: rect(0 0 0 0);

entry_types/scrolled/package/src/contentElements/imageGallery/ScrollButton.module.css

@@ -18,6 +18,7 @@
   display: block;
   width: var(--theme-image-gallery-scroll-button-size);
   height: var(--theme-image-gallery-scroll-button-size);
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 .button:not(.disabled):hover svg,
@@ -26,22 +27,9 @@
 }
 
 .icon {
-  position: relative;
   transition: opacity 0.2s linear;
 }
 
 .disabled .icon {
   opacity: 0;
 }
-
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 50px;
-  height: 50px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}

entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js

@@ -1,27 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import ArrowLeftIcon from '../icons/arrowLeft.svg';
+import {ThemeIcon} from '../ThemeIcon';
 
 import styles from './FullscreenIndicator.module.css';
 
 export function FullscreenIndicator({visible, onClick}) {
-  const size = 50;
-
   return (
     <div className={classNames(styles.indicator, {[styles.visible]: visible})}>
       <div className={styles.icons}>
         <div className={styles.iconTopLeft}>
-          <ArrowLeftIcon  width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconTopRight}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconBottomRight}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
         <div className={styles.iconBottomLeft}>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
       </div>
       <div className={styles.text}>

entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.module.css

@@ -15,6 +15,12 @@
   left: 50%;
 }
 
+.icons svg {
+  width: 50px;
+  height: 50px;
+  filter: drop-shadow(0 1px 4px #000);
+}
+
 .text {
   transform: translate(-50%, -50%);
   font-weight: bold;
@@ -28,18 +34,6 @@
   animation: pulse 4s infinite ease;
 }
 
-.icon::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 45px;
-  height: 45px;
-  transform: translate(-45%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 .iconTopLeft {
   composes: icon;
   transform: translate(-50%, -50%) rotate(45deg);

entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js

@@ -1,24 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import ArrowLeftIcon from '../icons/arrowLeft.svg';
-import ArrowRightIcon from '../icons/arrowRight.svg';
+import {ThemeIcon} from '../ThemeIcon';
 
 import styles from './PanoramaIndicator.module.css';
 
 export function PanoramaIndicator({visible}) {
-  const size = 40;
-
   return (
     <div className={classNames(styles.indicator, {[styles.visible]: visible})}>
       <div className={styles.arrowLeft}>
         <div>
-          <ArrowLeftIcon width={size} height={size} />
+          <ThemeIcon name="arrowLeft" />
         </div>
       </div>
       <div className={styles.arrowRight}>
         <div>
-          <ArrowRightIcon width={size} height={size} />
+          <ThemeIcon name="arrowRight" />
         </div>
       </div>
       <div className={styles.text}>

entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.module.css

@@ -47,24 +47,15 @@
 
 .indicator svg {
   transition: transform 0.2s ease;
+  width: 40px;
+  height: 40px;
+  filter: drop-shadow(0 1px 4px #000);
 }
 
 *:hover > .indicator svg {
   transform: scale(1.2);
 }
 
-.arrow div::before {
-  content: ' ';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 30px;
-  height: 30px;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%);
-  z-index: -1;
-}
-
 @keyframes nudgeLeft {
   0% {
   }

entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/BigPlayPauseButton.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './BigPlayPauseButton.module.css'
-import PlayIcon from '../images/play.svg';
-import PauseIcon from '../images/pause.svg';
+import {ThemeIcon} from '../../ThemeIcon';
 
 export function BigPlayPauseButton(props) {
   const c = classNames(styles.button, {
@@ -27,9 +26,9 @@ export function BigPlayPauseButton(props) {
 
 function pausePlayIcon(props) {
   if (props.unplayed || props.isPlaying) {
-    return <PlayIcon />;
+    return <ThemeIcon name="play" />;
   }
   else {
-    return <PauseIcon />
+    return <ThemeIcon name="pause" />;
   }
 }

entry_types/scrolled/package/src/frontend/PlayerControls/ClassicPlayerControls/QualityMenu.js

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import {MenuBarButton} from '../MenuBarButton';
 import {useI18n} from '../../i18n';
 
-import QualityIcon from '../images/quality.svg';
-
 export function QualityMenu(props) {
   const {t} = useI18n();
 
@@ -15,7 +13,7 @@ export function QualityMenu(props) {
 
   return (
     <MenuBarButton title={t('pageflow_scrolled.public.player_controls.quality')}
-                   icon={QualityIcon}
+                   icon="gear"
                    subMenuItems={props.items}
                    subMenuExpanded={props.subMenuExpanded}
                    onSubMenuItemClick={props.onItemClick} x/>

entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
+import {ThemeIcon} from '../ThemeIcon';
+
 import styles from './MenuBarButton.module.css';
-import CheckIcon from './images/check.svg';
 
 export function MenuBarButton(props) {
   const {subMenuItems, onClick} = props;
@@ -58,7 +59,7 @@ export function MenuBarButton(props) {
       <button className={styles.button}
               title={props.title}
               onClick={onButtonClick}>
-        {React.createElement(props.icon, {className: styles.icon})}
+        <ThemeIcon name={props.icon} />
       </button>
       {renderSubMenu(props, closeMenu)}
     </div>
@@ -67,7 +68,7 @@ export function MenuBarButton(props) {
 
 MenuBarButton.propTypes = {
   title: PropTypes.string,
-  icon: PropTypes.elementType,
+  icon: PropTypes.string,
   subMenuItems: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string.isRequired,
@@ -118,7 +119,7 @@ function renderSubMenuItems(props, closeMenu) {
 function renderSubMenuItemIcon(item) {
   if (item.active) {
     return (
-      <CheckIcon className={styles.subMenuItemIcon} />
+      <ThemeIcon name="checked" />
     );
   }
 }

entry_types/scrolled/package/src/frontend/PlayerControls/MenuBarButton.module.css

@@ -6,12 +6,6 @@
   composes: button from './ControlBar.module.css';
 }
 
-.icon {
-  width: 25px;
-  height: 25px;
-  fill: currentColor;
-}
-
 .subMenuItemAnnotation {
   color: #ff0000;
   font-size: 70%;
@@ -57,7 +51,7 @@
   list-style: none;
 }
 
-.subMenuItemIcon {
+.subMenuItem svg {
   position: absolute;
   top: 8px;
   left: 5px;

entry_types/scrolled/package/src/frontend/PlayerControls/PlayPauseButton.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import controlBarStyles from "./ControlBar.module.css";
-import PlayIcon from "./images/play.svg";
-import PauseIcon from "./images/pause.svg";
+import {ThemeIcon} from '../ThemeIcon';
 
 import {useI18n} from '../i18n';
 
@@ -21,8 +20,8 @@ export function PlayPauseButton(props) {
 
 function pausePlayIcon(props) {
   if (props.isPlaying) {
-    return <PauseIcon className={controlBarStyles.controlsIcon} />
+    return <ThemeIcon name="pause" />
   } else {
-    return <PlayIcon className={controlBarStyles.controlsIcon} />
+    return <ThemeIcon name="play" />
   }
 }

entry_types/scrolled/package/src/frontend/PlayerControls/TextTracksMenu.js

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import {MenuBarButton} from './MenuBarButton';
 import {useI18n} from '../i18n';
 
-import TextTracksIcon from './images/textTracks.svg';
-
 export function TextTracksMenu(props) {
   const {t} = useI18n();
 
@@ -15,7 +13,7 @@ export function TextTracksMenu(props) {
 
   return (
     <MenuBarButton title={t('pageflow_scrolled.public.player_controls.text_tracks')}
-                   icon={TextTracksIcon}
+                   icon="textTracks"
                    subMenuItems={props.items}
                    onSubMenuItemClick={props.onItemClick} />
   );