Merge pull request #368 from glowing-bear/sidebar-animation

[PLEASE TEST] Animate sidebar with CSS transitions

css/glowingbear.css

@@ -171,10 +171,14 @@ input[type=text], input[type=password], #sendMessage, .badge {
     padding-top: 35px; /* topbar */
     padding-bottom: 1px; /* need to force a padding here */
     font-size: smaller;
-    -webkit-transition:0.35s ease all;
-    transition:0.35s ease all;
+    transition:0.2s ease-in-out;
     z-index: 2;
 }
+
+#sidebar[data-state=visible] {
+    left: 0px;
+}
+
 #sidebar form {
 }
 #sidebar.ng-hide-add, #sidebar.ng-hide-remove {
@@ -274,7 +278,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
 .withnicklist {
     margin-right: 100px !important; /* nicklist */
 }
-.withsidebar {
+.content[sidebar-state=visible] #bufferlines {
     margin-left: 145px;    /* sidebar */
 }
 #bufferlines .btn {
@@ -290,7 +294,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
     transition:0.35s ease all;
     z-index: 1;
 }
-.footer.withsidebar {
+.content[sidebar-state=visible] .footer {
     margin-left: 0;
     padding-left: 145px;
 }
@@ -409,8 +413,6 @@ h2 span, h2 small {
     #sidebar {
         font-size: normal;
         bottom: 0px;
-        width: auto;
-        max-width: 60%;
         top: 0px;
         padding-bottom: 35px;
     }
@@ -421,6 +423,18 @@ h2 span, h2 small {
         bottom: 0px;
     }
 
+    #sidebar[data-state=visible] {
+        width: 200px;
+    }
+
+    #sidebar[data-state=hidden] {
+        left: -200px;
+    }
+
+    .content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
+        margin-left: 0px;
+    }
+
     #topbar .title {
         left: 40px;
     }

index.html

@@ -187,10 +187,10 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         </div>
       </div>
     </div>
-    <div class="content" ng-show="connected">
+    <div class="content" id="content" sidebar-state="visible" ng-show="connected">
       <div id="topbar">
         <div class="brand">
-          <a href="#" ng-click="swipeSidebar()">
+          <a href="#" ng-click="toggleSidebar()">
             <img alt="brand" src="assets/img/favicon.png" title="Connected to {{ host }}:{{ port}}">
           </a>
           <button ng-if="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
@@ -207,7 +207,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
         </div>
       </div>
-      <div bindonce id="sidebar" ng-show="showSidebar" ng-swipe-left="swipeSidebar()" class="vertical-line">
+      <div bindonce id="sidebar" data-state="visible" ng-swipe-left="hideSidebar()" class="vertical-line">
         <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
@@ -222,7 +222,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-swipe-right="swipeSidebar()" ng-swipe-left="swipeSidebar()" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
+      <div bindonce id="bufferlines" class="monospace" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}">
         <div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
             <li ng-repeat="nick in group.nicks|orderBy:'name'">
@@ -260,7 +260,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </tbody>
         </table>
       </div>
-      <div class="footer" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
+      <div class="footer" ng-class="{'withnicklist': showNicklist}">
         <div input-bar input-id="sendMessage"></div>
       </div>
     </div>

js/glowingbear.js

@@ -808,8 +808,6 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     });
     $scope.connectbutton = 'Connect';
 
-    $scope.showSidebar = true;
-
     $scope.getBuffers = models.getBuffers.bind(models);
 
     $scope.bufferlines = {};
@@ -874,13 +872,32 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     // Save setting for displaying embeds in rootScope so it can be used from service
     $rootScope.visible = $scope.noembed === false;
 
-    // Open and close panels while on mobile devices through swiping
-    $scope.swipeSidebar = function() {
+    $scope.isSidebarVisible = function() {
+        return document.getElementById('sidebar').getAttribute('sidebar-state') === 'visible';
+    };
+
+    $scope.showSidebar = function() {
+        document.getElementById('sidebar').setAttribute('data-state', 'visible');
+        document.getElementById('content').setAttribute('sidebar-state', 'visible');
+    };
+
+    $scope.hideSidebar = function() {
+        document.getElementById('sidebar').setAttribute('data-state', 'hidden');
+        document.getElementById('content').setAttribute('sidebar-state', 'hidden');
+    };
+
+    // toggle sidebar (if on mobile)
+    $scope.toggleSidebar = function() {
         if ($rootScope.isMobileUi()) {
-            $scope.showSidebar = !$scope.showSidebar;
+            if ($scope.isSidebarVisible()) {
+                $scope.hideSidebar();
+            } else {
+                $scope.showSidebar();
+            }
         }
     };
 
+    // Open and close panels while on mobile devices through swiping
     $scope.openNick = function() {
         if ($rootScope.isMobileUi()) {
             if ($scope.nonicklist) {
@@ -931,7 +948,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 ($rootScope.isMobileUi()) {
-            $scope.showSidebar = false;
+            $scope.hideSidebar();
         }
         return models.setActiveBuffer(bufferId, key);
     };
@@ -971,10 +988,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         if ($rootScope.connected) {
             // Show the sidebar if switching away from mobile view, hide it when switching to mobile
             // Wrap in a condition so we save ourselves the $apply if nothing changes (50ms or more)
-            if ($scope.wasMobileUi !== $scope.isMobileUi() &&
-                    $scope.showSidebar === $scope.isMobileUi()) {
-                $scope.showSidebar = !$scope.showSidebar;
-                $scope.$apply();
+            if ($scope.wasMobileUi && !$scope.isMobileUi()) {
+                $scope.showSidebar();
             }
             $scope.wasMobileUi = $scope.isMobileUi();
             $scope.calculateNumLines();