Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vim mode navigation for horizontal sidebar css themes such as Zenith (work in progress) #5

Conversation

tntmarket
Copy link
Owner

@tntmarket tntmarket commented Jun 25, 2020

The current h and l shortcuts don't really with with CSS themes with horizontal layout, such as Zenith

Here is a demo of navigating left / right among sidebar panels:

https://www.youtube.com/watch?v=4t9cy_A3-QI

I wonder if we can detect whether the user is using horizontal mode or not, and adjust the behavior or h/l accordingly.

@tntmarket tntmarket changed the title Vim mode navigation horizontal sidebar css themes Vim mode navigation for horizontal sidebar css themes such as Zenith Jun 25, 2020
@tntmarket tntmarket changed the title Vim mode navigation for horizontal sidebar css themes such as Zenith Vim mode navigation for horizontal sidebar css themes such as Zenith (work in progress) Jun 25, 2020
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from ce6c1e2 to 3e96f36 Compare June 25, 2020 06:46
@Stvad
Copy link

Stvad commented Jun 26, 2020

My understanding is that those panels are just subsections of sidebar displayed differently, right? I think it's useful to have a behavior to switch between those regardless (in fact it's one of the feature requests I had)
so how about making this behavior default? (I assume it works when panels are stacked on top of each other?) potentially with additional shortcuts to go to leftmost/rightmost panel

@tntmarket
Copy link
Owner Author

tntmarket commented Jun 26, 2020

Yeah, I think this works for switching between sidebar panels even with the default theme.

The only caveat is that this branch fails to vertically scroll in the sidebar, because each "panel" manages it's own scrolling.

To elaborate, the current DOM structure is something like:

<div id="roam-article" panel="MAIN" vertical-scroll>
    Main page
</div>
<div id="roam-right-sidebar-content" panel="SIDE" vertical-scroll>
    <div>Side page A</div>
    <div>Side page B</div>
</div>

The horizontal CSS theme I'm using does something like this:

<div id="roam-article" panel="MAIN" vertical-scroll>
    Main page
</div>
<div id="roam-right-sidebar-content">
    <div panel="Page A" vertical-scroll>Side page A</div>
    <div panel="Page B" vertical-scroll>Side page B</div>
</div>

Scrolling panel "Page A" while using the default theme doesn't move the scrollbar of the roam-right-sidebar-content container.

Some options I can think of:

  • Decouple scrolling from panels, by distinguishing "Scroll sidebar" vs. "Scroll sidebar page" (I think this would make the UX unintuitive though)
  • Introduce "Cycle through sidebar pages" as a new action, distinct from "Move left/right between panels", and they'd coincidentally be the same if you happen to use a horizontal css theme
  • Figure out which pages have scroll bars, and commit to those elements being the "Panels". (For example, we could have a checkbox setting for "horizontal mode", or we can check the computed styles of sidebar pages to see which ones have vertical scroll)

@Stvad
Copy link

Stvad commented Jun 27, 2020

what I had in mind is closest to

Introduce "Cycle through sidebar pages" as a new action, distinct from "Move left/right between panels", and they'd coincidentally be the same if you happen to use a horizontal css theme

@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch 2 times, most recently from df9d279 to cc694e2 Compare June 27, 2020 23:22
@tntmarket tntmarket changed the base branch from block_navigation_mode to master June 27, 2020 23:55
@tntmarket tntmarket changed the base branch from master to vim_mode_5_open_links_using_hint_hotkeys June 27, 2020 23:56
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch from 69f7c07 to f8e7c11 Compare June 28, 2020 06:49
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from cc694e2 to 2f85f93 Compare June 28, 2020 06:49
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch from f8e7c11 to 023f7e6 Compare June 28, 2020 07:08
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from 2f85f93 to a465942 Compare June 28, 2020 18:43
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch from 023f7e6 to b1727c8 Compare June 29, 2020 02:52
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from a465942 to 20065bd Compare June 29, 2020 03:08
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch from b1727c8 to a1a481d Compare July 3, 2020 01:51
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from 20065bd to 6737e0d Compare July 3, 2020 01:51
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch 2 times, most recently from c3d1518 to 5a52ce6 Compare July 5, 2020 04:09
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from 2a44cdc to 1290791 Compare July 5, 2020 04:09
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch from 5a52ce6 to 0db4748 Compare July 6, 2020 01:15
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from 1290791 to 16e4868 Compare July 6, 2020 01:16
@tntmarket tntmarket force-pushed the vim_mode_5_open_links_using_hint_hotkeys branch 2 times, most recently from 84153a8 to 5d4935f Compare July 6, 2020 05:43
@tntmarket tntmarket changed the base branch from vim_mode_5_open_links_using_hint_hotkeys to master July 7, 2020 02:21
@tntmarket tntmarket force-pushed the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch from 16e4868 to e672de9 Compare July 7, 2020 02:21
@lkhphuc
Copy link

lkhphuc commented Jul 12, 2020

Thanks for the feature. I'm currently using the Vim mode with horizontal layout.
Aside from moving horizontally with h,l, the moving up/down using j/k in a side page doesn't scroll it vertically as well.
Hope you can resolve that in this PR as well.

@tntmarket
Copy link
Owner Author

Closing in favor of roam-unofficial#160

@tntmarket tntmarket closed this Aug 30, 2020
@tntmarket tntmarket deleted the vim_mode_WIP_panel_navigation_for_horizontal_side_bar_css_themes branch August 30, 2020 00:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants