tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Animate sidebar with CSS transitions

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

26
css/glowingbear.css
View file

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

10
index.html
View file

@ -187,10 +187,10 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
</div>
</div>
<div class="content" ng-show="connected">
<div class="content" id="content" sidebar-state="visible" ng-show="connected">
<div id="topbar">
<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}}">
</a>
<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>
</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')}">
<li class="bufferfilter">
<form role="form">
@ -222,7 +222,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</li>
</ul>
</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">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in nicklist">
<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>
</table>
</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>
</div>

35
js/glowingbear.js
View file

@ -808,8 +808,6 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
});
$scope.connectbutton = 'Connect';
$scope.showSidebar = true;
$scope.getBuffers = models.getBuffers.bind(models);
$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
$rootScope.visible = $scope.noembed === false;
// Open and close panels while on mobile devices through swiping
$scope.swipeSidebar = function() {
$scope.isSidebarVisible = 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()) {
$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() {
if ($rootScope.isMobileUi()) {
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
// We use 968 px as the cutoff, which should match the value in glowingbear.css
if ($rootScope.isMobileUi()) {
$scope.showSidebar = false;
$scope.hideSidebar();
}
return models.setActiveBuffer(bufferId, key);
};
@ -971,10 +988,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
if ($rootScope.connected) {
// 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)
if ($scope.wasMobileUi !== $scope.isMobileUi() &&
$scope.showSidebar === $scope.isMobileUi()) {
$scope.showSidebar = !$scope.showSidebar;
$scope.$apply();
if ($scope.wasMobileUi && !$scope.isMobileUi()) {
$scope.showSidebar();
}
$scope.wasMobileUi = $scope.isMobileUi();
$scope.calculateNumLines();