From 71d6bfec7a44a461838e7f15cf0380063bd729e7 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 8 Oct 2024 10:28:08 +0200 Subject: [PATCH] Add inline help texts for hotspots inputs REDMINE-20673 --- .../config/locales/new/hotspots.de.yml | 44 ++++++++++++++++--- .../config/locales/new/hotspots.en.yml | 36 ++++++++++++++- 2 files changed, 72 insertions(+), 8 deletions(-) diff --git a/entry_types/scrolled/config/locales/new/hotspots.de.yml b/entry_types/scrolled/config/locales/new/hotspots.de.yml index 711f1dfe7..1c7f534ba 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.de.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.de.yml @@ -12,23 +12,26 @@ de: edit_area: back: Zurück destroy: Löschen - confirm_delete_link: Soll der Bereich wirklich gelöscht werden? + confirm_delete_link: Soll der Hotspot-Bereich wirklich gelöscht werden? tabs: area: Hotspot-Bereich portrait: Hochkant attributes: tooltipPosition: label: Tooltip-Ausrichtung + inline_help: Verhindere, dass der Tooltip genau die Teile des Bildes überdeckt, die er beschriften soll. values: below: Unterhalb above: Oberhalb tooltipReference: label: Tooltip-Position + inline_help: Tooltip am Indikator-Punkt oder außerhalb des Hotspot-Bereichs zeigen. values: indicator: Am Indikator - area: Am Bereich + area: Am Hotspot-Bereich tooltipMaxWidth: label: Tooltip-Maximalbreite + inline_help: Bestimme, wie breit der Tooltip dargestellt wird. values: medium: "Mittel" veryNarrow: Sehr schmal @@ -36,32 +39,44 @@ de: wide: Breit tooltipTextAlign: label: Textausrichtung in Tooltip + inline_help: Ausrichtung des Texts innerhalb des Tooltips. values: left: Links center: Zentriert right: Rechts color: + inline_help: Wird für den Indikator-Punkt verwendet. label: Farbe activeImage: label: Aktives Bild + inline_help: |- + Alternatives Bild zeigen, sobald der Hotspot-Bereich + aktiv ist. Verwende ein Bild, in dem der + Hotspot-Bereich optisch hervorgehoben ist. tooltipImage: label: Bild in Tooltip + inline_help: Zeige im Bild innerhalb des Tooltips an. area: label: Bereich + inline_help: Ändere Größe und Position des Hotspot-Bereichs. zoom: label: Zoom + inline_help: Bestimme, wie sehr das Bild herangezoomt werden soll, wenn der Bereich aktiv ist. portraitTooltipPosition: label: Tooltip-Position (Hochkant) + inline_help: Verhindere, dass der Tooltip genau die Teile des Bildes überdeckt, die er beschriften soll. values: - below: Below - above: Above + below: Unterhalb + above: Oberhalb portraitTooltipReference: label: Tooltip-Position (Hochkant) + inline_help: Tooltip am Indikator-Punkt oder außerhalb des Hotspot-Bereichs zeigen. values: indicator: Am Indikator - area: Am Bereich + area: Am Hotspot-Bereich portraitTooltipMaxWidth: label: Tooltip-Maximalbreite (Hochkant) + inline_help: Bestimme, wie breit der Tooltip dargestellt wird. values: medium: "Mittel" narrow: Schmal @@ -69,12 +84,19 @@ de: wide: Breit portraitColor: label: Farbe (Hochkant) + inline_help: Wird für den Indikator-Punkt verwendet. portraitActiveImage: label: Aktives Bild (Hochkant) + inline_help: |- + Alternatives Bild zeigen, sobald der Hotspot-Bereich + aktiv ist. Verwende ein Bild, in dem der Hotspot-Bereich + optisch hervorgehoben ist. portraitArea: label: Bereich (Hochkant) + inline_help: Verändere Größe und Position des Hotspot-Bereichs. portraitZoom: label: Zoom (Hochkant) + inline_help: Bestimme, wie sehr das Hochkant-Bild herangezoomt werden soll, wenn der Bereich ausgewählt ist. edit_area_dialog: header: Bereichsumriss und Indikatorposition tabs: @@ -98,11 +120,19 @@ de: attributes: image: label: Bild + inline_help: Bild, auf dem Hotspot-Bereiche platziert werden sollen. portraitImage: - inline_help: Wird gezeigt, wenn der Browser-Viewport höher als breit ist - zum Beispiel auf Smartphones oder Tablets in Portrait-Ausrichtung. Kann als Alternative zu einem querformatigen Bild konfiguriert werden, das ansonsten zu klein dargestellt würde. + inline_help: Wird verwendet, wenn der Browser-Viewport höher als breit ist - zum Beispiel auf Smartphones oder Tablets in Portrait-Ausrichtung. Kann als Alternative zu einem querformatigen Bild konfiguriert werden, das ansonsten zu klein dargestellt würde. label: Bild (Hochkant) enablePanZoom: label: Pan & Zoom + inline_help_html: |- + Passt den Bildausschnitt animiert an, um beim + Auswählen eines Hotspots näher heranzuzoomen und + Details besser sichtbar zu machen.

Falls auf + dem Desktop alle Details auch ohne Zoom gut zu + erkennen sind, kann der Effekt optional nur für den + Hochkant-Modus aktiviert werden. values: phonePlatform: Im Phone-Layout always: Immer @@ -111,8 +141,10 @@ de: label: Pan & Zoom bei erstem Bereich starten enableFullscreen: label: Vollbildmodus erlauben + inline_help: Button anzeigen, um das Element bildschirmfüllend zu öffnen. invertTooltips: label: Tooltip-Farben invertieren + inline_help: Dunkle Tooltips mit hellem Text verwenden. 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 index 16cce3503..56cafed89 100644 --- a/entry_types/scrolled/config/locales/new/hotspots.en.yml +++ b/entry_types/scrolled/config/locales/new/hotspots.en.yml @@ -19,16 +19,19 @@ en: attributes: tooltipPosition: label: Tooltip orientation + inline_help: Prevent the tooltip from covering the parts of the image it is meant to label. values: below: Below above: Above tooltipReference: label: Tooltip position + inline_help: Show the tooltip at the indicator point or outside the hotspot area. values: indicator: At indicator area: At area tooltipMaxWidth: label: Tooltip maximum width + inline_help: Set how wide the tooltip should be displayed. values: medium: Medium narrow: Narrow @@ -36,32 +39,44 @@ en: wide: Wide tooltipTextAlign: label: Text alignment in tooltip + inline_help: Align the text inside the tooltip. values: left: Left center: Center right: Right color: + inline_help: Used for the indicator point. label: Color activeImage: label: Active image + inline_help: |- + Display an alternative image when the hotspot area + is active. Use an image where the area is visually + highlighted. tooltipImage: label: Image in tooltip + inline_help: Display an image inside the tooltip. area: label: Area + inline_help: Adjust the size and position of the hotspot area. zoom: label: Zoom + inline_help: Set how much the image should be zoomed in when the area is active. portraitTooltipPosition: label: Tooltip orientation (Portrait) + inline_help: Prevent the tooltip from covering the parts of the image it is meant to label. values: below: Below above: Above portraitTooltipReference: label: Tooltip position (Portrait) + inline_help: Show the tooltip at the indicator point or outside the hotspot area. values: indicator: At indicator area: At area portraitTooltipMaxWidth: label: Tooltip maximum width (Portrait) + inline_help: Set how wide the tooltip should be displayed. values: medium: Medium narrow: Narrow @@ -69,12 +84,19 @@ en: wide: Wide portraitColor: label: Color (Portrait) + inline_help: Used for the indicator point. portraitActiveImage: label: Active image (Portrait) + inline_help: |- + Display an alternative image when the hotspot area + is active. Use an image where the area is visually + highlighted. portraitArea: label: Area (Portrait) + inline_help: Adjust the size and position of the hotspot area. portraitZoom: label: Zoom (Portrait) + inline_help: Set how much the portrait image should be zoomed in when the area is selected. edit_area_dialog: header: Area outline and indicator position tabs: @@ -85,7 +107,7 @@ en: polygon: Polygon centerIndicator: Center indicator hotspots_image: Hotspots image - double_click_to_delete: Double click to remove point + double_click_to_delete: Double-click to remove point indicator_title: Drag to position indicator save: Save cancel: Cancel @@ -98,21 +120,31 @@ en: attributes: image: label: Image + inline_help: Image on which the hotspot areas should be placed. portraitImage: inline_help: Displayed when the browser viewport is taller than wide, for example on phones or tablets in portrait orientation. Can be used to provide an alternative to a landscape image that would otherwise be displayed too small. label: Image (Portrait) enablePanZoom: - label: Pan zoom + label: Pan & Zoom + inline_help_html: |- + Animates the image to zoom in on a hotspot when it + is selected, making details easier to see.

If + all details are clearly visible without zooming on + desktop, this effect can optionally be enabled only + for portrait mode. values: phonePlatform: In phone layout always: Always never: Never panZoomInitially: label: Pan to first area initially + inline_help: Starts the Pan & Zoom effect on the first hotspot area when it becomes active. enableFullscreen: label: Enable fullscreen + inline_help: Display a button to open the element in fullscreen mode. invertTooltips: label: Invert tooltip colors + inline_help: Use dark tooltips with light text. description: Image with clickable areas name: Hotspots tabs: