Merge pull request #2002 from tf/colored-quote-symbol

Allow coloring SVG quote mark symbol with palette colors
codevise · Sep 13, 2023 · 5ccd257 · 5ccd257
2 parents 0d00e1d + c67c938
commit 5ccd257
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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: {

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
@@ -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);