sidebar design changes, add searchbox

pull/3/head
Nasta 2015-09-22 16:51:30 +03:00
parent 18edcb95dd
commit ce8b582b70
6 changed files with 100 additions and 22 deletions

View File

@ -27,7 +27,7 @@ a.collapse-menu-link {
color: #fff;
width: 18px;
position: absolute;
top: 52px;
top: 47px;
right: -18px;
padding: 0;
@ -49,7 +49,7 @@ a.collapse-menu-link {
.al-sidebar-list-block {
position: absolute;
height: 100%;
top: 52px;
top: 88px;
left: 0;
width: 100%;
padding-bottom: 10px;
@ -116,6 +116,46 @@ a.al-sidebar-list-link {
}
}
.sidebar-overlap {
background: rgba(0, 0, 0, .75);
@extend .sidebar-full-width;
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: 4px !important;
}
.search {
position: absolute;
left: 18px;
top: 54px;
text-shadow: none;
color: #fff;
font-size: 13px;
line-height: 25px;
transition: all 0.5s ease;
white-space: nowrap;
overflow: hidden;
width: 162px;
label {
cursor: pointer;
}
i {
margin-right: 18px;
width: 16px;
display: inline-block;
}
input {
background: none;
border: none;
outline: none;
width: 120px;
padding: 0;
margin: 0 0 0 -3px;
}
}
@mixin default-sublist() {
margin: 0;
padding: 0;
@ -182,9 +222,9 @@ a.al-sidebar-list-link {
width: 52px;
.al-logo {
padding-left: 18px;
padding-left: 16px;
span {
padding-left: 18px;
padding-left: 20px;
}
}
@ -228,6 +268,10 @@ a.al-sidebar-list-link {
.sidebar-hover-elem, .sidebar-select-elem {
left: 48px;
}
.search {
width: 32px;
}
}
}
@ -303,14 +347,8 @@ a.al-sidebar-list-link {
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
}
}
.sidebar-overlap {
background: rgba(0, 0, 0, .75);
@extend .sidebar-full-width;
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
width: 4px !important;
.search {
width: 162px;
}
}

View File

@ -7,6 +7,12 @@
<i class="fa fa-angle-double-left"></i>
</a>
<div class="search">
<!--<label for="searchInput" ng-click="openSidebar()"><i class="ion-ios-search-strong"></i></label>-->
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
<input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebar()">
</div>
<div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
<ul class="al-sidebar-list" slimscroll="{height: '100%'}">
<li ng-repeat="item in menuItems" class="al-sidebar-list-item"

View File

@ -138,11 +138,14 @@ blurAdminApp.directive('sidebar', function () {
}
};
function isSidebarCollapsed() {
return body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
}
$scope.toggleSubMenu = function ($event, item) {
var submenu = $($event.currentTarget).next();
var isCollapsedSidebar = body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
if (isCollapsedSidebar) {
if (isSidebarCollapsed()) {
if (!item.slideRight) {
$timeout(function () {
item.slideRight = true;
@ -170,7 +173,8 @@ blurAdminApp.directive('sidebar', function () {
$scope.hoverItem = function ($event) {
$scope.showHoverElem = true;
$scope.hoverElemTop = ($event.currentTarget.getBoundingClientRect().top + $window.scrollY);
var menuTopValue = 88;
$scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
};
$scope.hideHoverElement = function () {
@ -179,10 +183,35 @@ blurAdminApp.directive('sidebar', function () {
$scope.collapseSidebar = function() {
if (window.innerWidth <= resWidthCollapseSidebar) {
console.log('test');
$scope.showSidebar = false;
}
};
function focusSearchInput() {
document.getElementById("searchInput").focus();
}
$scope.startSearch = function() {
if (window.innerWidth <= resWidthCollapseSidebar) {
$scope.showSidebar = true;
}
if (body.hasClass(collapsedClass)) {
console.log('collapsed');
body.removeClass(collapsedClass);
$timeout(function(){
focusSearchInput();
}, 1000);
} else {
console.log('else');
focusSearchInput();
}
};
$scope.search = function(event) {
if (event.which === 13) {
$scope.collapseSidebar();
}
}
}]
};
});

View File

@ -7,15 +7,17 @@
</button>
<h4 class="modal-title" id="myModalLabel">Add Account</h4>
</div>
<form name="linkForm">
<div class="modal-body">
<p>Paste a link to your profile into the box below</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link to Profile">
<input type="text" class="form-control" placeholder="Link to Profile" ng-model="link">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="bindProfile()">Save changes</button>
</div>
</form>
</div>
</div>
</div>

View File

@ -4,7 +4,11 @@ blurAdminApp.directive('profileModal', [function () {
return {
restrict: 'EA',
replace: true,
link: function (scope, elem, attr) {
link: function ($scope) {
$scope.link = "";
$scope.bindProfile = function(){
$scope.link = "";
};
},
templateUrl: 'app/pages/profile/profileModal/profileModal.html'
};

View File

@ -36,14 +36,13 @@ a {
a.al-logo {
color: #ffffff;
text-decoration: none;
padding: 10px 18px 8px 17px;
padding: 10px 18px 8px 16px;
display: block;
font: 100 24px/34px $font-family;
text-decoration: none;
white-space: nowrap;
text-shadow: 0 0 2px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
&:hover {