Merge pull request #158 from cormier/fix-bufferlist

Fix bufferlist issues

css/glowingbear.css

@@ -263,60 +263,7 @@ input[type=text], input[type=password], .badge {
 .navbar-inverse {
     background-color: #181818;
 }
-@media (max-width: 968px) {
+
-    #sidebar {
-        font-size: normal;
-        z-index: 1;
-        width: 0;
-    }
-    #sidebar.in, #sidebar.collapsing {
-        -webkit-box-shadow: 0px 0px 120px #000;
-                box-shadow: 0px 0px 120px #000;
-    }
-    #topbar .title {
-        left: 40px;
-    }
-    #bufferlines, #nicklist {
-        position: relative;
-        min-height: 0;
-        margin-left: 0;
-        height: auto;
-        max-width: 100%;
-        border: 0;
-    }
-    #nicklist {
-        width: 100%;
-        text-align: center;
-    }
-    #bufferlines {
-        padding-bottom: 38px; /* navbar fixed bottom */
-    }
-    .navbar-fixed-bottom {
-        margin: 0;
-    }
-    .navbar {
-        min-height: 0%;
-    }
-    #bufferlines td.time {
-        display: inline;
-        padding-right: 0;
-    }
-    #bufferlines td.prefix {
-        display: inline;
-        padding-right: 0;
-        border: 0;
-    }
-    #bufferlines td.message {
-        padding-left: 0;
-        display: inline;
-    }
-    #bufferlines td.prefix:before {
-        content: "<";
-    }
-    #bufferlines td.prefix:after {
-        content: ">";
-    }
-}
 .color-light-green {
     color: chartreuse;
 }
@@ -363,3 +310,91 @@ img.embed {
 table.notimestamp td.time {
     display: none;
 }
+
+
+/* */
+/* Mobile layout */
+/* */
+@media (max-width: 968px) {
+    .message span {
+        color: #C7C7C7;
+    }
+
+    .bufferline {
+        line-height: 25px;
+    }
+
+    #sidebar {
+        font-size: normal;
+        z-index: 1;
+        bottom: 0px;
+        width: 60%;
+        top: 0px;
+    }
+
+    #sidebar.in, #sidebar.collapsing {
+        -webkit-box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        bottom: 0px;
+    }
+
+    #topbar .title {
+        left: 40px;
+    }
+
+    #bufferlines, #nicklist {
+        position: relative;
+        min-height: 0;
+        margin-left: 0;
+        height: auto;
+        max-width: 100%;
+        border: 0;
+    }
+
+    #nicklist {
+        width: 160px;
+        text-align: center;
+        -webkit-box-shadow: 0px 0px 120px #000;
+        box-shadow: 0px 0px 120px #000;
+        position: fixed;
+        margin-top: 10px;
+        background: #282828;
+        bottom: 0px;
+    }
+
+    #bufferlines {
+        padding-bottom: 38px; /* navbar fixed bottom */;
+    }
+
+    .navbar-fixed-bottom {
+        margin: 0;
+    }
+
+    .navbar {
+        min-height: 0%;
+    }
+
+    #bufferlines td.time {
+        display: inline;
+        padding-right: 0;
+    }
+
+    #bufferlines td.prefix {
+        display: inline;
+        padding-right: 0;
+        border: 0;
+    }
+
+    #bufferlines td.message {
+        padding-left: 0;
+        display: inline;
+    }
+
+    #bufferlines td.prefix:before {
+        content: "<";
+    }
+
+    #bufferlines td.prefix:after {
+        content: ">";
+    }
+}

index.html

@@ -17,6 +17,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
     <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="//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>
@@ -270,7 +271,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
           </a>
         </div>
       </div>
-      <div bindonce id="sidebar" class="vertical-line collapse in">
+      <div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
         <ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
           <li class="bufferfilter">
             <form role="form">
@@ -287,7 +288,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         </ul>
       </div>
       <div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
-        <div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
+        <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)">
               <a ng-click="nickAction(nick)"><span bo-class="nick.prefixClasses" bo-text="nick.prefix"></span><span bo-class="nick.nameClasses" bo-text="nick.name"></span></a>
@@ -305,7 +306,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
               </td>
             </tr>
           </tbody>
-          <tbody ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
+          <tbody ng-swipe-right="swipeSidebar()" ng-swipe-left="openNick()" ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
             <tr class="bufferline">
               <td class="time">
                 <span class="date" bo-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">

js/glowingbear.js

@@ -1,4 +1,4 @@
-var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce']);
+var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch']);
 
 weechat.filter('toArray', function () {
     'use strict';
@@ -486,6 +486,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         });
     }
 
+    var mobile_cutoff = 968;
 
     $rootScope.countWatchers = function () {
         var root = $(document.getElementsByTagName('body'));
@@ -614,12 +615,34 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
 
     // If we are on mobile chhange some defaults
     // We use 968 px as the cutoff, which should match the value in glowingbear.css
-    if (document.body.clientWidth < 968) {
+    if (document.body.clientWidth < mobile_cutoff) {
         $scope.nonicklist = true;
         $scope.noembed = true;
         $scope.notimestamp = true;
     }
 
+    // Open and close panels while on mobile devices through swiping
+    $scope.swipeSidebar = function() { 
+        if (document.body.clientWidth < mobile_cutoff) {
+            $('#sidebar').collapse('toggle');
+        }
+    };
+    
+    $scope.openNick = function() {
+        if (document.body.clientWidth < mobile_cutoff) {
+            if($scope.nonicklist) { 
+                $scope.nonicklist = false;
+            } 
+        }
+    };
+
+    $scope.closeNick = function() {
+        if (document.body.clientWidth < mobile_cutoff) {
+            if(!$scope.nonicklist) { 
+                $scope.nonicklist = true;
+            } 
+        }
+    };
 
     // Watch model and update show setting when it changes
     $scope.$watch('noembed', function() {
@@ -633,6 +656,11 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $rootScope.predicate = $scope.orderbyserver ? 'serverSortKey' : 'number';
 
     $scope.setActiveBuffer = function(bufferId, key) {
+        // 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');
+        }
         return models.setActiveBuffer(bufferId, key);
     };