Animate sidebar with CSS transitions
This commit is contained in:
Lorenz Hübschle-Schneider
parent
638aeb6697
commit
8816fe221e
|
|
@ -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
10
index.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue