Basic work for right sidebar #17656

PVince81 · 2015-07-15T10:08:41Z

Adds right sidebar with registrable panels (still WIP)

~~Note: file actions are currently disabled for demo purposes. When clicking on a file it will show the sidebar but not perform any action.~~

TODO: rewire click events to have the default file action work on the left side of the row but not the right side
TODO: implement tabs logic
TODO: implement default tab
TODO: styling
TODO: sidebar must close when unselecting file or selecting multiple files ?

PVince81 · 2015-07-15T10:13:29Z

Basically this brings the following:

DetailsView which is the right sidebar / panel. On this class it's possible to register subviews
DetailFileInfoView is the base class for any file info block to be displayed in the top panel. Needs to be registered with detailView.addDetail(...)
MainFileInfoDetailView implements DetailFileInfoView to provide the basic info like thumbnail, file name
DetailTabView is the base class for info tabs. Needs to be registered with detailView.addTab(...) (the logic isn't implemented yet)
styles can be tweaked in detailsView.css

I know... a lot of classes and not so fancy names...

PVince81 · 2015-07-15T10:14:14Z

@DeepDiver1975 @jancborchardt @blizzz @oparoz @rullzer

PVince81 · 2015-07-15T10:14:43Z

@jancborchardt I think it's still too early to tweak the styles. I'll let you know when it's ready 😄

oparoz · 2015-07-15T11:37:46Z

apps/files/js/mainfileinfodetailview.js

This won't work as there is a hardcoded value of 36x36 as a fallback and we need something larger. We keep running into this issue.
Besides, I don't think we need lazy loading here. Just point to the preview using generatePreviewUrland the browser will show it when ready.

The mockup indicates 50x50, but that's too small for the prevew of a selected file. Maybe we should load a 200x200 preview and let the browser resize it based on the available width, if the sidebar is responsive.

I'll add it as todo. The FIXME already says that what I did here is wrong 😉

Ah, yeah, I only looked at the todos :D

PVince81 · 2015-07-15T12:09:07Z

TODO: load previews with the correct API, maybe with 200x200 format and reduce it to 50x50 ? ( @oparoz feel free to comment/rectify)

PVince81 · 2015-07-15T14:18:49Z

I realize that the file info details (the top view) cannot be extended block-wise.
Maybe the easiest is to simply pass the jQuery element to plugins so plugins can embed themselves wherever. Here you can see that "Owner: " is in its own block. That one is provided by the "files_sharing" app.

I'm not too happy yet about the way how to provide tab view and detail view, it seems quite cumbersome to implement/extend a big class just for a few lines.

Also due to the problematic loading order of JS files I had to do this: https://github.com/owncloud/core/pull/17656/files#diff-593f07f9e5d32f4d3fdebbfb2fa5b71aR144

PVince81 · 2015-07-15T15:15:06Z

hightlight current row
full height scrollbar on the sidebar (let the contents flow, no inner scrollbars)

PVince81 · 2015-07-15T15:38:09Z

BUG: hiding animation leaves horizontal scrollbar
~~TODO: make favorite action work (need to use applyTags from https://github.com/owncloud/core/blob/v8.1.0/apps/files/js/tagsplugin.js#L165, but tricky part is access that method from here)~~ Needs FileInfo Model and Introduce microevent library #9227 (comment), will have seperated PR

PVince81 · 2015-07-15T15:39:26Z

TODO: unit tests for the panels logic

PVince81 · 2015-07-15T15:54:15Z

I'm not sure if we want to do the share dialog task for now.
Maybe we can first get this in a mergable state and the sidebar will initially have no tabs shown at all.
So we need to get the interaction with the file list right.

When testing, please make sure to test the sidebar in the other views: "Shared with you", "Deleted files", etc. 😄

blizzz · 2015-07-15T16:36:54Z

Basically this brings the following:

DetailsView which is the right sidebar / panel. On this class it's possible to register subviews

DetailFileInfoView is the base class for any file info block to be displayed in the top panel. Needs to be registered with detailView.addDetail(...)

MainFileInfoDetailView implements DetailFileInfoView to provide the basic info like thumbnail, file name

DetailTabView is the base class for info tabs. Needs to be registered with detailView.addTab(...) (the logic isn't implemented yet)

styles can be tweaked in detailsView.css

I know... a lot of classes and not so fancy names...

Nothing against many classes, if they make the whole feature better readable, understandable and maintainable. Of course this can be done, but I do not see it here.

The naming however should make you roughly understand what this is it about. DetailsView is pretty general, more obvious would be to have Sidebar or Panel in it's name indeed, but would cost you flexibility to change it in the future to a e.g. bumping circle. As it shows details, I am good with the naming.

Most importantly, the structure makes sense to me. All question that occurred to me were well answered in this approach.

PVince81 · 2015-07-15T16:51:02Z

@blizzz thanks for the feedback 😄
I'd say let's keep this approach then and we can adjust later if needed.

PVince81 · 2015-07-15T16:55:04Z

fix scrolling: the top of the sidebar must always stay visible when scrolling down the file list (ex: when getting details of a file on page 12). Add a second scrollbar inside the sidebar to scroll its whole content.

PVince81 · 2015-07-15T17:20:02Z

PVince81 · 2015-07-16T10:04:58Z

TEST: public page

PVince81 · 2015-07-16T10:54:20Z

I changed the scrolling behavior: now the sidebar has its own scrollbar.
Unfortunately it doesn't look very good when there are two scrollbars, but there might not be any better way around, unless we add an inner scrollbar inside the tab content instead.

@jancborchardt I think you can start tweaking the styles now and test the interaction 😄
I left the debug tabs so you can test the scrolling.

PVince81 · 2015-07-16T10:54:58Z

TEST in internet explorer

PVince81 · 2015-07-16T10:57:49Z

BUG: fix display name in trash bin (use fileInfo.displayName)

jancborchardt · 2015-07-16T14:12:17Z

@PVince81 please do not use jQuery UI here, as we want to ideally get rid of it. Simply use buttons, and I will style them properly similar to the database chooser on installation.

PVince81 · 2015-07-16T15:27:36Z

The reason I used tabs is just because I wanted to save time and saw a working example on the LDAP settings page.

TODO: implement own tabs plugin/logic

blizzz · 2015-08-06T23:24:49Z

My attempt to fix the test. Also rebased.

ghost · 2015-08-07T00:25:30Z

🚀 Test PASSed.🚀

scrutinizer-notifier · 2015-08-07T10:34:12Z

A new inspection was created.

ghost · 2015-08-07T11:24:16Z

💣 Test FAILed. 💣

PVince81 · 2015-08-10T08:49:55Z

JS unit tests fail:

07:24:11    Expected '' to equal 'One.txt'.
07:24:11        at /var/jenkins/workspace/pull-request-analyser-ng-simple/label/SLAVE/apps/files/tests/js/mainfileinfodetailviewSpec.js:54
07:24:11    Expected '' to equal '123456789 bytes'.
07:24:11        at /var/jenkins/workspace/pull-request-analyser-ng-simple/label/SLAVE/apps/files/tests/js/mainfileinfodetailviewSpec.js:56
07:24:11    Expected '' to equal 'July 16, 2015 9:02 PM'.
07:24:11        at /var/jenkins/workspace/pull-request-analyser-ng-simple/label/SLAVE/apps/files/tests/js/mainfileinfodetailviewSpec.js:58

I'll look into this.

PVince81 · 2015-08-10T09:50:49Z

I hereby approve all commits from @blizzz and @Henni and @jancborchardt with this 👍

Please review my commits too so we can get this merged.

blizzz · 2015-08-10T10:02:29Z

And so am I honoured to give a 👍 to all commits from @PVince81 @Henni and @jancborchardt 🎆

PVince81 · 2015-08-10T10:06:58Z

Unless there is any objection, I will merge this as soon as Jenkins gives the green light. 💡

ghost · 2015-08-10T11:12:43Z

🚀 Test PASSed.🚀

Basic work for right sidebar

PVince81 · 2015-08-10T11:14:44Z

Here we go.

Please raise tickets separately.

I'll soon make a ticket for the file actions (favorites + click on thumbnail)

PVince81 · 2015-08-10T12:40:17Z

Raised ticket to implement the missing actions (thumbnail click + favorite click): #18169

jancborchardt · 2015-08-10T13:50:21Z

@PVince81 great work man! :)

DeepDiver1975 · 2015-08-10T20:55:39Z

@PVince81 branch can be deleted?

PVince81 · 2015-08-11T08:17:44Z

branch can be deleted?

Yes. Strangely Github didn't show me the button yesterday.

MorrisJobke · 2015-08-11T08:22:15Z

Yes. Strangely Github didn't show me the button yesterday.

On mobile? Because on mobile it isn't present

PVince81 · 2015-08-11T09:38:31Z

No, on desktop web UI. It was probably a temporary glitch.

PVince81 added the 2 - Developing label Jul 15, 2015

PVince81 mentioned this pull request Jul 15, 2015

Implement right sidebar in files app #17655

Closed

4 tasks

PVince81 added this to the 8.2-current milestone Jul 15, 2015

jancborchardt added the design label Jul 15, 2015

jancborchardt added the enhancement label Jul 15, 2015

oparoz reviewed Jul 15, 2015
View reviewed changes

PVince81 mentioned this pull request Jul 15, 2015

[WIP] Experiment with moving the share dropdown to a sidebar #16414

Closed

11 tasks

PVince81 mentioned this pull request Jul 15, 2015

Sidebar feature: system-wide tagging for files & folders #16325

Closed

PVince81 mentioned this pull request Jul 15, 2015

Move share dropdown into the right sidebar in the files app #17665

Closed

8 tasks

PVince81 force-pushed the files-rightsidebar branch from 495d422 to 62d1388 Compare July 16, 2015 10:52

PVince81 changed the title ~~[WIP] Basic work for right sidebar~~ Basic work for right sidebar Jul 16, 2015

jancborchardt and others added 7 commits August 7, 2015 01:22

fix right sidebar position and first style

3c36813

fix position of elements in right sidebar

eb323fe

Fix app-content scrollbar when app-sidebar is open

ae27f90

Set momentJS locale to en during unit test runs

6046946

Fix sidebar mtime display unit test

bdfab81

fix timezone issue with unittest

9c402c7

fix tipsy gravity after rebase

d1439ec

blizzz force-pushed the files-rightsidebar branch from 1d30248 to d1439ec Compare August 6, 2015 23:24

replace tipsy with tooltip

7760300

Fix unit test for tipsy->tooltip change

038d29b

PVince81 pushed a commit that referenced this pull request Aug 10, 2015

Merge pull request #17656 from owncloud/files-rightsidebar

15e16d3

Basic work for right sidebar

PVince81 merged commit 15e16d3 into master Aug 10, 2015

MorrisJobke deleted the files-rightsidebar branch August 10, 2015 20:56

lock bot locked as resolved and limited conversation to collaborators Aug 11, 2019

Basic work for right sidebar #17656

Basic work for right sidebar #17656

Uh oh!

Conversation

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

oparoz Jul 15, 2015

Choose a reason for hiding this comment

Uh oh!

oparoz Jul 15, 2015

Choose a reason for hiding this comment

Uh oh!

PVince81 Jul 15, 2015

Choose a reason for hiding this comment

Uh oh!

oparoz Jul 15, 2015

Choose a reason for hiding this comment

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

blizzz commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 15, 2015

Uh oh!

PVince81 commented Jul 16, 2015

Uh oh!

PVince81 commented Jul 16, 2015

Uh oh!

PVince81 commented Jul 16, 2015

Uh oh!

PVince81 commented Jul 16, 2015

Uh oh!

jancborchardt commented Jul 16, 2015

Uh oh!

PVince81 commented Jul 16, 2015

Uh oh!

blizzz commented Aug 6, 2015

Uh oh!

ghost commented Aug 7, 2015

Uh oh!

scrutinizer-notifier commented Aug 7, 2015

Uh oh!

ghost commented Aug 7, 2015

Uh oh!

PVince81 commented Aug 10, 2015

Uh oh!

PVince81 commented Aug 10, 2015

Uh oh!

blizzz commented Aug 10, 2015

Uh oh!

PVince81 commented Aug 10, 2015

Uh oh!

ghost commented Aug 10, 2015

Uh oh!

PVince81 commented Aug 10, 2015

Uh oh!

PVince81 commented Aug 10, 2015

Uh oh!

jancborchardt commented Aug 10, 2015

Uh oh!