FTUI version 3

octek0815 · 10 Dezember 2021, 10:38:22

Zitat von: setstate am 10 Dezember 2021, 10:30:02
ja, an ftui-row height habe ich gestern was geändert. Es war falsch implementiert und funktioniert jetzt erst, wie es sollte.
100% muss sich auf die Höhe des Containers beziehen. Das tat es vorher nicht.

Deine height-Werte, vermutlich durch Probieren ermittelt, müssten angepasst werden.

Alles klar, danke für die schnelle Antwort.

grossmaggul · 10 Dezember 2021, 11:41:29

Ich habe hier ein Popup mit recht viel Text (DWD Warnwetter), mir ist so, daß der Text vor einiger Zeit noch umgebrochen wurde, wenn er nicht in die Box passte, jetzt wird er einfach zusammengeschoben(s.u.), wenn er nicht in die Box passt oder irre ich mich da?
Oder gibt es eine Möglichkeit, die ich übersehen habe, den Text in einem Label umzubrechen?

Code Auswählen

<ftui-column width="80%" class="semitransparent">
            <ftui-row>
			<ftui-label class="size-3" [text]="DWD:{{warn-number}}_headline"></ftui-label>
           
			<ftui-label class="size-2" [text]="DWD:{{warn-number}}_description"></ftui-label>
            
			<ftui-label [text]="DWD:{{warn-number}}_instruction" 
                        [hidden]="DWD:{{warn-number}}_instruction | step(':true, .*:false')">
            </ftui-label>
            </ftui-row>
</ftui-column>

octek0815 · 10 Dezember 2021, 12:29:31

Zitat von: grossmaggul am 10 Dezember 2021, 11:41:29
Ich habe hier ein Popup mit recht viel Text (DWD Warnwetter), mir ist so, daß der Text vor einiger Zeit noch umgebrochen wurde, wenn er nicht in die Box passte, jetzt wird er einfach zusammengeschoben(s.u.), wenn er nicht in die Box passt oder irre ich mich da?
Oder gibt es eine Möglichkeit, die ich übersehen habe, den Text in einem Label umzubrechen?

Code Auswählen Erweitern
<ftui-column width="80%" class="semitransparent"> <ftui-row> <ftui-label class="size-3" [text]="DWD:{{warn-number}}_headline"></ftui-label> <ftui-label class="size-2" [text]="DWD:{{warn-number}}_description"></ftui-label> <ftui-label [text]="DWD:{{warn-number}}_instruction" [hidden]="DWD:{{warn-number}}_instruction | step(':true, .*:false')"> </ftui-label> </ftui-row> </ftui-column>

Kann ich bestätigen.

mr_petz · 10 Dezember 2021, 12:44:22

Ja. im Label ist white-space: nowrap aktiv.
Ist bei setstate auf der Demo vom Label unter Long zusehen.
Dort sollte scroll aktiv sein. wird aber durch nowrap verhindert..
Abhilfe kann erstmal "nur" style="white-space: normal;" im Label helfen...
LG mr_petz

Edit: setstate hat was am Label geändert. Also testen ob es wieder geht...
ps: mit scroll Attribute wird jetzt umgebrochen...

blenni · 10 Dezember 2021, 13:41:42

Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html

Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstannd, aber rechts geht die Markierung über die Leiste hinaus.

mr_petz · 10 Dezember 2021, 15:16:02

@setstate

Hi. Könntest du bitte beim popup in der class .window bei gesetzten shape="round" den border-radius von einer user.css ansprechen lassen?
Ich habe vieles versucht ohne Erfolg. Mir ist der Radius von 1.5em bissl zu stark..
Oder gib mir bitte einen Tip wie ich den Eintrag:

Code Auswählen


:host([shape="round"]) .window {
  border-radius: 1.5em;
}

ansprechen kann.
Danke und LG mr_petz

stefan-dd · 10 Dezember 2021, 16:46:38

So passt es von der Anordnung, Danke.
Noch etwas...
Ich möchte den Pfeil aus "ftui-dropdown" weg haben. Wenn ich in der "dropdown.component.css" die Schriftgröße auf 0 setzte passt es. Dies ist ja die schlechteste Möglichkeit für Änderungen.

Code Auswählen

:host:after {
  font-size: 0rem;
}

Gibt es eine "user.css" ? Wie kann man diese Änderung dauerhaft implementieren?
So funktioniert es auch nicht:

Code Auswählen

          <ftui-dropdown font-size="0" [list]="Rollo_EG_O_AZ:ftui"
                                    [value]="Rollo_OG_O_Ankleide:pct"
                                    (value)="Rollo_OG_O_Ankleide pct $value"></ftui-dropdown>

setstate · 10 Dezember 2021, 17:21:06

ich habe dafür jetzt erst einmal ein nochevron Attribute eingebaut. Namensvorschläge zur Umbenennung sind willkommen

Code Auswählen

<ftui-dropdown list=",item1,item2,item3" value="item2" nochevron></ftui-dropdown>

setstate · 10 Dezember 2021, 17:32:15

Zitat von: mr_petz am 10 Dezember 2021, 15:16:02
@setstate

Hi. Könntest du bitte beim popup in der class .window bei gesetzten shape="round" den border-radius von einer user.css ansprechen lassen?
Ich habe vieles versucht ohne Erfolg. Mir ist der Radius von 1.5em bissl zu stark..
Oder gib mir bitte einen Tip wie ich den Eintrag:
Code Auswählen Erweitern
:host([shape="round"]) .window { border-radius: 1.5em; }
ansprechen kann.
Danke und LG mr_petz

es gibt jetzt --popup-border-radius

Code Auswählen


    #pop3 {
      --popup-border-radius: 0.5em;
    }

mr_petz · 10 Dezember 2021, 18:03:00

Zitat von: stefan-dd am 10 Dezember 2021, 16:46:38
...
Gibt es eine "user.css" ? ...

Die musst du dir selber anlegen im themes-Ordner am besten und dann im <head> Bereich nach allen anderen css links mit einfügen.
Bsp.:

Code Auswählen


<link href="themes/user.css" rel="stylesheet">

@setstate
Danke funzt.

Code Auswählen


ftui-popup {
  --popup-border-radius: 0.5em;
}

LG mr_petz

mr_petz · 10 Dezember 2021, 18:22:50

@setstate

Zum chevron Symbol hatte ich auch schonmal was geschrieben.
Bei mir wird es garnicht angezeigt, weil ich kein apple-system und keine Segoe UI Symbol-Schriftart besitze.
Es wird stattdessen ein X angezeigt.
Ich hatte damals darum gebeten ein anderes Symbol oder Zeichencode oder nur das kleine v zuverwenden.
Wäre das in einer anderen Form möglich das darzustellen oder das auch per Bsp.: --dropdown-content-chevron zu deklarieren?
Danke und LG mr_petz

Edit:

Code Auswählen


\02C5 (U+02C5)

sollte für alle Fonts gehen...

setstate · 10 Dezember 2021, 19:03:12

ich habe jetzt var(--dropdown-chevron, "\2335"); eingesetzt

mr_petz · 10 Dezember 2021, 19:32:22

Danke funktioniert

meier81 · 10 Dezember 2021, 19:33:49

Zitat von: blenni am 10 Dezember 2021, 13:41:42
Ich habe auch noch einen kleinen Fehler entdeckt - bei Segmented Buttons ist die Markierung für die aktive Auswahl etwas zu groß und zu weit nach rechts verschoben.
Kann man auch im Beispiel sehen:
https://knowthelist.github.io/ftui/www/ftui/examples/segment.html

Ist das Feld ganz links ausgewählt, kann man links noch einen grauen Rand erkennen, der Trenner rechts ist kaum sichtbar.
Ist das Feld ganz rechts ausgewählt, ist vom Trenner zur Markierung ein kleiner Abstannd, aber rechts geht die Markierung über die Leiste hinaus.

Kann ich so bestätigen, eben Update gemacht auf die aktuelle Version, da ist es jetzt bei mir auch so.

Gruß Markus

stefan-dd · 10 Dezember 2021, 21:08:31

Ich möchte folgenden Code vereinfachen:

Code Auswählen

          <ftui-icon [name]="Rollo_OG_O_Ankleide:position | map('0: fts_shutter_10, 10: fts_shutter_10, 20: fts_shutter_20, 30: fts_shutter_30, 40: fts_shutter_40, 50: fts_shutter_50, 60: fts_shutter_60, 70: fts_shutter_70, 80: fts_shutter_80, 90: fts_shutter_90, 100: fts_shutter_100, drive-up: fts_shutter_up, drive-down: fts_shutter_down')"
                                  [color]="Rollo_OG_O_Ankleide:position | map('0: green, `.*`: red, d.*: yellow')"></ftui-icon>

Meine Idee wäre so:

Code Auswählen

map(': fts_shutter_.$value, drive-up: fts_shutter_up, drive-down: fts_shutter_down')"

Wie kann ich die Werte für den Bildnamen zusammensetzen?

Code Auswählen

fts_shutter_.$value