Kategoriefunktionen: ein Menü und einen Blink direkt in eine Kategorie erfassen

Was sich geändert hat

Jede Kategoriefunktion — in Blinks, Zielen, Projekten und Unternehmen — hatte zuvor fünf Steuerelemente: den Namen, ein Zähl-Abzeichen und Schaltflächen für Profil, Bearbeiten und Löschen sowie ein “+” zum Hinzufügen einer Unterkategorie. Auf einem Telefon umschlugen diese Schaltflächen in eine zweite Zeile und die Reihe wirkte überladen.

Eine Reihe zeigt jetzt zwei Dinge nach dem Namen und der Zählung:

• ein Catch-a-Blink-Symbol, das einen neuen Blink direkt in diese Kategorie ablegt;
• ein “…”-Menü, das Profil, Bearbeiten, Unterkategorie hinzufügen und Löschen enthält.

Somit hat die Reihe ein Feature gewonnen und gleichzeitig drei Steuerelemente verloren. Löschen befindet sich als letztes im Menü mit einem Trenner darüber, da eine destruktive Aktion niemals die sein sollte, die dein Daumen aus Versehen findet.

Ein Blink in eine Kategorie erfassen

Klicke auf das Fang-Symbol in einer beliebigen Reihe und das normale Blink-Formular öffnet sich mit dieser Kategorie bereits ausgewählt im Verknüpfungs-Tab. Fülle es wie gewohnt aus. Wenn du speicherst, kommst du zurück zur Kategorieseite, von der du gestartet bist, sodass du sofort einen weiteren ablegen kannst ohne zurück navigieren zu müssen.

Bei dem Formular ändert sich nichts — es ist dieselbe Seite, dieselben Felder und dasselbe Speichern. Der einzige Unterschied ist, wo du begonnen hast und wo du landest.

Welche Apps haben was

Die ruhige Reihe und das “…”-Menü sind in allen vier Apps vorhanden, da sie eine Reihenkomponente teilen. Zwei Menüelemente erscheinen nur dort, wo sie tatsächlich funktionieren können:

• Unterkategorie hinzufügen — Blinks nur vorerst. Die Erstellungsseiten der anderen drei Apps können noch keine übergeordnete Kategorie akzeptieren, und ein Steuerelement anzubieten, das stillschweigend nichts tut, ist schlimmer als es gar nicht anzubieten.
• Das Fang-Symbol — Blinks nur vorerst, aus demselben Grund: Nur das Blink-Formular kann derzeit mit einer vorausgewählten Kategorie geöffnet werden. Jede der anderen Apps kann es später aktivieren, indem sie einen zusätzlichen Wert an die Reihe übergibt; kein neuer Code ist für das Verhalten selbst nötig.

Tastatur und Bildschirmlesegeräte

Beide Symbole tragen den Namen der Kategorie in ihrem Label — “Einen Blink in Arbeit erfassen”, “Weitere Aktionen für Arbeit” — weil jemand, der die Seite Reihe für Reihe hört, wissen muss, welche Reihe spricht. Das Menü öffnet sich mit der Tastatur, schließt mit Escape und bewegt den Fokus durch seine Elemente. Das Klicken auf den Kategoriennamen öffnet weiterhin die Kategorieseite, genau wie zuvor.

Für Entwickler

Das Menü ist ein Bootstrap-Dropdown, das mit dem vorhandenen .of-dropdown-menu skinned ist — kein sechstes Expand/Collapse-Muster. Ein Menü ist keine Offenlegung: <details> kann nicht über der Reihe schweben, also würde es die Liste öffnen, anstatt sie zu überlagern.

Der Rückkehrpfad ist an beiden Enden validiert. Der next Wert kommt in einer Abfrage Zeichenfolge, also wird er vom Angreifer gewählt: er wird abgelehnt, es sei denn, es ist ein Pfad zur gleichen Seite sowohl beim Rendern des Formulars als auch beim Umleiten des Speicherns. Ein schematisch-relativer //host wird ebenfalls abgelehnt — er beginnt mit einem Schrägstrich und würde eine naive Überprüfung bestehen.

Zwei Fallen, die beim Erstellen dieser gefunden wurden, die es wert sind zu wissen: min-w-0 ist keine Klasse in diesem Codebasis (die Hausklasse ist of-min-w-0), und fünf stille No-ops waren der Grund, warum die Reihe auf einem Telefon überlief; und btn-outline-* sind Bootstrap-Farbenklassen, die der Design-Ratscher derzeit nicht zählt, sodass sie unbemerkt akkumulieren können.