status.toast Button Style ändern

[Sipple]

Hi Bonze

Ich habe versucht rauszufinden wo und wie eigentlich der optionale Button im status.toast "gestyled" wird.
Weder im ./vendor/jquery.toast/toast.css (oder auch jquery.toast.js) noch in ./widgets/status.html oder status.js bin ich fündig geworden.

Hintergrund ist der, dass der Button nur Text enthalten kann, womit ich leben kann, aber der Text schon sehr klein ist. Den hätte ich gern größer. Platz habe ich genug.
Eventuell auch noch die Buttonfarbe ändern.

Geht das überhaupt?

Danke, Martin

[wvhn]

Hi Martin,

der Button ist ein normaler jQuery mobile Button, der dynamisch aus den Optionen erzeugt und als html in den Toast geschrieben wird:

showText+='<br/><input class ="button ui-btn ui-mini ui-corner-all ui-btn-inline" id ="#'+id+'" type="button" value="'+sendButton+'" data-senditem="'+sendItem+'" data-sendvalue="'+sendVal+'" />';

Schau Dir das in den Browser-Tools an. (sorry). Klicke mit der rechten Maustaste auf den Button und wähle "Untersuchen" bzw. "Element untersuchen" aus dem Kontextmenü. Daraufhin öffnen sich die Browsertools schon an der richtigen Stelle und Du siehst, welche Klassen im Eingriff sind. Zudem werden die CSS Eigenschaften im Bereich neben dem Quelltext angezeigt (hier eingekringelt) und können dort auch live ausprobiert werden.
Screenshot 2022-01-04 114031.jpg
Jetzt musst Du Dir die Selektoren zusammen bauen, mit denen Du in Deiner visu.css die Stile verändern willst.
".ui-btn.ui-btn-inline.ui-mini" würde alle Buttons in smartVISU betreffen. Nimmst Du aus dem darüber liegenden div ".jq-toast-single" dazu, dann schränkst Du die Selektion auf alle Buttons in Toasts ein. Anders als der Toast selbst hat der Button die im Widget definierte id erhalten. Die kannst Du für weitere Einschränkungen nutzen.
Beispiel:

.jq-toast-single .ui-btn.ui-btn-inline.ui-mini{
    font-size: 1.2em;
}

Gruß
Wolfram

[Sipple]

Hi Wolfram

Super erklärt - somit total simpel und klappt. Sieht deutlich besser aus. Vielen Dank.

Gruß, Martin

EDIT: Falls es jemand brauchen kann, hier auch mit Farbe ändern. Eintrag in der visu.css der eigenen pages.

.jq-toast-single .ui-btn.ui-btn-inline.ui-mini{
    font-size: 1.5em;
    color: #FFFFFF;
    background-color: #2F4F4F;
}

Ergebnis:

Screenshot 2022-01-04 133722.png

[Bonze]

Extra den WAF faktor mit eingebaut ?


@whvn könnte man das eventuell auch anders machen mit diesem button? Vl direkt ein Widget in den html teil einbinden und nur den Anzeigetext o.ä. via js manipulieren ?

[Sipple]

Du meinst z.B. einfach einen basic.stateswitch? Wäre natürlich noch schöner und würde zum Design der Visu besser passen. Vielleicht geht das ganz einfach über den text_content Parameter. Probier ich nachher mal aus.

EDIT: Geht nicht. Man kann rudimentäres HTML im text_content parameter einbauen, aber kein ganzes widget. Verschluckt sich wohl an den Hochkommas/Anführungszeichen/Kommas. Evtl würde es gehn wenn man das irgendwie maskiert.

[wvhn]

Ich denke auch, dass es nicht geht. Aber wenn es nur um das Aussehen geht, reicht es, bei der neu eingeführten Option "class" ein "ui-page-theme-a" hinzuzufügen und im CSS ein bisschen an den Schriftfarben zu schrauben.

class: 'ui-page-theme-a '+(id != undefined ? id.split("-").slice(1).join("-") : '')

Sieht im ersten Schnellversuch nicht mal schlecht aus:
Screenshot 2022-01-04 at 22-58-15 Documentation [smartVISU].png

Ich lasse das Widget trotzdem erstmal unverändert.

Gruß
Wolfram

[Bonze]

vielleicht kann man nochn paramater einfphren um die größe direkt übern aufruf zu ändern, dann kann man große und kleine toast erstellen, wenn z.B: ein Bild drin ist, dürfte es ja schon Größer sein..