chrisgurney / obsidian-note-toolbar

Plugin for Obsidian providing a flexible way to create context-aware toolbars for your notes.
https://github.com/chrisgurney/obsidian-note-toolbar/wiki
Apache License 2.0
297 stars 7 forks source link

Toolbar not sticking in Reading mode #20

Open chrisgurney opened 6 months ago

chrisgurney commented 6 months ago

Description of the bug

In Reading mode, with the default theme, for example, sticky toolbars do not stick on scroll.

Steps to reproduce

  1. With a sticky toolbar, switch to Reading mode.
  2. With lots of content in the note, scroll the view down.

Expected behavior

Toolbar should stick.

Desktop environment:

chrisgurney commented 6 months ago

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

They're not working for me, and I spent some time last night trying to figure out why.

Technical Notes

FelipeRearden commented 6 months ago

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

Sure I will test and get back to you. Sorry for the late reply, I almost lost this message πŸ™

FelipeRearden commented 6 months ago

@FelipeRearden If you're able, can you confirm if sticky toolbars work for you in Reading mode or not?

🚫 Unfortunately, I can confirm that sticky toolbars NOT WORKING for me in Reading mode.

βœ…I did I clean install of Note Toolbar on version 1.4.11 βœ… No CSS snippets

πŸ’‘ Maybe the CSS wizards from theme-dev on Discord could help πŸ’‘ On Mobile there is a Mobile toolbar on the bottom of the screen that sticky in RM. Maybe some CSS from that container could help

πŸ™ I let you know if some insight sparks in my head. I am trying to remember if there is a plugin that has a container that sticky in RM

FelipeRearden commented 6 months ago

I let you know if some insight sparks in my head. I am trying to remember if there is a plugin that has a container that sticky in RM

My memory never fails me. I knew we have a plugin with a sticky bar on top…

From the legend obsidian plugin developer tadashi-aikawa -> https://github.com/tadashi-aikawa/obsidian-old-note-admonitor

Maybe this plugin could help us πŸ™ πŸ™ πŸ™

chrisgurney commented 6 months ago

@FelipeRearden Thanks for this!

I haven't tried the plugin yet, but looking at their code, they're inserting a bar directly under the editor's navigation bar at the top, which is probably pretty reliable and less likely to be affected by a theme (bonus).

My thought then would be to continue to inject the toolbar as it is now, but use an IntersectionObserver to watch it as it scrolls under the nav bar. When that happens, switch to a toolbar div (probably pre-rendered) that appears in that location (or perhaps just move it there).

The question I have is whether this is something I should do for just Reading mode, or change how it's rendered overall to use this approach. I would keep the sticky attribute available in the CSS for Callouts.

This is something worth testing to make sure it still provides a smooth experience, for sure!

FelipeRearden commented 6 months ago

Hello @chrisgurney !

The question I have is whether this is something I should do for just Reading mode, or change how it's rendered overall to use this approach

I am gonna share with my humble opinion as a user and plugin tester for desktop and mainly for mobile. What you achieve here on keyboard navigation in something rare to occurs.

The user experience in flawless which is something difficult to achieve specially for Mobile. That’s why I was so so worried about the feature because I struggled in the past with the developers to achieve an experience equal to what we have here in your plugin.

Believe me managing the active note focus while switch between containers in mobile in a nightmare and we dont have problems here πŸ™

This way, my humble opinion would be to isolate a new approach only for reading mode because we dont have to deal with the focus (caret cursor) in the active note (for the UI behavior perspective and trigger command perspective)

As you know, I am here with you no matter what and I can help with all the tests β˜€οΈ

chrisgurney commented 6 months ago

@FelipeRearden This is next on my list!

FelipeRearden commented 6 months ago

@FelipeRearden This is next on my list!

Thanks for the feedback @chrisgurney !!!!!

Great news and sending to you positive energy to find an easy solution πŸ™ πŸ™ πŸ™ πŸ™

CCerrer commented 6 months ago

Got this bug too Hope you find a solution, gl bro

chrisgurney commented 6 months ago

Hello all, I've been working at this for almost two weeks, and unfortunately have not been able to find a reliable solution, perhaps due to the constraints of plugins, or perhaps due to me still learning, or perhaps both.

Instead, I've opted to release the beta as-is with a number of features that have been suggested by the community.

One such suggestion was adding a way to permanently stick the toolbar to the top, which you can now do with the Position setting. This will keep the toolbar at the top of the view in both Editing/Source and Reading/Preview modes, which may address the desired UX that some of you had.

Other learnings:

I'd love help testing the beta (via BRAT)! If you haven't used BRAT before, instructions are here.