Merge pull request #166 from torhve/swipe-animate

Use ngAnimate to animate sidebar hiding/showing

css/glowingbear.css

@@ -174,9 +174,17 @@ input[type=text], input[type=password], .badge {
     overflow-x: hidden;
     margin-top: 35px; /* topbar */
     font-size: smaller;
+    -webkit-transition:0.35s ease all;
+    transition:0.35s ease all;
 }
 #sidebar form {
 }
+#sidebar.ng-hide-add, #sidebar.ng-hide-remove {
+  /* this needs to be here to make it visible during the animation
+     since the .ng-hide class is already on the element rendering
+     it as hidden. */
+  display:block!important;
+}
 
 #sidebar .badge {
     border-radius: 0;
@@ -187,6 +195,10 @@ input[type=text], input[type=password], .badge {
     padding-left: 10px;
 }
 
+#sidebar.ng-hide {
+  width: 0;
+}
+
 #nicklist {
     position: fixed;
     width: 100px;
@@ -244,21 +256,27 @@ input[type=text], input[type=password], .badge {
     position: relative;
     height: 98%;
     overflow-y: auto;
-    margin-left: 145px;    /* sidebar */
     width: auto;
     top: 35px; /* topbar */
     padding-bottom: 10px;
     margin-right: -5px;
+    -webkit-transition:0.35s ease all;
+    transition:0.35s ease all;
 }
 .withnicklist {
     margin-right: 100px !important; /* nicklist */
 }
+.withsidebar {
+    margin-left: 145px;    /* sidebar */
+}
 #bufferlines .btn {
     font-family: sans-serif;
 }
 
 .navbar-fixed-bottom {
     margin: 0 5px 0 145px; /* sidebar */
+    -webkit-transition:0.35s ease all;
+    transition:0.35s ease all;
 }
 .navbar-inverse {
     background-color: #181818;
@@ -311,7 +329,6 @@ table.notimestamp td.time {
     display: none;
 }
 
-
 /* */
 /* Mobile layout */
 /* */

index.html

@@ -18,6 +18,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-sanitize.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-animate.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
     <script type="text/javascript" src="3rdparty/inflate.min.js"></script>
     <script type="text/javascript" src="js/localstorage.js"></script>
@@ -183,7 +184,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
     <div class="content" ng-show="connected">
       <div id="topbar">
         <div class="brand">
-          <a href="#" data-target="#sidebar" data-toggle="collapse">
+          <a href="#" ng-click="swipeSidebar()">
             <img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
           </a>
           <button ng-show="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
@@ -272,7 +273,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
         </div>
       </div>
-      <div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
+      <div bindonce id="sidebar" ng-show="showSidebar" ng-swipe-left="swipeSidebar()" class="vertical-line">
         <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
@@ -288,7 +289,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </li>
         </ul>
       </div>
-      <div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
+      <div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
         <div id="nicklist" ng-show="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
             <li ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openBuffer(nick.name)">
@@ -333,7 +334,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
       <div class="push"></div>
     </div>
     <div id="footer" ng-show="connected">
-      <div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist}">
+      <div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
         <div input-bar></div>
     </div>
   </body>

js/glowingbear.js

@@ -1,4 +1,4 @@
-var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch']);
+var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch', 'ngAnimate']);
 
 weechat.filter('toArray', function () {
     'use strict';
@@ -581,6 +581,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     });
 
+    $scope.showSidebar = true;
+
     $scope.buffers = models.model.buffers;
     $scope.activeBuffer = models.getActiveBuffer;
 
@@ -626,9 +628,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
 
     // Open and close panels while on mobile devices through swiping
     $scope.swipeSidebar = function() { 
-        if (document.body.clientWidth < mobile_cutoff) {
+        $scope.showSidebar = !$scope.showSidebar;
-            $('#sidebar').collapse('toggle');
-        }
     };
     
     $scope.openNick = function() {
@@ -662,7 +662,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         // If we are on mobile we need to collapse the menu on sidebar clicks
         // We use 968 px as the cutoff, which should match the value in glowingbear.css
         if (document.body.clientWidth < mobile_cutoff) {
-            $('#sidebar').collapse('toggle');
+            $scope.showSidebar = false;
         }
         return models.setActiveBuffer(bufferId, key);
     };