make "show outline" sticky - stay enabled/disabled after closing file

[meonkeys]

Is your feature request related to a problem? Please describe.

I love the Outline sidebar when I edit Markdown files. I nearly always want it on. It's a bit deep in the menu.

Describe the solution you'd like

I'd love it if the Outline was "sticky" when toggled. If I turn it on once, I'd like it to stay on, even after I close the current document and open another one. Similar for when I turn off the Outline.

Describe alternatives you've considered

None.

Additional context

Would this be a good "first issue" for a new contributor?

[max-nextcloud]

Hi @meonkeys I see your point - seems like a good addition in particular as we try to make such settings sticky where possible.

I know @mejo- worked on this in the context of the collectives app and ran into issues on semi wide screens where the outline would overlap the document content. I can see how that can be annoying if you open a file and the left part of the text is overlapped by the outline to begin with.

In terms of the good first issue I think it would be good if we went through some questions together to clarify how to implement it. Then i think it would really be a good first issue. If you are considering working on it please let me know. I'm happy to help where i can.

One question that would need to be clarified from my point of view is the context this should be sticky in. Is it per user, per device, per browser used, per login session? This will also determine where we want to store the setting.

[meonkeys]

re: first issue - maybe! I'll try setting up a development environment. This might be a fun project to do over the holidays, and I do use the app a lot so this would be some great dogfooding. I'm not the best at frontend development but I understand the fundamentals, I have some formal CS training and plenty of on-the-job experience, I can learn, and I have good development habits.

re: sticky context - I think per-browser makes sense, and lifetime can be "forever". So, like, "Jeff Firefox on his desktop computer: Outline ON", "Jeff Chromium on his tablet: Outline OFF". And it stays until cookies / local storage are removed (or until a user logs out, whichever is easiest). How does that sound?

[mejo-]

Hey @meonkeys - great to read that you're keen to look into this :heart:

As @max-nextcloud wrote, I already worked on implementing stickyness of the outline view in the Collectives app. The main issues I faced:

• When opening a document without headings, there's no use in displaying an outline. Even more, the empty outline container looks rather displaced and ugly in my eyes. So I wonder whether this should be regarded as an exception to the sticky outline view. Or maybe we can improve the layout so that an empty outline looks acceptable. Or we could display the outline container automatically once a first heading is added if it is flagged as "sticky open" :thinking:
• On small screens the outline container might overlap the actual document content. In this cases, the open outline view should not be sticky in my eyes as it makes it harder to access the document content itself.
• When treating the two scenarios above as "exceptions" to sticky outline, the user experience might not be that straight-forward anymore. The user might wonder why sometimes the outline is sticky, and sometimes it's not.

I'm happy to hear your thoughts on it. And maybe also @jancborchardt and @nimishavijay (our design team) have comments?

[meonkeys]

Hi peeps, just a quick update that I haven't had time to work on this and I'm not sure when/if I will. :cry:

[micw]

Hi, I was searching for this feature and found this issue. Is there a chance that it gets implemented soon?

How about enabling the outline by default if the screen is wide enough? It should satisfy all who need/use it and should not harm others.

[FelixKainz]

How about enabling the outline by default if the screen is wide enough?

I agree that this wold be a very good solution for now. I can imaging cases where, even if not wide enough, the index would be handy, but this would be a 95 % solution that can be implemented in the front end alone, so should be rather simple.

[FelixKainz]

I figured it should be possible to implement this in the front end alone, so I hacked some JavaScript into it.

The following JavaScript can be injected into your browser at runtime. Run it with a browser extension to inject JavaScript like Greasemonkey (Firefox add-on).

// Author: Felix Kainz

// ==UserScript==
// @name     [Nextcloud] Automatically show notes headings outline
// @include  */apps/notes/note/*
// @run-at document-idle
// ==/UserScript==

console.log('OUTLINE: script started');

const menuLoadingTimeout = 5000;  // increase this if you get "TypeError: headingsMenuBtnContainer is null"
const config = { subtree: true, childList: true };

let previousUrl = '';

// Start setup listeners on page load and change
const observer = new MutationObserver(function() {
  // Credit goes to https://stackoverflow.com/a/67825703
  if (location.href !== previousUrl) {
    previousUrl = location.href;
    console.log(`OUTLINE: URL changed to ${location.href}`);
    toggleHeadingsOutlineMain();
  }
});
observer.observe(document, config);

// End setup listeners on page load and change

function toggleHeadingsOutlineMain() {
  setTimeout(function() {
    toggleHeadingsMenu();

    setTimeout(function() {
      toggleHeadingsOutline();
    }, 1);
  }, menuLoadingTimeout);
}

function toggleHeadingsMenu() {
  // Click the button to show the headings menu
  let headingsMenuBtnContainer = document.querySelector('.action-menu-headings');
  let headingsMenuBtn = headingsMenuBtnContainer.querySelector('.action-item__menutoggle');
  headingsMenuBtn.click();
}

function toggleHeadingsOutline() {
  // Click the button to show the headings outline
  let headingsMenuBtns = document.querySelectorAll('.action-button.button-vue.focusable');
  let headingsOutlineBtn = headingsMenuBtns[headingsMenuBtns.length - 1];
  headingsOutlineBtn.click();
}

console.log('OUTLINE: script done');

It automatically shows the outline in the app Notes.

Limitations

• It does not work outside of the notes app. It should be easy to fix that but there was no need for me yet.
• There is a timing issue here. I have very little understanding of web development. I am happy that I got this hacked together. I don't know how to trigger this logic on load of the involved buttons. Perhaps with an on load of the parent container? Hence, you might need to dial in the value of the variable menuLoadingTimeout to fit the time your notes page takes to load in your browser. I put 5000 milliseconds here. Experiment how far you can go down. 500 works for me on a fast system and a locally hosted instance of NC.
• It does not consider the available screen width. Ideally, it would automatically show the outline when there is enough space for its container and automatically hide it again when the window gets resized and there is not enough space anymore.

This solution works well for me. I hope it does for you too! A proper solution would still be desirable to make it work across apps, not be dependent on JS hacking and to make it compatible with other browsing solutions than web browsers.

[alexanderdd]

Hi, I was searching for this feature and found this issue. Is there a chance that it gets implemented soon?

Leave a 👍 for the initial post, that way devs see what people want. I can't say anything about the status of this unfortunately. It does have the tag "to develop, so it was accepted. Anybody who can help is welcome.

How about enabling the outline by default if the screen is wide enough? It should satisfy all who need/use it and should not harm others.

@mejo- should I open a separate issue for "automatically show outline if there is enough space"?

[mejo-]

Just to let you know, outline will become persistent per page and browser in Collectives along with https://github.com/nextcloud/collectives/pull/1843.

In other words, when the outline is toggled for a particular page, it will be persistent across page switches and reloads.

[FelixKainz]

@mejo- that sounds great! Thanks for updating us.

[b4u-mw]

In other words, when the outline is toggled for a particular page, it will be persistent across page switches and reloads.

But why per page and not in general? Makes no sense to me (if "page" means "document").

[mejo-]

But why per page and not in general? Makes no sense to me (if "page" means "document").

Because it's useless for pages that don't even have headings. Also, on narrower screens, the outline can overlay the actual document, so it gets into your way. Making it persistent per page is the compromise 😆

[b4u-mw]

Because it's useless for pages that don't even have headings

But does not hurt and these pages will probably get headlines after a while of editing. Also it's not an argument for "persistent per page and browser", it's one for "persistent per page" only.

on narrower screens, the outline can overlay the actual document

That's not an argument for storing it per page, it's one for storing it per browser/computer.

Making it persistent per page is the compromise

IMO it's a bad one, "per page" only or "per browser" only would be better.

[gabrielguerrer]

Looking forward to this update! :-)