From 77eeba5859e65c2a54828f3a4a097785027aea3b Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 28 Oct 2024 12:46:05 +0100 Subject: [PATCH 01/11] Add dark widgets setting to scrolled appearance options `EntryMetadata` needs to trigger `change:configuration` event to make collection sync to preview work. REDMINE-20845 --- .../entry_json_seed/_entry.json.jbuilder | 2 +- .../config/locales/new/dark_widgets.de.yml | 8 +++ .../config/locales/new/dark_widgets.en.yml | 8 +++ .../scrolled/package/documentation.yml | 1 + .../package/spec/entryState/metadata-spec.js | 59 +++++++++++++++++-- .../scrolled/package/src/editor/config.js | 1 + .../scrolled/package/src/entryState/index.js | 5 +- .../package/src/entryState/metadata.js | 11 +++- .../src/entryState/watchCollections.js | 1 + .../scrolled/package/src/frontend/index.js | 1 + .../package/src/testHelpers/normalizeSeed.js | 3 +- .../entry_json_seed_helper_spec.rb | 10 +++- package/src/editor/models/EntryMetadata.js | 1 + 13 files changed, 101 insertions(+), 10 deletions(-) create mode 100644 entry_types/scrolled/config/locales/new/dark_widgets.de.yml create mode 100644 entry_types/scrolled/config/locales/new/dark_widgets.en.yml 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/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/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..ef59ff1b66 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,45 @@ describe('useEntryMetadata', () => { expect(entryMetadata).toMatchObject(expectedEntryMetadata); }); }); + +describe('useDarkWidgets', () => { + 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); + }); +}); 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..d79edaf9c3 100644 --- a/entry_types/scrolled/package/src/entryState/metadata.js +++ b/entry_types/scrolled/package/src/entryState/metadata.js @@ -14,7 +14,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 +25,11 @@ 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() { + return useEntryMetadata().configuration.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/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/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..296c178d2c 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 + } } ] }) 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(); }); }, From ecbcedf56c9a45b2282b744a9df4a997e9354958 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 28 Oct 2024 17:01:03 +0100 Subject: [PATCH 02/11] Render dark theme logo in dark variant of default navigation bar REDMINE-20845 --- .../entry_json_seed/_theme.json.jbuilder | 21 +++++-- .../theme/logoDarkVariantDesktop.svg | 56 +++++++++++++++++++ .../templates/theme/logoDarkVariantMobile.svg | 22 ++++++++ .../widgets/defaultNavigation/Logo-spec.js | 38 +++++++++++++ .../src/widgets/defaultNavigation/Logo.js | 18 ++++-- .../entry_json_seed_helper_spec.rb | 16 +++--- 6 files changed, 156 insertions(+), 15 deletions(-) create mode 100644 entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantDesktop.svg create mode 100644 entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/logoDarkVariantMobile.svg create mode 100644 entry_types/scrolled/package/spec/widgets/defaultNavigation/Logo-spec.js 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/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/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/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/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 296c178d2c..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 @@ -690,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 From 403eb2d03d7c43beec3cea7ad22e92995258db44 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Thu, 31 Oct 2024 12:22:12 +0100 Subject: [PATCH 03/11] Allow enabling dark theme via theme options We only need this to be able to toggle the theme preview in Hosted Pageflow. A case where a theme wants to always use its dark version is conceivable, though. REDMINE-20845 --- .../package/spec/entryState/metadata-spec.js | 27 +++++++++++++++++++ .../package/src/entryState/metadata.js | 4 ++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/entry_types/scrolled/package/spec/entryState/metadata-spec.js b/entry_types/scrolled/package/spec/entryState/metadata-spec.js index ef59ff1b66..6ec85333fa 100644 --- a/entry_types/scrolled/package/spec/entryState/metadata-spec.js +++ b/entry_types/scrolled/package/spec/entryState/metadata-spec.js @@ -75,6 +75,16 @@ describe('useEntryMetadata', () => { }); 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(), @@ -114,4 +124,21 @@ describe('useDarkWidgets', () => { 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/src/entryState/metadata.js b/entry_types/scrolled/package/src/entryState/metadata.js index d79edaf9c3..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. @@ -31,5 +32,6 @@ export function useEntryMetadata() { * the widgets of the entry. */ export function useDarkWidgets() { - return useEntryMetadata().configuration.darkWidgets; + const theme = useTheme(); + return useEntryMetadata().configuration.darkWidgets || theme.options.darkWidgets; } From 7bda1d160f36406ab4e016aa32740bae64aa2ea0 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 4 Nov 2024 12:24:28 +0100 Subject: [PATCH 04/11] Add dark variants of navigation and consent bar to storybook REDMINE-20845 --- ...arkVariantDesktop-c47933a19b534a87dcc8.svg | 56 +++++++++++++++++ ...DarkVariantMobile-c5a1a150584750f099ca.svg | 22 +++++++ ...arkVariantDesktop-c47933a19b534a87dcc8.svg | 56 +++++++++++++++++ ...DarkVariantMobile-c5a1a150584750f099ca.svg | 22 +++++++ .../package/src/widgets/consentBar/stories.js | 60 +++++++++++++++---- .../src/widgets/defaultNavigation/stories.js | 40 ++++++++++++- 6 files changed, 243 insertions(+), 13 deletions(-) create mode 100644 entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg create mode 100644 entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg create mode 100644 entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantDesktop-c47933a19b534a87dcc8.svg create mode 100644 entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDarkVariantMobile-c5a1a150584750f099ca.svg 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/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/stories.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js index 1429d7d666..c4f5668739 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js @@ -2,19 +2,25 @@ 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' @@ -34,7 +40,10 @@ let getSeed = function({chapterCount}){ { chapterId: 1, configuration: { - backdrop: {color: '#fff'}, + backdrop: { + image: filePermaId('imageFiles', 'turtle') + }, + fullHeight: true, invert: true } } @@ -64,6 +73,14 @@ stories.add( } ); +stories.add( + 'Desktop - Dark', + () => + + + +); + stories.add( 'Mobile', () => @@ -81,6 +98,23 @@ stories.add( } ); +stories.add( + 'Mobile - Dark', + () => + + + , + { + percy: { + widths: [320] + }, + viewport: { + viewports: INITIAL_VIEWPORTS, + defaultViewport: 'iphone6' + } + } +); + stories.add( 'Mobile - Centered Logo', () => From a49412e91e89627745bb9d07a2bdd82f467c1a50 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 4 Nov 2024 12:42:41 +0100 Subject: [PATCH 05/11] Toggle dark scope on navigation and consent bar REDMINE-20845 --- .../src/widgets/consentBar/ConsentBar.js | 16 ++++++++++++++-- .../widgets/consentBar/ConsentBar.module.css | 3 +-- .../defaultNavigation/DefaultNavigation.js | 4 ++++ .../DefaultNavigation.module.css | 5 +++-- .../scrolled/package/values/widgets.module.css | 18 ++++++++++++++++++ 5 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 entry_types/scrolled/package/values/widgets.module.css 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..96f082404b 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 { diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js index e887aba9c7..f34e34fe4f 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, @@ -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, rgba(194,194,194,0.8)); height: var(--default-navigation-progress-bar-height); width: 100%; + backdrop-filter: blur(var(--theme-widget-surface-backdrop-blur)); } .progressIndicator { @@ -193,6 +193,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/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)); +} From 18bb9050fd0f0b70260bbbf9e0325b4b305d003d Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 4 Nov 2024 14:05:30 +0100 Subject: [PATCH 06/11] Make consent bar buttons work better with dark variant Use outlined style for secondary buttons. REDMINE-20845 --- .../src/widgets/consentBar/ConsentBar.module.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 96f082404b..2948203067 100644 --- a/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css +++ b/entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.module.css @@ -22,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); } @@ -82,6 +86,7 @@ .expandVendor { border: none; background: transparent; + color: inherit; position: absolute; right: 5px; top: 3px; @@ -118,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; } From a64ceca8ae7039b85cf084fa23fe72e46d24c3dd Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Mon, 4 Nov 2024 14:09:14 +0100 Subject: [PATCH 07/11] Make mobile nav of default navigation visible by default storybook Include in Percy visual diff. REDMINE-20845 --- .../package/src/widgets/defaultNavigation/DefaultNavigation.js | 2 +- .../scrolled/package/src/widgets/defaultNavigation/stories.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js index f34e34fe4f..fcdbf934a6 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js @@ -33,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(); diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js index c4f5668739..88763db343 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/stories.js @@ -23,7 +23,8 @@ let getSeed = function({chapterCount, darkWidgets}){ }, widgets: [{ role: 'header', - typeName: 'defaultNavigation' + typeName: 'defaultNavigation', + configuration: {defaultMobileNavVisible: true} }], chapters: Array(chapterCount).fill().map((_, index) => ( { From df96d3df5ec56469f8be198d0025a8c76e8c6102 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 26 Nov 2024 09:32:39 +0100 Subject: [PATCH 08/11] Make waveform work with accent color from theme colors or theme properties REDMINE-20845, REDMINE-19604 --- .../package/src/contentElements/inlineAudio/editor.js | 5 ++++- .../frontend/PlayerControls/WaveformPlayerControls/index.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) 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/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} /> From 4bbd5400c94bdd67acf52b85ff7a06e9901e2fe9 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 26 Nov 2024 09:49:05 +0100 Subject: [PATCH 09/11] Properties instead of colors for theme options in install generator Also include default properties for dark variant. REDMINE-20845, REDMINE-19604 --- .../install/templates/themes_plugin.rb.tt | 37 +++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) 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', From 58a7a61acadd343f06d17eb612dc1fe91d254aee Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 26 Nov 2024 09:50:45 +0100 Subject: [PATCH 10/11] Apply widget primary color to icon based mobile menu icon REDMINE-20845 --- .../src/widgets/defaultNavigation/DefaultNavigation.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css index add303cb5f..e1f4016830 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css @@ -95,7 +95,8 @@ } div:focus-within > .contextIcon, -.contextIcon:hover { +.contextIcon:hover, +.menuIcon { color: var(--theme-widget-primary-color); } From bd5e389b56774abc97858051aceb4fa8d0c95868 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 26 Nov 2024 09:51:12 +0100 Subject: [PATCH 11/11] Add theme property for navigation progress backdrop blur Can be used to turn off blur for cases where the progress bar is made transparent. REDMINE-20845 --- .../src/widgets/defaultNavigation/DefaultNavigation.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css index e1f4016830..1170650a90 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css @@ -155,7 +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-widget-surface-backdrop-blur)); + backdrop-filter: blur(var(--theme-default-navigation-progress-bar-backdrop-blur, + var(--theme-widget-surface-backdrop-blur))); } .progressIndicator {