kifutraining 1.4.0 — Ein Feld sieht aus wie ein Feld

Fünftes Release von kifutraining, live auf ki-fu.ch. Nacharbeit am Designsystem aus 1.3.0, dazu eine sichtbare neue Fähigkeit. Keine Migration.

Die Suche lässt sich mit einem Klick leeren

Das Zeichen im Suchfeld steht neu rechts, dort wo das Passwortfeld sein Auge trägt: links steht Schmuck, rechts steht Bedienbares. Solange nichts eingegeben ist, sagt die Lupe, wofür das Feld da ist; sobald etwas dasteht, tritt an ihre Stelle ein Kreuz, das die Suche verwirft und den Cursor darin stehen lässt. Die übrigen Filter bleiben gesetzt.

Zu finden im Übungskatalog, in der Trainings-Übersicht, im Dialog zur Übungswahl und im Vorlagen-Dialog.

Ein Feld sieht überall aus wie ein Feld

Filterzeilen hatten bisher ihre eigene Bauform: getönte Fläche, Fokus-Ring statt Rahmen, kein Label, dafür ein Platzhalter als Beschriftung. Nebeneinander gestellt sahen die beiden nicht aus wie dasselbe Feld in zwei Höhen, sondern wie zwei Felder. Jetzt unterscheidet die dichte Bauform sich nur noch in der Höhe — 48 statt 56 Pixel, damit sie mit Auswahlfeldern und Chips fluchtet. Kontur, Radius, durchsichtige Fläche, Schriftgrad und Label sind dieselben.

Das Label sagt in zwei Lagen dasselbe

Ruhend steht es im Feld, an genau der Stelle, an der gleich der Wert stehen wird — also in der Schrift des Werts, unterschieden nur durch die blassere Farbe: Was dort steht, ist noch nichts Eingegebenes. Geschwebt sitzt es auf der Kontur und benennt das Feld nur noch: dieselbe Schrift, zwei Stufen kleiner.

Bisher wechselte es dabei auf Mono-Versalien. Aus «Name der Übung» wurde «NAME DER ÜBUNG» — gefühlt ein anderes Wort. Der Label-Stil des Hauses ruft Aufmerksamkeit, und ein Label, das gerade aus dem Weg gegangen ist, will keine. So liest sich ein Feld von oben nach unten in einer Schrift: Name, Wert, Hinweistext.

Auch die Auswahlfelder tragen dieses Label

• Einfachauswahl: Das Label schwebt immer — sie hat stets einen Wert, und sei es der Leerfall («— kein Feldtyp —»). Ein Label über dem Feld gibt es nicht mehr.
• Mehrfachauswahl: Ruhend steht dort der Leerfall in Worten («Alle Stufen»), genau da, wo gleich die Tags stehen. Beim ersten Wert schwebt an seiner Stelle der Name der Dimension («Alterskategorie») auf die Kontur. Zwei Sätze für zwei Zustände; für Vorlesehilfen bleibt der Name des Felds konstant.
• Datum und Uhrzeit liegen ebenfalls auf der Kontur. Schweben tun sie nicht: Ein natives Datumsfeld zeigt immer seine Maske und hat darum nie eine Ruhelage.

Ein Label ausserhalb der Kontur gibt es damit nirgends mehr.

Kleinere Folgen

• Das Dauerfeld einer Übung im Training zeigt kein Uhr-Symbol mehr — es heisst jetzt sichtbar «Minuten», und neben dem Symbol blieb in einem 112 Pixel schmalen Feld kein Platz. Der volle Name «Dauer in Minuten» bleibt für Vorlesehilfen erhalten.
• Der Filter «Verfügbare Kinder» im Übungskatalog ist etwas breiter, damit sein Label hineinpasst.

Unter der Haube

SearchField ist ein neuer Baustein im Kit; den Platz am rechten Feldrand teilt es sich mit dem Passwortfeld. Das Kreuz meldet sich über dasselbe onChange wie eine Tastatureingabe — kein zweiter Rückkanal, den eine Aufrufstelle vergessen könnte, und die verzögerte Katalogsuche verzögert auch das Leeren. Die drei Klassenbündel des Labels stehen als feldLabelBase / -Ruhend / -Schwebend im Textfeld; Text-Area, Datum, Einfach- und Mehrfachauswahl bedienen sich dort. Der Styleguide unter /styleguide ist in den Abschnitten 14, 16 und 17 nachgeführt.