ADD rfix 5079 implement design selected user on right

app/components/dashboard/dashboard.html

@@ -125,22 +125,24 @@
         </div>
         <!-- end of dashboard-main-anouncement -->
 
-        <div class="right-sidebar selected-person-field">
+        <!--<div class="right-sidebar selected-person-field">-->
 
-            <div class="right-sidebar-header">
-            	<span class="bar-title">Kişi seçildi</span>
-            	<span class="unselect-person"><i class="fa fa-times"></i></span>
-            </div>
-            <!-- end of right-sidebaer-header -->
-            
-            <div class="selected-person-info">
-            	<img src="../../img/sample-profile-pic.jpg" class="selected-person-img">
-                <div class="selected-person-name">Erkan Öğümsöğütlü</div>
-            </div>
-            <!-- end of selected-person-info -->
+            <!--<div class="right-sidebar-header">-->
+            	<!--<span class="bar-title">Kişi seçildi</span>-->
+            	<!--<span class="unselect-person"><i class="fa fa-times"></i></span>-->
+            <!--</div>-->
+            <!--&lt;!&ndash; end of right-sidebaer-header &ndash;&gt;-->
+            <!---->
+            <!--<div class="selected-person-info">-->
+            	<!--<img src="../../img/sample-profile-pic.jpg" class="selected-person-img">-->
+                <!--<div class="selected-person-name">Erkan Öğümsöğütlü</div>-->
+            <!--</div>-->
+            <!--&lt;!&ndash; end of selected-person-info &ndash;&gt;-->
 
-        </div>
+        <!--</div>-->
         <!-- end of right-sidebar -->
 
+
+
     </div>
 </div>
\ No newline at end of file

app/index.html

@@ -64,7 +64,7 @@
                 <div class="main" ng-view>
 
                 </div>
-
+                <right-sidebar></right-sidebar>
             </div>
         </div>
     </div>

app/main.html

@@ -71,7 +71,7 @@
                 <div class="main" ng-view>
 
                 </div>
-
+                <right-sidebar></right-sidebar>
             </div>
         </div>
     </div>

app/shared/directives.js

@@ -347,7 +347,7 @@ angular.module('ulakbus')
                 };
 
                 var sidebarmenu = $('#side-menu');
-                var sidebarUserMenu = $('#side-user-menu');
+                //var sidebarUserMenu = $('#side-user-menu');
                 sidebarmenu.metisMenu();
                 $http.get(RESTURL.url + 'menu/')
                     .success(function (data) {
@@ -398,7 +398,7 @@ angular.module('ulakbus')
 
                         $timeout(function () {
                             sidebarmenu.metisMenu();
-                            sidebarUserMenu.metisMenu();
+                            //sidebarUserMenu.metisMenu();
                         });
                     });
 
@@ -407,12 +407,11 @@ angular.module('ulakbus')
                 $scope.$on("menuitems", function (event, data) {
                     var menu = {};
                     menu[data] = $scope.allMenuItems[data];
-                    //menu['other'] = $scope.allMenuItems.other;
-                    $scope.selectedMenuItems = $scope.prepareMenu(menu);
-                    $timeout(function () {
-                        //sidebarmenu.metisMenu();
-                        sidebarUserMenu.metisMenu();
-                    });
+                    $rootScope.$broadcast("usermenuitems", $scope.prepareMenu(menu));
+                    //$timeout(function () {
+                    //    sidebarmenu.metisMenu();
+                    //    sidebarUserMenu.metisMenu();
+                    //});
                 });
 
                 $scope.$on('selectedUser', function ($event, data) {
@@ -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
      * @ngdoc directive

app/shared/templates/directives/right-sidebar.html

+<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

 <div class="navbar-default sidebar" role="navigation" ng-mouseenter="openSidebar()" ng-mouseleave="closeSidebar()">
 
     <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">
             <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.">

dist/css/app.css

@@ -105,6 +105,13 @@ a:hover {
     letter-spacing: 0.5px;
 }
 
+img.header-profile {
+	width:27px;
+	height:27px;
+	border-radius:100%;
+	margin-right:6px;
+}
+
 /** DETAIL PAGE **/
 
 .detail-page {
@@ -374,11 +381,15 @@ select {
 .manager-view-inner {
     height:calc(100% - 41px);
     -webkit-height:calc(100% - 41px);
-    width:100%;
     display: -webkit-flex;
     display: flex;
     -webkit-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 {
@@ -1166,15 +1177,19 @@ table.dataTable thead .sorting:after {
 }
 
 .right-sidebar {
-	width: 300px;
+	width: 0px;
     background-color: #FFFFFF;
     border-left: 1px solid #ccc;
-    /*height: calc(100% - 140px);*/
     height: calc(100% - 40px);
     position: absolute;
     top: 0px;
     right: 0px;
     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 {
@@ -1349,6 +1364,63 @@ table.dataTable thead .sorting:after {
 
 /* 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 */
 

dist/index.html

@@ -56,7 +56,7 @@
                 <div class="main" ng-view>
 
                 </div>
-
+                <right-sidebar></right-sidebar>
             </div>
         </div>
     </div>