Display connection spinner before get first contact status

This commit is contained in:
Nick Denry 2019-04-27 05:27:11 +03:00
parent 87b71164ee
commit 68b5ad7dcf
4 changed files with 64 additions and 10 deletions

41
css/spinner.css Normal file
View File

@ -0,0 +1,41 @@
.spinner {
margin: 0px auto 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
background-color: #999999;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.64s;
animation-delay: -0.64s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

View File

@ -5,6 +5,7 @@
<title>Chimeverse</title>
<link rel="stylesheet" type="text/css" media="screen" href="node_modules/converse.js/css/converse.css">
<link rel="stylesheet" type="text/css" href="node_modules/uikit/dist/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="css/spinner.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body ng-app="app">
@ -56,11 +57,14 @@
<div class="uk-text-center">
<img src="images/logo.png" srcset="images/logo@2x.png 2x" alt="" />
<h3 class="uk-heading-small uk-text-muted uk-margin-remove">Chimeverse</h3>
<div class="uk-text-small uk-text-muted">0.0.14</div>
<!--
TODO: Add next
<span ng-hide="showSpinner" class="uk-margin-small-right" uk-spinner="ratio: 2"></span>
-->
<div ng-show="connectSpinner">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div ng-show="!connectSpinner" class="uk-text-small uk-text-muted">0.0.16</div>
</div>
</div>
</div>

View File

@ -1,6 +1,6 @@
{
"name": "Chimeverse",
"version": "0.0.14",
"version": "0.0.16",
"description": "Jabber/XMPP client based on Converse.js and Electron",
"main": "main.js",
"scripts": {

View File

@ -88,7 +88,7 @@ angApp.factory('SystemService', () => {
})
angApp.factory('ChimeVerseService', (SettingsServise, SystemService) => {
angApp.factory('ChimeVerseService', ($rootScope, SettingsServise, SystemService) => {
let chimeverseService = {}
@ -114,6 +114,9 @@ angApp.factory('ChimeVerseService', (SettingsServise, SystemService) => {
_converse.api.waitUntil('rosterContactsFetched'),
_converse.api.waitUntil('chatBoxesFetched')
]).then(() => {
_converse.once('contactPresenceChanged', (data) => {
$rootScope.$broadcast('ChimeVerseService:connected')
})
_converse.api.listen.on('logout', () => {
let credentials = SettingsServise.getCredentials()
credentials.then((result) => {
@ -146,7 +149,7 @@ angApp.factory('ChimeVerseService', (SettingsServise, SystemService) => {
whitelisted_plugins: ['chimeVerse'],
i18n: lang,
priority: 50,
//debug: true,
// debug: true,
auto_reconnect: true
})
}
@ -156,11 +159,17 @@ angApp.factory('ChimeVerseService', (SettingsServise, SystemService) => {
})
angApp.controller('AppController', function ($scope, ChimeVerseService) {
angApp.controller('AppController', function ($scope, $rootScope, ChimeVerseService) {
$scope.showLoginForm = false
$scope.connectSpinner = true
$scope.addAccountAction = function() {
$rootScope.$on('ChimeVerseService:connected', function () {
$scope.connectSpinner = false
$scope.$apply()
})
$scope.addAccountAction = () => {
ChimeVerseService.settings.addCredentials($scope.bosh, $scope.login, $scope.password)
$scope.showLoginForm = false
ChimeVerseService.initConverse($scope.bosh, $scope.login, $scope.password)