From a9f1b8f31e2f25be8e2c089f519b823154e66507 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Wed, 13 Sep 2023 13:22:01 +0200
Subject: [PATCH 1/2] Allow coloring SVG quote mark symbol with palette colors

REDMINE-20411
---
 .../src/contentElements/quote/Quote.js        |  1 +
 .../contentElements/quote/Quote.module.css    |  6 +++
 .../src/contentElements/quote/stories.js      | 37 +++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.js b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
index 141d2f124..76ddb4cc4 100644
--- a/entry_types/scrolled/package/src/contentElements/quote/Quote.js
+++ b/entry_types/scrolled/package/src/contentElements/quote/Quote.js
@@ -21,6 +21,7 @@ export function Quote({configuration, contentElementId, sectionProps}) {
   return (
     <figure className={classNames(styles.figure,
                                   styles[`design-${theme.options.quoteDesign || 'largeHanging'}`],
+                                  {[styles.maskedMark]: theme.options.properties?.root?.quoteLeftMarkMaskImage},
                                   {[styles.centerRagged]: sectionProps.layout === 'centerRagged'})}
             style={{'--palette-color': paletteColor(configuration.color)}}>
       <blockquote className={styles.text}>
diff --git a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
index 88cdcccb0..fbb18627e 100644
--- a/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
+++ b/entry_types/scrolled/package/src/contentElements/quote/Quote.module.css
@@ -59,6 +59,12 @@
   content: var(--theme-quote-left-mark, "“");
 }
 
+.maskedMark .text p:first-child::before {
+  mask: var(--theme-quote-left-mark-mask-image) 50% 50% no-repeat;
+  background-color: var(--palette-color, var(--theme-quote-mark-color));
+  color: transparent;
+}
+
 .text p:last-child::after {
   content: var(--theme-quote-right-mark, '”');
 }
diff --git a/entry_types/scrolled/package/src/contentElements/quote/stories.js b/entry_types/scrolled/package/src/contentElements/quote/stories.js
index ea79bf6fc..9fcf589a4 100644
--- a/entry_types/scrolled/package/src/contentElements/quote/stories.js
+++ b/entry_types/scrolled/package/src/contentElements/quote/stories.js
@@ -114,6 +114,43 @@ storiesOfContentElement(module, {
         }
       }
     },
+    {
+      name: 'SVG mask mark',
+      themeOptions: {
+        properties: {
+          root: {
+            quoteLeftMarkMaskImage: markSvg(),
+            quoteMarkColor: 'red',
+            quoteLargeMarkFontSize: '1.2em',
+            quoteMarkOpacity: '1',
+            quoteMarkWidth: '1.25em',
+            quoteHangingMarkSpacing: '0.3em',
+            quoteIndent: '1.8em',
+            quoteLeftMarkTop: '-0.35em'
+          }
+        }
+      }
+    },
+    {
+      name: 'SVG mask mark with palette color',
+      themeOptions: {
+        properties: {
+          root: {
+            paletteColorAccent: '#04f',
+            quoteLeftMarkMaskImage: markSvg(),
+            quoteLargeMarkFontSize: '1.2em',
+            quoteMarkOpacity: '1',
+            quoteMarkWidth: '1.25em',
+            quoteHangingMarkSpacing: '0.3em',
+            quoteIndent: '1.8em',
+            quoteLeftMarkTop: '-0.35em'
+          }
+        }
+      },
+      configuration: {
+        color: 'accent'
+      }
+    },
     {
       name: 'Pallete color',
       themeOptions: {

From c67c9385e606753f76bd253080f716d1d808c9d9 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Wed, 13 Sep 2023 13:22:43 +0200
Subject: [PATCH 2/2] Prevent slider knob from being displayed before variants
 drop down

---
 .../package/src/editor/views/inputs/ListboxInputView.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/entry_types/scrolled/package/src/editor/views/inputs/ListboxInputView.module.css b/entry_types/scrolled/package/src/editor/views/inputs/ListboxInputView.module.css
index b2dbf7788..6728bbc41 100644
--- a/entry_types/scrolled/package/src/editor/views/inputs/ListboxInputView.module.css
+++ b/entry_types/scrolled/package/src/editor/views/inputs/ListboxInputView.module.css
@@ -18,7 +18,7 @@
   box-sizing: border-box;
   left: 0;
   top: 100%;
-  z-index: 1;
+  z-index: 3;
   padding: 1px;
   margin-bottom: space(4);
   border: solid 1px var(--ui-on-surface-color-lighter);