Column View

Napier · March 28, 2020, 9:27pm

One of the main things I’m hoping for in Dynalist at some point is some sort of Kanban-esque/column view. Been considering the best way to implement something like that, and tried doing a mockup today:

Was easier than anticipated! Needs to be cleaned up and tweaked so that it’ll handle more than 2 columns and whatnot, and I’ll need to figure out how to add a view button for it with an extension (claiming the name ‘DynaKan’ now! Haha).

What do y’all think? Would you find something like this useful? Anybody more experienced with CSS and/or extensions want to try their hand at it?

Kevin_Murray · March 28, 2020, 10:12pm

Does this mean you can drag items between columns?

Napier · March 28, 2020, 11:04pm

EDIT: just double checked it, can drag items to the first column but not into the 2nd+ columns by default, but I think I know what the problem with that is and should be fixable.

Philipp · March 29, 2020, 11:43am

Looks awesome!
I have a little experience in web dev.

To add the button we need to inject a JS script via tampermonkey or a similar addon. The script inserts/removes the css you wrote.

If you want you can make your css public and then we can try out if this can be implemented easily. But atm I am not sure if drag&drop between coloumns is that easy…

Napier · March 29, 2020, 2:53pm

I figured tampermonkey might be needed. And yes a bit of premature excitement. -sad trombone-

After futzing with it this morning I did make some more progress. Using display: flex; on the parent element you can only only drop onto the leftmost column, but using display: inline-block; on the children elements instead it drops items on the leftmost line at that y position.

Tampermonkey might need to tweak the drag/drop behavior too? Not sure how complicated that would be…

EDIT: just realized I should mention this: .Node.is-currentRoot > .Node-children { width: 10000px; } is just setting the width of the document high enough to negate the wrapping, to do this properly it will need to update based on the number of columns present.

Here’s the CSS for anybody that wants to give implementing it a go or just have a play around (super simple!).

.Node.is-currentRoot > .Node-children {
    width: 10000px;
}

.Node.is-currentRoot > .Node-children > .Node-outer {
    display: inline-block;
    vertical-align: top;
}

.Node.is-currentRoot > .Node-children > .Node-outer > .Node {
    width: 400px;
    margin: 10px;
}

.CurrentLineHighlight {
    display: none !important;
}

.DocumentTools {
    top: -12px !important;
}

CHIANG_E · May 18, 2020, 5:50am

@Napier
What modifications needed to disable this whole CSS piece in mobile view?

Napier · May 18, 2020, 8:38pm

I don’t think I understand the question. To disable it you would remove the css you added from settings > pro > custom css (or alternatively the stylish/stylus extension)-- if you meant enable, not disable, then you would add it to that same location.

I’ll reiterate that the CSS is just a mock-up, moving items in that modified view does not work properly and will require some JavaScript injection shenanigans.

CHIANG_E · May 19, 2020, 2:08am

Thanks for your response.

I did not make clear in my previous post that your CSS codes for multiple column views written for Desktop app is not optimized for the Mobile app (at least on my Android app).

I was wondering if you could look into modifying the codes for use on both desktop & mobile apps, aiming to auto “deactivate” the code piece on Mobile app while one continues to enjoy the multiple columns on Desktop app without resorting to manually paste in & out the code piece.

Thanks again.

CHIANG_E · May 19, 2020, 2:21am

Moving items performed well (without any other aids) so far. Will report if otherwise.

Napier · May 21, 2020, 2:03pm

Ah I see! Updated it so that edits are disabled if dynalist is not in desktop-view, appears to be working for me but I might have missed something. Might be a better way to do this? Not sure x)

/* experimenting with column view */

/* is-desktop | is-mobile */

.is-desktop .Document-rootNode > .Node.is-currentRoot > .Node-children {
    width: 10000px;
}

.is-desktop .Document-rootNode > .Node.is-currentRoot > .Node-children > .Node-outer {
    display: inline-block;
    vertical-align: top;
}

.is-desktop .Document-rootNode > .Node.is-currentRoot > .Node-children > .Node-outer > .Node {
    width: 400px;
    margin: 10px;
}

.is-desktop .Document-rootNode > .CurrentLineHighlight {
    display: none !important;
}
/* fix node wrap */
.is-desktop .Document-rootNode > .Node-contentContainer {
    max-width: 90% !important;
}

.is-desktop .DocumentTools {
    top: -12px !important;
}

Napier · May 21, 2020, 1:34pm

Ooh, that’s good to hear! On my end drag/drop still prioritizes the left-most column…

Kenneth_Aar · May 21, 2020, 3:47pm

Wow. Thank you, I can’t wait to try it out

Napier · May 21, 2020, 5:03pm

Welcome!

Thought I posted an update before but apparently that was only in DMs: to complete this lil’ addition will require a tampermonkey script to A) add a view button and B) fix the drag drop functionality. I don’t have time for it right now but at some point I hope to get it finalized.

Boudewijn · July 27, 2020, 2:57pm

I support this feature for multiple columns. Workflow already has a beautiful implementation of this. When will we get it? It would also make a Speare.com experience possible where you become a thought processor and writer accelerator.

Moi · October 21, 2020, 11:38am

Make Folder = Board

A simple and clean implementation would be that clicking a folder shown all the docs within it as columns; and you could drag and drop in between them (like workflowy, trello, kanban…)

Would make it the best of the best for me.