search

tesseract-olap / tesseract-ui

Interface for exploration/debugging of tesseract cube servers.
MIT License
5 stars 1 forks source link

update select styles #77

Closed walbuc closed 8 months ago

walbuc commented 8 months ago

Hey, @davelandry. Now when the user clicks the select field, the text will change the color & use theme.color.highlight defined in the Mantine Theme Provider. So, this way we can override it in any app.

See video with implementation.

https://github.com/tesseract-olap/tesseract-ui/assets/2966438/ab88a539-b121-43c4-8c3b-e4e2b03d5b55

davelandry commented 8 months ago

🤔 we're on the right track, but in my head the text becomes a little bit illegible when it is the highlight color. I could see this color working as a background color for the text, like with the appropriately named Highlight component 😆, but if we do that I'm worried it would interfere with the actual act of highlighting the input box text to search...

Is there a way that we can select all of the text in JS when the box first gets focus? That way, it will show the highlight color behind the text autotically, and if the user starts typing they will delete the entire string (instead of right now, their typing just appears wherever their cursor is positioned). I know we've done this "select all" focus in places where we display a data URL to be copy/pasted, but I'm not sure how much access we get into the mantine Select component here.

walbuc commented 8 months ago

🤔 we're on the right track, but in my head the text becomes a little bit illegible when it is the highlight color. I could see this color working as a background color for the text, like with the appropriately named Highlight component 😆, but if we do that I'm worried it would interfere with the actual act of highlighting the input box text to search...

Is there a way that we can select all of the text in JS when the box first gets focus? That way, it will show the highlight color behind the text autotically, and if the user starts typing they will delete the entire string (instead of right now, their typing just appears wherever their cursor is positioned). I know we've done this "select all" focus in places where we display a data URL to be copy/pasted, but I'm not sure how much access we get into the mantine Select component here.

@davelandry. Yeap, Highlight was the first thing that I tried but doesnt work well with the current implementation since input values can be only strings so. We could do it but it will require some refactor. I'm attaching a simple update that selects all the inner text & as you said if the user starts typing will delete the whole string and also highlights the text. Let me know if it is ok this way or if we should find another solution.

https://github.com/tesseract-olap/tesseract-ui/assets/2966438/3269f4b1-5763-4ce5-8bf6-c0a413021b12