ryanpcmcquen / obsidian-focus-mode

Add focus mode to Obsidian.
Mozilla Public License 2.0
67 stars 7 forks source link

Bug? Note title isn't hidden on single/first pane #19

Closed frankreporting closed 3 years ago

frankreporting commented 3 years ago

I'm getting a behavior that is different from the screenshots/gifs in the readme file. In your demo, all note titles are hidden in focus mode. In my case, if I have only one pane open, it stays visible in focus mode, although the note controls disappear. If I have more than one pane, the title is only hidden on additional panes, and not on the first/leftmost one. In your demo, ALL note titles are hidden.

I'm on macOS Big Sur, Obsidian 0.12.13 insider edition.

I'm not sure if I have another plugin conflicting or if this is an OS specific thing, or if other users are seeing the same limitation. I'll report back if I can isolate a plugin conflict.

ryanpcmcquen commented 3 years ago

Can you try with all other plugins disabled?

frankreporting commented 3 years ago

Got it.. it's the Hider plugin, specifically the setting "Hide title bar (frameless mode)." With that setting enabled, the title bar disappears, and the note title appears at the very top where the title bar would have been. What's strange is the div classes appear to be the same either way: .view-header > .view-header-title-container > .workspace-leaf.mod-active .view-header-title. And in frameless mode, the controls (edit/close/ellipsis menu) are hidden in focus mode. It's just the title that's not being hidden.

ryanpcmcquen commented 3 years ago

My guess would be a changed DOM structure, or the 'Hider' plugin is using an !important rule.

frankreporting commented 3 years ago

Understood.. I don't see anything like that in the stylesheet on the Hider repo, and it doesn't look like the author made it possible to track issues. But I can try to play around to see if I can figure it out, too.

ryanpcmcquen commented 3 years ago

Yeah, they add classes to the document body, which gives the Hider CSS rules 'priority' (because of increased specificity).

Not sure there is a good way to fix this on my end without an ugly hack.

frankreporting commented 3 years ago

It looks like the .view-actions DOM element is unchanged when Hider goes into frameless mode. However, Hider adds the ::before element to the .view-header-title div. I'll ask the dev, kepano, if that's something that might be changed in Hider.

<div class="view-header-title" contenteditable="true" spellcheck="false" tabindex="-1">
   ::before
   [note title here]
</div>
frankreporting commented 3 years ago

Hey just letting you know I found the issue, and it was in the Minimal Theme CSS. Huge thanks to you and kepano, the Minimal Theme dev, for helping me isolate it. Not sure if you'd want to try implementing this in Focus Mode, but I also shared the fix with kepano in case he wants to update Minimal Theme. And for anyone else who's also nitpicky like me and wanted to have Minimal Theme AND be able to hide the title, here's the CSS that did the trick (I added it directly to the Minimal Theme stylesheet in the theme folder, so it will break on update.. this is not a permanent fix)...

EDIT: I ended up putting this in a CSS snippet, and it seems to work that way, so even when the plugins are updated, presumably it will continue working.

/* Hide Title area when hiding View actions in Minimal Theme Settings  */ 

.view-header-title-container {
  transition:opacity 0.25s ease-in-out;
}

.view-header-title-container.is-active {
  opacity:1;
}

.workspace-ribbon:not(.is-collapsed) ~ .mod-root .view-header-title-container,
.focus-mode .workspace-ribbon:not(.is-collapsed) ~ .mod-root .view-header:hover .view-header-title-container,
.workspace-ribbon.mod-left.is-collapsed ~ .mod-root .view-header:hover .view-header-title-container,
.mod-right.is-collapsed ~ .mod-root .view-header:hover .view-header-title-container {
  opacity:1;
  transition:opacity 0.25s ease-in-out;
}

.focus-mode .view-header-title-container,
.focus-mode .workspace-ribbon.mod-right.is-collapsed ~ .mod-root .view-header-title-container,
.focus-mode .workspace-ribbon.mod-left.is-collapsed ~ .mod-root .view-header-title-container {
  opacity:0;
  transition:opacity 0.25s ease-in-out;
}