Hauptmenü

[FTUI3] Zeilenhöhe

Begonnen von Superposchi, 31 März 2023, 10:19:36

Vorheriges Thema - Nächstes Thema

Superposchi

Ich habe eine Liste von Labels und zugehöriger Checkbox (siehe Screenshot).
<ftui-row width="90%">
<ftui-label class="size-1" width="80%" text-align="left" text="Wohnzimmer:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ftui-label>
<ftui-checkbox width="20%" text-align="right" class="size-0" margin="0" [(value)]="" value="on" color="blue"></ftui-checkbox>
</ftui-row>
<ftui-row width="90%">
<ftui-label class="size-1" width="80%" text-align="left" text="Schlafzimmer:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ftui-label>
<ftui-checkbox width="20%" text-align="right" class="size-0" margin="0" [(value)]="" value="on" color="blue"></ftui-checkbox>
</ftui-row>
<ftui-row width="90%">
<ftui-label class="size-1" width="80%" text-align="left" text="Küche:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ftui-label>
<ftui-checkbox width="20%" text-align="right" class="size-0" margin="0" [(value)]="" value="on" color="blue"></ftui-checkbox>
</ftui-row>
<ftui-row width="90%">
<ftui-label class="size-1" width="80%" text-align="left" text="Diele:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ftui-label>
<ftui-checkbox width="20%" text-align="right" class="size-0" margin="0" [(value)]="" value="on" color="blue"></ftui-checkbox>
</ftui-row>
<ftui-row width="90%">
<ftui-label class="size-1" width="80%" text-align="left" text="Bad:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ftui-label>
<ftui-checkbox width="20%" text-align="left" class="size-0" margin="0" [(value)]="" value="on" color="blue"></ftui-checkbox>
</ftui-row>

Allerdings ist mir die Zeilenhöhe zu groß.
Aber egal was ich probiere, sie wird nicht kleiner.
Ich habe schon Text und Checkboxgröße auf den kleinsten Wert gestellt, trotzdem viel zu viel Abstand zwischen den Zeilen.

Was kann ich noch tun?

teichtaucher

Ich vermute du hast ein ähnliches Problem wie ich. Ich versuche gerade einen Spinner aus FTUI2 nachzubauen und will dass die Hoch- und Runterpfeile näher an die Zahl rutschen (siehe Screenshot). Ich habe deshalb mal den Button mit Farbe ausgefüllt. Mein Problem ist dass ich die Buttons nicht kleiner bekomme und deshalb die Pfeile nicht näher an die Zahl rutschen. Ich vermute du hast das gleich Problem mit den Checkboxen. Wenn hier jemand einen Tipp hat, bitte hier posten ;-)

Superposchi

Scheint so, als wenn das Grundproblem das gleiche ist.
Kannst du für deine Situation nicht das Timeset-Objekt verwenden?

teichtaucher

#3
Den Timeset habe ich auch schon ausgetestet. Prinzipiell ist der ganz nett, aber ich hätte gern die Buttons links und rechts neben dem Wert. Außerdem verwende ich einen speziellen Dummy der Readings für Stunde und Minute hat und über stateFormat wieder als Uhrzeit zusammenbaut. Da funktioniert der Timeset sind.
Aber zur Not baue ich das in FHEM um, dann kann ich auch Timeset nutzen. Bis dahin wollte ich aber mit den Buttons und den Pipefunktionen versuchen, weiterzukommen.
Eine Möglichkeit wäre noch, nur das Icon zu verwenden und mit onClick zu arbeiten. Ich weiß aber nicht wie man über JavaScript dazu kommt, einen FHEM Befehl mit PIPE Funktion abzusetzen.

mr_petz

@teichtaucher

pack mal alles in eine <ftui-cell>.
Für eine bessere Hilfestellung solltest du den code dazu posten.

LG mr_petz

teichtaucher

Das mit Cell habe ich auch schon probiert. Ich habe es genauso probiert wie in dem Beitrag von Eisix: https://forum.fhem.de/index.php?topic=115259.msg1179358#msg1179358

So sieht das Tile momentan aus:



        <ftui-grid-tile row="1" col="2" height="2" width="3">

          <ftui-row width="80%" height="10%">
            <ftui-label size="3">Rasensprenkler</ftui-label>
          </ftui-row>


          <ftui-row width="100%" height="10%">
            <ftui-label size="2">Start</ftui-label>
            <!-- Stunden -->
            <ftui-button [value]="ga.du.Sprinkler.Startzeit:Stunde"
              (value)="add(-1) | replace(-1, 23) | setreading ga.du.Sprinkler.Startzeit:Stunde" states="$value"
              debounce="400" color="success" margin="1px 1px">
              <ftui-icon size="-3" name="angle-down" color="light"></ftui-icon>
            </ftui-button>
            <ftui-label size="2" [text]="ga.du.Sprinkler.Startzeit:Stunde" color="light" margin="1px 1px"></ftui-label>
            <ftui-button [value]="ga.du.Sprinkler.Startzeit:Stunde"
              (value)="add(1) | replace(24, 0) | setreading ga.du.Sprinkler.Startzeit:Stunde" states="$value"
              debounce="400" color="success" margin="1px 1px">
              <ftui-icon size="-3" name="angle-up" color="light"></ftui-icon>
            </ftui-button>
            <!-- Minuten -->
            <ftui-button [value]="ga.du.Sprinkler.Startzeit:Minute"
              (value)="add(-1) | replace(-1, 59) | setreading ga.du.Sprinkler.Startzeit:Minute" states="$value"
              debounce="400" fill="" margin="1px 1px">
              <ftui-icon size="-3" name="angle-down" color="light"></ftui-icon>
            </ftui-button>
            <ftui-label size="2" [text]="ga.du.Sprinkler.Startzeit:Minute" color="light" margin="1px 1px"></ftui-label>
            <ftui-button [value]="ga.du.Sprinkler.Startzeit:Minute"
              (value)="add(1) | replace(60, 0) | setreading ga.du.Sprinkler.Startzeit:Minute" states="$value"
              debounce="400" fill="" margin="1px 1px">
              <ftui-icon size="-3" name="angle-up" color="light"></ftui-icon>
            </ftui-button>
          </ftui-row>
        </ftui-grid-tile>


teichtaucher

...ich muss mir mal selbst antworten. Ich habe die Stelle in button.component.css gefuden und eine weitere Größe für size angelegt:

:host([size="mini"]) {
  --border-radius: 1px;
  --padding-top: 0;
  --padding-start: 0.1em;
  --padding-end: 0.1em;
  --padding-bottom: 0;
  --button-height: 2em;
  font-size: 0.9em;
}

Ich habe die Werte für padding, border usw. runtergedreht. So sehen jetzt die Buttons aus.

@Superposchi
Vielleicht solltest du analog dazu in dem Stylesheet von den Checkboxen schauen.

Superposchi

Hey, etwas verspätet aber dennoch eine Antwort.
Bei den Checkboxen gibt es leider keine verschiedenen Grö0en, wird wohl aus einer der allgemeinen css-Dateien geregelt.
Also muss die Größe direkt geändert werden.
Wenn man 0.4em in 0.3em ändert passt es wesentlich besser.

Frage ist nur was bei einem Update passiert. So wie ich das verstehe müssten diese Änderungen bei einem Update ja wieder "rückgängig" gemacht werden.

mr_petz

Da jetzt mein Spruch wer suchet der findet am Osterwochenende passend ist...Bsp.:

Zitat von: mr_petz am 02 März 2023, 10:27:11Hi Joe,
entweder per style:
style="--grid-tile-border-radius: 1rem;"
oder global in einer user.css Bsp.:
ftui-grid-tile{
 --grid-tile-border-radius: 1rem;
}
oder:
  ftui-grid-tile[shape="round"]{
   --grid-tile-border-radius: 5rem;
  }

LG

Ihr müsst nur die ensprechenden:
  --border-radius: 1px;
  --padding-top: 0;
  --padding-start: 0.1em;
  --padding-end: 0.1em;
  --padding-bottom: 0;
  --button-height: 2em;
Einträge im style oder user.css benutzen und seid vor Update erstmal geschützt.
Diese und solche gibt es in den meisten Komponenten.
Nachzulesen in den css Files. Leider erstellt keiner dafür wikieinträge... :(
Also immer schön den Hauptthread durchsuchen...

:host([size="small"]) ist eine Vorbelegung und für ein Attribute im button gedacht.Bsp.:
            <ftui-button [(value)]="device"
             size="small">
            </ftui-button>
oder wie oben letztes Bsp. im Zitat:
<ftui-grid-tile row="1" col="35" shape="round">
</ftui-grid-tile>

Wie man eine user.css einbindet steht im Hauptthread.

LG