Adds flickr style gradient to the gallery images. #456

raghunayyar · 2015-10-27T20:14:47Z

As we discussed at the conference (#286), we wanted to use gradients which are something on the lines of Flickr. I have added the exact same gradient here as of now. @jancborchardt would you like to tweak it a bit so that it satisfies all our corner cases?

jancborchardt · 2015-10-27T23:12:34Z

What do you think @oparoz @owncloud/designers?

@raghunayyar can you post a screenshot so more people can review directly?

oparoz · 2015-10-27T23:23:25Z

I haven't looked in details yet. I'm a bit worried about the new width, height and positioning of the element, because it may interfere with future work, so it will take a bit of time to get that checked.

raghunayyar · 2015-10-28T06:45:11Z

Sure : natural state looks like this

hovered state looks like this

jancborchardt · 2015-10-28T07:16:42Z

@raghunayyar nice! How's it on a brighter image?

MorrisJobke · 2015-10-28T08:06:23Z

css/styles.css

+	position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: opacity 200ms linear;


Indentation ;)

I have to figure out things with Atom. lol, will push the fix asap.

raghunayyar · 2015-10-29T16:30:09Z

@jancborchardt usual state

hovered state

oparoz · 2015-10-29T22:35:58Z

@raghunayyar Would it be possible to see the same images with the current style (pre-PR)? I know it's a bit of work, but it would be great to be able to quickly see the difference when looking at the before and after picture for both the standard and hovered state.

jancborchardt · 2015-11-02T13:45:33Z

Looks awesome! :)

jancborchardt · 2015-11-02T15:46:32Z

Just tested this and it looks quite awesome, way better than the current approach. However, 3 grave problems:

albums can not be opened, and album titles float on the top. Instead they should be shown on the bottom and have the same fade as for images, but displayed permanently.
images can not be opened
the ellipsis of long file names is broken. Should be forced to one line.

oparoz · 2015-11-02T15:49:44Z

Thanks for testing. I was afraid the div changes would break stuff... Hopefully there is a way around that.

jancborchardt · 2015-11-02T16:20:33Z

I guess just changing the opening handler would fix it. But I’m not JS-savvy enough to be sure. ;)

raghunayyar · 2015-11-03T12:52:36Z

@jancborchardt will look into it asap.

oparoz · 2015-11-03T16:55:22Z

There is also the problem of white letters on white background.

Apart from that, I like the effect, it's more natural than having that blocky background, but it needs to be tuned a bit.

raghunayyar · 2015-11-03T17:42:09Z

@jancborchardt fixed all the issues, do you want to fine tune the gradient? cc @oparoz

jancborchardt · 2015-11-03T18:32:19Z

@oparoz that problem should be fixed if @raghunayyar fixed the ellipsis and forcing the filename display to one line. Then the filename will be shown on the bottom of the fade where it’s enough contrast.

oparoz · 2015-11-03T19:20:26Z

@raghunayyar I apologise, looking at your code, I realised some of my changes had been merged against the wrong branch. Can I ask you to rebase? Since the change is mainly about grouping all the HTML in a template, it should be easy for you to make the small adjustments.

@jancborchardt The problem is not fixed by the title expansion, because the screenshot I've posted is of the extended title. I haven't checked if the gradient expands with the title. If not, then it should. If yes, then the gradient should fade away a bit higher.

jancborchardt · 2015-11-04T12:50:56Z

If there is a longer title, it is either visible in the detail view, or should at most show as a tooltip. It should not result in the name extending to more rows than one in the overview. Ok?

oparoz · 2015-11-04T12:57:25Z

If there is a longer title, it is either visible in the detail view, or should at most show as a tooltip. It should not result in the name extending to more rows than one in the overview. Ok?

It's not the current behaviour, but could be addressed in a separate PR, yes.

jancborchardt · 2015-11-04T13:17:52Z

Right, but then the issue you mention above should not be taken into account for this PR if we fix it in a different one anyway. ;)

raghunayyar · 2015-11-04T17:53:38Z

@oparoz I have rebased my branch, do you want to tweak the gradient? cc @jancborchardt

oparoz · 2015-11-05T12:09:05Z

css/styles.css

 }

-#gallery .item-container .image-label .title:hover {
+#gallery .item-container .image-label .title:hover.


oparoz · 2015-11-05T12:12:04Z

@raghunayyar - Thanks for the rebase. No need to take care of the gradient since it's been decided to go with a tooltip.
I'm having some issues with the re-ordering of the HTML elements, so I first need to try and fix it before being able to merge this.

jancborchardt · 2015-11-05T12:21:30Z

@raghunayyar also please squash your commits into one.

oparoz · 2015-11-05T12:31:09Z

If someone wants to look at other ways of doing this.
The problem we're having is that when the label covers the whole surface, then it blocks the click handler. Because of old IE support, we can't use pointer-events and need to bubble down the event or place the label inside the anchor. That change is not compatible with the introducton of new features, so the structure should stay the same.

jancborchardt · 2015-11-05T12:54:13Z

Why don’t we have the click handler on the label?

oparoz · 2015-11-05T12:58:57Z

The container would probably be more appropriate, now that we have one.

oparoz · 2015-11-05T13:00:04Z

But it has to be created from scratch since we were simply using anchors

raghunayyar · 2015-11-06T14:51:47Z

Can we merge this since all the discussed stuff has been fixed.

oparoz · 2015-11-06T15:39:22Z

Not with the change of element order as it would need to be reverted in the future.

What we can do is wait for a PR changing the handler to be merged before merging this one.

jancborchardt · 2015-11-10T12:32:25Z

So what’s the plan of action here so we move forward @oparoz @raghunayyar?

oparoz · 2015-11-13T15:58:39Z

Add a click handler to the container in this PR or another one which needs to be merged before this one
Restore the order of elements in this PR
Add a tooltip preferably in this PR or before merging this one so that we don't forget

jancborchardt · 2015-11-16T08:33:19Z

@raghunayyar can you implement what @oparoz described above then? :)

raghunayyar · 2015-11-17T11:45:24Z

@jancborchardt @oparoz I am occupied with calendar at the moment, can you take care, please?

Renamed click handler for albums. (_openAlbum) Cherry picked label gradients from owncloud#456. Refactored links so they are not hidden by other elements.

Added click handler for images. (_openImage) Renamed click handler for albums. (_openAlbum) Cherry picked label gradients from owncloud#456. Refactored links so they are not hidden by other elements.

oparoz · 2016-02-12T19:43:15Z

Closing as this has been added to the 9.1-next branch: ee073c9

oparoz · 2016-02-12T19:43:36Z

Thank you for your contribution!

jancborchardt · 2016-02-15T10:15:30Z

Nice!

MorrisJobke reviewed Oct 28, 2015
View reviewed changes

raghunayyar force-pushed the flickr-style-gradients branch from ae96f60 to be343a1 Compare October 29, 2015 16:28

oparoz added the enhancement label Nov 3, 2015

oparoz added this to the 9.0-current milestone Nov 3, 2015

raghunayyar added the 2 - Developing label Nov 3, 2015

raghunayyar force-pushed the flickr-style-gradients branch from 42e8cc6 to 4b14bb2 Compare November 4, 2015 17:52

oparoz reviewed Nov 5, 2015
View reviewed changes

css/styles.css

}

#gallery .item-container .image-label .title:hover {

#gallery .item-container .image-label .title:hover.

Copy link

Contributor

oparoz Nov 5, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo

raghunayyar force-pushed the flickr-style-gradients branch from 4b14bb2 to 41e1478 Compare November 6, 2015 14:23

Add flickr style gradients.

b87aaf1

raghunayyar force-pushed the flickr-style-gradients branch from 41e1478 to b87aaf1 Compare November 6, 2015 14:29

raghunayyar added 3 - To review and removed 2 - Developing labels Nov 6, 2015

oparoz added 2 - Developing and removed 3 - To review labels Nov 13, 2015

oparoz mentioned this pull request Dec 1, 2015

Clicking on folder label causes spinner to display without actually opening the folder. #466

Closed

setnes mentioned this pull request Dec 6, 2015

Click handlers for image and album thumbnails. #471

Closed

oparoz mentioned this pull request Feb 11, 2016

Information for testers #513

Closed

8 tasks

oparoz modified the milestones: 9.1-next, 9.0-current Feb 11, 2016

oparoz closed this Feb 12, 2016

jancborchardt deleted the flickr-style-gradients branch February 15, 2016 10:15

Adds flickr style gradient to the gallery images. #456

Adds flickr style gradient to the gallery images. #456

Conversation

raghunayyar commented Oct 27, 2015

jancborchardt commented Oct 27, 2015

oparoz commented Oct 27, 2015

raghunayyar commented Oct 28, 2015

jancborchardt commented Oct 28, 2015

MorrisJobke Oct 28, 2015

Choose a reason for hiding this comment

raghunayyar Oct 28, 2015

Choose a reason for hiding this comment

raghunayyar commented Oct 29, 2015

oparoz commented Oct 29, 2015

jancborchardt commented Nov 2, 2015

jancborchardt commented Nov 2, 2015

oparoz commented Nov 2, 2015

jancborchardt commented Nov 2, 2015

raghunayyar commented Nov 3, 2015

oparoz commented Nov 3, 2015

raghunayyar commented Nov 3, 2015

jancborchardt commented Nov 3, 2015

oparoz commented Nov 3, 2015

jancborchardt commented Nov 4, 2015

oparoz commented Nov 4, 2015

jancborchardt commented Nov 4, 2015

raghunayyar commented Nov 4, 2015

oparoz Nov 5, 2015

Choose a reason for hiding this comment

oparoz commented Nov 5, 2015

jancborchardt commented Nov 5, 2015

oparoz commented Nov 5, 2015

jancborchardt commented Nov 5, 2015

oparoz commented Nov 5, 2015

oparoz commented Nov 5, 2015

raghunayyar commented Nov 6, 2015

oparoz commented Nov 6, 2015

jancborchardt commented Nov 10, 2015

oparoz commented Nov 13, 2015

jancborchardt commented Nov 16, 2015

raghunayyar commented Nov 17, 2015

oparoz commented Feb 12, 2016

oparoz commented Feb 12, 2016

jancborchardt commented Feb 15, 2016