ryanpcmcquen / obsidian-focus-mode

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

Remove extra elements in Obsidian 1.0? #37

Closed tbenthompson closed 1 year ago

tbenthompson commented 2 years ago

Hi! This is a feature request and not a bug report.

Looking at a document in Focus mode (see the screenshot below), there's a decent amount of visual clutter on the window:

I'm not necessarily asking to remove all these, but I think my ideal tool would do that!

I think the thick bar on the left is the one I would be most interested in removing. Perhaps the Toggle button could be moved to OS window bar or something like that?

image

Thanks very much for the effort you've put into this and don't worry if none of these things are in your plans.

ryanpcmcquen commented 2 years ago

I go back and forth on some of this. If you look through past tickets you will see people wanted more things to show in the past. Would you be willing to submit a PR that removes the thick bar on the left?

nmariano9 commented 2 years ago

+1 to on this! Hiding other open tabs in tab view would be my top priority. I would vote for hiding everything except the single top title.

@tbenthompson the inline title can be disabled by default in appearance settings.

ryanpcmcquen commented 2 years ago

I don't feel too strongly either way, but in the past people wanted tabs to show.

ryanpcmcquen commented 2 years ago

Removed one of the titles: https://github.com/ryanpcmcquen/obsidian-focus-mode/releases/tag/1.10.2

danieltomasz commented 2 years ago

Could this be solved via creating an entry in the “style settings” plugin, people could choose what to remove if they want to modify the behaviour? The most of the people will be using the default you are proposing.

ryanpcmcquen commented 2 years ago

Yep, .focus-mode is already available as a class on the HTML.

ryanpcmcquen commented 2 years ago

Documented here: https://github.com/ryanpcmcquen/obsidian-focus-mode#customizing-the-plugins-appearance

tbenthompson commented 2 years ago

Removed one of the titles: https://github.com/ryanpcmcquen/obsidian-focus-mode/releases/tag/1.10.2

Nice! Thank you! This doesn't quite work right when working inside a folder: "topics/..."

image
ryanpcmcquen commented 1 year ago

@tbenthompson would you want the folder name removed as well or should we remove a different title since the folder name could be useful?

ryanpcmcquen commented 1 year ago

+1 to on this! Hiding other open tabs in tab view would be my top priority. I would vote for hiding everything except the single top title.

@tbenthompson the inline title can be disabled by default in appearance settings.

It's worth noting that 'Super Focus Mode' hides all but the active tab.

ryanpcmcquen commented 1 year ago

I switched to removing the inline title since I could see the folder name as being useful, note that 'Super Focus Mode' will hide all but the active tab. Any further customization can be done with the built in CSS snippets functionality of Obsidian using the CSS classes that are added to the document.body, documented here: https://github.com/ryanpcmcquen/obsidian-focus-mode#customizing-the-plugins-appearance

Let me know if there is anything else, thank you for the helpful feedback!

tbenthompson commented 1 year ago

Thanks!!

If anyone arrives here looking to remove as many elements as possible, here's the CSS snippet I'm using

.focus-mode .workspace-tab-header {
    display: none;
}

.focus-mode .workspace-tab-header-new-tab {
    display: none;
}

.focus-mode .workspace-tab-header-tab-list {
    display: none;
}

.focus-mode .view-header-nav-buttons {
    display: none;
}

.focus-mode .side-dock-actions {
    display: none;
}
image
nmariano9 commented 1 year ago

Thanks!!

If anyone arrives here looking to remove as many elements as possible, here's the CSS snippet I'm using

.focus-mode .workspace-tab-header {
    display: none;
}

.focus-mode .workspace-tab-header-new-tab {
    display: none;
}

.focus-mode .workspace-tab-header-tab-list {
    display: none;
}

.focus-mode .view-header-nav-buttons {
    display: none;
}

.focus-mode .side-dock-actions {
    display: none;
}
image

Thanks, this is awesome!

A step-by-step in case anyone who isn't that computer literate (such as myself...) finds this (EDIT: see @ryanpcmcquen reply below. Just save the code he's provided in a .css and put it in the snippets folder. Then go to Settings -> Appearance and enable the CSS snippet).

ryanpcmcquen commented 1 year ago

@tbenthompson @nmariano9 You should use Obsidian's built-in CSS snippet feature to add modifying CSS. It is documented here:

https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets

Never modify plugin code directly, because it will be overwritten by any updates. Also, since the snippet modifies the same property on each selector, you can chain the CSS selectors delimited by commas:

.focus-mode .workspace-tab-header,
.focus-mode .workspace-tab-header-new-tab,
.focus-mode .workspace-tab-header-tab-list,
.focus-mode .view-header-nav-buttons,
.focus-mode .side-dock-actions {
    display: none;
}