Skip to content

Commit

Permalink
Add inline help texts for hotspots inputs
Browse files Browse the repository at this point in the history 
REDMINE-20673
  • Loading branch information
@tf @DanielKuhn
tf authored and DanielKuhn committed Oct 9, 2024
1 parent 2e96330 commit 71d6bfe
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 8 deletions.
44 changes: 38 additions & 6 deletions entry_types/scrolled/config/locales/new/hotspots.de.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,69 +12,91 @@ 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
narrow: Schmal
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
veryNarrow: Sehr schmal
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:
Expand All @@ -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.<br/><br/>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
Expand All @@ -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:
Expand Down
36 changes: 34 additions & 2 deletions entry_types/scrolled/config/locales/new/hotspots.en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,62 +19,84 @@ 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
veryNarrow: Very Narrow
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
veryNarrow: Very Narrow
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:
Expand All @@ -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
Expand All @@ -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.<br/><br/>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:
Expand Down

0 comments on commit 71d6bfe

Please sign in to comment.