From 9a82b79247677a7c12fa688cdeaaaec2416c530d Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 7 May 2024 06:30:20 +0200 Subject: [PATCH 1/3] Pass entry to widget configuration editor view REDMINE-20704 --- package/spec/editor/views/EditWidgetView-spec.js | 10 ++++++++-- package/src/editor/controllers/SidebarController.js | 1 + package/src/editor/views/EditWidgetView.js | 1 + 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/package/spec/editor/views/EditWidgetView-spec.js b/package/spec/editor/views/EditWidgetView-spec.js index 850e46ab5a..f12c9e37cb 100644 --- a/package/spec/editor/views/EditWidgetView-spec.js +++ b/package/spec/editor/views/EditWidgetView-spec.js @@ -8,13 +8,18 @@ describe('EditWidgetView', () => { var f = support.factories; it('renders widget configuration editor', () => { + var entry = f.entry({id: 25}); var widgetTypes = f.widgetTypes([ {name: 'default_bar', role: 'navigation'}, {name: 'fancy_bar', role: 'navigation'} ], function(w) { w.register('fancy_bar', { configurationEditorView: Backbone.View.extend({ - className: 'edit_fancy_bar' + className: 'edit_fancy_bar', + + initialize() { + this.$el.attr('data-entry-id', this.options.entry.id) + } }) }); }); @@ -24,11 +29,12 @@ describe('EditWidgetView', () => { }, {widgetTypes: widgetTypes}); var view = new EditWidgetView({ model: widget, + entry, widgetTypes: widgetTypes }); view.render(); - expect(view.$el.find('.edit_fancy_bar').length).toBe(1); + expect(view.$el.find('.edit_fancy_bar[data-entry-id=25]').length).toBe(1); }); }); diff --git a/package/src/editor/controllers/SidebarController.js b/package/src/editor/controllers/SidebarController.js index c9e134fff0..c8285248b3 100644 --- a/package/src/editor/controllers/SidebarController.js +++ b/package/src/editor/controllers/SidebarController.js @@ -78,6 +78,7 @@ export const SidebarController = Marionette.Controller.extend({ widget: function(id) { this.region.show(new EditWidgetView({ + entry: this.entry, model: this.entry.widgets.get(id) })); }, diff --git a/package/src/editor/views/EditWidgetView.js b/package/src/editor/views/EditWidgetView.js index 518cbf78ad..72d45b76d7 100644 --- a/package/src/editor/views/EditWidgetView.js +++ b/package/src/editor/views/EditWidgetView.js @@ -26,6 +26,7 @@ export const EditWidgetView = Marionette.ItemView.extend({ onRender: function() { var configurationEditor = this.model.widgetType().createConfigurationEditorView({ model: this.model.configuration, + entry: this.options.entry, tab: this.options.tab }); From e633839b9569eb05c7a93ef406d54dbfa8168bd8 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 7 May 2024 07:36:40 +0200 Subject: [PATCH 2/3] Support named theme palettes REDMINE-20704 --- .../spec/editor/models/ScrolledEntry-spec.js | 51 +++++++++++++++++++ .../src/editor/models/ScrolledEntry/index.js | 16 +++--- 2 files changed, 61 insertions(+), 6 deletions(-) diff --git a/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js b/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js index a414c95427..699e18f633 100644 --- a/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js +++ b/entry_types/scrolled/package/spec/editor/models/ScrolledEntry-spec.js @@ -3114,6 +3114,57 @@ describe('ScrolledEntry', () => { expect(values).toEqual(['brand-blue', 'brand-green']); }); + it('supports named palettes', () => { + const entry = factories.entry( + ScrolledEntry, + {}, + { + entryTypeSeed: normalizeSeed({ + themeOptions: { + properties: { + root: { + paletteColorBrandBlue: '#00f', + paletteColorBrandGreen: '#0f0', + paletteColorAccentColor: '#123)' + } + }, + palettes: { + brandColors: ['brandBlue', 'brand_green'] + } + } + }) + } + ); + + const [values] = entry.getPaletteColors({name: 'brandColors'}); + + expect(values).toEqual(['brand-blue', 'brand-green']); + }); + + it('returns empty array if named palette is missing', () => { + const entry = factories.entry( + ScrolledEntry, + {}, + { + entryTypeSeed: normalizeSeed({ + themeOptions: { + properties: { + root: { + paletteColorBrandBlue: '#00f', + paletteColorBrandGreen: '#0f0', + paletteColorAccentColor: '#123)' + } + } + } + }) + } + ); + + const [values] = entry.getPaletteColors({name: 'brandColors'}); + + expect(values).toEqual([]); + }); + describe('with shared translations', () => { const commonPrefix = 'pageflow_scrolled.editor.palette_colors' diff --git a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js index 7853aec4d2..9d7ec14f1c 100644 --- a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js +++ b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js @@ -197,11 +197,15 @@ export const ScrolledEntry = Entry.extend({ return [values, texts] }, - getPaletteColors() { - const values = Object.keys( - this.scrolledSeed.config.theme.options.properties?.root || {} - ).filter( - key => key.indexOf('paletteColor') === 0 + getPaletteColors({name} = {}) { + const themeOptions = this.scrolledSeed.config.theme.options + + const values = ( + name ? + (themeOptions.palettes?.[name] || []) : + Object.keys(themeOptions.properties?.root || {}).filter( + key => key.indexOf('paletteColor') === 0 + ) ).map( key => dasherize(key.replace('paletteColor', '')) ); @@ -229,7 +233,7 @@ export const ScrolledEntry = Entry.extend({ function dasherize(text) { return ( text[0] + - text.slice(1).replace(/[A-Z]/g, match => `-${match}`) + text.slice(1).replace('_', '-').replace(/[A-Z]/g, match => `-${match}`) ).toLowerCase(); } From ad7d15b99d2f02fa0e73d9e5e4835164b790f329 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 7 May 2024 07:39:11 +0200 Subject: [PATCH 3/3] Allow making default navigation accent color configurable REDMINE-20704 --- .../locales/new/nav-palette-color.de.yml | 8 ++++++ .../locales/new/nav-palette-color.en.yml | 8 ++++++ .../Defaultnavigation-spec.js | 26 +++++++++++++++++++ .../scrolled/package/src/editor/config.js | 14 ++++++++++ .../defaultNavigation/DefaultNavigation.js | 3 ++- 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 entry_types/scrolled/config/locales/new/nav-palette-color.de.yml create mode 100644 entry_types/scrolled/config/locales/new/nav-palette-color.en.yml create mode 100644 entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js diff --git a/entry_types/scrolled/config/locales/new/nav-palette-color.de.yml b/entry_types/scrolled/config/locales/new/nav-palette-color.de.yml new file mode 100644 index 0000000000..d8e78aef05 --- /dev/null +++ b/entry_types/scrolled/config/locales/new/nav-palette-color.de.yml @@ -0,0 +1,8 @@ +de: + pageflow: + editor: + widgets: + attributes: + defaultNavigation: + accentColor: + label: "Akzentfarbe" diff --git a/entry_types/scrolled/config/locales/new/nav-palette-color.en.yml b/entry_types/scrolled/config/locales/new/nav-palette-color.en.yml new file mode 100644 index 0000000000..150239b1a1 --- /dev/null +++ b/entry_types/scrolled/config/locales/new/nav-palette-color.en.yml @@ -0,0 +1,8 @@ +en: + pageflow: + editor: + widgets: + attributes: + defaultNavigation: + accentColor: + label: "Accent color" diff --git a/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js new file mode 100644 index 0000000000..10cbd7ecec --- /dev/null +++ b/entry_types/scrolled/package/spec/widgets/defaultNavigation/Defaultnavigation-spec.js @@ -0,0 +1,26 @@ +import React from 'react'; + +import {DefaultNavigation} from 'widgets/defaultNavigation/DefaultNavigation'; + +import {renderInEntry} from 'pageflow-scrolled/testHelpers'; +import '@testing-library/jest-dom/extend-expect'; + +describe('DefaultNavigation', () => { + it('does not have style attribute on header by default', async () => { + const {container} = renderInEntry( + + ); + + expect(container.querySelector('header')).not.toHaveAttribute('style'); + }); + + it('supports overriding accent color', async () => { + const {container} = renderInEntry( + + ); + + expect(container.querySelector('header')).toHaveStyle( + {'--theme-accent-color': 'var(--theme-palette-color-brand-blue)' + }); + }); +}); diff --git a/entry_types/scrolled/package/src/editor/config.js b/entry_types/scrolled/package/src/editor/config.js index eda901c47a..e17dd144e7 100644 --- a/entry_types/scrolled/package/src/editor/config.js +++ b/entry_types/scrolled/package/src/editor/config.js @@ -11,6 +11,7 @@ import {SideBarController} from './controllers/SideBarController'; import {browser} from 'pageflow/frontend'; import {CheckBoxInputView, ConfigurationEditorView} from 'pageflow/ui'; +import {ColorSelectInputView} from './views/inputs/ColorSelectInputView'; import {BrowserNotSupportedView} from './views/BrowserNotSupportedView'; editor.registerEntryType('scrolled', { @@ -53,7 +54,20 @@ editor.widgetTypes.registerRole('header', { editor.widgetTypes.register('defaultNavigation', { configurationEditorView: ConfigurationEditorView.extend({ configure: function() { + const [values, texts] = this.options.entry.getPaletteColors({name: 'accentColors'}); + this.tab('defaultNavigation', function() { + if (values.length) { + this.input('accentColor', ColorSelectInputView, { + includeBlank: true, + blankTranslationKey: 'pageflow_scrolled.editor.' + + 'common_content_element_attributes.' + + 'palette_color.blank', + values, + texts, + }); + } + this.input('hideToggleMuteButton', CheckBoxInputView); this.input('hideSharingButton', CheckBoxInputView); this.input('fixedOnDesktop', CheckBoxInputView); diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js index c28a481b5b..2e4ce670e7 100644 --- a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js +++ b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.js @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { Widget, + paletteColor, useScrollPosition, useChapters, useCurrentChapter, @@ -125,7 +126,7 @@ export function DefaultNavigation({configuration}) { !mobileNavHidden ), [styles.hasChapters]: hasChapters - })}> + })} style={{'--theme-accent-color': paletteColor(configuration.accentColor)}}>
{hasChapters && }