diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder index ad02831e9e..5bb9030eb7 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +++ b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder @@ -63,7 +63,7 @@ unless options[:skip_collections] json.collections do json.entries do json.array!([entry]) do |entry| - json.call(entry, :id, :locale, :share_providers, :share_url, :credits) + json.call(entry, :id, :locale, :share_providers, :share_url, :credits, :configuration) json.published_at entry.published_at.try(:iso8601, 0) json.permaId entry.id # required as keyAttribute in EntryStateProvider end diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder index 20a9948f5c..ef1b3a999d 100644 --- a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +++ b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder @@ -1,9 +1,22 @@ json.theme do json.assets do - json.logo_desktop scrolled_theme_asset_path(theme, 'logoDesktop.svg', - theme_file_role: :logo_desktop) - json.logo_mobile scrolled_theme_asset_path(theme, 'logoMobile.svg', - theme_file_role: :logo_mobile) + json.logo_desktop scrolled_theme_asset_path( + theme, 'logoDesktop.svg', + theme_file_role: :logo_desktop + ) + json.logo_mobile scrolled_theme_asset_path( + theme, 'logoMobile.svg', + theme_file_role: :logo_mobile + ) + json.logo_dark_variant_desktop scrolled_theme_asset_path( + theme, 'logoDarkVariantDesktop.svg', + theme_file_role: :logo_dark_variant_desktop + ) + json.logo_dark_variant_mobile scrolled_theme_asset_path( + theme, 'logoDarkVariantMobile.svg', + theme_file_role: :logo_dark_variant_mobile + ) + json.unmute scrolled_theme_asset_path(theme, 'unmute.mp3') json.icons({}) diff --git a/entry_types/scrolled/config/locales/new/dark_widgets.de.yml b/entry_types/scrolled/config/locales/new/dark_widgets.de.yml new file mode 100644 index 0000000000..08b75981fa --- /dev/null +++ b/entry_types/scrolled/config/locales/new/dark_widgets.de.yml @@ -0,0 +1,8 @@ +de: + pageflow: + entry_types: + scrolled: + editor: + entry_metadata_configuration_attributes: + darkWidgets: + label: "Dunkle Theme-Variante verwenden" diff --git a/entry_types/scrolled/config/locales/new/dark_widgets.en.yml b/entry_types/scrolled/config/locales/new/dark_widgets.en.yml new file mode 100644 index 0000000000..c0ff3960ef --- /dev/null +++ b/entry_types/scrolled/config/locales/new/dark_widgets.en.yml @@ -0,0 +1,8 @@ +en: + pageflow: + entry_types: + scrolled: + editor: + entry_metadata_configuration_attributes: + darkWidgets: + label: "Use dark theme variant" diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantDesktop.svg b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantDesktop.svg new file mode 100644 index 0000000000..199998e550 --- /dev/null +++ b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantDesktop.svg @@ -0,0 +1,56 @@ + + + + +Element 1 + + + + + + + + + + + + + + + + + + + + diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantMobile.svg b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantMobile.svg new file mode 100644 index 0000000000..06992bd7b4 --- /dev/null +++ b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantMobile.svg @@ -0,0 +1,22 @@ + + + + +Pageflow + + + + + + + + diff --git a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt index c5bf15be90..4822f7e273 100644 --- a/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt +++ b/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/themes_plugin.rb.tt @@ -9,17 +9,32 @@ class ScrolledThemesPlugin widget: '"Source Sans Pro", sans-serif' }, custom_theme_icons: <%= @custom_theme_icons %>, - colors: { - accent: '#e10028', - widget: { - surface: '#fff', - on_surface: '#000', - primary: '#00375a', - on_primary: '#fff', - secondary: '#c2c2c2', - on_seconday: '#000', - background: 'rgba(255, 255, 255, 0.95)', - on_background: '#000' + properties: { + root: { + accent_color: '#e10028', + widget_surface_color: '#fff', + widget_on_surface_color: '#000', + widget_primary_color: '#00375a', + widget_on_primary_color: '#fff', + widget_secondary_color: '#c2c2c2', + widget_on_seconday_color: '#000', + widget_background_color: 'rgb(255 255 255 / .95)', + widget_on_background_color: '#000', + }, + + dark: { + accent_color: '#ff8097', + widget_surface_color: '#000', + widget_surface_backdrop_blur: '5px', + widget_surface_opacity: '70%', + widget_on_surface_color: '#eee', + widget_primary_color: '#fff', + widget_on_primary_color: '#000', + widget_background_color: 'rgb(0 0 0 / .65)', + widget_background_backdrop_blur: '5px', + widget_on_background_color: '#eee', + default_navigation_separator_color: 'rgb(255 255 255 / .1)', + default_navigation_progress_bar_background_color: 'rgb(0 0 0 / .5)', } }, logo_alt_text: 'Pageflow', diff --git a/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg new file mode 100644 index 0000000000..199998e550 --- /dev/null +++ b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg @@ -0,0 +1,56 @@ + + + + +Element 1 + + + + + + + + + + + + + + + + + + + + diff --git a/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg new file mode 100644 index 0000000000..06992bd7b4 --- /dev/null +++ b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg @@ -0,0 +1,22 @@ + + + + +Pageflow + + + + + + + + diff --git a/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg new file mode 100644 index 0000000000..199998e550 --- /dev/null +++ b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg @@ -0,0 +1,56 @@ + + + + +Element 1 + + + + + + + + + + + + + + + + + + + + diff --git a/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg new file mode 100644 index 0000000000..06992bd7b4 --- /dev/null +++ b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg @@ -0,0 +1,22 @@ + + + + +Pageflow + + + + + + + + diff --git a/entry_types/scrolled/package/documentation.yml b/entry_types/scrolled/package/documentation.yml index e64df9c4c4..327b66b117 100644 --- a/entry_types/scrolled/package/documentation.yml +++ b/entry_types/scrolled/package/documentation.yml @@ -36,6 +36,7 @@ toc: - useCurrentChapter - useCredits - useDarkBackground + - useDarkWidgets - useEntryMetadata - useFile - useFileRights diff --git a/entry_types/scrolled/package/spec/entryState/metadata-spec.js b/entry_types/scrolled/package/spec/entryState/metadata-spec.js index 7dcc41615b..6ec85333fa 100644 --- a/entry_types/scrolled/package/spec/entryState/metadata-spec.js +++ b/entry_types/scrolled/package/spec/entryState/metadata-spec.js @@ -1,4 +1,4 @@ -import {useEntryMetadata, watchCollections} from 'entryState'; +import {useEntryMetadata, useDarkWidgets, watchCollections} from 'entryState'; import {ScrolledEntry} from 'editor/models/ScrolledEntry'; import {factories} from 'pageflow/testHelpers'; @@ -12,7 +12,10 @@ describe('useEntryMetadata', () => { twitter: false }, shareUrl: 'http://test.host/test', - credits: 'Credits' + credits: 'Credits', + configuration: { + darkWidgets: true + } }; it('reads data from seed', () => { @@ -28,7 +31,10 @@ describe('useEntryMetadata', () => { twitter: false }, shareUrl: 'http://test.host/test', - credits: 'Credits' + credits: 'Credits', + configuration: { + darkWidgets: true + } } } } @@ -52,7 +58,10 @@ describe('useEntryMetadata', () => { twitter: false }, share_url: 'http://test.host/test', - credits: 'Credits' + credits: 'Credits', + configuration: { + darkWidgets: true + } } }, { entryTypeSeed: normalizeSeed() @@ -64,3 +73,72 @@ describe('useEntryMetadata', () => { expect(entryMetadata).toMatchObject(expectedEntryMetadata); }); }); + +describe('useDarkWidgets', () => { + it('is falsy by default', () => { + const {result} = renderHookInEntry( + () => useDarkWidgets() + ); + + const darkWidgets = result.current; + + expect(darkWidgets).toBeUndefined() + }); + + it('reads data from seed', () => { + const {result} = renderHookInEntry( + () => useDarkWidgets(), + { + seed: { + entry: { + configuration: { + darkWidgets: true + } + } + } + } + ); + + const darkWidgets = result.current; + + expect(darkWidgets).toEqual(true); + }); + + it('reads data from watched collections', () => { + const {result} = renderHookInEntry( + () => useDarkWidgets(), { + setup: dispatch => + watchCollections( + factories.entry(ScrolledEntry, { + metadata: { + configuration: { + darkWidgets: true + } + } + }, { + entryTypeSeed: normalizeSeed() + }), + {dispatch}) + }); + const darkWidgets = result.current; + + expect(darkWidgets).toEqual(true); + }); + + it('can be enabled via theme option', () => { + const {result} = renderHookInEntry( + () => useDarkWidgets(), + { + seed: { + themeOptions: { + darkWidgets: true + } + } + } + ); + + const darkWidgets = result.current; + + expect(darkWidgets).toEqual(true); + }); +}); diff --git a/entry_types/scrolled/package/spec/widgets/defaultNavigation/Logo-spec.js b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Logo-spec.js new file mode 100644 index 0000000000..75426783d1 --- /dev/null +++ b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Logo-spec.js @@ -0,0 +1,38 @@ +import React from 'react'; +import {Logo} from 'widgets/defaultNavigation/Logo'; + +import '@testing-library/jest-dom/extend-expect'; +import {renderInEntry} from 'support'; + +describe('Logo', () => { + it('renders desktop logo by default', async () => { + const {getByRole} = renderInEntry(, { + seed: { + themeAssets: { + logoDesktop: 'logoDesktop.svg', + logoDarkVariantDesktop: 'logoDarkVariantDesktop.svg' + } + } + }); + + expect(getByRole('img')).toHaveAttribute('src', 'logoDesktop.svg'); + }); + + it('renders dark variant desktop logo in dark widgets mode', async () => { + const {getByRole} = renderInEntry(, { + seed: { + entry: { + configuration: { + darkWidgets: true + } + }, + themeAssets: { + logoDesktop: 'logoDesktop.svg', + logoDarkVariantDesktop: 'logoDarkVariantDesktop.svg' + } + } + }); + + expect(getByRole('img')).toHaveAttribute('src', 'logoDarkVariantDesktop.svg'); + }); +}); diff --git a/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js b/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js index 83d4266f3b..c8ce8d942a 100644 --- a/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js +++ b/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js @@ -13,6 +13,8 @@ editor.contentElementTypes.register('inlineAudio', { defaultConfig: {playerControlVariant: 'waveformBars'}, configurationEditor({entry}) { + const themeOptions = entry.getTheme().get('options'); + this.tab('general', function() { this.input('id', FileInputView, { collection: 'audio_files', @@ -47,7 +49,8 @@ editor.contentElementTypes.register('inlineAudio', { this.input('waveformColor', ColorInputView, { visibleBinding: 'playerControlVariant', visible: variant => variant?.startsWith('waveform'), - defaultValue: entry.getTheme().get('options').colors.accent + defaultValue: themeOptions.properties?.root?.accent_color || + themeOptions.colors?.accent }); this.view(SeparatorView); diff --git a/entry_types/scrolled/package/src/editor/config.js b/entry_types/scrolled/package/src/editor/config.js index 45acf398b0..96956574c3 100644 --- a/entry_types/scrolled/package/src/editor/config.js +++ b/entry_types/scrolled/package/src/editor/config.js @@ -26,6 +26,7 @@ editor.registerEntryType('scrolled', { outlineView: EntryOutlineView, appearanceInputs(tabView) { + tabView.input('darkWidgets', CheckBoxInputView); }, supportsExtendedFileRights: true, diff --git a/entry_types/scrolled/package/src/entryState/index.js b/entry_types/scrolled/package/src/entryState/index.js index 9a09a07b05..201d9b95cf 100644 --- a/entry_types/scrolled/package/src/entryState/index.js +++ b/entry_types/scrolled/package/src/entryState/index.js @@ -3,7 +3,10 @@ export {useContentElementConsentVendor} from './consentVendors'; export {useCutOff} from './cutoff'; export {useShareProviders, useShareUrl} from './sharing'; export {useEntryTranslations} from './entryTranslations'; -export {useEntryMetadata} from './metadata'; +export { + useDarkWidgets, + useEntryMetadata +} from './metadata'; export { normalizeSectionConfigurationData, useEntryStructure, diff --git a/entry_types/scrolled/package/src/entryState/metadata.js b/entry_types/scrolled/package/src/entryState/metadata.js index 84334eec5b..539e43148b 100644 --- a/entry_types/scrolled/package/src/entryState/metadata.js +++ b/entry_types/scrolled/package/src/entryState/metadata.js @@ -1,6 +1,7 @@ import {useMemo} from 'react'; import {useEntryStateCollectionItems} from './EntryStateProvider'; +import {useTheme} from './theme'; /** * Returns a nested data structure representing the metadata of the entry. @@ -14,7 +15,8 @@ import {useEntryStateCollectionItems} from './EntryStateProvider'; * locale: 'en', * shareProviders: {email: false, facebook: true}, * share_url: 'http://test.host/test', - * credits: 'Credits: Pageflow' + * credits: 'Credits: Pageflow', + * configuration: {darkWidgets: true} * } */ export function useEntryMetadata() { @@ -24,3 +26,12 @@ export function useEntryMetadata() { return entries[0]; }, [entries]); } + +/** + * Returns boolean indicating whether dark variant has been activated for + * the widgets of the entry. + */ +export function useDarkWidgets() { + const theme = useTheme(); + return useEntryMetadata().configuration.darkWidgets || theme.options.darkWidgets; +} diff --git a/entry_types/scrolled/package/src/entryState/watchCollections.js b/entry_types/scrolled/package/src/entryState/watchCollections.js index 75cea19359..721b7fdc22 100644 --- a/entry_types/scrolled/package/src/entryState/watchCollections.js +++ b/entry_types/scrolled/package/src/entryState/watchCollections.js @@ -15,6 +15,7 @@ export function watchCollections(entry, {dispatch}) { 'credits' ], keyAttribute: 'permaId', + includeConfiguration: true, dispatch })); teardownFns.push(watchCollection(chapters, { diff --git a/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js b/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js index 5421107d91..3d17558b63 100644 --- a/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js +++ b/entry_types/scrolled/package/src/frontend/PlayerControls/WaveformPlayerControls/index.js @@ -30,7 +30,8 @@ export function WaveformPlayerControls(props) { inverted={!darkBackground} variant={props.variant} waveformColor={props.waveformColor} - mainColor={theme.options.colors.accent} + mainColor={theme.options.properties?.root?.accentColor || + theme.options.colors?.accent} play={props.play} pause={props.pause} mediaElementId={props.mediaElementId} /> diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js index 351a957b28..01ff97a788 100644 --- a/entry_types/scrolled/package/src/frontend/index.js +++ b/entry_types/scrolled/package/src/frontend/index.js @@ -64,6 +64,7 @@ export { useChapters, useCredits, useCutOff, + useDarkWidgets, useEntryMetadata, useEntryStateDispatch, useEntryTranslations, diff --git a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js index a4bbea58e4..afdf4ef51f 100644 --- a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js +++ b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js @@ -52,7 +52,8 @@ export function normalizeSeed({ } = {}) { const entries = entry ? [entry] : [{}]; const normalizedEntries = normalizeCollection(entries, { - locale: 'en' + locale: 'en', + configuration: {} }); const normalizedContentElements = normalizeCollection(contentElements, { diff --git a/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.js b/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.js index 71f62750bf..7774236b39 100644 --- a/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.js +++ b/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.js @@ -1,5 +1,13 @@ import React, {useState} from 'react'; -import {useConsentRequested, useI18n, useLegalInfo, useLocale, ThemeIcon} from 'pageflow-scrolled/frontend'; +import classNames from 'classnames'; +import { + useConsentRequested, + useDarkWidgets, + useI18n, + useLegalInfo, + useLocale, + ThemeIcon +} from 'pageflow-scrolled/frontend'; import {VendorsBox} from './VendorsBox'; import styles from './ConsentBar.module.css'; @@ -10,10 +18,14 @@ export function ConsentBar({configuration = {}}) { const {t} = useI18n(); const locale = useLocale(); const privacyLinkUrl = useLegalInfo().privacy.url; + const darkWidgets = useDarkWidgets(); if (vendors) { return ( -
+ +
{renderText({privacyLinkUrl, t, locale, vendors})} {!expanded && diff --git a/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css b/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css index 55ede219e9..2948203067 100644 --- a/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css +++ b/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css @@ -1,4 +1,5 @@ .bar { + composes: translucentWidgetSurface from 'pageflow-scrolled/values/widgets.module.css'; position: fixed; bottom: 0; left: 0; @@ -8,8 +9,6 @@ padding: 10px 20px; font-family: var(--theme-widget-font-family); font-size: 15px; - background-color: var(--theme-widget-surface-color); - color: var(--theme-widget-on-surface-color); } .text { @@ -23,17 +22,21 @@ .button { border: none; - border-radius: 3px; + border-radius: 5px; margin: 10px 5px 5px; padding: 10px 15px; font: inherit; cursor: pointer; - background-color: var(--theme-widget-secondary-color); + background-color: transparent; + --translucent-widget-border-color: color-mix(in srgb, currentColor, transparent); + border: solid 1px var(--translucent-widget-border-color, currentColor); + color: inherit; } .acceptAllButton { composes: button; background-color: var(--theme-widget-primary-color); + border-color: var(--theme-widget-primary-color); color: var(--theme-widget-on-primary-color); } @@ -83,6 +86,7 @@ .expandVendor { border: none; background: transparent; + color: inherit; position: absolute; right: 5px; top: 3px; @@ -119,8 +123,8 @@ width: 90%; box-sizing: border-box; padding: 10px 20px; - background-color: inherit; - color: inherit; + background-color: var(--theme-widget-surface-color); + color: var(--theme-widget-on-surface-color); border-radius: 5px; } diff --git a/entry_types/scrolled/package/src/widgets/consentBar/stories.js b/entry_types/scrolled/package/src/widgets/consentBar/stories.js index 438171c2f8..90908fc880 100644 --- a/entry_types/scrolled/package/src/widgets/consentBar/stories.js +++ b/entry_types/scrolled/package/src/widgets/consentBar/stories.js @@ -2,7 +2,10 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; -import {normalizeAndMergeFixture} from 'pageflow-scrolled/spec/support/stories'; +import { + normalizeAndMergeFixture, + filePermaId, +} from 'pageflow-scrolled/spec/support/stories'; import './index'; import {Entry, RootProviders} from 'pageflow-scrolled/frontend'; import {Consent} from 'pageflow/frontend'; @@ -27,19 +30,38 @@ function createConsent() { return consent; } -const seed = { - widgets: [{ - role: 'consent', - typeName: 'consentBar', - configuration: {defaultExpanded: true} - }], - sections: [{}] +function getSeed({darkWidgets} = {}) { + return { + themeOptions: {darkWidgets}, + widgets: [{ + role: 'consent', + typeName: 'consentBar', + configuration: {defaultExpanded: true} + }], + sections: [{ + configuration: { + fullHeight: true, + backdrop: { + image: filePermaId('imageFiles', 'turtle') + } + } + }] + }; }; stories.add( 'Desktop', () => - + + +); + +stories.add( + 'Desktop - Dark', + () => + @@ -48,7 +70,25 @@ stories.add( stories.add( 'Mobile', () => - + + , + { + percy: { + widths: [320] + }, + viewport: { + viewports: INITIAL_VIEWPORTS, + defaultViewport: 'iphone6' + } + } +); + +stories.add( + 'Mobile - Dark', + () => + , diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js index e887aba9c7..fcdbf934a6 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js @@ -7,6 +7,7 @@ import { useScrollPosition, useChapters, useCurrentChapter, + useDarkWidgets, useOnUnmuteMedia, usePhonePlatform, useShareProviders, @@ -32,7 +33,7 @@ export function DefaultNavigation({ logo }) { const [navExpanded, setNavExpanded] = useState(true); - const [mobileNavHidden, setMobileNavHidden] = useState(true); + const [mobileNavHidden, setMobileNavHidden] = useState(!configuration.defaultMobileNavVisible); const [readingProgress, setReadingProgress] = useState(0); const chapters = useChapters(); const currentChapter = useCurrentChapter(); @@ -69,6 +70,8 @@ export function DefaultNavigation({ useOnUnmuteMedia(useCallback(() => setNavExpanded(true), [])); + const darkWidgets = useDarkWidgets(); + const hasChapters = chapters.length > 1 || !utils.isBlank(chapters[0]?.title) || !utils.isBlank(chapters[0]?.summary); @@ -124,6 +127,7 @@ export function DefaultNavigation({ return ( <>
.contextIcon, -.contextIcon:hover { +.contextIcon:hover, +.menuIcon { color: var(--theme-widget-primary-color); } @@ -155,6 +155,8 @@ div:focus-within > .contextIcon, rgba(194,194,194,0.8)); height: var(--default-navigation-progress-bar-height); width: 100%; + backdrop-filter: blur(var(--theme-default-navigation-progress-bar-backdrop-blur, + var(--theme-widget-surface-backdrop-blur))); } .progressIndicator { @@ -193,6 +195,7 @@ div:focus-within > .contextIcon, var(--default-navigation-progress-bar-height)); left: 0px; background: var(--theme-widget-background-color); + backdrop-filter: blur(var(--theme-widget-background-backdrop-blur)); width: 100vw; bottom: 0; overscroll-behavior: contain; diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js index 853ab04ba1..458c39d076 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js @@ -1,12 +1,22 @@ import React from 'react'; import classNames from 'classnames'; -import {useTheme} from 'pageflow-scrolled/frontend'; +import {useDarkWidgets, useTheme} from 'pageflow-scrolled/frontend'; import styles from './DefaultNavigation.module.css'; export function Logo({srcMobile, srcDesktop, url, altText}) { const theme = useTheme(); + const darkWidgets = useDarkWidgets(); + + srcDesktop = + srcDesktop || + (darkWidgets ? theme.assets.logoDarkVariantDesktop : theme.assets.logoDesktop); + + srcMobile = + srcMobile || + (darkWidgets ? theme.assets.logoDarkVariantMobile : theme.assets.logoMobile); + return ( - - - + + {altText diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js index 1429d7d666..88763db343 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js @@ -2,22 +2,29 @@ import React from 'react'; import {storiesOf} from '@storybook/react'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; -import {normalizeAndMergeFixture} from 'pageflow-scrolled/spec/support/stories'; +import { + normalizeAndMergeFixture, + filePermaId +} from 'pageflow-scrolled/spec/support/stories'; import '../../widgets/defaultNavigation'; import {Entry, RootProviders} from 'pageflow-scrolled/frontend'; const stories = storiesOf('Widgets/Default Navigation', module); -let getSeed = function({chapterCount}){ +let getSeed = function({chapterCount, darkWidgets}){ const summaries = [ 'An introductory chapter', 'Second Chapter', 'The Third Chapter' ] return { + themeOptions: { + darkWidgets + }, widgets: [{ role: 'header', - typeName: 'defaultNavigation' + typeName: 'defaultNavigation', + configuration: {defaultMobileNavVisible: true} }], chapters: Array(chapterCount).fill().map((_, index) => ( { @@ -34,7 +41,10 @@ let getSeed = function({chapterCount}){ { chapterId: 1, configuration: { - backdrop: {color: '#fff'}, + backdrop: { + image: filePermaId('imageFiles', 'turtle') + }, + fullHeight: true, invert: true } } @@ -64,6 +74,14 @@ stories.add( } ); +stories.add( + 'Desktop - Dark', + () => + + + +); + stories.add( 'Mobile', () => @@ -81,6 +99,23 @@ stories.add( } ); +stories.add( + 'Mobile - Dark', + () => + + + , + { + percy: { + widths: [320] + }, + viewport: { + viewports: INITIAL_VIEWPORTS, + defaultViewport: 'iphone6' + } + } +); + stories.add( 'Mobile - Centered Logo', () => diff --git a/entry_types/scrolled/package/values/widgets.module.css b/entry_types/scrolled/package/values/widgets.module.css new file mode 100644 index 0000000000..d55e64d4bb --- /dev/null +++ b/entry_types/scrolled/package/values/widgets.module.css @@ -0,0 +1,18 @@ +.translucentWidgetSurface { + color: var(--theme-widget-on-surface-color); +} + +.translucentWidgetSurface::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + --translucent-widget-surface-color: + color-mix(in srgb, + var(--theme-widget-surface-color) var(--theme-widget-surface-opacity), transparent); + background-color: var(--translucent-widget-surface-color, var(--theme-widget-surface-color)); + backdrop-filter: blur(var(--theme-widget-surface-backdrop-blur)); +} diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb index f44ae386e8..9f6d910951 100644 --- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb +++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb @@ -22,7 +22,10 @@ def render(helper, entry, options = {}) published_at: '2020-08-11 10:00'.in_time_zone('UTC'), locale: 'fr', share_providers: {facebook: true}, - credits: 'Test Credits' + credits: 'Test Credits', + configuration: { + darkWidgets: true + } }) result = render(helper, entry) @@ -36,7 +39,10 @@ def render(helper, entry, options = {}) publishedAt: '2020-08-11T10:00:00Z', locale: 'fr', shareProviders: {facebook: true}, - credits: 'Test Credits' + credits: 'Test Credits', + configuration: { + darkWidgets: true + } } ] }) @@ -684,13 +690,15 @@ def render(helper, entry, options = {}) result = render(helper, entry) - expect(result).to include_json(config: { - theme: { - assets: { - logoDesktop: %r{themes/default/logoDesktop.*svg$} - } - } - }) + expect(result) + .to include_json(config: { + theme: { + assets: { + logoDesktop: %r{themes/default/logoDesktop.*svg$}, + logoDarkVariantDesktop: %r{themes/default/logoDarkVariantDesktop.*svg$} + } + } + }) end it 'renders theme assets for custom icons' do diff --git a/package/src/editor/models/EntryMetadata.js b/package/src/editor/models/EntryMetadata.js index 0e63bd05bd..200543a9ff 100644 --- a/package/src/editor/models/EntryMetadata.js +++ b/package/src/editor/models/EntryMetadata.js @@ -15,6 +15,7 @@ export const EntryMetadata = Configuration.extend({ this.listenTo(this.configuration, 'change', function(model, options) { this.trigger('change', model, options); + this.trigger('change:configuration', this, undefined, options); this.parent.save(); }); },