Browse Source

Empty history styles improved

master
Igor Zhukov 11 years ago
parent
commit
6ad025b408
  1. 5
      app/css/app.css
  2. 7
      app/js/controllers.js
  3. 13
      app/js/directives.js
  4. 15
      app/partials/im.html

5
app/css/app.css

@ -1630,8 +1630,9 @@ span.emoji {
.im_history_empty { .im_history_empty {
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 1.5em; font-size: 18px;
padding: 0 50px; line-height: 18px;
padding: 1px 50px;
} }
.im_history_to_bottom .im_history_not_selected, .im_history_to_bottom .im_history_not_selected,
.im_history_to_bottom .im_history_empty { .im_history_to_bottom .im_history_empty {

7
app/js/controllers.js

@ -431,6 +431,7 @@ angular.module('myApp.controllers', [])
var peerData = AppPeersManager.getPeer(peerID); var peerData = AppPeersManager.getPeer(peerID);
// console.log('update', preload, peerData); // console.log('update', preload, peerData);
if (!peerData || peerData.deleted) { if (!peerData || peerData.deleted) {
safeReplaceObject($scope.state, {loaded: false});
return false; return false;
} }
@ -523,10 +524,8 @@ angular.module('myApp.controllers', [])
: AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID);
safeReplaceObject($scope.state, {loaded: false}); $scope.state.mayBeHasMore = true;
getMessagesPromise.then(function (historyResult) { getMessagesPromise.then(function (historyResult) {
safeReplaceObject($scope.state, {loaded: true});
if (curJump != jump) return; if (curJump != jump) return;
offset += historyResult.history.length; offset += historyResult.history.length;
@ -535,6 +534,8 @@ angular.module('myApp.controllers', [])
maxID = historyResult.history[historyResult.history.length - 1]; maxID = historyResult.history[historyResult.history.length - 1];
updateHistoryPeer(); updateHistoryPeer();
safeReplaceObject($scope.state, {loaded: true});
angular.forEach(historyResult.history, function (id) { angular.forEach(historyResult.history, function (id) {
$scope.history.push(AppMessagesManager.wrapForHistory(id)); $scope.history.push(AppMessagesManager.wrapForHistory(id));
}); });

13
app/js/directives.js

@ -298,6 +298,9 @@ angular.module('myApp.directives', ['myApp.filters'])
}); });
$scope.$on('ui_editor_resize', updateSizes); $scope.$on('ui_editor_resize', updateSizes);
$scope.$on('ui_height', function () {
updateSizes();
});
var atBottom = true; var atBottom = true;
$(scrollableWrap).on('scroll', function (e) { $(scrollableWrap).on('scroll', function (e) {
@ -1016,6 +1019,8 @@ angular.module('myApp.directives', ['myApp.filters'])
function link($scope, element, attrs) { function link($scope, element, attrs) {
var prevMargin = false;
var updateMargin = function () { var updateMargin = function () {
var height = element[0].offsetHeight, var height = element[0].offsetHeight,
contHeight = $($window).height(), contHeight = $($window).height(),
@ -1023,6 +1028,12 @@ angular.module('myApp.directives', ['myApp.filters'])
margin = height < contHeight ? parseInt((contHeight - height) * ratio) : ''; margin = height < contHeight ? parseInt((contHeight - height) * ratio) : '';
element.css({marginTop: margin, marginBottom: margin}); element.css({marginTop: margin, marginBottom: margin});
if (prevMargin !== margin) {
$scope.$emit('ui_height');
}
prevMargin = margin;
}; };
onContentLoaded(updateMargin); onContentLoaded(updateMargin);
@ -1033,6 +1044,8 @@ angular.module('myApp.directives', ['myApp.filters'])
onContentLoaded(updateMargin); onContentLoaded(updateMargin);
}); });
}; };
}) })

15
app/partials/im.html

@ -59,10 +59,10 @@
</div> </div>
<div class="im_history_col_wrap" ng-controller="AppImHistoryController"> <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
<div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.3"> <div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.35">
Please select a chat to start messaging Please select a chat to start messaging
</div> </div>
<div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.3"> <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35">
Loading history<span my-loading-dots></span> Loading history<span my-loading-dots></span>
</div> </div>
@ -122,11 +122,16 @@
<div class="im_history_scrollable_wrap content"> <div class="im_history_scrollable_wrap content">
<div class="im_history_scrollable"> <div class="im_history_scrollable">
<div class="im_history" ng-class="{im_history_selectable: selectActions}"> <div class="im_history" ng-class="{im_history_selectable: selectActions}">
<div class="im_history_empty" ng-show="!history.length" my-vertical-position="0.3"> <div ng-if="!history.length" class="im_history_empty" ng-switch="state.mayBeHasMore">
No messages here yet... <div my-vertical-position="0.25" ng-switch-when="true">
Loading history<span my-loading-dots></span>
</div>
<div my-vertical-position="0.25" ng-switch-default>
No messages here yet...
</div>
</div> </div>
<div class="im_history_messages"> <div class="im_history_messages">
<div class="im_history_message_wrap" my-message bindonce ng-repeat="historyMessage in history"></div> <div class="im_history_message_wrap" my-message bindonce ng-repeat="historyMessage in history"></div>
</div> </div>

Loading…
Cancel
Save