Document Component: Mark en highlight functionaliteit

[mduijsens]

Voor het zoeken in een document hebben we een highlight functie nodig in de content van een document. Eerder besproken dat dit aan de hand van de Mark functionaliteit zou moeten gebeuren. We verwachten de volgende styling:

Geel voor de actieve geselecteerde markering (we steppen namelijk door de resultaten) en een geel-20 voor wel gevonden maar niet actief.

Renvooi Er hoeft geen andere kleurpallet gedaan te worden voor Renvooi omdat de tekst al een specifieke renvooi styling heeft (schuingedrukt en overstreept voor toegevoegd en schuingedrukt en doorstreept voor verwijderd). Zie voorbeeld:

[hansgrimm]

Moet nog nader uitgewerkt worden.

[mduijsens]

Ik heb Renvooi bekeken en toegevoegd. :) Conclusie is markeren veranderd wél de kleur, maar niet te tekststyling.

[tfrijsewijk]

De gevonden term wint van de renvooiweergave. Voor termen die kleiner zijn dan de renvooiweergave is dat prima, en in het geval van een verwijder-instructie is het helemaal duidelijk vanwege de doorgehaalde tekst.

Maar heb je rekening gehouden met de situatie waar de zoekterm gelijk is aan een toegevoegde term? Ofwel, "het geel" bedekt "het groen" in z'n geheel.

[tfrijsewijk]

@mduijsens Heb jij mijn opmerking hierboven nog gezien?

[mduijsens]

Antwoord op je message van vorige week: Ja, groene teksten zijn schuingedrukt en onderstreept, daarmee nog steeds zichtbaar.

Sessie 30 oktober 2023: Bespreken van de memo Wat deze story moet doen:

1. Alle matches highlighten.
2. Current item tonen met identificatie.
3. Scroll to functionaliteit toepassen voor het geval dat hij buiten de viewport valt.

Overige besproken items:

• "Tab "(met spatie) zorgt ervoor dat we NIET "tabel" vinden.
• We zijn er nog niet helemaal over uit wat we willen met een scenario waarin we 'onterechte matches' krijgen door het parsen van de xml (bijv. tabel column 1: Bijlage column 2: 1, je zoekt op Bijlage 1).
• IHR documenten zijn anders. We hebben al automatisch een next-link aanroepen besproken in de refinement van viewer, daarmee zou het niet blokkerend moeten zijn. Hier moeten we zelf de mark bouwen, omdat dat niet XML is.

[tfrijsewijk]

@mduijsens Het valt mij nu pas op dat bij de "voegtoe" renvooiweergave een underline is toegevoegd. Een underline wordt over het algemeen geassocieerd met een link en kan daarom verwarrend zijn. Zullen we eerst alleen de schuingedrukte tekst proberen?

[hansgrimm]

Eens. nooit een underline op tekst waar dat geen link is. Schuingedrukt is ook niet ideaal, maar onderstreept is echt geen optie.

[hansgrimm]

Er zijn nog alternatieve underline stijlen: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style Support is prima vandaag de dag: https://caniuse.com/?search=text-decoration-style

[mduijsens]

@tfrijsewijk Ik wil niet zo maar nu Renvooi gaan veranderen. Ik neem het mee om te bespreken, maar zou willen opteren om nu niet aan Renvooi te gaat zitten. ;) Ik ben zelf niet betrokken geweest bij die keuzes en de signalen van mensen tot nu toe mbt Renvooi zijn volgens mij heel positief, dus voor ons nu geen reden om dat anders toen. Ik ga dit wel even dubbel checken.

[tfrijsewijk]

Ik wil niet zo maar nu Renvooi gaan veranderen. Ik neem het mee om te bespreken, maar zou willen opteren om nu niet aan Renvooi te gaat zitten. ;)

Dus jouw aanpassingen (schuin en onderstreept) op de renvooiweergave in bovenstaand ontwerp gaan we niet doorvoeren? In dat geval zie je geen renvooiweergave voor tekst die in z'n geheel is gemarkeerd.

[hansgrimm]

In dat geval kunnen we ook nog sleutelen aan de underline style ;)

[DjangoBlok]

Er blijkt een misverstand te zijn over de styling van renvooi weergave. Die underline en cursieve tekst hoort er niet in te zitten. Het ontwerp was gebaseerd op dit voorbeeld: https://snapshot.document-viewer.dso.kadaster.nl/viewer/(documentresult//rechter-paneel:document/_akn_nl_act_gm9920_2023_AD_Proefversie_akn_nl_bill_gm9920_2023_B_AD_ProefversieONTW/regels)?id=_akn_nl_act_gm9920_2023_AD_Proefversie_akn_nl_bill_gm9920_2023_B_AD_ProefversieONTW

In dat document blijkt een definition list te zitten die nog niet bewust is gestyled en nu wordt onderstreept en cursief wordt weergegeven. Dat is niet de bedoeling. @tfrijsewijk kun jij een story aanmaken om in ieder geval de onderstreping van de definition list af te halen.

We hoeven dus niet te sleutelen aan de underline stijl.

[tfrijsewijk]

Stavaza:

cc: @DjangoBlok @mduijsens

[tfrijsewijk]

Ik heb de kleuren met een color picker uit de ontwerpen gehaald:

$mark-color: #f8f5ce;
$highlight-color: #dbd136;

Deze kleuren zitten niet in het palet.

• De kleur die eerst op <mark> stond was $geel-20: #f8f6cc.
• De kleur voor het highlighten van een zoekopdracht lijkt vreselijk veel op de kleur die we bij Label: Warning gebruiken: $geel: #dcd400.

@mduijsens hoe ben jij aan deze kleuren gekomen? Zijn de kleuren die in het palet zitten niet toereikend?

[mduijsens]

Ik heb gewoon de geel uit sketch library gebruikt :)

[tfrijsewijk]

Ah dan ligt het aan de image picker icm. image compression. Ik pas ze aan.