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

Add nested context menus #37

Merged
merged 1 commit into from Nov 14, 2019
Merged

Add nested context menus #37

merged 1 commit into from Nov 14, 2019

Conversation

@wol-soft
Copy link

wol-soft commented Oct 8, 2019

Description of the Change

Implemented nested context menus. Nested context menus are created by adding the class v-context__sub to a menu element. Inside the v-context__sub a new container (eg. a UL element) with the class v-context must be created. The v-context container will be opened and positioned after the v-context__sub is hovered or the menu element is expanded by keyboard right click.

image

The context menu keeps track of the currently active sub menu which can be controlled by keyboard and mouse. Opened sub menus stay inside the window boundaries (25px margin, as well as the main context menu). As the sub menu controls are based on the class names and not on specific elements the current flexibility of the component regarding the internal DOM structure is kept (as discussed in #5 )

Additionally added a scrollbar to menus which exceed the window boundaries:

image

Benefits

  • Nested menus
    • mouse controls
    • keyboard controls
    • flexible as the implementation is class based and not element based
  • Menu doesn't overflow out of the window

BC

As the implementation only jumps in if a context menu element with the class v-context__sub is detected no backward incompatible changes are expected.

Example

Patched the test index.html to contain nested menus. A nested menu looks like:

<vue-context ref="menu" @close="onClose">
    <template slot-scope="child">
        <li tabindex="0">
            <a href="#" class="v-context-item"
               @click.prevent="onClick('item 1')"
            >
                Do something
            </a>
        </li>
        <li class="v-context__sub">
            <a href="#" class="v-context-item"
               @click.prevent="onClick('item 2')"
            >
                Do something else
            </a>
            <ul class="v-context">
                <li tabindex="0">
                    <a href="#" class="v-context-item"
                       @click.prevent="onClick('sub item 1')"
                    >
                        Submenu
                    </a>
                </li>
            </ul>
        </li>
    </template>
</vue-context>
Nested context menus are created by adding the class v-context__sub to a menu element. Inside the v-context__sub a new container (eg. a UL element) with the class v-context must be created. The v-context container will be opened if the v-context__sub is hovered or the menu element is expanded by keyboard right click.
@rawilk

This comment has been minimized.

Copy link
Owner

rawilk commented Oct 12, 2019

@wol-soft Thank you for your contribution. I'm happy with the code you have provided and will probably merge this in the near future when I get a chance to after the updates to the menu that I'll be rolling out soon.

@rawilk rawilk added the enhancement label Oct 12, 2019
@wol-soft

This comment has been minimized.

Copy link
Author

wol-soft commented Oct 13, 2019

@rawilk if you need any additional help (merging, adding an example to the documentation, ...) just let me know.

@SrAxi

This comment has been minimized.

Copy link

SrAxi commented Oct 21, 2019

Do we have an ETA on this?

@rawilk rawilk changed the base branch from master to release/v5 Nov 14, 2019
@rawilk rawilk mentioned this pull request Nov 14, 2019
@rawilk rawilk merged commit b2d17e5 into rawilk:release/v5 Nov 14, 2019
@rawilk

This comment has been minimized.

Copy link
Owner

rawilk commented Nov 14, 2019

@wol-soft I've merged your branch into my v5 release branch I'm working on right now. I did tweak some lines in there to match my coding style, but otherwise everything you've written is being merged.

Thank you for submitting this PR. It will be a nice addition to the component.

@rawilk rawilk mentioned this pull request Nov 14, 2019
@wol-soft

This comment has been minimized.

Copy link
Author

wol-soft commented Nov 15, 2019

Hi @rawilk thanks for merging. I think the only thing missing is a demo in the documentation at https://vue-context.com/docs/4.0/overview

@rawilk

This comment has been minimized.

Copy link
Owner

rawilk commented Nov 15, 2019

I'm hoping to update the documentation this weekend for the new version

@nlaitan

This comment has been minimized.

Copy link

nlaitan commented Nov 15, 2019

Hi, thanks for this feature. The icon of submenu doesnt show, in this place appears a square

@wol-soft

This comment has been minimized.

Copy link
Author

wol-soft commented Nov 16, 2019

Hi @nlaitan which OS/Browser are you using?

@rawilk

This comment has been minimized.

Copy link
Owner

rawilk commented Nov 20, 2019

Didn't get the documentation updated this weekend as planned, but it is up-to-date now for version 5. The doc site also includes a demo for the new nested context menu feature you introduced with this PR as well.

@nlaitan

This comment has been minimized.

Copy link

nlaitan commented Nov 23, 2019

@wol-soft I use Chrome in MacOS. I fixed that problem making my own css arrow without an ASCII code/HTML entity in ::after content, if you are interested, I share my code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.