Prettify and search enable the error page
ClosedPublic

Authored by leinir on Jan 17 2019, 1:56 PM.

Details

Summary

The prettification is based somewhat on the way the Updates page looks while fetching (it was previously just a header and just sort of... boring looking)

The functional difference in this patch is that the search field is enabled, should this page be shown as the first thing when Discover opens (and as such is the root item in the pagerow). This might for example happen if you attempt to pass an application on the commandline which does not exist.

Diff Detail

Repository
R134 Discover Software Store
Lint
Lint Skipped
Unit
Unit Tests Skipped
leinir created this revision.Jan 17 2019, 1:56 PM
Restricted Application added a project: Plasma. ยท View Herald TranscriptJan 17 2019, 1:56 PM
Restricted Application added a subscriber: plasma-devel. ยท View Herald Transcript
leinir requested review of this revision.Jan 17 2019, 1:56 PM

When submitting a patch that involves UI changes, it's always appreciated to include a screenshot. Bonus points for both before-and-after screenshots. :)

https://community.kde.org/Infrastructure/Phabricator#Include_some_screenshots

Yes, quite, of course :D Was going to post one and got sidetracked ;)

The shot is identical to the previous state, except for two largeish and contained bits (hence only the one shot): There is a search field shown here where one was missing previously, and there is an icon. No changes to the text and its location:

+1 for always showing the search field. But that icon looks a bit big. I might make it smaller and lose the opacity.

Also, while we're prettifying the error page, how about vertically centering everything too?

+1 for always showing the search field. But that icon looks a bit big. I might make it smaller and lose the opacity.

Also, while we're prettifying the error page, how about vertically centering everything too?

The icon is exactly the same size as the one on the Updates page, literally copied the code across (which suggests to me we might want to create a component for this sort of thing perhaps...). But, that is not to say that it wouldn't make sense to make it smaller and have it be entirely opaque. Optimally, i can see it being handy to have a component that just has a string and an icon, which is then centred in the container, and which we could then use in both these places (and anywhere else it turns out we need to tell the user something of a similar nature). ...which, i realise rereading your second line is not unlike what you are suggesting ;) i'll try and come up with something that pleasantly does that, stay tuned to this channel ;)

leinir updated this revision to Diff 49984.Jan 21 2019, 11:33 AM

Changes as discussed: The component is now all nice and centered, and the icon is fully opaque. Yup, much prettier all 'round, and would be nice and easy to turn into a full-on component :)

Nice! Now the icon is still too big, especially with color. For these error pages, can we experiment with using a smaller size? I bet half as big would look good. Now that I thin of it, the icon should probably go above the text, too.

If the goal was to use the same size as the icon on the update page, well pretty soon I want to replace that with a smaller spinner. :)

leinir updated this revision to Diff 50107.Jan 23 2019, 2:57 PM

Try and pop the the icon above the text, and just use iconsize enormous rather than a hardcoded one, and also raise the whole thing just a bit. And since the plan is to not use a similar layout on the updates page in short order, let's just not componentise this just yet, so now it just looks kind of nice all 'round :)

leinir updated this revision to Diff 50110.Jan 23 2019, 3:06 PM

In fact, don't need that outer item, so removing that

Awesome, almost there! I tried with the icon size huge instead of enormousand I think it might look a bit better. What do you think?

leinir updated this revision to Diff 50168.Jan 24 2019, 9:37 AM

Hmm... yes, it does seem just perhaps a little more, hmm, pleasing i guess, for lack of a more technical way to say "it looks nice" ;) and most of the time that string will be a little bit shorter than it is, so... yup, updated patch, swapped enormous for huge :)

ngraham accepted this revision.Jan 24 2019, 6:05 PM

๐Ÿ‘ Shipit!

This revision is now accepted and ready to land.Jan 24 2019, 6:05 PM
This revision was automatically updated to reflect the committed changes.