Add unread counter to buffer nav

This commit is contained in:
Tor Hveem 2013-10-07 01:56:26 +02:00
parent befe6e9160
commit 599cf0733f
3 changed files with 59 additions and 39 deletions

View file

@ -1,7 +1,10 @@
body { body {
color: white; color: white;
background-color: #222; background-color: #222;
padding: 5px; padding-left: 5px;
padding-right: 5px;
padding-bottom:70px;
padding-top: 70px;
} }
.bufferlines { .bufferlines {
font-family: monospace; font-family: monospace;

View file

@ -7,7 +7,8 @@
<title ng-bind-template="WeeChat {{ pageTitle}}"></title> <title ng-bind-template="WeeChat {{ pageTitle}}"></title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" rel="stylesheet" media="screen"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.png" > <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
<link href="css/glowingbear.css" rel="stylesheet" media="screen"> <link href="css/glowingbear.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script>
@ -20,14 +21,14 @@
<div ng-controller="WeechatCtrl"> <div ng-controller="WeechatCtrl">
<div ng-hide="connected" class="container"> <div ng-hide="connected" class="container">
<h2> <h2>
<img src="img/favicon.png"> <img src="img/favicon.png">
glowing bear glowing bear
<small> <small>
WeeChat web frontend WeeChat web frontend
</small> </small>
</h2> </h2>
<div>To start using, please enable relay in your WeeChat client: <div>To start using, please enable relay in your WeeChat client:
<pre> <pre>
/set relay.network.password yourpassword /set relay.network.password yourpassword
/relay add weechat 9001</pre> /relay add weechat 9001</pre>
Note: The communication goes directly between your browser and your weechat in clear text. Note: The communication goes directly between your browser and your weechat in clear text.
@ -35,36 +36,45 @@
</div> </div>
<h3>Connection settings</h3> <h3>Connection settings</h3>
<form role="form"> <form role="form">
<div class="alert alert-danger" ng-show="errorMessage"> <div class="alert alert-danger" ng-show="errorMessage">
<strong>Oh no!</strong> We cannot connect! <strong>Oh no!</strong> We cannot connect!
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="hostport">Hostname and port</label> <label class="control-label" for="hostport">Hostname and port</label>
<input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport"> <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
<p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p> <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="password">WeeChat relay password</label> <label class="control-label" for="password">WeeChat relay password</label>
<input type="password"class="form-control" id="password" ng-model="password" placeholder="Password"> <input type="password"class="form-control" id="password" ng-model="password" placeholder="Password">
<p class="help-block">Password will be stored in your browser session</p> <p class="help-block">Password will be stored in your browser session</p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="proto">Proto</label> <label class="control-label" for="proto">Proto</label>
<input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto"> <input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto">
<p class="help-block">Default is fine.</p> <p class="help-block">Default is fine.</p>
</div> </div>
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button> <button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
</form> </form>
</div> </div>
<div ng-show="connected"> <div ng-show="connected">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header">
<ul class="nav nav-pills"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<li class="label" ng-class="{'active': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true"> <span class="sr-only">Toggle navigation</span>
<a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }}</a> <span class="icon-bar"></span>
</li> <span class="icon-bar"></span>
</ul> <span class="icon-bar"></span>
</div> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
<a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }} <span class="badge" ng-bind="content.unread"></span></a>
</li>
</ul>
</div>
</nav>
<div class="bufferlines"> <div class="bufferlines">
<div class="bufferline" ng-repeat="bufferline in activeBuffer.lines"> <div class="bufferline" ng-repeat="bufferline in activeBuffer.lines">
<span class="date text-muted"> <span class="date text-muted">

View file

@ -290,7 +290,11 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
if (!_isActiveBuffer(buffer) && !initial) { if (!_isActiveBuffer(buffer) && !initial) {
$rootScope.buffers[buffer]['notification'] = true;
if ($rootScope.buffers[buffer]['unread'] == '') {
$rootScope.buffers[buffer]['unread'] == 0;
}
$rootScope.buffers[buffer]['unread'] += 1;
} }
if (text[0] != undefined) { if (text[0] != undefined) {
@ -365,10 +369,12 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
var pointer = bufferInfo['pointers'][0]; var pointer = bufferInfo['pointers'][0];
bufferInfo['id'] = pointer; bufferInfo['id'] = pointer;
bufferInfo['lines'] = []; bufferInfo['lines'] = [];
bufferInfo['unread'] = '';
buffers[pointer] = bufferInfo buffers[pointer] = bufferInfo
if (i == 0) { if (i == 0) {
// first buffer is active buffer by default // first buffer is active buffer by default
$rootScope.activeBuffer = buffers[pointer]; $rootScope.activeBuffer = buffers[pointer];
$rootScope.activeBuffer['active'] = true;
} }
} }
$rootScope.buffers = buffers; $rootScope.buffers = buffers;
@ -412,7 +418,7 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
_buffer_closing: handleBufferClosing, _buffer_closing: handleBufferClosing,
_buffer_line_added: handleBufferLineAdded, _buffer_line_added: handleBufferLineAdded,
_buffer_opened: handleBufferOpened, _buffer_opened: handleBufferOpened,
_buffer_title_changed: handleBufferTitleChanged, _buffer_title_changed: handleBufferTitleChanged
} }
return { return {
@ -536,8 +542,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', 'connection
} }
$scope.setActiveBuffer = function(key) { $scope.setActiveBuffer = function(key) {
$rootScope.activeBuffer['notification'] = false; $rootScope.activeBuffer['active'] = false;
$rootScope.buffers[key]['notification'] = true; $rootScope.buffers[key]['active'] = true;
$rootScope.buffers[key]['unread'] = '';
$rootScope.activeBuffer = $rootScope.buffers[key]; $rootScope.activeBuffer = $rootScope.buffers[key];
$rootScope.pageTitle = $rootScope.activeBuffer['short_name'] + ' | ' + $rootScope.activeBuffer['title']; $rootScope.pageTitle = $rootScope.activeBuffer['short_name'] + ' | ' + $rootScope.activeBuffer['title'];
}; };