Default Grid Field needs redesign - probably already happening, just an additional encouragement

[sunnysideup]

Affected Version

Latest stable version of SS4.

Description

My colleague keeps telling me that the Word Press Grid Field is more user friendly. I dont know if that is true, but I feel the grid field could be improved. I have raised this before and I know work is underway, but I would really love to see it get better sometime soon. Here are some examples that could be looked at:

1. title above buttons seems counter intuitive. Start with title and then add buttons below?

2. the link existing has never been very clear (i.e. user select something from the list and then has to do a second click to "link" it.). This could do with a UX rethink. Even just placing it much closer to the list itself would be an improvement.

3. There is a search button when there are no records. Lets hide that in case there are less than, e.g., three records?

Here is one with a record:

1. spacing between elements does not really make sense. Why the huge space between "add: and the list itself? It could all be a bit closer together I reckon.

2. looking at the ..., this would make sense if you had three or four options, but when the options are:
   a. EDIT (clicked most of the time)
   b. DELETE (hardly ever needed)
   then this just creates an additional hassle to edit a record (i.e. you have to click twice to edit the record, with the added disadvantage that it is now easier to accidentally click delete). Of course you can also just click on the row, but that is not immediately obvious. Why not show the delete only and make it clearer that the user can click anywhere on the row to edit the record.

When you are searching for items with many search fields then they get cut off.

I would also love to see Better Buttons reintroduced as they will make the user experience much better again (e.g. PREVIOUS / NEXT is awesome even though it is hard to implement).

Finally, if you add two GridFields to one tab in the CMS it becomes even more obvious that the spacing is out of whack as it is unclear where the first GridField ends and the next begins.

[robbieaverill]

The autocompleter component definitely needs some love! Thanks for the suggestions, they all seem sensible.

cc @clarkepaul @sachajudd

---

@sunnysideup some reference issues for you:

title above buttons seems counter intuitive. Start with title and then add buttons below?

Related: silverstripe/silverstripe-reports#100

the link existing has never been very clear

Related: silverstripe/silverstripe-admin#596

I would also love to see Better Buttons reintroduced as they will make the user experience much better again (e.g. PREVIOUS / NEXT is awesome even though it is hard to implement).

silverstripe/silverstripe-admin#436

---

As a summary of the other issues, would you agree that these could be the action points?

• Move GridField header above actions bar
• Redesign autocompleter component
• GridField search component should not render when there are no records
  • Note that we'd need to render it if you've searched for something and returned no results, so you can remove your search state again. If there are no records without a search state, fair play not to show it IMO.
• Pagination summary above GridField should be inline with actions (otherwise there's a chunky margin)
• GridField actions menu could render its children directly unless there are more than 2 (configurable limit) rather than putting two options in the dropdown menu
  • Note that I'm pretty sure it does this already if there is only one item, e.g. a record that you can't delete like yourself in the Security > Members GridField

[sunnysideup]

Thank you!

[clarkepaul]

I feel like there was another issue which covers the same things, I'll do a quick hunt for it, it should cover the re-ordering of actions and GridField heading as mentioned here.

^ On this one the text "View 1-1 of 1" shouldn't show if there is no heading, this was done a while back so I'm thinking its a regression? I remember going through (@tractorcow you remember us going through this?).

[clarkepaul]

Related #8254

[newleeland]

Potential design Mock designs needing consideration

https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/folder/components/5c68f96ffb26bb0018525d11

[ScopeyNZ]

Looking good @newleeland . The designs don't make it clear if a removed row actually disappears after an amount of time. Are the removed rows expected to stay (with the "undo" button visible) until the user navigates away?

[clarkepaul]

That part of the design is super old @ScopeyNZ although it was never implemented, it would only be visible for around 5 seconds before disappearing. We could incorporate a countdown indicator on the action which other UI's often use.

[sunnysideup]

What about this:

CSS is below for your reference ...

fieldset.grid.grid-field.ss-gridfield.field
{
    border-radius: 5px;
    border: 1px solid rgba(219, 224,233, 1);
    background-color: #f1f3f6!important;
    padding: 10px!important;
}

fieldset.grid.grid-field.ss-gridfield.field .toolbar--content {
    margin-top: 0!important;
}
fieldset.grid.grid-field.ss-gridfield.field .grid-field__title-row .pull-xs-right {display: none;}

fieldset.grid.grid-field.ss-gridfield.field table
{
    min-width: 100%!important;
    margin-left: 0!important;
    margin-right: 0!important;

}

fieldset.grid.grid-field.ss-gridfield.field .sortable-header th {
    background-color: rgba(219, 224,233, 0.7);
}
fieldset.grid.grid-field.ss-gridfield.field .sortablerowsheading {
    line-height: 1!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    background-color: rgba(219, 224,233, 0.7);

}

fieldset.grid.grid-field.ss-gridfield.field tfoot td {
    line-height: 1!important;
    padding-top: 1rem!important;
    padding-bottom: 0!important;
}

[sunnysideup]

Here is another example of what a bit of CSS could do:

[sunnysideup]

Here are some more examples - these are not to copy - they are just to help generate some ideas ...

Becomes:

Css ...

fieldset.grid.grid-field.ss-gridfield.field
{
    border-radius: 0.4rem;
    border: 1px solid rgba(219, 224,233, 1);
    background-color: #f1f3f6!important;
    padding: 10px!important;
}

fieldset.grid.grid-field.ss-gridfield.field .toolbar--content {
    margin-top: 0!important;
    margin-left: 0;
    background-color:rgba(219, 224,233, 0.3)!important;
    margin-right: 0;
}
fieldset.grid.grid-field.ss-gridfield.field h2 {
    padding-top: 1.5rem!important;
    text-align: center!important;
    color: rgb(86, 107, 141)!important;
}

fieldset.grid.grid-field.ss-gridfield.field .grid-field__title-row .pull-xs-right {display: none;}

fieldset.grid.grid-field.ss-gridfield.field table
{
    min-width: 100%!important;
    margin-left: 0!important;
    margin-right: 0!important;

}


fieldset.grid.grid-field.ss-gridfield.field .sortablerowsheading {
    border-top: 1px solid #fff!important;
    padding-top: 0.4rem!important;
    padding-bottom: 0.4rem!important;
}

fieldset.grid.grid-field.ss-gridfield.field tfoot td {
    line-height: 1!important;
    padding-top: 1rem!important;
    padding-bottom: 0!important;
}