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

fix(sidebar): fix collapsed menu

pull/3/head
alex 2016-02-03 18:44:52 +03:00
parent 7d2a3f589b b1cabf2c23
commit 1676fa6fb1
7 changed files with 41 additions and 43 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>

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

@ -9,32 +9,27 @@
.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;
if (value.subMenu) {
var hasSelectedSubmenu = false;
$.each(value.subMenu, function (subIndex, subValue) {
subValue.selected = subValue.root === '#' + $location.$$url;
if (subValue.selected) {
hasSelectedSubmenu = true;
}
$.each($scope.menuItems, function (index, menu) {
menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0;
menu.expanded = menu.selected;
if (menu.subMenu) {
$.each(menu.subMenu, function (subIndex, subMenu) {
subMenu.selected = ('#' + $location.$$url).indexOf(subMenu.root) == 0;
});
value.selected = hasSelectedSubmenu;
}
});
changeSelectElemTopValue();
@ -47,14 +42,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 +60,7 @@
var isMenuShouldCollapsed = $(window).width() <= layoutSizes.resWidthCollapseSidebar;
if ($scope.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
$scope.$apply(function () {
$rootScope.$isMenuCollapsed = isMenuShouldCollapsed;
$scope.$isMenuCollapsed = isMenuShouldCollapsed;
});
}
$scope.isMenuShouldCollapsed = isMenuShouldCollapsed;
@ -73,20 +68,30 @@
$scope.toggleSubMenu = function ($event, item) {
var submenu = $($event.currentTarget).next();
if ($rootScope.$isMenuCollapsed) {
if (!item.slideRight) {
if ($scope.$isMenuCollapsed) {
$scope.menuExpand();
if (!item.selected) {
$timeout(function () {
item.slideRight = true;
$scope.anySlideRight = true;
}, 20);
item.selected = !item.selected;
changeSelectElemTopValue();
submenu.slideToggle();
});
}
} else {
submenu.slideToggle(100);
item.selected = !item.selected;
changeSelectElemTopValue();
submenu.slideToggle();
}
};
function toggleExpandedSubmenu() {
$timeout(function () {
}, 200);
}
window.onclick = function () {
$timeout(function () {
@ -105,11 +110,5 @@
var menuTopValue = 66;
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
};
$scope.collapseSidebarIfSmallRes = function () {
if (window.innerWidth <= layoutSizes.resWidthCollapseSidebar) {
$rootScope.$isMenuCollapsed = true;
}
};
}
})();

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

@ -5,34 +5,33 @@
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>
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item); item.expanded = !item.expanded"
<a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item)"
class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
<b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
<b class="fa" ng-class="{'fa-angle-up': item.selected, 'fa-angle-down': !item.selected}"
ng-if="item.subMenu"></b>
</a>
<ul ng-if="item.subMenu" class="al-sidebar-sublist"
ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
<li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
<a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem); subitem.expanded = !subitem.expanded"
<a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
<b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
<b class="fa" ng-class="{'fa-angle-up': subitem.selected, 'fa-angle-down': !subitem.selected}"
ng-if="subitem.subMenu"></b>
</a>
<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">

1
src/sass/theme/components/_sidebar.scss
View File

@ -101,7 +101,6 @@ a.al-sidebar-list-link {
}
@mixin default-sublist() {
margin: 0;
padding: 0;
list-style: none;
position: relative;