Skip to content

U
ulakbus-ui
Commit 462104fd authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

ADD rfix 5079 implement design selected user on right

parent 97786d3b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 268 deletions
app/components/dashboard/dashboard.html
View file @ 462104fd
...@@ -125,22 +125,24 @@ ...@@ -125,22 +125,24 @@
</div> </div>
<!-- end of dashboard-main-anouncement --> <!-- end of dashboard-main-anouncement -->
<div class="right-sidebar selected-person-field"> <!--<div class="right-sidebar selected-person-field">-->
<div class="right-sidebar-header"> <!--<div class="right-sidebar-header">-->
<span class="bar-title">Kişi seçildi</span> <!--<span class="bar-title">Kişi seçildi</span>-->
<span class="unselect-person"><i class="fa fa-times"></i></span> <!--<span class="unselect-person"><i class="fa fa-times"></i></span>-->
</div> <!--</div>-->
<!-- end of right-sidebaer-header --> <!--&lt;!&ndash; end of right-sidebaer-header &ndash;&gt;-->
<!---->
<div class="selected-person-info"> <!--<div class="selected-person-info">-->
<img src="../../img/sample-profile-pic.jpg" class="selected-person-img"> <!--<img src="../../img/sample-profile-pic.jpg" class="selected-person-img">-->
<div class="selected-person-name">Erkan Öğümsöğütlü</div> <!--<div class="selected-person-name">Erkan Öğümsöğütlü</div>-->
</div> <!--</div>-->
<!-- end of selected-person-info --> <!--&lt;!&ndash; end of selected-person-info &ndash;&gt;-->
</div> <!--</div>-->
<!-- end of right-sidebar --> <!-- end of right-sidebar -->
</div> </div>
</div> </div>
\ No newline at end of file
app/index.html
View file @ 462104fd
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<div class="main" ng-view> <div class="main" ng-view>
</div> </div>
<right-sidebar></right-sidebar>
</div> </div>
</div> </div>
</div> </div>
......
app/main.html
View file @ 462104fd
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
<div class="main" ng-view> <div class="main" ng-view>
</div> </div>
<right-sidebar></right-sidebar>
</div> </div>
</div> </div>
</div> </div>
......
app/shared/directives.js
View file @ 462104fd
...@@ -347,7 +347,7 @@ angular.module('ulakbus') ...@@ -347,7 +347,7 @@ angular.module('ulakbus')
}; };
var sidebarmenu = $('#side-menu'); var sidebarmenu = $('#side-menu');
var sidebarUserMenu = $('#side-user-menu'); //var sidebarUserMenu = $('#side-user-menu');
sidebarmenu.metisMenu(); sidebarmenu.metisMenu();
$http.get(RESTURL.url + 'menu/') $http.get(RESTURL.url + 'menu/')
.success(function (data) { .success(function (data) {
...@@ -398,7 +398,7 @@ angular.module('ulakbus') ...@@ -398,7 +398,7 @@ angular.module('ulakbus')
$timeout(function () { $timeout(function () {
sidebarmenu.metisMenu(); sidebarmenu.metisMenu();
sidebarUserMenu.metisMenu(); //sidebarUserMenu.metisMenu();
}); });
}); });
...@@ -407,12 +407,11 @@ angular.module('ulakbus') ...@@ -407,12 +407,11 @@ angular.module('ulakbus')
$scope.$on("menuitems", function (event, data) { $scope.$on("menuitems", function (event, data) {
var menu = {}; var menu = {};
menu[data] = $scope.allMenuItems[data]; menu[data] = $scope.allMenuItems[data];
//menu['other'] = $scope.allMenuItems.other; $rootScope.$broadcast("usermenuitems", $scope.prepareMenu(menu));
$scope.selectedMenuItems = $scope.prepareMenu(menu); //$timeout(function () {
$timeout(function () { // sidebarmenu.metisMenu();
//sidebarmenu.metisMenu(); // sidebarUserMenu.metisMenu();
sidebarUserMenu.metisMenu(); //});
});
}); });
$scope.$on('selectedUser', function ($event, data) { $scope.$on('selectedUser', function ($event, data) {
...@@ -485,6 +484,74 @@ angular.module('ulakbus') ...@@ -485,6 +484,74 @@ angular.module('ulakbus')
} }
}; };
}]) }])
/**
* @memberof ulakbus
* @ngdoc directive
* @name rightSidebar
* @description placeholder
*/
.directive('rightSidebar', ['$location', function () {
return {
templateUrl: 'shared/templates/directives/right-sidebar.html',
restrict: 'E',
replace: true,
scope: {},
controller: function ($scope, $rootScope, $cookies, $route, $http, RESTURL, $log, $location, $window, $timeout) {
var sidebarUserMenu = $('#side-user-menu');
sidebarUserMenu.metisMenu();
$scope.$on("usermenuitems", function (event, data) {
$scope.selectedMenuItems = data;
$timeout(function () {
sidebarUserMenu.metisMenu();
});
jQuery(".right-sidebar").css("width", "300px");
jQuery(".manager-view-inner").css("width", "calc(100% - 300px)");
});
$scope.$on('selectedUser', function ($event, data) {
$scope.selectedUser = data;
});
$scope.deselectUser = function () {
jQuery(".right-sidebar").css("width", "0px");
jQuery(".manager-view-inner").css("width", "");
delete $scope.selectedUser;
delete $scope.selectedMenuItems;
};
$rootScope.$watch(function ($rootScope) {
return $rootScope.section;
},
function (newindex, oldindex) {
if (newindex > -1) {
$scope.menuItems = [$scope.allMenuItems[newindex]];
$scope.collapseVar = 0;
}
});
$scope.selectedMenu = $location.path();
$scope.collapseVar = 0;
$scope.multiCollapseVar = 0;
$scope.check = function (x) {
if (x === $scope.collapseVar) {
$scope.collapseVar = 0;
} else {
$scope.collapseVar = x;
}
};
$scope.multiCheck = function (y) {
if (y === $scope.multiCollapseVar) {
$scope.multiCollapseVar = 0;
} else {
$scope.multiCollapseVar = y;
}
};
}
}
}])
/** /**
* @memberof ulakbus * @memberof ulakbus
* @ngdoc directive * @ngdoc directive
......
app/shared/templates/directives/right-sidebar.html 0 → 100644
View file @ 462104fd
<div class="right-sidebar selected-person-field">
<div class="right-sidebar-header">
<button type="button" class="close" ng-click="deselectUser()"
aria-label="Close">
<span class="unselect-person"><i class="fa fa-times"></i></span>
</button>
</div>
<div class="selected-person-info">
<img class="selected-person-img"
ng-src="{{selectedUser ? '/img/sample-profile-pic.jpg' : '/img/empty-profile-pic.jpg'}}">
<div class="selected-person-name">
<p class="identity-name">{{selectedUser.name || 'Kişi seçilmedi.'}}</p>
<p class="identity-surname">{{selectedUser.surname}}</p>
<p>{{selectedUser ? 'TCNo: ' + selectedUser.tcno : ''}}</p>
</div>
</div>
<div class="">
<ul class="nav in" id="side-user-menu" data-step="2"
data-intro="seçilen personele veya öğrenciye göre ilgili menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz.">
<li ng-repeat="(key, item) in selectedMenuItems" ng-class="{active: collapseVar == $index+100}">{{dropDown}}
<a href="" ng-click="check($index+100)">
<i class="fa fa-fw"
ng-class="{
'Admin': 'fa fa-fw fa-terminal',
'Genel': 'fa fa-fw fa-graduation-cap',
'Alt Kategori': 'fa fa-fw fa-tags',
'Kadro Islemleri': 'fa fa-fw fa-users',
'Seçime Uygun Görevler':'fa fa-fw fa-user'
}[item[0].kategori]"></i>
<span class="menu-text">{{ key }}</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li ng-repeat="(k, v) in item">
<a ng-href="#/{{v.wf}}/{{v.model}}?{{v.param}}={{selectedUser.key}}"
ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
\ No newline at end of file
app/shared/templates/directives/sidebar.html
View file @ 462104fd
<div class="navbar-default sidebar" role="navigation" ng-mouseenter="openSidebar()" ng-mouseleave="closeSidebar()"> <div class="navbar-default sidebar" role="navigation" ng-mouseenter="openSidebar()" ng-mouseleave="closeSidebar()">
<div class="sidebar-container"> <div class="sidebar-container">
<!-- sidebar-person-info -->
<div class="sidebar-person-info" ng-show="$root.current_user.can_search">
<!--<button class="btn btn-primary close-sidebar-person-info">Profili Kapat</button>-->
<div class="identity">
<button type="button" class="close" ng-class="{hidden: $root.collapsed || !selectedUser}"
ng-click="deselectUser()"
aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<div class="identity-header clearfix">
<img ng-src="{{selectedUser ? '/img/sample-profile-pic.jpg' : '/img/empty-profile-pic.jpg'}}">
<div class="pull-left" ng-class="{hidden: $root.collapsed}">
<p class="identity-name">{{selectedUser.name || 'Kişi seçilmedi.'}}</p>
<p class="identity-surname">{{selectedUser.surname}}</p>
<p>{{selectedUser ? 'TCNo: ' + selectedUser.tcno : ''}}</p>
</div>
</div>
<!-- end of identity-header -->
<!--<div class="identity-info" ng-class="{hidden: $root.collapsed}">-->
<!--<div class="clearfix">-->
<!--<span class="fa fa-envelope"></span>-->
<!--<div>erkanogum@gmail.com</div>-->
<!--</div>-->
<!--<div class="clearfix">-->
<!--<span class="fa fa-home"></span>-->
<!--<div>İşçi Blokları Mah. 1524. sokak B Blok 6. Kat A Kanat 27 numara</div>-->
<!--</div>-->
<!--</div>-->
</div>
<!-- end of identity -->
<div class="">
<ul class="nav in" id="side-user-menu" ng-class="{hidden: !selectedMenuItems}" data-step="2"
data-intro="seçilen personele veya öğrenciye göre ilgili menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz.">
<li ng-repeat="(key, item) in selectedMenuItems" ng-class="{active: collapseVar == $index+100}">{{dropDown}}
<a href="" ng-click="check($index+100)">
<i class="fa fa-fw"
ng-class="{
'Admin': 'fa fa-fw fa-terminal',
'Genel': 'fa fa-fw fa-graduation-cap',
'Alt Kategori': 'fa fa-fw fa-tags',
'Kadro Islemleri': 'fa fa-fw fa-users',
'Seçime Uygun Görevler':'fa fa-fw fa-user'
}[item[0].kategori]"></i>
<span class="menu-text" ng-class="{hidden: $root.collapsed}">{{ key }}</span>
<span class="fa arrow" ng-class="{hidden: $root.collapsed}"></span>
</a>
<ul class="nav nav-second-level" ng-class="{hidden: $root.collapsed}">
<li ng-repeat="(k, v) in item">
<!--<a ng-if="v.model" ng-href="#{{v.url}}" ng- -->
<!--ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>-->
<a ng-href="#/{{v.wf}}/{{v.model}}?{{v.param}}={{selectedUser.key}}"
ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- end of person-actions -->
</div>
<!-- end of sidebar-person-info -->
<div class="sidebar-nav navbar-collapse"> <div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu" ng-class="{hidden: $root.loggedInUser != true}" data-step="1" <ul class="nav in" id="side-menu" ng-class="{hidden: $root.loggedInUser != true}" data-step="1"
data-intro="Genel menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz."> data-intro="Genel menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz.">
......
dist/app.js
View file @ 462104fd
This diff is collapsed.
dist/bower_components/components.js
View file @ 462104fd
This diff is collapsed.
dist/css/app.css
View file @ 462104fd
...@@ -105,6 +105,13 @@ a:hover { ...@@ -105,6 +105,13 @@ a:hover {
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
img.header-profile {
width:27px;
height:27px;
border-radius:100%;
margin-right:6px;
}
/** DETAIL PAGE **/ /** DETAIL PAGE **/
.detail-page { .detail-page {
...@@ -374,11 +381,15 @@ select { ...@@ -374,11 +381,15 @@ select {
.manager-view-inner { .manager-view-inner {
height:calc(100% - 41px); height:calc(100% - 41px);
-webkit-height:calc(100% - 41px); -webkit-height:calc(100% - 41px);
width:100%;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
} }
.manager-view-header { .manager-view-header {
...@@ -1166,15 +1177,19 @@ table.dataTable thead .sorting:after { ...@@ -1166,15 +1177,19 @@ table.dataTable thead .sorting:after {
} }
.right-sidebar { .right-sidebar {
width: 300px; width: 0px;
background-color: #FFFFFF; background-color: #FFFFFF;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
/*height: calc(100% - 140px);*/
height: calc(100% - 40px); height: calc(100% - 40px);
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
overflow-y: auto; overflow-y: auto;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
} }
.right-sidebar-box { .right-sidebar-box {
...@@ -1349,6 +1364,63 @@ table.dataTable thead .sorting:after { ...@@ -1349,6 +1364,63 @@ table.dataTable thead .sorting:after {
/* END OF DASHBOARD */ /* END OF DASHBOARD */
/* SELECTED PERSON FIELD */
.selected-person-field .right-sidebar-header {
height:43px;
width:100%;
}
.selected-person-field .right-sidebar-header .bar-title {
margin-left: 10px;
height: 43px;
line-height: 43px;
font-family: 'robotomedium';
font-size: 15px;
}
.selected-person-field .right-sidebar-header .unselect-person {
height: 43px;
width: 43px;
font-size: 24px;
line-height: 43px;
float: right;
text-align: center;
cursor:pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.selected-person-field .right-sidebar-header .unselect-person:hover > i{
color:#333;
}
.selected-person-field .right-sidebar-header .unselect-person i {
color:#999;
}
.selected-person-field img.selected-person-img {
width:150px;
height:150px;
border-radius:100%;
margin-top:5px;
margin-left:75px;
margin-right:75px;
}
.selected-person-field .selected-person-info .selected-person-name {
width:100%;
padding:15px 20px;
text-align:center;
font-family:'robotomedium';
font-size:18px;
}
/* END OF SELECTED PERSON FIELD */
/* PERSONNEL INFO */ /* PERSONNEL INFO */
......
dist/index.html
View file @ 462104fd
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<div class="main" ng-view> <div class="main" ng-view>
</div> </div>
<right-sidebar></right-sidebar>
</div> </div>
</div> </div>
</div> </div>
......
dist/templates.js
View file @ 462104fd
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment