Animate sidebar with CSS transitions

This commit is contained in:
Lorenz Hübschle-Schneider 2014-07-08 09:51:17 +01:00
parent 638aeb6697
commit 8816fe221e
3 changed files with 50 additions and 21 deletions

View file

@ -171,10 +171,14 @@ input[type=text], input[type=password], #sendMessage, .badge {
padding-top: 35px; /* topbar */ padding-top: 35px; /* topbar */
padding-bottom: 1px; /* need to force a padding here */ padding-bottom: 1px; /* need to force a padding here */
font-size: smaller; font-size: smaller;
-webkit-transition:0.35s ease all; transition:0.2s ease-in-out;
transition:0.35s ease all;
z-index: 2; z-index: 2;
} }
#sidebar[data-state=visible] {
left: 0px;
}
#sidebar form { #sidebar form {
} }
#sidebar.ng-hide-add, #sidebar.ng-hide-remove { #sidebar.ng-hide-add, #sidebar.ng-hide-remove {
@ -274,7 +278,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
.withnicklist { .withnicklist {
margin-right: 100px !important; /* nicklist */ margin-right: 100px !important; /* nicklist */
} }
.withsidebar { .content[sidebar-state=visible] #bufferlines {
margin-left: 145px; /* sidebar */ margin-left: 145px; /* sidebar */
} }
#bufferlines .btn { #bufferlines .btn {
@ -290,7 +294,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
transition:0.35s ease all; transition:0.35s ease all;
z-index: 1; z-index: 1;
} }
.footer.withsidebar { .content[sidebar-state=visible] .footer {
margin-left: 0; margin-left: 0;
padding-left: 145px; padding-left: 145px;
} }
@ -403,8 +407,6 @@ h2 span, h2 small {
#sidebar { #sidebar {
font-size: normal; font-size: normal;
bottom: 0px; bottom: 0px;
width: auto;
max-width: 60%;
top: 0px; top: 0px;
padding-bottom: 35px; padding-bottom: 35px;
} }
@ -415,6 +417,18 @@ h2 span, h2 small {
bottom: 0px; bottom: 0px;
} }
#sidebar[data-state=visible] {
width: 200px;
}
#sidebar[data-state=hidden] {
left: -200px;
}
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
margin-left: 0px;
}
#topbar .title { #topbar .title {
left: 40px; left: 40px;
} }

View file

@ -187,10 +187,10 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div> </div>
</div> </div>
</div> </div>
<div class="content" ng-show="connected"> <div class="content" id="content" sidebar-state="visible" ng-show="connected">
<div id="topbar"> <div id="topbar">
<div class="brand"> <div class="brand">
<a href="#" ng-click="swipeSidebar()"> <a href="#" ng-click="toggleSidebar()">
<img alt="brand" src="assets/img/favicon.png" title="Connected to {{ host }}:{{ port}}"> <img alt="brand" src="assets/img/favicon.png" title="Connected to {{ host }}:{{ port}}">
</a> </a>
<button ng-if="debugMode" ng-click="countWatchers()">Count<br />Watchers</button> <button ng-if="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
@ -207,7 +207,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-show="showSidebar" ng-swipe-left="swipeSidebar()" class="vertical-line"> <div bindonce id="sidebar" data-state="visible" ng-swipe-left="hideSidebar()" 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">
@ -222,7 +222,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-swipe-right="swipeSidebar()" ng-swipe-left="swipeSidebar()" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}"> <div bindonce id="bufferlines" class="monospace" ng-swipe-right="showSidebar()" ng-swipe-left="hideSidebar()" ng-class="{'withnicklist': showNicklist}">
<div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left"> <div id="nicklist" ng-if="showNicklist" ng-swipe-right="closeNick()" class="vertical-line-left">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist"> <ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
<li ng-repeat="nick in group.nicks|orderBy:'name'"> <li ng-repeat="nick in group.nicks|orderBy:'name'">
@ -260,7 +260,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="footer" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}"> <div class="footer" ng-class="{'withnicklist': showNicklist}">
<div input-bar input-id="sendMessage"></div> <div input-bar input-id="sendMessage"></div>
</div> </div>
</div> </div>

View file

@ -808,8 +808,6 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
}); });
$scope.connectbutton = 'Connect'; $scope.connectbutton = 'Connect';
$scope.showSidebar = true;
$scope.getBuffers = models.getBuffers.bind(models); $scope.getBuffers = models.getBuffers.bind(models);
$scope.bufferlines = {}; $scope.bufferlines = {};
@ -874,13 +872,32 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
// Save setting for displaying embeds in rootScope so it can be used from service // Save setting for displaying embeds in rootScope so it can be used from service
$rootScope.visible = $scope.noembed === false; $rootScope.visible = $scope.noembed === false;
// Open and close panels while on mobile devices through swiping $scope.isSidebarVisible = function() {
$scope.swipeSidebar = function() { return document.getElementById('sidebar').getAttribute('sidebar-state') === 'visible';
};
$scope.showSidebar = function() {
document.getElementById('sidebar').setAttribute('data-state', 'visible');
document.getElementById('content').setAttribute('sidebar-state', 'visible');
};
$scope.hideSidebar = function() {
document.getElementById('sidebar').setAttribute('data-state', 'hidden');
document.getElementById('content').setAttribute('sidebar-state', 'hidden');
};
// toggle sidebar (if on mobile)
$scope.toggleSidebar = function() {
if ($rootScope.isMobileUi()) { if ($rootScope.isMobileUi()) {
$scope.showSidebar = !$scope.showSidebar; if ($scope.isSidebarVisible()) {
$scope.hideSidebar();
} else {
$scope.showSidebar();
}
} }
}; };
// Open and close panels while on mobile devices through swiping
$scope.openNick = function() { $scope.openNick = function() {
if ($rootScope.isMobileUi()) { if ($rootScope.isMobileUi()) {
if ($scope.nonicklist) { if ($scope.nonicklist) {
@ -931,7 +948,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 ($rootScope.isMobileUi()) { if ($rootScope.isMobileUi()) {
$scope.showSidebar = false; $scope.hideSidebar();
} }
return models.setActiveBuffer(bufferId, key); return models.setActiveBuffer(bufferId, key);
}; };
@ -971,10 +988,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
if ($rootScope.connected) { if ($rootScope.connected) {
// Show the sidebar if switching away from mobile view, hide it when switching to mobile // Show the sidebar if switching away from mobile view, hide it when switching to mobile
// Wrap in a condition so we save ourselves the $apply if nothing changes (50ms or more) // Wrap in a condition so we save ourselves the $apply if nothing changes (50ms or more)
if ($scope.wasMobileUi !== $scope.isMobileUi() && if ($scope.wasMobileUi && !$scope.isMobileUi()) {
$scope.showSidebar === $scope.isMobileUi()) { $scope.showSidebar();
$scope.showSidebar = !$scope.showSidebar;
$scope.$apply();
} }
$scope.wasMobileUi = $scope.isMobileUi(); $scope.wasMobileUi = $scope.isMobileUi();
$scope.calculateNumLines(); $scope.calculateNumLines();