c9f7e9a732
This should improve scrolling experience, especially on webkit. It also is needed for when nicklist will appear
261 lines
13 KiB
HTML
261 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="weechat" ng-cloak>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title ng-bind-template="WeeChat {{ pageTitle}}"></title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
|
<link rel="shortcut icon" type="image/png" href="img/favicon.png" >
|
|
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
|
|
<script type="text/javascript" src="js/localstorage.js"></script>
|
|
<script type="text/javascript" src="js/weechat.js"></script>
|
|
<script type="text/javascript" src="js/websockets.js"></script>
|
|
<script type="text/javascript" src="js/models.js"></script>
|
|
<script type="text/javascript" src="js/plugins.js"></script>
|
|
<script type="text/javascript" src="js/favico-0.3.0.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
|
</head>
|
|
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
|
|
<div ng-hide="connected" class="container">
|
|
<h2>
|
|
<img alt="logo" src="img/favicon.png">
|
|
glowing bear
|
|
<small>
|
|
WeeChat web frontend
|
|
</small>
|
|
</h2>
|
|
<div class="alert alert-danger" ng-show="errorMessage">
|
|
<strong>Oh no!</strong> We cannot connect!
|
|
</div>
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
|
Connection settings
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<form class="form-signin" role="form">
|
|
<div class="form-group">
|
|
<label class="control-label" for="host">WeeChat relay hostname and port number</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="host" ng-model="host" placeholder="Address">
|
|
<input type="text" class="form-control" id="port" ng-model="port" placeholder="9001">
|
|
</div>
|
|
<div class="alert alert-danger" ng-show="passwordError">
|
|
Error wrong password
|
|
</div>
|
|
<label class="control-label" for="password">WeeChat relay password</label>
|
|
<input type="password" class="form-control" id="password" ng-model="password" placeholder="Password">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" class="checkbox" id="savepassword" ng-model="savepassword">
|
|
Save password in your browser
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label class="control-label " for="ssl">
|
|
<input type="checkbox" class="" id="ssl" ng-model="ssl">
|
|
Encryption. Read instructions for help
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="port">Lines</label>
|
|
<input type="text" class="form-control" id="lines" ng-model="lines" placeholder="40">
|
|
<p class="help-block">Enter number of lines to sync from WeeChat on connect</p>
|
|
</div>
|
|
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect <i class="glyphicon glyphicon-chevron-right"></i></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
|
Usage instructions
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseTwo" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<div>To start using, please enable relay in your WeeChat client:
|
|
<pre>
|
|
/set relay.network.password yourpassword
|
|
/relay add weechat 9001</pre>
|
|
<span class="label label-warning">WeeChat version 0.4.2 or higher is required.</span><br>
|
|
The communication goes directly between your browser and your weechat in clear text.
|
|
Connection settings are saved between sessions, including password, in your own browser.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel ">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
|
Encryption instructions
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseThree" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
If you check the encryption box, communication between browser and WeeChat will be encrypted.<br>
|
|
<strong>Note</strong>: Due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">bug</a> encryption will not work in Firefox. You must also first visit the URL https://weechathost:relayport/ to accept the certificate</p>
|
|
If you want to use encrypted session you first have to set up the relay using SSL like this:
|
|
<pre>
|
|
$ mkdir -p ~/.weechat/ssl
|
|
$ cd ~/.weechat/ssl
|
|
$ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
|
|
</pre>
|
|
If WeeChat is already running, you can reload the certificate and private key with command:
|
|
<pre>
|
|
/relay sslcertkey
|
|
/relay add ssl.weechat 8000
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" ng-hide="isinstalled">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
|
|
Install app
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseFour" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p>If you have a very new Firefox you can install the frontend as an app. Click the button to install.</p>
|
|
<button class="btn btn-lg btn-primary" ng-click="install()">Install app <i class="glyphicon glyphicon-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content" ng-show="connected">
|
|
<div id="topbar" class="horizontal-line">
|
|
<div class="brand">
|
|
<img alt="brand" src="img/favicon.png">
|
|
</div>
|
|
<div class="title">
|
|
{{ activeBuffer().title}}
|
|
</div>
|
|
<div class="actions pull-right vertical-line-left">
|
|
<div class="dropdown pull-left">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="glyphicon glyphicon-cog"></i>
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li class="">
|
|
<form class="form-inline" role="form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="onlyUnread">
|
|
Only show unread
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="">
|
|
<form class="form-inline" role="form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="notimestamp">
|
|
Hide timestamps
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li class="">
|
|
<form class="form-inline" role="form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="hotlistsync">
|
|
Sync hotlist with WeeChat
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a ng-click="disconnect()">
|
|
<i class="glyphicon glyphicon-remove"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="sidebar" class="vertical-line">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="bufferfilter">
|
|
<form role="form">
|
|
<input class="form-control" type="text" id="bufferFilter" ng-model="search" ng-keydown="handleSearchBoxKey($event)" placeholder="Search">
|
|
</form>
|
|
</li>
|
|
<li class="buffer" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:'content.number':true">
|
|
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
|
|
<span class="badge pull-right" ng-hide="content.notification" ng-if="content.unread" ng-bind="content.unread"></span>
|
|
<span class="badge pull-right danger" ng-show="content.notification" ng-bind="content.notification"></span>
|
|
{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="bufferlines">
|
|
<table>
|
|
<tbody>
|
|
<tr class="bufferline" ng-repeat-start="bufferline in activeBuffer().lines">
|
|
<td ng-hide="notimestamp" class="time">
|
|
<span class="date text-muted">
|
|
{{ bufferline.date | date:'HH:mm' }}
|
|
</span>
|
|
</td>
|
|
<td class="prefix vertical-line"><span ng-repeat="part in bufferline.prefix" style="{{ part.fg }}">{{ part.text }}</span></td>
|
|
<td class="message">
|
|
<span ng-repeat="part in bufferline.content" class="text" style="{{ part.fg }}" ng-bind-html="part.text"></span>
|
|
|
|
<div ng-repeat="metadata in bufferline.metadata">
|
|
<div ng-show="metadata.visible">
|
|
<button class="btn btn-primary pull-right" ng-click="metadata.visible = false">Hide {{ metadata.name }}</button>
|
|
<div ng-bind-html="metadata.content"></div>
|
|
|
|
</div>
|
|
<div ng-hide="metadata.visible">
|
|
<button class="btn pull-right" ng-class="{'btn-warning': metadata.nsfw, 'btn-primary': !metadata.nsfw}" ng-click="metadata.visible = true">Show {{ metadata.name }}</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="readmarker" ng-repeat-end ng-show="activeBuffer().lastSeen==$index">
|
|
<td colspan="3">
|
|
<hr ng-if="activeBuffer().lastSeen==$index" id="readmarker">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="push"></div>
|
|
</div>
|
|
<div id="footer" ng-show="connected">
|
|
<div class="navbar navbar-inverse navbar-fixed-bottom">
|
|
<form class="form form-horizontal" ng-submit="sendMessage()">
|
|
<div class="input-group">
|
|
<input id="sendMessage" type="text" class="form-control" autocomplete="off" ng-model="command" autofocus>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default btn-primary">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|