#68

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 :slight_smile:

Here are some related CSS/plugins from the Roam community in case it’s helpful:

3 Likes
#69

/edit: Found the outline plugin. Was wondering about the TOC.

By the way, awesome work with the CSS.
Extremely useful. Thank you.

#70

I encountered an issue. The hover-preview is displayed at an incorrect location.
Is there a way to fix this?

![Screenshot_2020-09-20_20-32-33|690x388, 75%]

Screenshot_2020-09-20_20-32-33
Screenshot_2020-09-20_20-32-331920×1080 234 KB

#71

I don’t think there’s a way to fix that without javascript, unfortunately. I’ve had a look into it previously and couldn’t find a workable solution.

1 Like
#72

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… :thinking:

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.

1 Like
#73

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.

2 Likes
#74

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

Screenshot_2020-09-21_19-00-28
Screenshot_2020-09-21_19-00-281884×1080 403 KB

#75

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 :slight_smile:

#76

This is by far my favorite version of Andy Mode. Thank you so much for putting this together it works perfectly with version 0.9.6

1 Like
#78

How do we actually activate this feature?

#79

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).

1 Like
#80

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 :sweat_smile:).
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.

8 Likes
#81

@death.au Nice work, this is really helpful. Thank you!

#82

@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).

#83

@Yllis: do you have 3rd party plugins enabled in the settings?

#84

@Klaas No I don’t

#85

This is normal behaviour. Obsidian opens links in the current pane by default — you have to shift+click to open in a new pane.

#86

@death.au OK. Thanks :slightly_smiling_face:

But what I don’t understand is how the sliding effect works ? :thinking:
One of the big power of the Andy Matushak is the possibilty to slide the pane.

#87

Open multiple panes with shift+click, then use horizontal scrolling to slide back and forth.

https://i.imgur.com/Pj5ETaB.gif(image larger than 4096KB)

#88

Thanks very much !