Feature Wunsch: Hilfe Widget wie auf der Config-Seite

[Sipple]

Servus

Was ich immer schon mal machen wollte sind Hilfsicons in meine Visu zu integrieren, wo das sinnvoll ist. So wie es auf der Config-Seite ausschaut.

grafik.png
Ich habe vor einiger Zeit mal versucht rauszufinden wie das gemacht wurde, kam aber irgendwie vom 100. ins 1000. und hab dann irgendwann aufgegeben. Wollte schon früher fragen, aber hab das dann verdrängt.
Wäre super, wenn das als Widget existieren würde. Kein Item nötig, nur ein Parameter für den Bubble-Text. Als Option MIT Item für den Text wär ein Schmankerl.

Gruß, Martin

[wvhn]

Es gibt hierzu zwei Möglichkeiten, die jetzt schon funktionieren:

1. im UZSU-Popoup wird ein tooltip verwendet, auf das ich heute beim Aufräumen gestoßen bin Es wird ganz einfach zu einem Element hinzugefügt und hat den Vorteil, dass es auch innerhalb von Popups funktioniert. Angezeigt wird es, wenn man mit der Maus über das Element fährt.
   

   	<span data-tip= "Schalter für das Fensterlicht">
   	   {{ basic.stateswitch('', 'licht.fenster', 'midi', '', 'light_floor_lamp.svg') }}   Fenster
   	</span>

2. Am Styling und der Positionierung muss für den allgemeinen Einsatz noch etwas gefeilt werden. Daran arbeite ich gerade. Das GIF unten ist schon mit verbesserter Positionierung aufgenommen.
3. Die Hilfetexte auf der Config-Seite sind Popups. Das hat den Nachteil, dass sie innerhalb von Popups nicht funktionieren (jQuery mobile lässt keine geschachtelten Popups zu). Außerdem muss man die Positionierung auf der Seite selbst steuern und für jedes Popup eine eindeutige id vorgeben. Dazu ist es hilfreich "{{ page }}_" vor die id zu setzen, damit es keine seitenübergreifenden Doppelungen gibt. Das Popup wird per Mausklick geöffnet.
   

   	{{ basic.stateswitch('', 'licht.decke', 'midi', '','light_pendant_light_round.svg') }}  Decke
   	<a class="ui-help-container" href="#{{ page }}_test_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
   	<div data-role="popup" id="{{ page }}_test_hint" data-arrow="true" data-theme="c">Dies ist mein Hilfetext</div>​

tooltip.gif

Nr. 2 könnte man zu einem Widget machen. Ich bin mir aber nicht sicher, ob sich das lohnt.

Gruß
Wolfram

[Sipple]

Ich finde beide Varianten sehr schön.
Allerdings, sehe ich das richtig, dass Variante 1 auf Tablets und Smartphones nicht funktioniert, weil es das Hover Ereignis nicht gibt?

[wvhn]

Auf meinen iOS/iPadOS-Geräten klappt der hover event, wenn man unmittelbar unter den Button tippt. Das geht halbwegs intuitiv. Unter Android kann ich es gerade nicht testen.

Gruß
Wolfram

[Sipple]

Hallo Wolfram

Ich habe das eben mal probiert. Das Hover Event klappt auf dem PC wie erwartet (abgesehen von der von dir ja schon erwähnten Positionierung).
Auf Android habe ich das nicht hinbekommen. Ich habe auch einen Artikel gefunden, der beschreibt, dass Android sich anders verhält als iOS.
iOS scheint zwei click Events zu verarbeiten, Android nur eins, wenn ich es richtig verstanden habe.

Gruß, Martin

[Sipple]

Guten Morgen

Variante 2 probiert. Das ist eigentlich genau das, was meine Liebste sich gewünscht hat (von ihr kam der ursprüngliche Wunsch).
Eigentlich nur noch ein Problem: Das Icon hat die volle Größe. Sollte die Größe wie auf der Config-Seite haben.
Ich schätze, das geht über img class=.....
Was muss man da verwenden um es kleiner zu bekommen? So in etwa wie bei basic.stateswitch micro.

[wvhn]

Moin Martin,

Da habe ich nicht aufgepasst. Ursprünglich war der Code noch in ein div-Tag gesetzt, das die Klasse .ui-help-container trug. Da stimmte die Größe. Entweder machst Du das auch so:

<div class="ui-help-container">
    <a href="#{{ page }}_test_hint" data-rel="popup" class="ui-help-icon" data-transition="pop"><img class="icon icon1" src="icons/ws/message_help.svg" alt="help"></a>
    <div data-role="popup" id="{{ page }}_test_hint" data-arrow="true" data-theme="c">Dies ist mein Hilfetext</div>​​
</div>​

oder Du nimmst folgende Definition in die visu.css, so dass die Klassen ui-help-container und ui-help-icon auf dieselbe Ebene bezogen werden:

.ui-help-container.ui-help-icon img.icon1,
.ui-help-container.ui-help-icon svg.icon1 {
    width: 2em;
    height: 2em;
}​

Gruß
Wolfram

P.S: das div kann das Widget basic.stateswitch auch mit einbeziehen. Das musst Du sehen, wie das vom Layout her am besten passt.

[Sipple]

Moin Wolfram

Ich habe beide Varianten versucht, mit drei Browsern (Chrome, Edge, Firefox). Chrome und Edge sind bei mir nur Not-Brwoser zum Testen. Keine Plugins oder sonstige Erweiterungen, Cache und Cookies auf beiden komplett gelöscht. Firefox lösch ich das Cache nur, wenn es nicht mehr anders geht und dann wenn möglich selektiv.
In keinem Browser funktionieren die beiden Möglichkeiten, also weder das zusätzliche div, noch der Eintrag in der visu.css (in meinem Page-Ordner).
Vielleicht übersehe ich da was und man muss noch extra was in den Browsern löschen?

[wvhn]

Sorry, Martin. Ich hab das unterwegs zwischen zwei Terminen aus dem Gedächtnis beantwortet. Jetzt sitze ich im ICE und konnte das nochmal testen.

Die Klasse class="ui-help-container" darf nur im übergeordneten <div> stehen und muss aus dem <a>-Tag entfernt werden. (Habe ich oben angepasst.)
Wenn man ohne das <div> arbeitet, müssen die beiden Klassen in ein gemeinsames Statement class="ui-help-container ui-help-icon", damit das mit dem Code in der visu.css klappt.

Gruß
Wolfram

[Sipple]

Läuft wie gewünscht

grafik.png

Danke wieder einmal.

Gruß, Martin

[wvhn]

Im develop branch ist jetzt auch eine Doku-Seite "design > tooltips" für die Inline-Doku mit Beispielen für den Tooltip und das Hilfe-Popup .

Gruß
Wolfram