Farbwähler mit numerischer Anzeige

  • App
    WoltLab Suite Core

    Es wäre enorm hilfreich wenn man bei der Änderung der Farbe eine numerische Anzeige hätte damit man weiß wo genau sich die Auswahl befindet. Weiß nicht was da sinnvoll wäre, 1-100? Vielleicht könnte man sogar ein Imputfeld dafür einfügen.


    So könnten auch Laien einfach Farbpaletten ändern ohne das es jedes mal nach Unfall aussieht 🚑



    Edit:


    Wäre ein Inputfeld mit 0-360 machbar?


    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

    Edited 2 times, last by Hundiiiiiiiiii ().

  • Warum? Ist doch eher nicht Sinn der Sache das beim Verschieben der Markierung der umliegende Text markiert wird. Oder ich habe die Funktion nicht verstanden 🤔

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Bitte was? So wähle ich meine Farben aus. Für mich bräuchte es keinen Farbpicker. Der ist eine nette Spielerei für alle, die eine Farbe nach ihrem Bauchgefühl auswählen. Aber die Textfelder sind das wesentliche Feature, denn hier lassen sich präzise die Farben definieren, die man möchte.


    Glückwunsch. Du hast das ebenfalls missverstanden ^^

  • Er meint nicht die Eingabe des Textes, sondern dass man anscheinend den vorhandenen Text auswählt, wenn man was an der seitlichen Leiste des Colorpickers verschiebt.

  • Aber das Problem habe ich auch gar nicht oO

    Könnte natürlich ein Safari-Problem sein 😅


    0-360? weil es hue ist, wenn man die Farbe per HSL definiert?

    Das klingt doch gut 😎

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Könnte natürlich ein Safari-Problem sein

    Moin

    Nein unter Windows 10 Firefox aktuell habe ich das auch.

    Aber nicht erst seit 5.4

    Ich tippe mal das ist so nicht gewollt, vielleicht kann das Team ja was dazu sagen 8)

  • Vermutlich sollte dafür ein eigenes Thema erstellt werden. Denn mit dem initialen Wunsch hat das nicht viel zu tun.


    Zu selbigem: Wozu soll diese Skala dann gut sein, die keinen wirklichen Wert definiert? Damit man bei mehreren Eingabefeldern exakt an derselben Position ist? Das wird trotz Skala schwierig, insbesondere da man nicht jeden Prozentpunkt genau abbilden kann.

    • Official Post

    Hallo,


    mit WoltLab Suite 5.5 ist der Farbwähler bereits überarbeitet worden und nutzt ein <input type="color"> in Verbindung mit einem Opacity-Slider:



    Die genaue Darstellung des Farbwählers hängt dann vom jeweiligen Betriebssystem ab.

  • …ist der Farbwähler bereits überarbeitet worden…

    Das ist riesiger Rückschritt geworden. Auf macOS benötigt es nun zwei zusätzliche Klicks um eine Farbe, wie bisher über den Regler, zu ändern. Ich sehe da auch keine Umsetzung meines Vorschlags, die Funktion des macOS-Farbwählers entspricht der bisherigen Funktionsweise des alten Farbwählers nur in aufwendig. Ich sehe in dem neuen Farbwähler überhaupt keinen Vorteil 🤷‍♂️


    Edit:


    50% Transparenz mit einem unbeschrifteten Slider über 7F einstellen? An wen genau soll sich denn die Funktion richten? An Leute die SVG-Zeichnungen per Texteditor erstellen?

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

    Edited once, last by Hundiiiiiiiiii ().

  • ich kann mich dem leider nur anschließen. War bestimmt gut gemeint, aber ist zumindest aktuell nicht wirklich zu gebrauchen - zumindest unter macOS.

  • nicht, dass das benutzerfreundlich wäre (und sowas sollte nicht nötig sein, aber an dem Punkt sind wir offenbar): Ich hab da mal ne kleine Liste mit den Codes für Alpha-Channel gefunden

    Hexadecimal color code for transparency
    Hexadecimal color code for transparency. GitHub Gist: instantly share code, notes, and snippets.
    gist.github.com

    • Official Post

    Wir haben uns in den letzten Wochen Gedanken über den Farbwähler gemacht und sind ebenfalls zu dem Schluss gekommen, dass das native Element zu weit hinter euren und unseren Erwartungen bleibt.


    Neben den Eingabefeldern ist für uns auch die Möglichkeit wichtig gewesen, sinnvoll eine Farbe auszuwählen, statt diese nur als Zahlenwert von einem externen Programm zu übernehmen. Das Farbfeld samt dem Slider in der alten Version sah zwar relativ hübsch aus, war funktional aber eher eingeschränkt und insbesondere via Touch nicht vernünftig bedienbar. Auch wenn man argumentieren kann, dass die Stilerstellung auf dem Smartphone nicht gerade häufig ist, so kommt der Farbwähler potentiell auch im Frontend im Einsatz, daher musste auch hier eine Lösung her.


    Für die Eingabe von Farbwert, Sättigung und Helligkeit verwenden wir Slider, die technisch auf dem nativen Element input[type="range"] basieren und lediglich mit einer Kombination von CSS-Variablen und CSS-Verläufen optisch angepasst wurden. Dies stellt sicher, dass die Eingabe auch via Touch bequem und ziemlich präzise möglich ist, darüber hinaus können wir so auch die Barrierefreiheit gewährleisten. Die Farbe im „Bedienknopf“ passt sich übrigens live an den ausgewählten Farbwert an.


    Die Eingabe der Farbwerte für RGBA orientiert sich an der neueren Syntax rgba(r g b / a) und ist insbesondere aus Platzgründen gewählt worden. Der Leerraum an der rechten Seite der Eingabefelder für R, G, B und A werden übrigens von den Bedienelementen zum Erhöhen/Verringern des Wertes eingenommen, unter macOS werden die aber standardmäßig nicht angezeigt.


    Desktop



    Smartphone


Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!