Skip to content

Commit

Permalink
[ui] Sidebar improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@osoner
osoner committed Apr 12, 2016
1 parent 65918b4 commit 95ae9bc
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 24 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Expand Up @@ -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'
Expand Down
60 changes: 36 additions & 24 deletions frontend/express/public/javascripts/countly/countly.template.js
View file
Expand Up @@ -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("<span class='ion-chevron-right'></span>");
}
});

$("#sidebar-menu").on("click", ".submenu-close", function () {
$(this).parents(".sidebar-submenu").animate({"right":"-170px"}, {duration:200, easing:'easeInExpo', complete: function() {
$(".sidebar-submenu").hide();
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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("<span class='ion-chevron-right'></span>");
}
});
});
}
});
Expand Down
3 changes: 3 additions & 0 deletions frontend/express/public/javascripts/dom/slimScroll.min.js
View file
Expand Up @@ -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'); }
}
Expand Down
9 changes: 9 additions & 0 deletions frontend/express/public/javascripts/utils/jquery.hoverIntent.minified.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/express/public/stylesheets/main.css
View file
Expand Up @@ -155,6 +155,7 @@ a:active { color:inherit; }
#sidebar-bottom-container .username { float:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }

#sidebar-menu { position: relative; }
.scroll-active .sidebar-menu { height:auto; position:relative; }
#sidebar-menu .sidebar-menu>.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; }
Expand Down
1 change: 1 addition & 0 deletions frontend/express/views/dashboard.html
View file
Expand Up @@ -58,6 +58,7 @@
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/initialAvatar.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.amaran.min.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.titlealert.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/utils/jquery.hoverIntent.minified.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/dataTables/js/jquery.dataTables.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/dataTables/js/ZeroClipboard.js"></script>
<script language="javascript" type="text/javascript" src="<%- cdn %>javascripts/dom/dataTables/js/TableTools.js"></script>
Expand Down

0 comments on commit 95ae9bc

Please sign in to comment.