Remote Source Tile View Implementation #518

gep13 · 2017-10-27T21:41:00Z

@RichiCoder1 @ferventcoder @punker76 @mwallner @pascalberger This is VERY much a Work In Progress, but I just wanted to put this out there for discussion.

What are your immediate thoughts on this?

User can switch between List and Tile view using buttons here:

Existing list view stays exactly the same as it is, but when switching to Tile, you see "something" like the following:

Interesting side effect of the InternetImage control that we are using, that when you first hit the new tile view, you see something like this:

So thoughts? Good idea? Bad idea? What needs to be different?

ferventcoder · 2017-10-27T21:46:51Z

Great start! I think we should have something for the placeholder images. Definitely like what I am seeing.

punker76 · 2017-10-27T21:51:15Z

@gep13 first thoughts

caching images, cause switching to list and back loads it again
ListView and ListViewItem style doesn't use MahApps one
ToggleSwitch for the 2 views instead radio buttons
show also the version

gep13 · 2017-10-27T21:56:00Z

@punker76 yes, image caching was something that had occurred to me as well. Would need to extend the current control to look in the local cache before reaching out to the interwebs.

RichiCoder1 · 2017-10-28T00:17:18Z

caching images, cause switching to list and back loads it again

That's weird. If you're using the same control as on PackageView, it is caching. Maybe the the delay is reading from disk?

ToggleSwitch for the 2 views instead radio buttons

Agreed.

show also the version

As well as install/outdated status, preferably.

pascalberger · 2017-10-28T05:47:24Z

@gep13 Sounds like a good idea to me. Also would like to see version and status (installed, outdated, pinned) in the view (maybe as overlays)

gep13 · 2017-10-28T06:02:04Z

@RichiCoder1 yip, it is the same control as on the package details view. Perhaps the issue is the number of requests at the same time.

punker76 · 2017-10-28T10:24:06Z

@RichiCoder1 @gep13 @pascalberger @ferventcoder Something for the eye...

gep13 · 2017-10-28T10:45:36Z

@punker76 to me, this looks like exactly what we want 😄

I think the word New might want to be another word, but not immediately sure on what it should be. Part of me wants to put Upgrade available but that is obviously too much.

punker76 · 2017-10-28T10:47:45Z

@gep13 out-of-date

punker76 · 2017-10-28T10:55:41Z

@gep13

gep13 · 2017-10-28T10:58:44Z

Or perhaps the term outdated, which is what Chocolatey itself uses should be in there.

Either way, it is a small point, everything else looks 👍

gep13 · 2017-10-28T11:01:35Z

@RichiCoder1 there is something up with the caching implementation. Sometimes the Metadata isn't set, which means it goes back out to the internet to fetch the image again. Sometimes it works, sometimes it doesn't 😢

The InternetImage try to cache the images for 1 day and do this by adding an expired date as meta data. Setting this with the SetMetadata method for the file storage doesn't work. Requesting of this meta data returns a undefined DateTime. But setting this directly to the meta data of the uploaded image stream works perfectly.

punker76 · 2017-10-28T13:10:43Z

@gep13 @RichiCoder1 Caching images for InternetImage should be fixed now.

The InternetImage try to cache the images for 1 day and do this by adding an expired date as meta data. Setting this with the SetMetadata method for the file storage doesn't work. Requesting of this meta data returns a undefined DateTime.

But setting this directly to the meta data of the uploaded image stream works perfectly.

use StretchDirection DownOnly use PackIconEntypoKind.CircleWithCross for error use PackIconEntypoKind.Block for empty urls

extract PackageListTemplate and PackageTileTemplate from ListViewItem use PackagesContextMenu for PackageTileTemplate too TextTrimming for title

punker76 · 2017-10-28T20:28:37Z

@gep13 Intermediate result...

RichiCoder1

Really liking where this is going! Maybe something like this?:

For context, my inspiration was basically Google Play & Windows Store.

RichiCoder1 · 2017-10-28T21:29:05Z

Source/ChocolateyGui/Controls/InternetImage.xaml.cs

@@ -36,7 +35,8 @@ public partial class InternetImage
            "IconUrl", typeof(string), typeof(InternetImage), new PropertyMetadata(default(string)));

        private static readonly ILogger Logger = Log.ForContext<InternetImage>();
-        private static readonly Lazy<BitmapSource> ErrorIcon = new Lazy<BitmapSource>(GetErrorImage);
+        private static readonly Lazy<ImageSource> ErrorIcon = new Lazy<ImageSource>(() => GetPackIconEntypoImage(PackIconEntypoKind.CircleWithCross, Brushes.OrangeRed));


mwallner · 2017-10-29T09:01:30Z

to throw my fife cents in: I love what's going on, but I'd prefer a solution close to what Richard suggested - having more concrete borders around elements from the first place, without selecting anything .. (I think it'd be a cleaner interface)

punker76 · 2017-10-29T09:27:22Z

@mwallner I've thought of that, too...

punker76 · 2017-10-29T09:49:29Z

@mwallner @gep13

or only 1 BorderThickness

gep13 · 2017-10-29T09:52:43Z

@punker76 oooo, this is really starting to shape up, I like it!

One point... I think the name of the application should appear above the version number.

Also, while I think about it, while I don't dislike the current no icon symbol, I had thought about using a "washed out" version of the Chocolatey Icon, when there isn't a Icon Url defined.

What are your thoughts on that?

punker76 · 2017-10-29T10:00:28Z

@gep13 what do you mean with "washed out"?

Name above version...

add own ListViewItemTileStyle which looks now more like a tile show IsPinned status name above version

punker76 · 2017-10-29T11:12:47Z

@gep13 @RichiCoder1 @ferventcoder maybe I don't know enough about it, but it seems this could work...

in RemoteSourceViewModel

                    var installed = await _chocolateyPackageService.GetInstalledPackages();
                    var outdated = await _chocolateyPackageService.GetOutdatedPackages();

                    PageCount = (int)(((double)result.TotalCount / (double)PageSize) + 0.5);
                    Packages.Clear();
                    result.Packages.ToList().ForEach(p =>
                    {
                        if (installed.Any(package => package.Id == p.Id))
                        {
                            p.IsInstalled = true;
                        }
                        if (outdated.Any(package => package.Item1 == p.Id))
                        {
                            p.IsLatestVersion = false;
                        }

                        Packages.Add(Mapper.Map<IPackageViewModel>(p));
                    });

punker76 · 2017-10-29T13:53:19Z

@gep13 @RichiCoder1 @ferventcoder @pascalberger I think I'm done for now, last one is the RadioButton style for the ListViewMode...

ferventcoder · 2017-10-29T15:08:40Z

This looks amazing!! The only thing I might change - a watermarked default image when no image is available - that greyed out choco icon (maybe previously mentioned).

gep13 · 2017-10-29T15:36:34Z

@ferventcoder I am assuming in this case that you are ok with the official Chocolatey Logo being modified? Or should this be an icon that makes it's way into the official Media Kit for Chocolatey?

ferventcoder · 2017-10-29T15:46:10Z

This is an official Chocolatey client so 👍

punker76 · 2017-10-30T09:03:09Z

@gep13 @ferventcoder

punker76 · 2017-10-30T09:07:54Z

@gep13 @ferventcoder also on all other places

Faster image loading: we don't need to delete the file, cause a upload does: Send file or stream to database. Can be used with file or Stream. If file already exists, file content is overwritten. do not lock over the entire operation

gep13 · 2017-10-30T10:36:07Z

@punker76 so, where are we with this? Is there anything left that you are looking to add? Or is this ready for review?

Should/could we add the same tile view to the Local Packages Tab as well?

Should/could we add an application level setting which specifies the default view to use within the application?

punker76 · 2017-10-30T10:44:01Z

so, where are we with this? Is there anything left that you are looking to add? Or is this ready for review?

I'm done

Should/could we add the same tile view to the Local Packages Tab as well?

That would be consistent. But we should do this maybe in a new PR.

Should/could we add an application level setting which specifies the default view to use within the application?

👍

gep13 · 2017-10-30T11:23:11Z

@punker76 agree on new PR's for other pieces of work. Let's get this part reviewed and pulled in, and we can discuss further.

I will try to take it for a proper spin tonight.

pascalberger · 2017-10-30T11:31:42Z

I tried to install version from this build over my previous installation but after switching to tile view on the feed I received this error:

Doesn't seem to be able to reproduce it though

so use `string.Equals(package.Id, p.Id, StringComparison.OrdinalIgnoreCase)` instead `package.Id == p.Id`

punker76 · 2017-10-30T12:25:08Z

@pascalberger Which prev version? The 0.15 or one prev of these PR? And can you try it again with the latest from this PR? Thx.

pascalberger · 2017-10-30T12:51:43Z

@punker76 It was a 0.16 prev version installed over which I installed the version from this PR

pascalberger · 2017-10-30T13:06:53Z

Couldn't reproduce it with the latest build from this PR (but couldn't also reproduce it before either :) )

RichiCoder1 · 2017-10-30T13:36:14Z

Hmm. Looks like I didn't set a switch on Image Magick's svg conversion to use transparent backgrounds. Will need to enable that....

gep13 · 2017-10-30T22:03:32Z

@punker76 just had a play with this, and from what I can see, we can and get some more feedback.

punker76 · 2017-10-30T22:06:14Z

@gep13 👏 so let me create the next one for the local view 😉

gep13 · 2017-10-30T22:20:17Z

Relates to #517

(GH-517) Basic Tile View Implementation

725f7b0

punker76 added 2 commits October 28, 2017 15:05

Use MahApps ListView and ListViewItem style

ae518fc

punker76 added 4 commits October 28, 2017 21:34

Use write lock for fileStorage delete too

346120a

Fix mouse double click (works now also for ListViewItem)

a9e47dc

InternetImage improvements

a2f1d95

use StretchDirection DownOnly use PackIconEntypoKind.CircleWithCross for error use PackIconEntypoKind.Block for empty urls

RemoteSourceView first changes:

5407f2f

extract PackageListTemplate and PackageTileTemplate from ListViewItem use PackagesContextMenu for PackageTileTemplate too TextTrimming for title

punker76 added 2 commits October 28, 2017 22:36

Fix DupFinder errors

8dc0995

Add version

ad3a513

RichiCoder1 reviewed Oct 28, 2017

View reviewed changes

more UI:

52fe804

add own ListViewItemTileStyle which looks now more like a tile show IsPinned status name above version

OverlayTemplate for Installed and out-of-date

a5c4004

punker76 added 2 commits October 29, 2017 14:21

Set IsLatestVersion to false if package is outdated

fd5d1ce

ListViewModeRadioButtonStyle for the ListViewMode

8d9a93e

punker76 added 2 commits October 30, 2017 11:17

add grayed (washed out) chocolatey logo

eb1d8f0

Show grayed logo for empty urls

8fd755c

Faster image loading: we don't need to delete the file, cause a upload does: Send file or stream to database. Can be used with file or Stream. If file already exists, file content is overwritten. do not lock over the entire operation

punker76 added 2 commits October 30, 2017 13:07

no need for UpgradeableReadLockAsync over WriteLockAsync

c311f4c

IsInstalled override should ignore case

48304f0

so use `string.Equals(package.Id, p.Id, StringComparison.OrdinalIgnoreCase)` instead `package.Id == p.Id`

no deferred scrolling for ListView

c649943

gep13 changed the title ~~[WIP] Tile View Implementation~~ Tile View Implementation Oct 30, 2017

gep13 merged commit 42c5351 into develop Oct 30, 2017

gep13 deleted the feature/tile-view branch October 30, 2017 22:04

gep13 changed the title ~~Tile View Implementation~~ Remote Source Tile View Implementation Oct 30, 2017

Remote Source Tile View Implementation #518

Remote Source Tile View Implementation #518

Conversation

gep13 commented Oct 27, 2017 • edited Loading

ferventcoder commented Oct 27, 2017

punker76 commented Oct 27, 2017 • edited Loading

gep13 commented Oct 27, 2017

RichiCoder1 commented Oct 28, 2017

pascalberger commented Oct 28, 2017

gep13 commented Oct 28, 2017

punker76 commented Oct 28, 2017

gep13 commented Oct 28, 2017

punker76 commented Oct 28, 2017

punker76 commented Oct 28, 2017

gep13 commented Oct 28, 2017

gep13 commented Oct 28, 2017

punker76 commented Oct 28, 2017

punker76 commented Oct 28, 2017

RichiCoder1 left a comment • edited Loading

Choose a reason for hiding this comment

RichiCoder1 Oct 28, 2017

Choose a reason for hiding this comment

mwallner commented Oct 29, 2017

punker76 commented Oct 29, 2017

punker76 commented Oct 29, 2017 • edited Loading

gep13 commented Oct 29, 2017

punker76 commented Oct 29, 2017

punker76 commented Oct 29, 2017 • edited Loading

punker76 commented Oct 29, 2017

ferventcoder commented Oct 29, 2017

gep13 commented Oct 29, 2017

ferventcoder commented Oct 29, 2017

punker76 commented Oct 30, 2017

punker76 commented Oct 30, 2017

gep13 commented Oct 30, 2017

punker76 commented Oct 30, 2017

gep13 commented Oct 30, 2017

pascalberger commented Oct 30, 2017 • edited Loading

punker76 commented Oct 30, 2017

pascalberger commented Oct 30, 2017

pascalberger commented Oct 30, 2017

RichiCoder1 commented Oct 30, 2017

gep13 commented Oct 30, 2017

punker76 commented Oct 30, 2017

gep13 commented Oct 30, 2017

gep13 commented Oct 27, 2017 •

edited

Loading

punker76 commented Oct 27, 2017 •

edited

Loading

RichiCoder1 left a comment •

edited

Loading

punker76 commented Oct 29, 2017 •

edited

Loading

punker76 commented Oct 29, 2017 •

edited

Loading

pascalberger commented Oct 30, 2017 •

edited

Loading