You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2021/01/06 14:08:20 UTC

[GitHub] [superset] michael-s-molina commented on issue #12294: [cosmetic][explore] Filters popup on Explore - confusing UI experience

michael-s-molina commented on issue #12294:
URL: https://github.com/apache/superset/issues/12294#issuecomment-755318715


   @junlincc We have some decisions to make. 
   
   Let's start with item 1:
   
   The check mark is a pattern adopted by AntD and actually it makes sense when you analyze the context. Look at the following picture:
   
   <img width="378" alt="Screen Shot 2021-01-06 at 9 24 13 AM" src="https://user-images.githubusercontent.com/70410625/103768269-f7a5ea80-5000-11eb-9f01-3c8b1e2acf07.png">
   
   This filter has value suggestions and the check mark is indicating which of these suggestions are selected. It gets a little strange when we don't have suggestions enabled (`Autocomplete Filters` disabled in dataset config) because only the selected items appear. So we have two options: leave as it is or hide the dropdown when the suggestions are disabled. Like this:
   
   <img width="336" alt="Screen Shot 2021-01-06 at 10 30 24 AM" src="https://user-images.githubusercontent.com/70410625/103773700-3a1ff500-500a-11eb-8b57-403c8a64bebd.png">
   
   To resolve item 2 what we can do is limit the height of all select items and create the necessary space to accommodate the options. Like this:
   
   <img width="375" alt="Screen Shot 2021-01-06 at 9 12 13 AM" src="https://user-images.githubusercontent.com/70410625/103774295-18733d80-500b-11eb-8da4-feb3b9bf5d26.png">
   <img width="373" alt="Screen Shot 2021-01-06 at 9 12 37 AM" src="https://user-images.githubusercontent.com/70410625/103774302-1ad59780-500b-11eb-83a5-eb8d393ca252.png">
   <img width="369" alt="Screen Shot 2021-01-06 at 10 54 26 AM" src="https://user-images.githubusercontent.com/70410625/103776002-98020c00-500d-11eb-9531-0d3569db0f79.png">
   <img width="367" alt="Screen Shot 2021-01-06 at 10 48 22 AM" src="https://user-images.githubusercontent.com/70410625/103775458-d5b26500-500c-11eb-9b44-0b2f888c6791.png">
   <img width="369" alt="Screen Shot 2021-01-06 at 10 59 08 AM" src="https://user-images.githubusercontent.com/70410625/103776459-3db57b00-500e-11eb-9c62-d79f2786aa24.png">
   
   If I had to choose between higher selects on top of buttons vs scrolled selects with buttons always visible I would choose the first one. In fact we have a bunch of selects that cover some part of the UI when they are open.
   
   Let me know what you think 😉
   
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org