New apps design

[skjnldsv]

ref: #2491

@nextcloud/designers @jancborchardt @rullzer @MorrisJobke

[mention-bot]

@skjnldsv, thanks for your PR! By analyzing the history of the files in this pull request, we identified @nickvergessen, @jancborchardt and @LukasReschke to be potential reviewers.

[skjnldsv]

Still need to think of a better way to but the "enable groups only" checkbox!

[MorrisJobke]

Feels a bit crowded :/

[Espina2]

Put the buttons below, like for the image you show its not direct at first glance to what "collumn" the buttons are related. I think you can add more white space.

[skjnldsv]

It's still in progress! :D
@MorrisJobke Yes, there's too much information. We should definitely clean things up!
@Espina2 Probably! I need to think about the space between!

[eppfel]

I think we not only have to rearrange the layout, but have to rethink what we show. I started working on some Visualization, but far from finished....

[LukasReschke]

Also as a remark: Currently the appstore previews of apps are pretty useless as they all look the same because they are so down-scaled. Can we get some more prominent preview display? That calls for some more redesign.

[skjnldsv]

Youhouu, so much interest on this PR 🎉 !
There's a lot to do indeed and this is planned for 12, so we got some times to do things correctly!

@eppfel I'll wait for you !

[jancborchardt]

Awesome activity here, I have little to add. :)

• Screenshots: The main point is that we should show large images & icons like in the new appstore. As @LukasReschke said.
• Layout: Agree with @Espina2 and @MorrisJobke that it’s too crowded and not obvious which app the buttons belong to because of missing whitespace.
• Info: I also think while it’s cool to have all our names there, it’s pretty useless as something to show by default. Instead what should be shown there is the first 2 lines of the app description. And the authors can be at the bottom of the description when it’s expanded.

[jancborchardt]

And to add to this: Let’s work together with @nextcloud/appstore so we improve the design and converge with both. Because they already show the screenshots big, and a small description below the app name.

Sounds good?

[eppfel]

The idea I have, but did not find the time to draft visualizations, yet:

Make a more clear separation between enabled/disabled apps and the actual store categories.

Installed

Change enabled/disabled to a list/table, because these are core apps or you knowingly installed them, so details are not important, but easily managing them. So keep the icons (first thought of switching to previews here) and remove description and authors (maybe even link to the store, instead of a reveal animation).
Here is a very, very, very evil hack, I know it looks super ugly, but I hope you get the idea ☺️ :

Please don't discuss details here, just the underlying idea. It think it is much easier to find the app you want to disable or update, because the eyes do not need to scan the page, but scroll vertically through the list and we still can show a lot of apps in one screen.

Appstore

Use a very similar layout to the actual appstore, so no list/table here!

• large previews
• use a small description as @jancborchardt mentioned,
• a link to the store with all the details
• install button
  That's it. Make it, so you can easily discover new apps.

Introduce a border in the sidebar between enable/disabled and the others items, to make help this separation.

[skjnldsv]

• I agree with the table/list switch.
• I don't like the large icons, I think it doesn't add much except a quick heads up to what app you're looking at, but they don't need to be that big imho.
• Love the non-description design, only title looks good.
  😃

[MorrisJobke]

Make a more clear separation between enabled/disabled apps and the actual store categories.

I would love to have more in one place because nowadays searching is a pain point. 🙈