Split content view #34

Closed
silverwind opened this Issue Feb 20, 2014 · 20 comments

2 participants

@silverwind
Owner

Pretty big feature here, but I'd like to be able to split the view and practically have two clients in one browser window so users can easily drag-and-drop files to copy/move them, in Midnight Commander style.

I think the easiest way to do this is essentially have two independent WebSockets open for each side of the split. It'll require a lot of refactoring/enhancing of the client side code.

@silverwind silverwind added the feature label Feb 20, 2014
@ZombieHippie
Collaborator

Hmm... I would think it would be easier to have one websocket.

The main change is updating the folders that have watch changes server side.

@silverwind
Owner

Yep, a single socket is probably easier. Thought it'll still be a lot of work as the code on both client and server relies on the assumption that a client can only be in one folder at a time.

@ZombieHippie
Collaborator

I think we will need to number our containers something like this
#content-container -> #view0.view
So we can target certain views based on received data.
example:

<section class="view" id="view0">
    <div class="content center" style="">
        <ul></ul>
    </div>
</section>

Then the websockets will pass data back and forth the same way but with an added viewId that specifies what view the data applies to.

So, if in msgdata = {viewId:1, name:"folderName"} there is a new folder, we could use

var view = droppy.views[msgdata.viewId];
$("#view" + msgdata.viewId + " .content ul").append( createFolder(view.currentFolder, msgdata.name) );

to append a new folder.

@ZombieHippie
Collaborator

The two commits there include the vital skeleton that will allow us to use multiple views.

Frontend:

  • droppy.views is the jQuery selector $(".view")
  • getView(n) retrieves a jQuery object of the nth view in the document aka $($(".view")[n])
  • getView(n)[0] is the view element aka $(".view")[n]

Properties assigned to each view need to be accessed from the .view element

var view = getView(n),
    viewId = view[0].vId,
    directory = view[0].currentFolder;

Backend

var client = clients[cookie],
    websocket = client.ws,
    view = client.v[viewId],
    viewDir = view.directory;
@ZombieHippie
Collaborator

Will each entry list view have its own create folder/upload files/upload folder?

@silverwind
Owner

Yeah I think having own buttons for each entry list would be great. I think I'll restyle them to be more compact then (just icons, no text).

@ZombieHippie ZombieHippie added a commit that referenced this issue Mar 2, 2014
@ZombieHippie ZombieHippie Keeping it classy #34 4a81441
@ZombieHippie ZombieHippie added a commit that referenced this issue Mar 2, 2014
@ZombieHippie ZombieHippie Keeping it classy #34 5da1001
@silverwind silverwind added a commit that referenced this issue Mar 2, 2014
@silverwind Merge branch 'split-view' of https://github.com/silverwind/droppy int…
…o split-view

* 'split-view' of https://github.com/silverwind/droppy:
  Uploads are view-dependent #34
  Fix empty styling
  Paste child of view #50 #52 #34
  Keeping it classy #34
  Account for path in height, multi-views path-overflow
  References to #path relative
  Heirarchy: content-container>.view>ul#path&#content
e632514
@ZombieHippie
Collaborator

image
Okay, so this broke animations even more, but it sure cleaned stuff up.
To get the above screen shot use the console: $("#view-container .view").clone().appendTo("#view-container")

@ZombieHippie
Collaborator

Since I ended up reverting 8c4e6d3 you'll need to use
git checkout split-view
git pull
git checkout 8c4e6d3df77ae71b7380754fa4e4ec79153cc63a
to see the changes:
image

I didn't realize I fixed this but on master at e912db8 (latest at time of this post) there is a major doc viewing problem see below:
image

@silverwind
Owner

a major doc viewing problem

I've seen that issue, thought I fixed it by setting a height on one of the divs, will investigate later.

@silverwind
Owner

Nice work nonetheless, It's great to see the fruits of our efforts for split-view. I'll check out that document problem now.

@silverwind
Owner

Looks like this is on Chrome only.

@silverwind
Owner

So, for this to be done, we need to:

  • Parent the spinner to the view
  • Remove IDs from the final few elements inside a view
  • Parent the upload UI to the view (by dynamically generating it)
  • Remove droppy.sorting and save the sorting direction on the view itself.
  • Add a "Split view" button to the main header, which should serve as a toggle.
@silverwind silverwind added this to the 1.0 milestone Mar 9, 2014
@silverwind silverwind self-assigned this Mar 10, 2014
@silverwind
Owner

Actually, it turns out I don't even have to touch droppy.sorting as it's pretty much needed to convey information to the sorting func and we already store the relevant info on the element itself. The other way of doing this (without a var) would be a closure, but that would mean duplicate code. So I'll keep it.

@silverwind silverwind added a commit that referenced this issue Mar 10, 2014
@silverwind Add split-view button, #34 1d97a8c
@silverwind
Owner

@ZombieHippie We're pretty close to finishing this off now. Could you take a look at how we should initialize the second view? Right now, I useclone() (seen here. f215ded), but that obviously is just for visuals.

When the view is properly initialized, I'll do the final styling.

@silverwind silverwind removed their assignment Mar 10, 2014
@ZombieHippie
Collaborator
@silverwind
Owner

Maybe just "Open Aside", or even just "Aside".

Drag & Drop is obviously the most important feature. I don't have much experience with this, besides knowing I should set an "draggable" attribute. 😆

I'll fix any styling issues that come up, so you can work on the functionality.

@silverwind
Owner

Please pull in 8dd2986 for a important fix to the upload bar styling in split view.

@ZombieHippie
Collaborator

image

@silverwind
Owner

Nice progress!

@ZombieHippie ZombieHippie added a commit that referenced this issue Mar 10, 2014
@ZombieHippie ZombieHippie Fixed paths #34 942d5cc
@ZombieHippie
Collaborator

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment