This works wonderfully! It brings Obsidian a lot closer to matching the easy multitasking/comparison UX of Roam. For me, the value is in not having to worry about pane management, everything is a click and a scroll away.
All that remains is:
Hide the overflow of “sidebar” titles as they scroll to the left, to prevent the stacking that limits the number of pages you can have open (OR make it easier to rearrange the sidebar notes, so you can bring the ones you’re actively working on into the leftmost panes)
Click on a page title to automatically scroll it in to focus, to help with faster navigation between sidebar pages
A keyboard click command that enables you to click the title of the “sticky” page and perform a vertical split action (to move it into the “sidebar”)
A keyboard click command to click the title of a sidebar page and move it into the “sticky” position, or at least open a duplicate pane in the sticky position
OR, to be even more efficient than the above two bullets (which just seek to replicate Roam), a keyboard click command which swaps the positions of a sidebar page and the sticky page (i.e. to bring a new page into focus but still keep the previous sticky page to hand in the sidebar)
As you’ve said previously, I suspect these would require more than just CSS, but I look forward to your plugin when the API goes live
Here are some related CSS/plugins from the Roam community in case it’s helpful:
With your first point, I’m having a little trouble visualising what you mean. Just… not stacking them so they all go over the top of each other? Or do you mean having some sort of limit?
(I do want to make them easier to rearrange, but that’s going to be a javascript problem)
I’ve played around with some javascript to get my head around how this would work as a plugin, and it’s very rough and mostly just playing around, but I did manage to get ‘click to focus’ to work (in actuality, it’s on focus scroll into view) and it’s pretty cool.
I’ll have to play around with the idea of a sticky page. I wonder if I can tap into the existing pinning functionality and make a pane “sticky” while it’s pinned. If so, this might solve some of the points you mention…
Edit: That second tweet/gif is very helpful in showing me what you mean. It’s basically what we have now, minus the fancy sideways titles and with some extra focus magic.
This code forgoes the stacking titles, and allows the active pane to sit on top of all the others, while keeping a left “main” pane. I also added some margin so you can tell that the right panes are a little separate.
I’m also forgoing the “spine” titles in this particular code for simplicity’s sake but it’s easy enough to add back in and doesn’t affect the result much:
/* Andy Matuschak mode! modified so that the first pane is "sticky" */
/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical {
overflow-x: auto;
--header-width: 36px;
--pane-width: 700px;
/* <- 36px is the header height in the default theme */
--padding: 10px;
background-color: var(--background-secondary);
}
.mod-root.workspace-split.mod-vertical>div {
min-width: calc(var(--pane-width) + var(--header-width));
/* <-- 700px is the default theme's "readable" max-width */
box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.25);
position: sticky;
left: 0;
}
.mod-root.workspace-split.mod-vertical .workspace-leaf.mod-active,
.mod-root.workspace-split.mod-vertical>div:first-of-type {
z-index:1;
}
/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical>div:not(:first-of-type) {
left: calc((var(--header-width) * 0) + var(--pane-width) + var(--header-width) + var(--padding));
margin: var(--padding);
max-height: calc(100% - var(--padding) - var(--padding));
}
/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-leaf:not(:first-of-type) .workspace-fake-target-overlay {
background-color: var(--background-primary);
}
Unfortunately, there doesn’t appear to be any sort of class or marker for is pinned, so making pinned panes sticky is going to have to wait for plugins.
Awesome! I removed most of the box shadow, the padding at the top right pane and the line which made the active right pane sit on top of the others.
Then I adapted the pane width a bit.
This is exactly how I want it.
Thanks a lot. Looking forward to the plugin.
Awesome work as always! I also got rid of the focusing on the right panels and the padding, because it looks cleaner and in practice I think it’ll be less complicated to handle scrolling between them.
The main thing I was looking for was a “main panel” and the ability to have limitless pages on the right hand side.
I think I can now rest happy with it as it is for my workflow, so thanks again
With Custom CSS enabled in Preferences → Appearance, copy the CSS above (e.g., the code in death’s reply above) onto the end of obsidian.css at the root of your vault. Then, reload Obsidian (e.g., cmd+r).
The plugin API is available for insiders now, so I’m most likely going to be working on the plugin version of this from now on: Sliding Panes (Andy Matushcak Mode) Plugin
Of course, as a plugin it will be that little bit harder to customize to your own personal tastes, as I know a few of you have done. I also plan to introduce new options and features down the line like having a ‘main’ panel and/or pinning panels (these kinds of things are probably a while off yet — I suddenly find myself with a lot of projects going on at once ).
All that is to say that this thread isn’t necessarily dead yet, and if you have questions or comments or want to use this CSS and tweak it to your liking, I’ll still be happy to help.
@death.au Thanks for this awesome job !
Don’t know why sliding windows doesn’t work in my obsidian (O.9.7 in Ubuntu/Gnome). When I open a file (clicking in the left panel or with a link, it close the one already opened).
).