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

refactor(sideBar): change behabior of hover element and remove slecetedElem

pull/3/head
alex 2016-02-19 16:57:48 +03:00
parent b712b342a2
commit 70bacb1b77
4 changed files with 19 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,26 +14,16 @@
$scope.menuItems = sidebarService.getMenuItems();
$scope.menuHeight = $element[0].childNodes[0].clientHeight - 84;
function changeSelectElemTopValue() {
$timeout(function () {
var selectedItem = $('.al-sidebar-list-item.selected');
if (selectedItem.length) {
$scope.selectElemTop = selectedItem.position().top;
}
}, 101);
}
function selectMenuItem() {
$.each($scope.menuItems, function (index, menu) {
menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0;
menu.expanded = menu.selected;
menu.expanded = menu.expanded || menu.selected;
if (menu.subMenu) {
$.each(menu.subMenu, function (subIndex, subMenu) {
subMenu.selected = ('#' + $location.$$url).indexOf(subMenu.root) == 0;
});
}
});
changeSelectElemTopValue();
}
selectMenuItem();
@ -50,11 +40,6 @@
$scope.$isMenuCollapsed = true;
};
$scope.$watch('$isMenuCollapsed', function (newValue) {
if (!newValue && !$scope.selectElemTop) {
changeSelectElemTopValue();
}
});
// watch window resize to change menu collapsed state if needed
$(window).resize(function () {
@ -83,25 +68,16 @@
if (!item.expanded) {
$timeout(function () {
item.expanded = !item.expanded;
changeSelectElemTopValue();
submenu.slideToggle();
});
}
} else {
item.expanded = !item.expanded;
changeSelectElemTopValue();
submenu.slideToggle();
}
};
function toggleExpandedSubmenu() {
$timeout(function () {
}, 200);
}
window.onclick = function () {
$timeout(function () {
@ -117,6 +93,7 @@
$scope.hoverItem = function ($event) {
$scope.showHoverElem = true;
$scope.hoverElemHeight = $event.currentTarget.clientHeight;
var menuTopValue = 66;
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
};

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

@ -2,14 +2,13 @@
ng-mouseleave="hoverElemTop=selectElemTop">
<ul class="al-sidebar-list" slimscroll="{height: '{{menuHeight}}px'}" slimscroll-watch="menuHeight" >
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}"
ng-mouseenter="hoverItem($event, item)">
ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}">
<a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link">
<a ng-mouseenter="hoverItem($event, item)" 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)"
<a ng-mouseenter="hoverItem($event, item)" 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}"
@ -17,26 +16,25 @@
</a>
<ul ng-if="item.subMenu" class="al-sidebar-sublist"
ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
ng-class="{expanded: item.expanded, 'slide-right': item.slideRight}">
<li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
<a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
<a ng-mouseenter="hoverItem($event, item)" 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}"
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-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
<li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
<a ng-mouseenter="hoverItem($event, item)" href="{{ subSubitem.root }}">{{
subSubitem.title }}</a>
</li>
</ul>
<a ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
<a ng-mouseenter="hoverItem($event, item)" ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-select-elem" ng-style="{top: selectElemTop + 'px'}"></div>
<div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px'}"
<div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
ng-class="{'show-hover-elem': showHoverElem }"></div>
</aside>

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

@ -89,6 +89,7 @@ a.al-sidebar-list-link {
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: 4px !important;
left: 176px;
}
@mixin layout-collapsed() {
@ -143,19 +144,16 @@ a.al-sidebar-list-link {
@include default-sublist();
}
.sidebar-hover-elem, .sidebar-select-elem {
.sidebar-hover-elem{
width: 4px;
background: $primary;
position: absolute;
top: 0;
top: -150px;
left: 176px;
transition: all 0.5s ease;
transition-property: top, height;
height: 42px;
display: none;
transition: top 0.5s ease;
&.show-hover-elem {
height: 42px;
display: block;
}
display: block;
}
.sidebar-select-elem {

2
src/sass/theme/dashboard/_blurFeed.scss
View File

@ -119,7 +119,7 @@
font-size: 12px;
padding-bottom: 5px;
.author {
font-weight: $font-bold;
font-size: 13px;
padding-right: 5px;
}
}