jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(sidebar): fix isMenuCollapsed flag

pull/3/head
KostyaDanovsky 2016-02-03 15:34:24 +03:00
parent 17df899c53
commit ba1bd6a8e6
6 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/theme/components/baPanel/baPanelBlur.directive.js
View File

@ -34,12 +34,10 @@
});
function recalculatePanelStyle() {
console.log(bodyBgSize);
if (!bodyBgSize) {
return;
}
var position = elem[0].getBoundingClientRect();
console.log(position);
elem.css({
backgroundSize: Math.round(bodyBgSize.width) + 'px ' + Math.round(bodyBgSize.height) + 'px',
backgroundPosition: Math.floor(-position.left + bodyBgSize.positionX) + 'px ' + Math.floor(-position.top + bodyBgSize.positionY) + 'px'

3
src/app/theme/components/pageTop/pageTop.directive.js
View File

@ -12,6 +12,9 @@
function pageTop() {
return {
restrict: 'E',
scope: {
isMenuCollapsed: '=',
},
templateUrl: 'app/theme/components/pageTop/pageTop.html'
};
}

2
src/app/theme/components/pageTop/pageTop.html
View File

@ -1,6 +1,6 @@
<div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
<a href class="collapse-menu-link ion-navicon" ng-click="$isMenuCollapsed=!$isMenuCollapsed"></a>
<a href class="collapse-menu-link ion-navicon" ng-click="isMenuCollapsed=!isMenuCollapsed"></a>
<div class="search">
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>

37
src/app/theme/components/sidebar/SidebarCtrl.js
View File

@ -9,32 +9,28 @@
.controller('SidebarCtrl', SidebarCtrl);
/** @ngInject */
function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes, sidebarService) {
function SidebarCtrl($scope, $rootScope, $timeout, $location, layoutSizes, sidebarService) {
$scope.menuItems = sidebarService.getMenuItems();
function changeSelectElemTopValue() {
$timeout(function () {
var selectedItem = $('.al-sidebar-list-item.selected');
if (selectedItem) {
if (selectedItem.length) {
$scope.selectElemTop = selectedItem.position().top;
}
}, 101);
}
function selectMenuItem() {
$.each($scope.menuItems, function (index, value) {
value.selected = value.root === '#' + $location.$$url;
$.each($scope.menuItems, function (index, menu) {
menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0;
menu.expanded = menu.selected;
if (value.subMenu) {
var hasSelectedSubmenu = false;
$.each(value.subMenu, function (subIndex, subValue) {
subValue.selected = subValue.root === '#' + $location.$$url;
if (subValue.selected) {
hasSelectedSubmenu = true;
}
if (menu.subMenu) {
$.each(menu.subMenu, function (subIndex, subMenu) {
subMenu.selected = ('#' + $location.$$url).indexOf(subMenu.root) == 0;
});
value.selected = hasSelectedSubmenu;
}
});
changeSelectElemTopValue();
@ -47,14 +43,14 @@
});
$scope.menuExpand = function () {
$rootScope.$isMenuCollapsed = false;
$scope.$isMenuCollapsed = false;
};
$scope.menuCollapse = function () {
$rootScope.$isMenuCollapsed = true;
$scope.$isMenuCollapsed = true;
};
$rootScope.$watch('$isMenuCollapsed', function (newValue) {
$scope.$watch('$isMenuCollapsed', function (newValue) {
if (!newValue && !$scope.selectElemTop) {
changeSelectElemTopValue();
}
@ -65,7 +61,7 @@
var isMenuShouldCollapsed = $(window).width() <= layoutSizes.resWidthCollapseSidebar;
if ($scope.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
$scope.$apply(function () {
$rootScope.$isMenuCollapsed = isMenuShouldCollapsed;
$scope.$isMenuCollapsed = isMenuShouldCollapsed;
});
}
$scope.isMenuShouldCollapsed = isMenuShouldCollapsed;
@ -74,13 +70,14 @@
$scope.toggleSubMenu = function ($event, item) {
var submenu = $($event.currentTarget).next();
if ($rootScope.$isMenuCollapsed) {
if ($scope.$isMenuCollapsed) {
if (!item.slideRight) {
$timeout(function () {
item.slideRight = true;
$scope.anySlideRight = true;
}, 20);
}
$scope.menuExpand();
} else {
submenu.slideToggle(100);
changeSelectElemTopValue();
@ -105,11 +102,5 @@
var menuTopValue = 66;
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
};
$scope.collapseSidebarIfSmallRes = function () {
if (window.innerWidth <= layoutSizes.resWidthCollapseSidebar) {
$rootScope.$isMenuCollapsed = true;
}
};
}
})();

7
src/app/theme/components/sidebar/sidebar.html
View File

@ -5,8 +5,7 @@
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}"
ng-mouseenter="hoverItem($event, item)">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link"
ng-click="collapseSidebarIfSmallRes()">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a>
@ -28,11 +27,11 @@
<ul ng-if="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
ng-class="{expanded: subitem.selected, 'slide-right': subitem.slideRight}">
<li ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
<a href="{{ subSubitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{
<a href="{{ subSubitem.root }}">{{
subSubitem.title }}</a>
</li>
</ul>
<a ng-if="!subitem.subMenu" href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title}}</a>
<a ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
</li>
</ul>
</li>

2
src/index.html
View File

@ -29,7 +29,7 @@
<main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $isMenuCollapsed }">
<sidebar></sidebar>
<page-top></page-top>
<page-top is-menu-collapsed="$isMenuCollapsed"></page-top>
<div class="al-main">
<div class="al-content">