Skip to content

Commit

Permalink
Merge pull request #2178 from tf/dark-widgets
Browse files Browse the repository at this point in the history
Dark variant for widgets
tf authored Nov 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents b04e9da + bd5e389 commit 6ab8d01
Showing 32 changed files with 616 additions and 64 deletions.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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({})
8 changes: 8 additions & 0 deletions entry_types/scrolled/config/locales/new/dark_widgets.de.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
de:
pageflow:
entry_types:
scrolled:
editor:
entry_metadata_configuration_attributes:
darkWidgets:
label: "Dunkle Theme-Variante verwenden"
8 changes: 8 additions & 0 deletions entry_types/scrolled/config/locales/new/dark_widgets.en.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
en:
pageflow:
entry_types:
scrolled:
editor:
entry_metadata_configuration_attributes:
darkWidgets:
label: "Use dark theme variant"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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',
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions entry_types/scrolled/package/documentation.yml
Original file line number Diff line number Diff line change
@@ -36,6 +36,7 @@ toc:
- useCurrentChapter
- useCredits
- useDarkBackground
- useDarkWidgets
- useEntryMetadata
- useFile
- useFileRights
86 changes: 82 additions & 4 deletions entry_types/scrolled/package/spec/entryState/metadata-spec.js
Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
@@ -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(<Logo />, {
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(<Logo />, {
seed: {
entry: {
configuration: {
darkWidgets: true
}
},
themeAssets: {
logoDesktop: 'logoDesktop.svg',
logoDarkVariantDesktop: 'logoDarkVariantDesktop.svg'
}
}
});

expect(getByRole('img')).toHaveAttribute('src', 'logoDarkVariantDesktop.svg');
});
});
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions entry_types/scrolled/package/src/editor/config.js
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@ editor.registerEntryType('scrolled', {
outlineView: EntryOutlineView,

appearanceInputs(tabView) {
tabView.input('darkWidgets', CheckBoxInputView);
},

supportsExtendedFileRights: true,
5 changes: 4 additions & 1 deletion entry_types/scrolled/package/src/entryState/index.js
Original file line number Diff line number Diff line change
@@ -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,
13 changes: 12 additions & 1 deletion entry_types/scrolled/package/src/entryState/metadata.js
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export function watchCollections(entry, {dispatch}) {
'credits'
],
keyAttribute: 'permaId',
includeConfiguration: true,
dispatch
}));
teardownFns.push(watchCollection(chapters, {
Original file line number Diff line number Diff line change
@@ -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} />
1 change: 1 addition & 0 deletions entry_types/scrolled/package/src/frontend/index.js
Original file line number Diff line number Diff line change
@@ -64,6 +64,7 @@ export {
useChapters,
useCredits,
useCutOff,
useDarkWidgets,
useEntryMetadata,
useEntryStateDispatch,
useEntryTranslations,
Original file line number Diff line number Diff line change
@@ -52,7 +52,8 @@ export function normalizeSeed({
} = {}) {
const entries = entry ? [entry] : [{}];
const normalizedEntries = normalizeCollection(entries, {
locale: 'en'
locale: 'en',
configuration: {}
});

const normalizedContentElements = normalizeCollection(contentElements, {
16 changes: 14 additions & 2 deletions entry_types/scrolled/package/src/widgets/consentBar/ConsentBar.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className={styles.bar}>

<div className={classNames(styles.bar, {
'scope-dark': darkWidgets,
})}>
{renderText({privacyLinkUrl, t, locale, vendors})}

{!expanded &&
Original file line number Diff line number Diff line change
@@ -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;
}

60 changes: 50 additions & 10 deletions entry_types/scrolled/package/src/widgets/consentBar/stories.js
Original file line number Diff line number Diff line change
@@ -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',
() =>
<RootProviders seed={normalizeAndMergeFixture(seed)}
<RootProviders seed={normalizeAndMergeFixture(getSeed())}
consent={createConsent()}>
<Entry />
</RootProviders>
);

stories.add(
'Desktop - Dark',
() =>
<RootProviders seed={normalizeAndMergeFixture(getSeed({darkWidgets: true}))}
consent={createConsent()}>
<Entry />
</RootProviders>
@@ -48,7 +70,25 @@ stories.add(
stories.add(
'Mobile',
() =>
<RootProviders seed={normalizeAndMergeFixture(seed)}
<RootProviders seed={normalizeAndMergeFixture(getSeed())}
consent={createConsent()}>
<Entry />
</RootProviders>,
{
percy: {
widths: [320]
},
viewport: {
viewports: INITIAL_VIEWPORTS,
defaultViewport: 'iphone6'
}
}
);

stories.add(
'Mobile - Dark',
() =>
<RootProviders seed={normalizeAndMergeFixture(getSeed({darkWidgets: true}))}
consent={createConsent()}>
<Entry />
</RootProviders>,
Original file line number Diff line number Diff line change
@@ -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 (
<>
<header className={classNames(styles.navigationBar, {
'scope-dark': darkWidgets,
[styles.navigationBarExpanded]: (
navExpanded ||
(!isPhonePlatform && configuration.fixedOnDesktop) ||
Original file line number Diff line number Diff line change
@@ -46,10 +46,9 @@
}

.navigationBarContentWrapper {
composes: translucentWidgetSurface from 'pageflow-scrolled/values/widgets.module.css';
position: relative;
z-index: 2;
background-color: var(--theme-widget-surface-color);
color: var(--theme-widget-on-surface-color);
height: var(--default-navigation-bar-height);
box-sizing: border-box;
padding-top: var(--default-navigation-scroller-top);
@@ -96,7 +95,8 @@
}

div:focus-within > .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;
18 changes: 14 additions & 4 deletions entry_types/scrolled/package/src/widgets/defaultNavigation/Logo.js
Original file line number Diff line number Diff line change
@@ -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 (
<a target="_blank"
rel="noopener noreferrer"
@@ -17,9 +27,9 @@ export function Logo({srcMobile, srcDesktop, url, altText}) {
theme.options.defaultNavigationMobileLogoPosition === 'center'}
)}>
<picture>
<source media="(max-width: 780px)" srcSet={srcMobile || theme.assets.logoMobile} />
<source media="(min-width: 781px)" srcSet={srcDesktop || theme.assets.logoDesktop} />
<img src={srcDesktop || theme.assets.logoDesktop}
<source media="(max-width: 780px)" srcSet={srcMobile} />
<source media="(min-width: 781px)" srcSet={srcDesktop} />
<img src={srcDesktop}
alt={altText || theme.options.logoAltText} />
</picture>
</a>
Original file line number Diff line number Diff line change
@@ -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',
() =>
<RootProviders seed={normalizeAndMergeFixture(getSeed({chapterCount: 3, darkWidgets: true}))}>
<Entry />
</RootProviders>
);

stories.add(
'Mobile',
() =>
@@ -81,6 +99,23 @@ stories.add(
}
);

stories.add(
'Mobile - Dark',
() =>
<RootProviders seed={normalizeAndMergeFixture(getSeed({chapterCount: 3, darkWidgets: true}))}>
<Entry />
</RootProviders>,
{
percy: {
widths: [320]
},
viewport: {
viewports: INITIAL_VIEWPORTS,
defaultViewport: 'iphone6'
}
}
);

stories.add(
'Mobile - Centered Logo',
() =>
18 changes: 18 additions & 0 deletions entry_types/scrolled/package/values/widgets.module.css
Original file line number Diff line number Diff line change
@@ -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));
}
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions package/src/editor/models/EntryMetadata.js
Original file line number Diff line number Diff line change
@@ -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();
});
},

0 comments on commit 6ab8d01

Please sign in to comment.