Column View

šŸŒˆShare & Showcase
1

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:

image
image1806Ɨ974 128 KB

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?

11 Likes
2

Does this mean you can drag items between columns?

3 Likes
3

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.

1 Like
4

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ā€¦

1 Like
5

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;
}
2 Likes
6

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

8

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.

1 Like
9

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.

10

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

11

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;
}
2 Likes
12

Ooh, thatā€™s good to hear! On my end drag/drop still prioritizes the left-most columnā€¦
columnDragDropBug

13

Wow. Thank you, I canā€™t wait to try it out

14

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. :smiley:

3 Likes
15

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.

4 Likes
16

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.

2 Likes