(Feature request) Bring back Zen Mode

[en3r0]

Describe feature

I personally found Zen Mode to be a great way to focus in on the notes.

Is there any way to bring it back?

Additional Information

No response

[zadam]

Hi, if you hide the left panel, there isn't that much visible on the screen:

[en3r0]

I agree, it is not much, but it is not quite "zen like".

Ideally I would like to get as close to a blank screen as possible. All icons and tabs hidden, just a blank screen and a blinking cursor.

I don't think something like that is possible through CSS modification only?

[zadam]

I don't think something like that is possible through CSS modification only?

Almost. You can hide the elements on the page with CSS selectors, but you also need a way to trigger between zen and non-zen mode.

You could add a button/shortcut like this:

api.addButtonToToolbar({
    title: 'Zen mode',
    icon: 'book',
    action: function() {
         $("body").toggleClass("zen-mode");
    },
    shortcut: 'alt+t'
});

The hiding CSS selectors will be then prepended with .zen-mode.

[cwilliams5]

Zadam's way above works excellent! I've added Zen Mode to my Midnight Trilium Theme:

Heres the relevant CSS I used.

For a basic Zen Mode that still keeps some note UI like tabs, attributes, and splitter:

/* Zen Mode */
body.zen-mode #launcher-pane, body.zen-mode #left-pane, body.zen-mode .title-bar-buttons {
    display:none !important;
}

For an extreme Zen Mode that hides everything but the note:

/* Zen Mode Extreme */
/* display:none friendly */
body.zen-mode #launcher-pane, body.zen-mode #left-pane {
    display:none !important;
    height:0 !important;
    width:0 !important:
} 
/* display:none not friendly - some of these have an interactivity lag when coming back from display:none so another method must be used */
body.zen-mode .title-bar-buttons, body.zen-mode .tab-row-widget, body.zen-mode .title-row, body.zen-mode .ribbon-container, body.zen-mode .gutter, body.zen-mode #rest-pane > div:nth-child(1) {
    visibility: hidden !important;
    height:0 !important;
    width:0 !important:
} 

To me Trilium's awesome style and script flexibility means this can be recreated and perhaps this issue closed?

[en3r0]

This works great!

Only thing I would add if making this a feature again is having ESC also exit Zen Mode. Not sure if that is possible with this implementation or not.

[tbnorth]

For those wanting to use the feature discussed here, you just need to create two notes as follows:

1. A CSS note (Basic Properties: Note type: CSS) with an Owned Attribute #appCss. In this note put either of the CSS snippets above.
2. A JS frontend note (Basic Properties: Note type: JS frontend) with an Owned Attribute #run=frontEndStartup . In this note put the api.addButtonToToolbar... code snippet above.

Reload and there will be a book icon button bottom left. Note that there's no obvious way to exit the extreme Zen mode, but Ctrl-R (browser re-load) works.

[meichthys]

Trilium has entered maintenance mode. Future enhancements will be addressed in TrilumNext: TriliumNext/Notes#141