Move search/filter input above table

[bjarnef]

It seems the search/filter input is placed inside the table header?

I would recommend to move it above the table like with listview, so it doesn't take up valuable space in table width - I think my PR was merged into core in 7.2.x or 7.3.x

It the package only is targeted against 7.4+ you could also consider using some of the new directives/components, which the listview also use - e.g. umbEmptyState and umbLoadIndicator

[jamiepollock]

@bjarnef Thanks for your feedback. I agree it's taking up valuable horizontal space.

I'll move the search box outside of the table. My only concern is that it will be the only component above the table. Due to the changes made between 7.3 & 7.4 I wouldn't be looking to integrate Grid List View as well.

What do you think?

[bjarnef]

I think it is fine the search is the only component above the table.

I thought about using the listview because it also contains paging and sorting. In Umbraco Forms I think they use the server variable to check the version and whether to use the new component or old stuff.

[jamiepollock]

@bjarnef I've reworked the positioning of the search & the footer to be aligned more like the 7.4.x grid view.

I've also tested this against 7.3.0 bringing in some of the relevant styles from that release into the current stylesheet, only make them relevant to this particular dashboard control.

Here are some screenshots, I'll be committing the code soon if you'd like to test the project out.

Rework: default without a search term

Rework: with a search term & results

Rework: with a search term & no results

[jamiepollock]

If you're looking to test it, you can find artifacts here: https://ci.appveyor.com/project/jamiepollock/umbraco-nuget-package-dashboard/build/artifacts

[jamiepollock]

@bjarnef have you had a chance to review this at all?

[bjarnef]

No not yet.. But from your screenshots I think it is just fine :)

[jamiepollock]

@bjarnef thanks! That's great to know :) I'll add this to the next release coming up.

One more thing though, the way I've implemented this is to use Umbraco styles but for versions that don't support this market (7.3) I've added in the styling as part of my bespoke CSS. Would you recommend against this practice as future versions could potentially break due to shared CSS classes.

[bjarnef]

I think that should be okay as long the wrapper is prefixed so it only affect your code and not otter part og backoffice UI.

But until now it has sometimes been neccessary to do stuff like this because some stuff wasn't available in previously version. E.g. in my package Color Palettes I include ngFileUpload, but in Unbraco 7.4 it was included in core.

If you install Umbraco Forms and look at the javascript files, it include a function to compare version and e.g. decide if I can use the new components/directives in v7.4 .. But I think it is okay with these css styles and you could test the package for v7.3, v7.4, v7.5 ...

[jamiepollock]

I think I'm going to look at Umbraco Forms and how they do it but as you say for CSS we should be fine,

Thanks again for your feedback @bjarnef :)