sidebar design changes, add searchbox
Nasta
parent
18edcb95dd
commit
ce8b582b70
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue