Use ngAnimate to animate sidebar hiding/showing

This commit is contained in:
Tor Hveem 2014-02-21 09:32:52 +01:00
parent f10e44efe4
commit 46b503e1b4
3 changed files with 33 additions and 7 deletions

View file

@ -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;
@ -249,6 +261,8 @@ input[type=text], input[type=password], .badge {
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 */
@ -259,6 +273,8 @@ input[type=text], input[type=password], .badge {
.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 +327,6 @@ table.notimestamp td.time {
display: none; display: none;
} }
/* */ /* */
/* Mobile layout */ /* Mobile layout */
/* */ /* */

View file

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

View file

@ -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,8 +628,16 @@ 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'); // remove or add margin if big screen
if (document.body.clientWidth > mobile_cutoff) {
if($scope.showSidebar) {
$('#bufferlines').css('margin-left','145px');
$('.navbar-fixed-bottom').css('margin-left','145px');
}else{
$('#bufferlines').css('margin-left','0');
$('.navbar-fixed-bottom').css('margin-left','0');
}
} }
}; };
@ -662,7 +672,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);
}; };