Merge pull request #2136 from tf/hotspots-5

Further improvements for hotspots element
codevise · Jul 31, 2024 · a4cae0e · a4cae0e
2 parents 336a640 + fa4e31c
commit a4cae0e
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 24 deletions.
diff --git a/entry_types/scrolled/config/locales/new/hotspots.de.yml b/entry_types/scrolled/config/locales/new/hotspots.de.yml
@@ -18,7 +18,7 @@ de:
             destroy: Löschen
             confirm_delete_link: Soll der Bereich wirklich gelöscht werden?
             tabs:
-              area: Hotspot-Breiech
+              area: Hotspot-Bereich
               portrait: Hochkant
             attributes:
               tooltipPosition:
@@ -114,6 +114,8 @@ de:
               label: Pan & Zoom bei erstem Bereich starten
             enableFullscreen:
               label: Vollbildmodus erlauben
+            invertTooltips:
+              label: Tooltip-Farben invertieren
           description: Bild mit anklickbaren Bereichen
           name: Hotspots
           tabs:

diff --git a/entry_types/scrolled/config/locales/new/hotspots.en.yml b/entry_types/scrolled/config/locales/new/hotspots.en.yml
@@ -114,6 +114,8 @@ en:
               label: Pan to first area initially
             enableFullscreen:
               label: Enable fullscreen
+            invertTooltips:
+              label: Invert tooltip colors
           description: Image with clickable areas
           name: Hotspots
           tabs:

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -17,11 +17,13 @@ import {
   EditableText,
   EditableInlineText,
   EditableLink,
+  InlineFileRights,
   Image,
   Text,
   useContentElementEditorState,
   useContentElementConfigurationUpdate,
-  useFile,
+  useDarkBackground,
+  useFileWithInlineRights,
   useI18n,
   utils
 } from 'pageflow-scrolled/frontend';
@@ -41,8 +43,13 @@ export function Tooltip({
   const updateConfiguration = useContentElementConfigurationUpdate();
   const {isEditable} = useContentElementEditorState();
 
-  const tooltipImageFile = useFile({
-    collectionName: 'imageFiles', permaId: area.tooltipImage
+  const darkBackground = useDarkBackground();
+  const light = configuration.invertTooltips ? !darkBackground : darkBackground;
+
+  const tooltipImageFile = useFileWithInlineRights({
+    configuration: area,
+    collectionName: 'imageFiles',
+    propertyName: 'tooltipImage'
   });
 
   const referencePosition = getTooltipReferencePosition({
@@ -143,19 +150,27 @@ export function Tooltip({
                   className={classNames(styles.box,
                                         styles[`maxWidth-${maxWidth}`],
                                         styles[`align-${area.tooltipTextAlign}`],
+                                        light ? styles.light : styles.dark,
                                         {[styles.editable]: isEditable,
                                          [styles.minWidth]: presentOrEditing('link')})}
                   onMouseEnter={onMouseEnter}
                   onMouseLeave={onMouseLeave}
                   onClick={onClick}
                   {...getFloatingProps()}>
-               <FloatingArrow ref={arrowRef} context={context} />
-               <Image imageFile={tooltipImageFile}
-                      variant={'medium'}
-                      fill={false}
-                      width={tooltipImageFile?.width}
-                      height={tooltipImageFile?.height}
-                      preferSvg={true} />
+               <FloatingArrow ref={arrowRef} context={context} strokeWidth={1} />
+               {tooltipImageFile &&
+                <>
+                  <div className={styles.imageWrapper}>
+                    <Image imageFile={tooltipImageFile}
+                           variant={'medium'}
+                           fill={false}
+                           width={tooltipImageFile.width}
+                           height={tooltipImageFile.height}
+                           preferSvg={true} />
+                    <InlineFileRights context="insideElement" items={[{file: tooltipImageFile, label: 'image'}]} />
+                    <InlineFileRights context="afterElement" items={[{file: tooltipImageFile, label: 'image'}]} />
+                  </div>
+                </>}
                {presentOrEditing('title') &&
                 <h3 id={`hotspots-tooltip-title-${contentElementId}-${area.id}`}>
                   <Text inline scaleCategory="hotspotsTooltipTitle">

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.module.css
@@ -1,3 +1,9 @@
+@value (
+  darkContentSurfaceColor, lightContentSurfaceColor,
+  darkContentTextColor, lightContentTextColor,
+  darkContentLinkColor, lightContentLinkColor
+) from "pageflow-scrolled/values/colors.module.css";
+
 .compositeItem {
   position: absolute;
   top: 0;
@@ -21,16 +27,41 @@
 
 .box {
   font-family: var(--theme-entry-font-family);
-  background-color: #fff;
-  color: #000;
   box-sizing: border-box;
   padding: 0.75rem;
-  box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
   border-radius: 5px;
   --max-width: 400px;
   max-width: min(100% - 2rem, var(--max-width));
 }
 
+.light {
+  background-color: lightContentSurfaceColor;
+  color: darkContentTextColor;
+  --content-text-color: darkContentTextColor;
+  --content-link-color: darkContentLinkColor;
+  box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
+}
+
+.dark {
+  background-color: darkContentSurfaceColor;
+  color: lightContentTextColor;
+  --content-text-color: lightContentTextColor;
+  --content-link-color: lightContentLinkColor;
+  border: solid 1px rgba(255 255 255 / 5%);
+}
+
+.light > svg {
+  fill: lightContentSurfaceColor;
+}
+
+.dark > svg {
+  fill: darkContentSurfaceColor;
+}
+
+.dark > svg path:first-of-type {
+  stroke: rgba(255 255 255 / 5%);
+}
+
 .maxWidth-wide {
   --max-width: 600px;
 }
@@ -55,14 +86,15 @@
   min-width: 200px;
 }
 
-.box svg {
-  fill: #fff;
+.box .imageWrapper {
+  position: relative;
+  margin-bottom: 1rem;
 }
 
-.box img {
-  width: 100%;
+.imageWrapper img {
+  display: block;
+  max-width: 100%;
   height: auto;
-  margin-bottom: 1rem;
 }
 
 .box h3,
@@ -92,6 +124,10 @@
   font-weight: bold;
 }
 
+.dark .link {
+  border: solid 1px rgb(255 255 255 / 5%);
+}
+
 .box > :first-child .link {
   margin-top: 0;
 }

diff --git a/...led/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js b/...led/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import {DraggableCore} from 'react-draggable';
 
-import {utils} from 'pageflow-scrolled/frontend'
+import {utils, paletteColor} from 'pageflow-scrolled/frontend'
 import {buttonStyles} from 'pageflow-scrolled/editor'
 
 import {
@@ -36,6 +36,7 @@ export const DraggableEditorView = Marionette.View.extend({
       <DraggableEditor
         imageSrc={this.options.file.getBackgroundPositioningImageUrl()}
         portrait={this.options.file.get('width') < this.options.file.get('height')}
+        indicatorColor={paletteColor(this.model.get(this.getPropertyName('color')) || this.model.get('color'))}
         initialMode={this.model.get(this.getPropertyName('mode'))}
         initialPoints={this.model.get(this.getPropertyName('outline'))}
         initialIndicatorPosition={this.model.get(this.getPropertyName('indicatorPosition'))}
@@ -70,7 +71,7 @@ export const DraggableEditorView = Marionette.View.extend({
 });
 
 function DraggableEditor({
-  imageSrc, portrait,
+  imageSrc, portrait, indicatorColor,
   initialMode, initialPoints, initialIndicatorPosition,
   onModeChange, onPointsChange, onIndicatorPositionChange
 }) {
@@ -173,6 +174,7 @@ function DraggableEditor({
                                      })} />}
 
           <Indicator position={indicatorPosition}
+                     color={indicatorColor}
                      onDrag={event => dispatch({
                        type: DRAG_INDICATOR,
                        cursor: clientToPercent(event)
@@ -220,11 +222,15 @@ function Handle({point, circle, potential, title, cursor, onDrag, onDragStop, on
   );
 }
 
-function Indicator({position, onDrag}) {
+function Indicator({position, color, onDrag}) {
   return (
     <DraggableCore onDrag={onDrag}>
       <div className={styles.indicator}
-           style={{left: `${position[0]}%`, top: `${position[1]}%`}}
+           style={{
+             left: `${position[0]}%`,
+             top: `${position[1]}%`,
+             '--color': color
+           }}
            title={I18n.t(`${i18nPrefix}.indicator_title`)} />
     </DraggableCore>
   );

diff --git a/...age/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css b/...age/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
@@ -2,6 +2,14 @@
   position: relative;
   display: inline-block;
   overflow: hidden;
+
+  background-image:
+    linear-gradient(45deg, var(--ui-on-surface-color-lighter) 25%, transparent 25%),
+    linear-gradient(135deg, var(--ui-on-surface-color-lighter) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--ui-on-surface-color-lighter) 75%),
+    linear-gradient(135deg, transparent 75%, var(--ui-on-surface-color-lighter) 75%);
+  background-size: 16px 16px;
+  background-position:0 0, 8px 0, 8px -8px, 0px 8px;
 }
 
 .buttons {
@@ -112,7 +120,7 @@
   border-radius: 50%;
   width: var(--size);
   height: var(--size);
-  background-color: #fff;
+  background-color: var(--color, #fff);
   transition: transform 0.2s ease;
   cursor: move;
   z-index: 3;

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
@@ -48,6 +48,7 @@ editor.contentElementTypes.register('hotspots', {
         contentElement,
         collection: AreasCollection.forContentElement(contentElement, entry)
       });
+      this.input('invertTooltips', CheckBoxInputView);
       this.input('enablePanZoom', SelectInputView, {
         values: ['phonePlatform', 'always', 'never']
       });