From 95ae9bcae2d627a14ee636d809da3b2cc4a90b05 Mon Sep 17 00:00:00 2001 From: Onur Alp Soner Date: Tue, 12 Apr 2016 23:26:47 +0300 Subject: [PATCH] [ui] Sidebar improvements --- Gruntfile.js | 1 + .../javascripts/countly/countly.template.js | 60 +++++++++++-------- .../public/javascripts/dom/slimScroll.min.js | 3 + .../utils/jquery.hoverIntent.minified.js | 9 +++ frontend/express/public/stylesheets/main.css | 1 + frontend/express/views/dashboard.html | 1 + 6 files changed, 51 insertions(+), 24 deletions(-) create mode 100644 frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js diff --git a/Gruntfile.js b/Gruntfile.js index 21a838f17e7..f845e9e69d9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -63,6 +63,7 @@ module.exports = function(grunt) { 'frontend/express/public/javascripts/utils/initialAvatar.js', 'frontend/express/public/javascripts/utils/jquery.amaran.min.js', 'frontend/express/public/javascripts/utils/jquery.titlealert.js', + 'frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js', 'frontend/express/public/javascripts/countly/countly.common.js', ], dest: 'frontend/express/public/javascripts/min/countly.utils.concat.js' diff --git a/frontend/express/public/javascripts/countly/countly.template.js b/frontend/express/public/javascripts/countly/countly.template.js index 1912783bf83..5773e811ab7 100644 --- a/frontend/express/public/javascripts/countly/countly.template.js +++ b/frontend/express/public/javascripts/countly/countly.template.js @@ -4113,12 +4113,6 @@ var AppRouter = Backbone.Router.extend({ }); // SIDEBAR - $("#sidebar-menu").find(".item").each(function(i) { - if ($(this).next().hasClass("sidebar-submenu")) { - $(this).append(""); - } - }); - $("#sidebar-menu").on("click", ".submenu-close", function () { $(this).parents(".sidebar-submenu").animate({"right":"-170px"}, {duration:200, easing:'easeInExpo', complete: function() { $(".sidebar-submenu").hide(); @@ -4158,31 +4152,43 @@ var AppRouter = Backbone.Router.extend({ } }); - $("#sidebar-menu").on("mouseenter", ".sidebar-menu>.item", function() { - var visibleSubmenu = $(".sidebar-submenu:visible"); + $("#sidebar-menu").hoverIntent({ + over: function() { + var visibleSubmenu = $(".sidebar-submenu:visible"); - if (!$(this).hasClass("menu-active") && $(".sidebar-submenu").is(":visible") && !visibleSubmenu.hasClass("half-visible")) { - visibleSubmenu.addClass("half-visible"); - visibleSubmenu.animate({"right":"-110px"}, {duration:300, easing:'easeOutExpo'}); - } + if (!$(this).hasClass("menu-active") && $(".sidebar-submenu").is(":visible") && !visibleSubmenu.hasClass("half-visible")) { + visibleSubmenu.addClass("half-visible"); + visibleSubmenu.animate({"right":"-110px"}, {duration:300, easing:'easeOutExpo'}); + } + }, + out: function() { }, + selector: ".sidebar-menu>.item" }); - $("#sidebar-menu").on("mouseleave", "", function() { - var visibleSubmenu = $(".sidebar-submenu:visible"); + $("#sidebar-menu").hoverIntent({ + over: function() {}, + out: function() { + var visibleSubmenu = $(".sidebar-submenu:visible"); - if ($(".sidebar-submenu").is(":visible") && visibleSubmenu.hasClass("half-visible")) { - visibleSubmenu.removeClass("half-visible"); - visibleSubmenu.animate({"right":"0"}, {duration:300, easing:'easeOutExpo'}); - } + if ($(".sidebar-submenu").is(":visible") && visibleSubmenu.hasClass("half-visible")) { + visibleSubmenu.removeClass("half-visible"); + visibleSubmenu.animate({"right":"0"}, {duration:300, easing:'easeOutExpo'}); + } + }, + selector: "" }); - $("#sidebar-menu").on("mouseenter", ".sidebar-submenu:visible", function() { - var visibleSubmenu = $(".sidebar-submenu:visible"); + $("#sidebar-menu").hoverIntent({ + over: function() { + var visibleSubmenu = $(".sidebar-submenu:visible"); - if (visibleSubmenu.hasClass("half-visible")) { - visibleSubmenu.removeClass("half-visible"); - visibleSubmenu.animate({"right":"0"}, {duration:300, easing:'easeOutExpo'}); - } + if (visibleSubmenu.hasClass("half-visible")) { + visibleSubmenu.removeClass("half-visible"); + visibleSubmenu.animate({"right":"0"}, {duration:300, easing:'easeOutExpo'}); + } + }, + out: function() {}, + selector: ".sidebar-submenu:visible" }); $('#sidebar-menu').slimScroll({ @@ -5292,6 +5298,12 @@ var AppRouter = Backbone.Router.extend({ CountlyHelpers.openResource($(this).data("link")); } }); + + $("#sidebar-menu").find(".item").each(function(i) { + if ($(this).next().hasClass("sidebar-submenu") && $(this).find(".ion-chevron-right").length == 0) { + $(this).append(""); + } + }); }); } }); diff --git a/frontend/express/public/javascripts/dom/slimScroll.min.js b/frontend/express/public/javascripts/dom/slimScroll.min.js index 8a7ce81b763..a9d7aeb6e6b 100644 --- a/frontend/express/public/javascripts/dom/slimScroll.min.js +++ b/frontend/express/public/javascripts/dom/slimScroll.min.js @@ -307,10 +307,13 @@ // show only when required if(barHeight >= me.outerHeight()) { + me.parent().removeClass("scroll-active"); //allow window scroll releaseScroll = false; return; } + + me.parent().addClass("scroll-active"); bar.stop(true,true).fadeIn('fast'); if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); } } diff --git a/frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js b/frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js new file mode 100644 index 00000000000..653a0a65206 --- /dev/null +++ b/frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js @@ -0,0 +1,9 @@ +/*! + * hoverIntent v1.8.0 // 2014.06.29 // jQuery v1.9.1+ + * http://cherne.net/brian/resources/jquery.hoverIntent.html + * + * You may use hoverIntent under the terms of the MIT license. Basically that + * means you are free to use hoverIntent as long as this header is left intact. + * Copyright 2007, 2014 Brian Cherne + */ +(function($){$.fn.hoverIntent=function(handlerIn,handlerOut,selector){var cfg={interval:100,sensitivity:6,timeout:0};if(typeof handlerIn==="object"){cfg=$.extend(cfg,handlerIn)}else{if($.isFunction(handlerOut)){cfg=$.extend(cfg,{over:handlerIn,out:handlerOut,selector:selector})}else{cfg=$.extend(cfg,{over:handlerIn,out:handlerIn,selector:handlerOut})}}var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if(Math.sqrt((pX-cX)*(pX-cX)+(pY-cY)*(pY-cY)).item { width:225px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; height:36px; padding-top:3px; display:block; cursor:pointer; border-top: 1px solid #2D2D2D; border-bottom: 1px solid #232323; } #sidebar-menu .sidebar-menu>.item:last-child { box-shadow: 0 1px 0 0 #2D2D2D; } #sidebar-menu .sidebar-menu>.item.hide { display: none; } diff --git a/frontend/express/views/dashboard.html b/frontend/express/views/dashboard.html index 381c8ee9fca..368cf83586d 100644 --- a/frontend/express/views/dashboard.html +++ b/frontend/express/views/dashboard.html @@ -58,6 +58,7 @@ +