Display connection spinner before get first contact status
This commit is contained in:
parent
87b71164ee
commit
68b5ad7dcf
|
@ -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);
|
||||
}
|
||||
}
|
14
index.html
14
index.html
|
@ -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>
|
||||
|
|
|
@ -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": {
|
||||
|
|
17
renderer.js
17
renderer.js
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue