From ad7d15b99d2f02fa0e73d9e5e4835164b790f329 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 7 May 2024 07:39:11 +0200
Subject: [PATCH] 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 000000000..d8e78aef0
--- /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 000000000..150239b1a
--- /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 000000000..10cbd7ece
--- /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(
+      <DefaultNavigation configuration={{}} />
+    );
+
+    expect(container.querySelector('header')).not.toHaveAttribute('style');
+  });
+
+  it('supports overriding accent color', async () => {
+    const {container} = renderInEntry(
+      <DefaultNavigation configuration={{accentColor: 'brand-blue'}} />
+    );
+
+    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 eda901c47..e17dd144e 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 c28a481b5..2e4ce670e 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)}}>
       <div className={styles.navigationBarContentWrapper}>
         {hasChapters && <HamburgerIcon onClick={handleBurgerMenuClick}
                                        mobileNavHidden={mobileNavHidden}/>}