nipuni
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #548 from DimalChandrasiri/release-2.0.x

Browse Source 
Fix for sidebar trigger hide and scroll issue
revert-70aa11f8
Rasika Perera 8 years ago committed by GitHub
parent 68ad05fde2 ba506183b1
commit 10774655b1
3 changed files with 177 additions and 71 deletions
Show Stats Download Patch File Download Diff File

11
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs
Unescape View File

@ -80,9 +80,9 @@
<!--<a href="{{@app.context}}notification-listing" title="Failures of operations on the device side will be listed here">--> <!--<a href="{{@app.context}}notification-listing" title="Failures of operations on the device side will be listed here">-->
<a data-toggle="sidebar" data-target="#right-sidebar" data-container=".page-content" <a data-toggle="sidebar" data-target="#right-sidebar" data-container=".page-content"
aria-expanded="false" rel="notifications-sidebar"> aria-expanded="false" rel="notifications-sidebar">
<span class="icon fw-stack"> <span class="icon fw-stack">
<i class="fw fw-notification fw-stack-1x"></i> <i class="fw fw-notification fw-stack-1x"></i>
</span> </span>
<span class="hidden-xs">Notifications</span> <span class="hidden-xs">Notifications</span>
<span class="badge notifications" id="notification-bubble"></span> <span class="badge notifications" id="notification-bubble"></span>
</a> </a>
@ -90,9 +90,8 @@
</ul> </ul>
{{/zone}} {{/zone}}
{{#zone "sidePanes"}} {{#zone "sidePanes"}}
<div class="sidebar-wrapper" id="right-sidebar" is-authorized="{{isAuthorizedForNotifications}}" <div class="sidebar-wrapper sidebar-wrapper-animation-fix" id="right-sidebar" is-authorized="{{isAuthorizedForNotifications}}"
data-side="right" data-width="320" data-sidebar-fixed="true" data-fixed-offset="50" data-spy="affix" data-side="right" data-width="320" data-sidebar-fixed="true" data-top="90" data-fixed-offset="90" data-offset-top="50" data-spy="affix">
data-offset-top="80">
<ul class="sidebar-messages"> <ul class="sidebar-messages">
</ul> </ul>
<div class="text-center"><a href="{{@app.context}}/notification-listing" class="btn btn-primary">Show All Notifications</a></div> <div class="text-center"><a href="{{@app.context}}/notification-listing" class="btn btn-primary">Show All Notifications</a></div>

226
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/public/js/nav-menu.js
Unescape View File

@ -128,15 +128,16 @@ function loadNewNotifications() {
} }
/** /**
* Toggle function for * Sidebar function
* notification listing sidebar.
* @return {Null} * @return {Null}
*/ */
$.sidebar_toggle = function (action, target, container) { $.sidebar_toggle = function(action, target, container) {
var elem = '[data-toggle=sidebar]', var elem = '[data-toggle=sidebar]',
button, button,
containerOffsetLeft, container,
containerOffsetRight, conrainerOffsetLeft,
conrainerOffsetRight,
target,
targetOffsetLeft, targetOffsetLeft,
targetOffsetRight, targetOffsetRight,
targetWidth, targetWidth,
@ -145,104 +146,177 @@ $.sidebar_toggle = function (action, target, container) {
pushType, pushType,
buttonParent; buttonParent;
/**
* Dynamically adjust the height of sidebar to fill parent
*/
function sidebarHeightAdjust(){
$('.sidebar-wrapper').each(function(){
var elemOffsetBottom = $(this).data('offset-bottom'),
scrollBottom = ($(document).height() - $(window).height()),
offesetBottom = 0,
getBottomOffset = elemOffsetBottom - (scrollBottom - ($(window).scrollTop()-elemOffsetBottom) - elemOffsetBottom);
if(getBottomOffset > 0){
offesetBottom = getBottomOffset;
}
$(this).height(($(window).height() - ($(this).offset().top - $(window).scrollTop())) - offesetBottom);
if((typeof $.fn.nanoScroller == 'function') && ($('.nano-content', this).length > 0)){
$(".nano-content").parent()[0].nanoscroller.reset();
}
});
};
var sidebar_window = { var sidebar_window = {
update: function (target, container, button) { update: function(target, container, button){
containerOffsetLeft = $(container).data('offset-left') ? $(container).data('offset-left') : 0; conrainerOffsetLeft = $(container).data('offset-left') ? $(container).data('offset-left') : 0,
containerOffsetRight = $(container).data('offset-right') ? $(container).data('offset-right') : 0; conrainerOffsetRight = $(container).data('offset-right') ? $(container).data('offset-right') : 0,
targetOffsetLeft = $(target).data('offset-left') ? $(target).data('offset-left') : 0; targetTop = $(target).data('top') ? $(target).data('top') : 0,
targetOffsetRight = $(target).data('offset-right') ? $(target).data('offset-right') : 0; targetOffsetLeft = $(target).data('offset-left') ? $(target).data('offset-left') : 0,
targetWidth = $(target).data('width'); targetOffsetRight = $(target).data('offset-right') ? $(target).data('offset-right') : 0,
targetSide = $(target).data("side"); targetWidth = $(target).data('width'),
pushType = $(container).parent().is('body') == true ? 'padding' : 'margin'; targetSide = $(target).data("side"),
pushType = $(container).parent().is('body') == true ? 'padding' : 'padding'; //TODO: Remove if works everywhere
if (button !== undefined) {
$(container).addClass('sidebar-target');
if(button !== undefined){
relationship = button.attr('rel') ? button.attr('rel') : ''; relationship = button.attr('rel') ? button.attr('rel') : '';
buttonParent = $(button).parent(); buttonParent = $(button).parent();
} }
},
show: function () { $(target).css('top', targetTop);
if ($(target).data('sidebar-fixed') == true) {
sidebarHeightAdjust();
},
show: function(){
if($(target).data('sidebar-fixed') == true) {
$(target).css('top',$(target).data('fixed-offset') + 'px');
$(target).height($(window).height() - $(target).data('fixed-offset')); $(target).height($(window).height() - $(target).data('fixed-offset'));
} }
$(target).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
$(target).trigger('show.sidebar'); $(target).trigger('show.sidebar');
if (targetWidth !== undefined) {
if(targetWidth !== undefined) {
$(target).css('width', targetWidth); $(target).css('width', targetWidth);
} }
$(target).addClass('toggled'); $(target).addClass('toggled');
if (button !== undefined) {
if (relationship !== '') { if(button !== undefined){
if(relationship !== ''){
// Removing active class from all relative buttons // Removing active class from all relative buttons
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').removeClass("active"); $(elem+'[rel='+relationship+']:not([data-handle=close])').removeClass("active");
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').attr('aria-expanded', 'false'); $(elem+'[rel='+relationship+']:not([data-handle=close])').attr('aria-expanded', 'false');
} }
// Adding active class to button // Adding active class to button
if (button.attr('data-handle') !== 'close') { if(button.attr('data-handle') !== 'close'){
button.addClass("active"); button.addClass("active");
button.attr('aria-expanded', 'true'); button.attr('aria-expanded', 'true');
} }
if (buttonParent.is('li')) {
if (relationship !== '') { if(buttonParent.is('li')) {
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').parent().removeClass("active"); if(relationship !== ''){
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').parent(). $(elem+'[rel='+relationship+']:not([data-handle=close])').parent().removeClass("active");
attr('aria-expanded', 'false'); $(elem+'[rel='+relationship+']:not([data-handle=close])').parent().attr('aria-expanded', 'false');
} }
buttonParent.addClass("active"); buttonParent.addClass("active");
buttonParent.attr('aria-expanded', 'true'); buttonParent.attr('aria-expanded', 'true');
} }
} }
// Sidebar open function // Sidebar open function
if (targetSide == 'left') { if (targetSide == 'left'){
if ((button !== undefined) && (button.attr('data-container-divide'))) { if ($(target).attr('data-container-divide')){
$(container).css(pushType + '-' + targetSide, targetWidth + targetOffsetLeft); $(container).css(pushType+'-'+targetSide, targetWidth + targetOffsetLeft);
$(target).css(targetSide, targetOffsetLeft);
} }
$(target).css(targetSide, targetOffsetLeft); else if ($(target).attr('data-container-push')){
} else if (targetSide == 'right') { $(container).css(targetSide, Math.abs(targetWidth + targetOffsetLeft));
if ((button !== undefined) && (button.attr('data-container-divide'))) { $(target).css(targetSide, -Math.abs(targetWidth + targetOffsetLeft));
$(container).css(pushType + '-' + targetSide, targetWidth + targetOffsetRight); }
else {
$(target).css(targetSide, Math.abs(targetOffsetLeft));
}
}
else if (targetSide == 'right'){
if ($(target).attr('data-container-divide')){
$(container).css(pushType+'-'+targetSide, targetWidth + targetOffsetRight);
$(target).css(targetSide, targetOffsetRight);
}
else if ($(target).attr('data-container-push')){
$(container).css(targetSide, Math.abs(targetWidth + targetOffsetRight));
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
}
else {
$(target).css(targetSide, Math.abs(targetOffsetRight));
} }
$(target).css(targetSide, targetOffsetRight);
} }
$(target).trigger('shown.sidebar'); $(target).trigger('shown.sidebar');
}, },
hide: function(){
hide: function () {
$(target).trigger('hide.sidebar'); $(target).trigger('hide.sidebar');
$(target).removeClass('toggled'); $(target).removeClass('toggled');
if (button !== undefined) {
if (relationship !== '') { if(button !== undefined){
if(relationship !== ''){
// Removing active class from all relative buttons // Removing active class from all relative buttons
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').removeClass("active"); $(elem+'[rel='+relationship+']:not([data-handle=close])').removeClass("active");
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').attr('aria-expanded', 'false'); $(elem+'[rel='+relationship+']:not([data-handle=close])').attr('aria-expanded', 'false');
} }
// Removing active class from button // Removing active class from button
if (button.attr('data-handle') !== 'close') { if(button.attr('data-handle') !== 'close'){
button.removeClass("active"); button.removeClass("active");
button.attr('aria-expanded', 'false'); button.attr('aria-expanded', 'false');
} }
if ($(button).parent().is('li')) {
if (relationship !== '') { if($(button).parent().is('li')){
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').parent().removeClass("active"); if(relationship !== ''){
$(elem + '[rel=' + relationship + ']:not([data-handle=close])').parent(). $(elem+'[rel='+relationship+']:not([data-handle=close])').parent().removeClass("active");
attr('aria-expanded', 'false'); $(elem+'[rel='+relationship+']:not([data-handle=close])').parent().attr('aria-expanded', 'false');
} }
} }
} }
// Sidebar close function // Sidebar close function
if (targetSide == 'left') { if (targetSide == 'left'){
if ((button !== undefined) && (button.attr('data-container-divide'))) { if($(target).attr('data-container-divide')){
$(container).css(pushType + '-' + targetSide, targetOffsetLeft); $(container).css(pushType+'-'+targetSide, targetOffsetLeft);
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
} }
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetLeft)); else if($(target).attr('data-container-push')){
} else if (targetSide == 'right') { $(container).css(targetSide, targetOffsetLeft);
if ((button !== undefined) && (button.attr('data-container-divide'))) { $(target).css(targetSide, -Math.abs(targetWidth + targetOffsetLeft));
$(container).css(pushType + '-' + targetSide, targetOffsetRight); }
else {
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetLeft));
} }
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
} }
else if (targetSide == 'right'){
if($(target).attr('data-container-divide')){
$(container).css(pushType+'-'+targetSide, targetOffsetRight);
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
}
else if($(target).attr('data-container-push')){
$(container).css(targetSide, targetOffsetRight);
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
}
else {
$(target).css(targetSide, -Math.abs(targetWidth + targetOffsetRight));
}
}
$(target).trigger('hidden.sidebar'); $(target).trigger('hidden.sidebar');
$(target).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$(container).removeClass('sidebar-target');
});
} }
}; };
if (action === 'show') { if (action === 'show') {
sidebar_window.update(target, container); sidebar_window.update(target, container);
sidebar_window.show(); sidebar_window.show();
@ -251,27 +325,52 @@ $.sidebar_toggle = function (action, target, container) {
sidebar_window.update(target, container); sidebar_window.update(target, container);
sidebar_window.hide(); sidebar_window.hide();
} }
// binding click function // binding click function
var body = 'body'; $('body').off('click', elem);
$(body).off('click', elem); $('body').on('click', elem, function(e) {
$(body).on('click', elem, function (e) {
e.preventDefault(); e.preventDefault();
button = $(this); button = $(this);
container = button.data('container');
target = button.data('target'); target = button.data('target');
container = $(target).data('container');
sidebar_window.update(target, container, button); sidebar_window.update(target, container, button);
/** /**
* Sidebar function on data container divide * Sidebar function on data container divide
* @return {Null} * @return {Null}
*/ */
if (button.attr('aria-expanded') == 'false') { if(button.attr('aria-expanded') == 'false'){
sidebar_window.show(); sidebar_window.show();
} else if (button.attr('aria-expanded') == 'true') { }
else if (button.attr('aria-expanded') == 'true') {
sidebar_window.hide(); sidebar_window.hide();
} }
}); });
$(window)
.load(sidebarHeightAdjust)
.resize(sidebarHeightAdjust)
.scroll(sidebarHeightAdjust);
}; };
var sideWrapper = $('.sidebar-wrapper');
$(document).on('affix.bs.affix','.sidebar-wrapper',function(){
sideWrapper.css('top',$('.navbar-wrapper').height());
sideWrapper.data('top',$('.navbar-wrapper').height());
sideWrapper.data('fixed-offset', $('.navbar-wrapper').height());
});
$(document).on('affix-top.bs.affix','.sidebar-wrapper',function(){
sideWrapper.css('top',$('.navbar-wrapper').height() + $('.header').height());
sideWrapper.data('top',$('.navbar-wrapper').height() + $('.header').height());
sideWrapper.data('fixed-offset', $('.navbar-wrapper').height() + $('.header').height());
});
$.fn.collapse_nav_sub = function () { $.fn.collapse_nav_sub = function () {
var navSelector = 'ul.nav'; var navSelector = 'ul.nav';
@ -324,7 +423,6 @@ $.fn.collapse_nav_sub = function () {
$(document).ready(function () { $(document).ready(function () {
loadNotificationsPanel(); loadNotificationsPanel();
$.sidebar_toggle();
$("#right-sidebar").on("click", ".new-notification", function () { $("#right-sidebar").on("click", ".new-notification", function () {
var notificationId = $(this).data("id"); var notificationId = $(this).data("id");

11
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-desktop.css
Unescape View File

@ -804,7 +804,7 @@ header .dropdown[aria-expanded=true], header .dropdown:hover {
.navbar .container-fluid > .navbar-header .icon, .navbar .container-fluid > .navbar-header .icon,
.navbar .container > .navbar-collapse .icon, .navbar .container > .navbar-collapse .icon,
.navbar .container > .navbar-header .icon { .navbar .container > .navbar-header .icon {
margin-bottom: 4px; margin-bottom: 0px !important;
} }
.navbar-nav { .navbar-nav {
@ -1108,6 +1108,14 @@ header .dropdown[aria-expanded=true], header .dropdown:hover {
right: 0; right: 0;
} }
.sidebar-wrapper-animation-fix{
-webkit-transition: left 0.5s ease, right 0.5s ease !important;
-moz-transition: left 0.5s ease, right 0.5s ease !important;
-ms-transition: left 0.5s ease, right 0.5s ease !important;
-o-transition: left 0.5s ease, right 0.5s ease !important;
transition: left 0.5s ease, right 0.5s ease !important;
}
ul.sidebar-messages { ul.sidebar-messages {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -6393,6 +6401,7 @@ ul.tiles .icon {
background: #f4f4f4; background: #f4f4f4;
border:1px solid #ddd; border:1px solid #ddd;
margin-bottom:10px; margin-bottom:10px;
padding: 15px;
} }
.media .list-group-item a, .media .list-group-item a{ .media .list-group-item a, .media .list-group-item a{
background:#f4f4f4; background:#f4f4f4;

Write Preview
Loading…
Cancel
Save