Ankündigung

Einklappen
Keine Ankündigung bisher.

status.toast Button Style ändern

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    status.toast Button Style ändern

    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
    Zuletzt geändert von Sipple; 04.01.2022, 13:01.

    #2
    Hi Martin,

    der Button ist ein normaler jQuery mobile Button, der dynamisch aus den Optionen erzeugt und als html in den Toast geschrieben wird:
    Code:
    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:
    Code:
    .jq-toast-single .ui-btn.ui-btn-inline.ui-mini{
        font-size: 1.2em;
    }
    Gruß
    Wolfram

    Kommentar


      #3
      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.

      Code:
      .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
      Zuletzt geändert von Sipple; 04.01.2022, 13:37.

      Kommentar


        #4
        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 ?

        Kommentar


          #5
          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.
          Zuletzt geändert von Sipple; 04.01.2022, 20:47.

          Kommentar


            #6
            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.
            Code:
            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

            Kommentar


              #7
              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..

              Kommentar

              Lädt...
              X