UI Mockup of Search and Filtering Functionality
hemangsk opened this issue · 5 comments
Heyo everyone! For phase 3 of GSoC, I will be working on UI enhancement of coala-html. That is adding search functionality, and filtering on the basis of several parameters.
What I've been thinking is that the search bar should look like the one for the coala Online module as that will give a feel of consistency throughout.
For result filtering, these parameters can be used,
- Severity
- Bears
- Files
So,
It'd be really great if you share your thoughts.
Filter by Files
I don't think this should be a dropdown, rather a textbox which live filters. TBH I think this can be removed fully in favour of the "omni search bar above"; as for the other filters, I'd go with the chip style that we also have for bear seletion on https://coala.io/#!/tryonline
Search Bar
- should have same width as results IMO
Overall design
Can we use the coalaCSS? Also IMO we should use the same design which we're using for the other websites.
Missing Bits
I think the logs and files view are also important to consider.
Sounds good, making the new UI with the changes.
Can we use the coalaCSS? Also IMO we should use the same design which we're using for the other websites.
totally, sounds like a plan. And if this search bar with coala icon in the button looks good, then we can add this search bar in coalaCSS. Use it couple of places like coala Online module. It can generally serve the purpose wherever a button is required to run coala.
I think the logs and files view are also important to consider.
on it
Results View with omni search bar & filters for bears
Log View
- Cards from coalaCSS for logs
Files View
- Content Focussed
- No borders
- Relevant icons beingshown next to the file name
Home View
- Consistent with coala.io
- Transparent background in navbar
- Search, Tab Navigation and other components powered by coalaCSS
