Merge pull request #702 from glowing-bear/spinner

Use spinner for certain operations
This commit is contained in:
Lorenz Hübschle-Schneider 2015-12-15 15:09:25 +01:00
commit 0390d414f3
3 changed files with 36 additions and 6 deletions

View file

@ -638,6 +638,31 @@ img.emojione {
width: auto; width: auto;
} }
.glyphicon-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@media (min-width: 1400px) { @media (min-width: 1400px) {
#sidebar[data-state=visible], #sidebar { #sidebar[data-state=visible], #sidebar {
width: 200px; width: 200px;

View file

@ -112,7 +112,7 @@
</label> </label>
</div> </div>
</div> </div>
<button class="btn btn-lg btn-primary" ng-click="connect()">{{ connectbutton }} <i class="glyphicon glyphicon-chevron-right"></i></button> <button class="btn btn-lg btn-primary" ng-click="connect()">{{ connectbutton }} <i ng-class="connectbuttonicon" class="glyphicon"></i></button>
</form> </form>
</div> </div>
</div> </div>
@ -276,8 +276,8 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
<tbody> <tbody>
<tr class="bufferline"> <tr class="bufferline">
<td ng-hide="activeBuffer().allLinesFetched" colspan="3"> <td ng-hide="activeBuffer().allLinesFetched" colspan="3">
<a class="fetchmorelines" ng-click="fetchMoreLines()" ng-hide="loadingLines" href="#">Fetch more lines</a> <a class="fetchmorelines btn btn-xs btn-primary" ng-click="fetchMoreLines()" ng-hide="loadingLines" href="#">Fetch more lines</a>
<span ng-show="loadingLines">Fetching more lines...</span> <span ng-show="loadingLines">Fetching more lines <i class="glyphicon glyphicon-refresh glyphicon-spin"></i></span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -310,7 +310,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
<div id="reconnect" class="alert alert-danger" ng-click="reconnect()" ng-show="reconnecting"> <div id="reconnect" class="alert alert-danger" ng-click="reconnect()" ng-show="reconnecting">
<p><strong>Connection to WeeChat lost</strong></p> <p><strong>Connection to WeeChat lost</strong></p>
<i class="glyphicon glyphicon-refresh"></i> <i class="glyphicon glyphicon-refresh"></i>
Reconnecting... <a class="btn btn-tiny" ng-click="reconnect()" href="#">Click to try to reconnect now</a> Reconnecting... <i class="glyphicon glyphicon-spin glyphicon-refresh"></i> <a class="btn btn-xs" ng-click="reconnect()" href="#">Click to try to reconnect now</a>
</div> </div>
<div id="settingsModal" class="gb-modal" data-state="hidden"> <div id="settingsModal" class="gb-modal" data-state="hidden">
<div class="backdrop" ng-click="closeModal($event)"></div> <div class="backdrop" ng-click="closeModal($event)"></div>

View file

@ -264,8 +264,10 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
models.reinitialize(); models.reinitialize();
$rootScope.$emit('notificationChanged'); $rootScope.$emit('notificationChanged');
$scope.connectbutton = 'Connect'; $scope.connectbutton = 'Connect';
$scope.connectbuttonicon = 'glyphicon-chevron-right';
}); });
$scope.connectbutton = 'Connect'; $scope.connectbutton = 'Connect';
$scope.connectbuttonicon = 'glyphicon-chevron-right';
$scope.getBuffers = models.getBuffers.bind(models); $scope.getBuffers = models.getBuffers.bind(models);
@ -582,11 +584,13 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$rootScope.securityError = false; $rootScope.securityError = false;
$rootScope.errorMessage = false; $rootScope.errorMessage = false;
$rootScope.bufferBottom = true; $rootScope.bufferBottom = true;
$scope.connectbutton = 'Connecting ...'; $scope.connectbutton = 'Connecting';
$scope.connectbuttonicon = 'glyphicon-refresh glyphicon-spin';
connection.connect(settings.host, settings.port, $scope.password, settings.ssl); connection.connect(settings.host, settings.port, $scope.password, settings.ssl);
}; };
$scope.disconnect = function() { $scope.disconnect = function() {
$scope.connectbutton = 'Connect'; $scope.connectbutton = 'Connect';
$scope.connectbuttonicon = 'glyphicon-chevron-right';
connection.disconnect(); connection.disconnect();
}; };
$scope.reconnect = function() { $scope.reconnect = function() {
@ -788,7 +792,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$rootScope.securityError = false; $rootScope.securityError = false;
$rootScope.errorMessage = false; $rootScope.errorMessage = false;
$rootScope.bufferBottom = true; $rootScope.bufferBottom = true;
$scope.connectbutton = 'Connecting ...'; $scope.connectbutton = 'Connecting';
$scope.connectbuttonicon = 'glyphicon-chevron-right';
connection.connect(host, port, password, ssl); connection.connect(host, port, password, ssl);
} }
}; };