flywithu/ocsms
1
0
Fork 0
mirror of https://github.com/nerzhul/ocsms.git synced 2025-06-07 07:56:23 +00:00
Code Issues Releases Wiki Activity

Implement conversation CSS loader when loading contact conversation (not on refresh)

Browse Source
This commit is contained in:
Loic Blot 2016-09-22 22:44:13 +02:00
parent a05db79889
commit 4a8562642b
3 changed files with 71 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
css/style.css
View File

@ -213,3 +213,63 @@
label {
font-weight: bold;
}
.loader,
.loader:before,
.loader:after {
background: #646464;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
color: #646464;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}

8
js/public/app.js
View File

@ -85,6 +85,7 @@ app.filter('firstCharacter', function() {
app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile',
function ($scope, $interval, $timeout, $compile) {
$scope.isLoading = true;
$scope.buttons = [
{text: "Send"}
];
@ -139,12 +140,16 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
changeSelectedConversation($("a[mailbox-navigation='" + contact.nav + "']"));
}
};
$scope.fetchConversation = function (contact) {
// If contact is not null, we will fetch a conversation for a new contact
if (contact != null) {
$scope.selectedContact = contact;
$scope.isLoading = true;
}
$scope.messages = [];
$.getJSON(OC.generateUrl('/apps/ocsms/get/conversation'), {'phoneNumber': $scope.selectedContact.nav},
function(jsondata, status) {
var phoneNumberLabel = $scope.selectedContact.nav;
@ -157,7 +162,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
// Reinit messages before showing conversation
$scope.formatConversation(jsondata);
$scope.$apply(function () {
$scope.$apply(function() {
if (typeof jsondata['contactName'] == 'undefined' || jsondata['contactName'] == '') {
$scope.selectedContact.label = phoneNumberLabel;
$scope.selectedContact.opt_numbers = "";
@ -168,6 +173,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
}
$scope.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0;
$scope.isLoading = false;
});
$('#app-content').scrollTop(1E10);

6
templates/main.php
View File

@ -56,7 +56,9 @@ use \OCA\OcSms\Lib\CountryCodes;
</div>
<div id="app-content">
<div id="app-content-header" ng-show="selectedContact.label !== undefined && selectedContact.label !== ''"
<div id="app-content-loader" class="loader" ng-show="isLoading">
</div>
<div id="app-content-header" ng-show="!isLoading && selectedContact.label !== undefined && selectedContact.label !== ''"
ng-style="{'background-color': (selectedContact.label | peerColor)}">
<div id="ocsms-contact-avatar">
<img class="ocsms-plavatar-big" ng-src="{{ selectedContact.avatar }}"
@ -72,7 +74,7 @@ use \OCA\OcSms\Lib\CountryCodes;
</div>
</div>
<div id="app-content-wrapper">
<div id="app-content-wrapper" ng-show="!isLoading">
<div ng-show="messages.length == 0" id="ocsms-empty-conversation">Please choose a conversation on the left menu</div>
<div ng-repeat="message in messages | orderBy:'date'">
<div class="msg-{{ message.type }}">