masq
/
glowing-bear
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #158 from cormier/fix-bufferlist 

Fix bufferlist issues
This commit is contained in:
David Cormier 2014-02-19 10:44:17 -05:00
parent ca6286064e 51cde96bf6
commit c5f89e83cd
3 changed files with 155 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
css/glowingbear.css
View File

@ -19,28 +19,28 @@ body {
height: 25px;
}
.horizontal-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
border-bottom: 1px solid #121212;
}
.vertical-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
border-right: 1px solid #121212;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
border-right: 1px solid #121212;
}
.vertical-line-left {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
border-left: 1px solid #121212;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
border-left: 1px solid #121212;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
border-top: 1px solid #121212;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
border-top: 1px solid #121212;
}
table {
@ -104,7 +104,7 @@ input#sendMessage {
border-radius: 0;
}
.panel input, .panel .input-group {
max-width: 300px;
max-width: 300px;
}
input[type=text], input[type=password], .badge {
border: 0;
@ -121,24 +121,24 @@ input[type=text], input[type=password], .badge {
z-index: 2;
line-height: 35px;
white-space: nowrap;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
}
#topbar .brand {
float: left;
height: 35px;
padding-left: 5px;
}
#topbar .brand img {
height: 32px;
}
#topbar .brand button {
position: absolute;
line-height: 15px;
font-size: 9pt;
margin-left: 10px
}
#topbar .brand img {
height: 32px;
}
#topbar .brand button {
position: absolute;
line-height: 15px;
font-size: 9pt;
margin-left: 10px
}
#topbar .title {
position: fixed;
left: 145px; /* sidebar */
@ -174,7 +174,7 @@ input[type=text], input[type=password], .badge {
overflow-x: hidden;
margin-top: 35px; /* topbar */
font-size: smaller;
}
}
#sidebar form {
}
@ -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;
}
@ -330,8 +277,8 @@ input[type=text], input[type=password], .badge {
color: #ddd;
}
.alert-danger {
border-color: #121212;
color: black;
border-color: #121212;
color: black;
}
li.notification {
@ -356,10 +303,98 @@ li.notification {
}
img.embed {
max-height: 300px;
max-height: 300px;
}
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: ">";
}
}

7
index.html
View File

@ -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}">

32
js/glowingbear.js
View File

@ -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);
};