Merge pull request #166 from torhve/swipe-animate
Use ngAnimate to animate sidebar hiding/showing
This commit is contained in:
commit
7b79d7dc5a
3 changed files with 29 additions and 11 deletions
|
@ -174,9 +174,17 @@ input[type=text], input[type=password], .badge {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
margin-top: 35px; /* topbar */
|
margin-top: 35px; /* topbar */
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
|
-webkit-transition:0.35s ease all;
|
||||||
|
transition:0.35s ease all;
|
||||||
}
|
}
|
||||||
#sidebar form {
|
#sidebar form {
|
||||||
}
|
}
|
||||||
|
#sidebar.ng-hide-add, #sidebar.ng-hide-remove {
|
||||||
|
/* this needs to be here to make it visible during the animation
|
||||||
|
since the .ng-hide class is already on the element rendering
|
||||||
|
it as hidden. */
|
||||||
|
display:block!important;
|
||||||
|
}
|
||||||
|
|
||||||
#sidebar .badge {
|
#sidebar .badge {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -187,6 +195,10 @@ input[type=text], input[type=password], .badge {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar.ng-hide {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#nicklist {
|
#nicklist {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -244,21 +256,27 @@ input[type=text], input[type=password], .badge {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 98%;
|
height: 98%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-left: 145px; /* sidebar */
|
|
||||||
width: auto;
|
width: auto;
|
||||||
top: 35px; /* topbar */
|
top: 35px; /* topbar */
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
margin-right: -5px;
|
margin-right: -5px;
|
||||||
|
-webkit-transition:0.35s ease all;
|
||||||
|
transition:0.35s ease all;
|
||||||
}
|
}
|
||||||
.withnicklist {
|
.withnicklist {
|
||||||
margin-right: 100px !important; /* nicklist */
|
margin-right: 100px !important; /* nicklist */
|
||||||
}
|
}
|
||||||
|
.withsidebar {
|
||||||
|
margin-left: 145px; /* sidebar */
|
||||||
|
}
|
||||||
#bufferlines .btn {
|
#bufferlines .btn {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
margin: 0 5px 0 145px; /* sidebar */
|
margin: 0 5px 0 145px; /* sidebar */
|
||||||
|
-webkit-transition:0.35s ease all;
|
||||||
|
transition:0.35s ease all;
|
||||||
}
|
}
|
||||||
.navbar-inverse {
|
.navbar-inverse {
|
||||||
background-color: #181818;
|
background-color: #181818;
|
||||||
|
@ -311,7 +329,6 @@ table.notimestamp td.time {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* */
|
/* */
|
||||||
/* Mobile layout */
|
/* Mobile layout */
|
||||||
/* */
|
/* */
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
<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-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-sanitize.min.js"></script>
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-touch.js"></script>
|
||||||
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-animate.js"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.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="3rdparty/inflate.min.js"></script>
|
||||||
<script type="text/javascript" src="js/localstorage.js"></script>
|
<script type="text/javascript" src="js/localstorage.js"></script>
|
||||||
|
@ -183,7 +184,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
||||||
<div class="content" ng-show="connected">
|
<div class="content" ng-show="connected">
|
||||||
<div id="topbar">
|
<div id="topbar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<a href="#" data-target="#sidebar" data-toggle="collapse">
|
<a href="#" ng-click="swipeSidebar()">
|
||||||
<img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
|
<img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
|
||||||
</a>
|
</a>
|
||||||
<button ng-show="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
|
<button ng-show="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
|
||||||
|
@ -272,7 +273,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div bindonce id="sidebar" ng-swipe-left="swipeSidebar()" class="vertical-line collapse in">
|
<div bindonce id="sidebar" ng-show="showSidebar" ng-swipe-left="swipeSidebar()" class="vertical-line">
|
||||||
<ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
|
<ul class="nav nav-pills nav-stacked" ng-class="{'indented': (predicate === 'serverSortKey')}">
|
||||||
<li class="bufferfilter">
|
<li class="bufferfilter">
|
||||||
<form role="form">
|
<form role="form">
|
||||||
|
@ -288,7 +289,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
|
<div bindonce id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
|
||||||
<div id="nicklist" ng-show="showNicklist" ng-swipe-right="closeNick()" 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">
|
<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)">
|
<li ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openBuffer(nick.name)">
|
||||||
|
@ -333,7 +334,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
|
||||||
<div class="push"></div>
|
<div class="push"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer" ng-show="connected">
|
<div id="footer" ng-show="connected">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist}">
|
<div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
|
||||||
<div input-bar></div>
|
<div input-bar></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch']);
|
var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatModels', 'plugins', 'ngSanitize', 'ngWebsockets', 'pasvaz.bindonce', 'ngTouch', 'ngAnimate']);
|
||||||
|
|
||||||
weechat.filter('toArray', function () {
|
weechat.filter('toArray', function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -581,6 +581,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$scope.showSidebar = true;
|
||||||
|
|
||||||
$scope.buffers = models.model.buffers;
|
$scope.buffers = models.model.buffers;
|
||||||
$scope.activeBuffer = models.getActiveBuffer;
|
$scope.activeBuffer = models.getActiveBuffer;
|
||||||
|
|
||||||
|
@ -626,9 +628,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
||||||
|
|
||||||
// Open and close panels while on mobile devices through swiping
|
// Open and close panels while on mobile devices through swiping
|
||||||
$scope.swipeSidebar = function() {
|
$scope.swipeSidebar = function() {
|
||||||
if (document.body.clientWidth < mobile_cutoff) {
|
$scope.showSidebar = !$scope.showSidebar;
|
||||||
$('#sidebar').collapse('toggle');
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.openNick = function() {
|
$scope.openNick = function() {
|
||||||
|
@ -662,7 +662,7 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
|
||||||
// If we are on mobile we need to collapse the menu on sidebar clicks
|
// 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
|
// We use 968 px as the cutoff, which should match the value in glowingbear.css
|
||||||
if (document.body.clientWidth < mobile_cutoff) {
|
if (document.body.clientWidth < mobile_cutoff) {
|
||||||
$('#sidebar').collapse('toggle');
|
$scope.showSidebar = false;
|
||||||
}
|
}
|
||||||
return models.setActiveBuffer(bufferId, key);
|
return models.setActiveBuffer(bufferId, key);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue