Create visual feedback as to what properties have "priority sorting" checked on

[RafaPolit]

Since there are many properties that can have "priority sorting" turned on, there needs to be visual feedback as to which properties has them. This is particularly critical due to the fact that only one property can be expanded at a time (maybe we could change this as well?) and there is no quick way of knowing what is ticked as priority.

[konzz]

Use the same icon in library to highlight which property is been used for sorting

[danicatalan]

@txau @RafaPolit what do you think about moving the Delete button inside the expanded panel? We decrease the noise on every item and it's perfect for displaying the icons next to the edit button. I also think this button needs to be modified to close the expanded panel:

[txau]

@danicatalan I think is a bad idea. Is not consistent with the rest of the interface. You are hiding the functionality to the users when they have already learnt a visual language. Just put the icon beside the delete?

The icon you've picked-up is the funnel for filtering. We decided to use the one for sorting in our last call. Any reason for this change of plan?

[danicatalan]

The design screenshot is not properly taken because I was focused on the "Delete property" button position, sorry.

The suggested icons are:

I'm not very conviced about the "Show in cards" one, I will look again in font-awesome but it works right now, just to get an idea of three icons next to the property buttons.

@txau I get your point of view about the Delete button, I will work on other approaches.

[danicatalan]

I've updated the Show in cards icon to one without a lot of detail to represent the "card" concept.

Also I updated the way to represent the active configuration on every property. The goal is to represent them next the edit and delete button. I think displaying all options it's interesting because it's easier to identify which is active and which is inactive. I don't know if adds value for the user to activate/deactivate them directly from those icons too.

Anyway, I think at this time we just need to implement the Priority sorting icon. We can add the rest of them later to not delay the implementation.

[txau]

If you are going to use them on the outside, you could use them on the checkboxes too?

[RafaPolit]

I like it! Should we allow clicking on those buttons? Ultra fast changing without expanding! They would be 'doubled' inside for confirmation and readability, but it could be really fast and fun to just click away those icons.

What do you guys think? p.s Damn close-and-comment button! 😋

[konzz]

Thought the same Rafa, I like the idea

[danicatalan]

Absolutely @RafaPolit, I think wr will need to remain both ways to edit the properties.

[konzz]

is this aproved by @txau ? can we move it to dev?

[danicatalan]

This is the same concept with the icons next the checkboxes:

In my opinion it doesn't add value - instead it distracts the readability of the form.

Also, we didn't thought about a "required" icon. Maybe we need to add it to be consistent... but I'm not a huge fan of required fields :(

Thoughts? @konzz @RafaPolit @txau

[txau]

Why the required property is treated differently?

[danicatalan]

In our last call about this issue we talked to add Show in cards, Use as filter and Priority sorting but as you can see, it makes sense to put the required property at the top to be more consistent with all the UI.

The unique fear I have with putting all those icon above the settings is that if we develop more configuration for properties, this will go crazy.

[RafaPolit]

@danicatalan , when using lists like that, I find that adding the fixed width property 'fa-fw' helps a lot in keeping things 'neat'.

[RafaPolit]

Also, did you try replacing the checkboxes with on/off buttons containing the actual icon, just like on the title bar? I thought we were 'voting' on one of three options: only check boxes, check boxes with icons, and only icons. Right?

[txau]

Do we actually need the checkboxes if we have the icons? that duplication of icons looks weird. Maybe display the icons only when its folded?

[RafaPolit]

That was my suggestion as well: try to only use icons with an 'on / off' characteristic. I would keep them on both places though, as to not get 'confusing', even if it is doubled or repeated. But it should be fairly easy to implement both ways and decide on a quick QA.

[danicatalan]

I'm not convinced of any of those solutions because it doesn't feel native (a form usually have textareas and checkboxes, not buttons). Anyway we are investing a lot of time in this issue, so if we are going to use those buttons inside the form, we need to decide if we play with opacity or with background color and start developing this story.

I prefer the opacity alternative because is cleaner, but maybe it's less readable than the other alternative because lack of contrast between on/off states.

[danicatalan]

We've decided to go with the last design: buttons instead of inputs, filled on green when they are active.

We will check the green color when this is developed to find a better green tone (or maybe another color, but something similar to the screenshot).

[txau]

Looks good to me.