- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Option zur Identifizierung der tpp-buttons zwecks Positionierung
Hallo zusammen!
Gibt es bereits eine Option mit der man die Position der .tpp-buttons beeinflussen oder ein .tpp-buttons-Element via CSS zu einem Decorator zuordnen kann?
Konkret gestaltet sich in unserem Projekt folgende Herausforderung:
Wir haben eine Absatzvorlage mit der man verlinkte Boxen pflegen kann. Diese besitzen ein Bild, Text und einen Link. Diese Boxen befinden sich in einem FS_CATALOG.
Darรผber hinaus rendert die SPA bereits eigene TPP Decorator fรผr Bilder (fรผr den direkten Bildzuschnitt) und FS_CATALOG Items (fรผr die direkte Bearbeitung einer Box ohne Umweg รผber die Maske der Absatzvorlage). Jedes Bild und jeder FS_CATALOG Gegenstand zeichnet in der Applikation also bereits einen eigenen TPP-Rahmen.
Daraus ergibt sich ein Problem: Die Buttons รผberlappen sich (im Screenshot rot eingekreist). Befindet man sich mit der Maus auf dem Bild, dann wird der Rahmen der Absatzvorlage, der der Box und der des Bildes, also der gesamten "Elternkette" des Decorators gleichzeitig angezeigt.
Fรผr diesen Fall wรคre es ideal, wenn man den Zuschnitt-Button des Bildes statt rechts oben, links oben im TPP-Rahmen platzieren kรถnnte. Noch viel besser wรคre die Mรถglichkeit, einem TPP-Decorator bei Erstellung eine CSS-Klasse รผbergeben zu kรถnnen, die im DOM spรคter auf die tpp-borders-<div> Elemente gelegt werden.
Aktuell kรถnnen einzelne Buttons mithilfe der Klasse oder data-Attributen zwar gezielt vom CSS angesteuert werden โ deren Container aber nicht. Alle tpp-borders-Elemente kรถnnen nicht unterschieden werden, man weiร nie welche tpp-borders zu welchem Decorator gehรถren und somit kรถnnen Buttons bspw. auch nicht รผber CSS anders verankert werden (siehe Anhang "DOM tpp-borders.png").
Besteht dafรผr bereits eine Lรถsung oder kann mit diesem ".tpp-buttons"-Mapping vielleicht demnรคchst rechnen?
Viele Grรผรe,
Alex
- Labels:
-
OCM
-
Third Party Preview
-
TPP
- Tags:
- tpp
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hallo Alex,
sehr guter Punkt. Ich sehe grad auf Anhieb keinen Quick-Fix. Ich nehme aber gerne eine Ticket auf.
Von der Idee her wรผrden wir Decorate.element erweitern um einen Parameter borderClass
decorate.element = function ($el, previewId, context)
wird
decorate.element = function ($el, previewId, context, borderClass)
(Das schreit hier langsam nach einem Parameter-Objekt :smileygrin: )
Und diese class wird zusรคtzlich dem tpp-borders div hinzugefรผgt.
<div class="tpp-borders cropImageBorder">...</div>
<div class="tpp-borders sectionBorder">...</div>
usw.
Damit sollten sich komfortable Selektoren bauen lassen oder?
Weitere Wรผnsche oder Anmerkungen?
Moritz
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Fรผr Nachfragen. Ticket-Nummer: CORE-8093
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hallo Moritz,
ja, das klingt prima (Parameter Object ebenfalls )!
Viele Grรผรe,
Alex
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hallo Alex,
In der SNAP-Variante der API wird der Bildzuschnitt jetzt rechts unten im Rahmen eingeblendet.
Grundsรคtzlich ist die Herangehensweise (auch fรผr den ContentCreator) ein Inline-Styling z.B. mit "margin-top: -20px; padding-top: 20px;", da sich die Rahmen am element-offset orientieren.
Hilft das? LG

