Commit 68e16e73 authored by Nick Poulden's avatar Nick Poulden
Browse files

Defer hover menu show by 200ms 

When you brush over the hover menu with the mouse on your way somewhere else it can be annoying that the hover menu shows.
parent 1a1250b8

template/app/view/HoverMenuButton.js

+35 −28
Original line number Diff line number Diff line
@@ -74,34 +74,7 @@ Ext.define('Docs.view.HoverMenuButton', { 
            click: function() {

                this.fireEvent("click");

            },

            mouseover: function() {

                // hide other menus

                Ext.Array.forEach(Docs.view.HoverMenuButton.menus, function(menu) {

                    if (menu !== this.menu) {

                        menu.hide();

                    }

                });

                // stop pending menuhide process

                clearTimeout(this.hideTimeout);

                this.menu.show();

                // position menu right below button and show it

                var p = this.getEl().getXY(),

                    toolbar = Ext.ComponentQuery.query('classoverview toolbar')[0],

                    leftOffset = p[0]-10,

                    toolbarOffset = toolbar.getEl().getXY(),

                    toolbarWidth = toolbar.getWidth(),

                    menuWidth = this.menu.getEl().getWidth(),

                    pageWidth = Ext.getCmp('doctabs').getWidth();



                if (menuWidth > pageWidth) leftOffset = 0;

                else if ((leftOffset + menuWidth) > pageWidth) leftOffset = pageWidth - menuWidth - 30;

                if (leftOffset < toolbarOffset[0]) leftOffset = toolbarOffset[0];



                this.menu.getEl().setStyle({

                    left: leftOffset+"px",

                    top: (p[1]+25)+"px"

                });

            },

            mouseover: this.deferShowMenu,

            mouseout: this.deferHideMenu,

            scope: this

        });
@@ -142,11 +115,45 @@ Ext.define('Docs.view.HoverMenuButton', { 
    },



    deferHideMenu: function() {

        clearTimeout(Docs.view.HoverMenuButton.showTimeout);

        this.hideTimeout = Ext.Function.defer(function() {

            this.menu.hide();

        }, 200, this);

    },



    deferShowMenu: function() {

        clearTimeout(Docs.view.HoverMenuButton.showTimeout);

        Docs.view.HoverMenuButton.showTimeout = Ext.Function.defer(function() {



            // hide other menus

            Ext.Array.forEach(Docs.view.HoverMenuButton.menus, function(menu) {

                if (menu !== this.menu) {

                    menu.hide();

                }

            });

            // stop pending menuhide process

            clearTimeout(this.hideTimeout);

            this.menu.show();

            // position menu right below button and show it

            var p = this.getEl().getXY(),

                toolbar = Ext.ComponentQuery.query('classoverview toolbar')[0],

                leftOffset = p[0]-10,

                toolbarOffset = toolbar.getEl().getXY(),

                toolbarWidth = toolbar.getWidth(),

                menuWidth = this.menu.getEl().getWidth(),

                pageWidth = Ext.getCmp('doctabs').getWidth();



            if (menuWidth > pageWidth) leftOffset = 0;

            else if ((leftOffset + menuWidth) > pageWidth) leftOffset = pageWidth - menuWidth - 30;

            if (leftOffset < toolbarOffset[0]) leftOffset = toolbarOffset[0];



            this.menu.getEl().setStyle({

                left: leftOffset+"px",

                top: (p[1]+25)+"px"

            });

        }, 200, this);

    },



    /**

     * Returns the store used by menu.

     * @return {Ext.data.Store}

template/resources/sass/_class_overview.scss

+1 −1
Original line number Diff line number Diff line
@@ -127,7 +127,7 @@ 
      @include transition(color, 0.2s, linear);

      font-size: 0.9em;

      &:hover {

        -webkit-transition: color 0.2s linear;

        @include transition(color, 0.2s, linear);

        -webkit-transition-delay: 0.5s;

        color: $docs-link-hover-color; } }

    &:hover {