Repository navigation
Ortsname im Logo grün füllen statt aussparen - #64
Merged
Merged
Conversation
Der Ortsname auf dem weissen Logobalken ist aus dem Balken ausgespart
(globalCompositeOperation destination-out), die Buchstaben sind also
durchsichtig und zeigen, was hinter dem Logo liegt. Auf der einfarbig
gruenen Flaeche ist das genau richtig.
Ueber einem Hintergrundfoto ist es falsch: Das Foto zeigt durch die
Buchstaben, der Ortsname flimmert und wird unleserlich — ausgerechnet der
Teil des Logos, der sagt, wer absendet.
- LogoState bekommt einen Aussparungs-Modus. Ist er aus, wird der Name
mit COLORS.BACKGROUND_SECONDARY gefuellt. Bewusst dieselbe Konstante,
die auch das Canvas-Rechteck fuellt — also genau das, was die
Aussparung sonst durchscheinen liesse. Auf einfarbigem Grund sehen
beide Modi damit identisch aus.
- Checkbox "Ortsname im Logo durchsichtig" in Schritt 1, mit Erklaerung.
- processMeme() schaltet die Aussparung beim ERSTEN Hintergrundbild ab
und merkt sich das. Wer danach bewusst zurueckstellt, wird von
weiteren Uploads nicht ueberstimmt.
- Fassade: setLogoKnockout(bool) und render({ logoKnockout }).
Vier Tests, darunter ein Pixelvergleich: Ueber einem unruhigen Foto
unterscheiden sich die Exporte beider Modi im Logobereich messbar. Null
Unterschied wuerde bedeuten, dass die Einstellung nichts tut.
VERSION auf 9.
Claude-Session: https://claude.ai/code/session_01Qtib9MPRZATQU3j9w7ymDk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Der Ortsname auf dem weißen Logobalken ist aus dem Balken ausgespart (
globalCompositeOperation: 'destination-out'). Die Buchstaben sind durchsichtig und zeigen, was hinter dem Logo liegt. Auf der einfarbig grünen Fläche ist das genau richtig.Über einem Hintergrundfoto ist es falsch: Das Foto zeigt durch die Buchstaben, der Ortsname flimmert und wird unleserlich — ausgerechnet der Teil des Logos, der sagt, wer absendet.
Die Lösung
LogoStatebekommt einen Aussparungs-Modus. Ist er aus, wird der Name mitCOLORS.BACKGROUND_SECONDARYgefüllt — bewusst dieselbe Konstante, die auch das Canvas-Rechteck füllt, also genau das, was die Aussparung sonst durchscheinen ließe. Auf einfarbigem Grund sehen beide Modi damit identisch aus; über einem Foto bleibt der Name lesbar.Es gibt im Code noch ein
LOGO_TEXT: "#257639"mit demselben Wert, laut Kommentar „retained for reference/back-compat". Ich habe bewusst nicht das genommen: Eine zweite Konstante, die zufällig übereinstimmt, hätte bei einer Farbänderung auseinanderlaufen können.Automatik
processMeme()schaltet die Aussparung beim ersten Hintergrundbild ab und merkt sich das. Wer danach bewusst zurückstellt, wird von weiteren Uploads nicht überstimmt. Dazu ein Hinweis über das Meldungssystem, damit die Umschaltung nicht unbemerkt passiert.Oberfläche und Schnittstelle
Checkbox „Ortsname im Logo durchsichtig" in Schritt 1, mit Erklärung darunter. In der Fassade
setLogoKnockout(bool)undrender({ logoKnockout }).Tests
Vier, darunter ein Pixelvergleich: Über einem unruhigen Foto werden beide Modi exportiert und die Bildpunkte im Logobereich verglichen. Sie müssen sich messbar unterscheiden — null Unterschied würde bedeuten, dass die Einstellung nichts tut.
Dazu ein Test, der festhält, dass die Füllfarbe nicht versehentlich das Magenta des Störers wird.
132 Jest grün, 111 e2e grün. VERSION auf 9.
https://claude.ai/code/session_01Qtib9MPRZATQU3j9w7ymDk