r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved I'm performance, added vertical position directive, removed modal animation

Browse Source
This commit is contained in:
Igor Zhukov 2014-03-25 15:36:17 +04:00
parent 645c1d5cbf
commit 3273329a3d
4 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/css/app.css
View File

@ -307,7 +307,8 @@ input[type="number"]::-webkit-inner-spin-button {
-o-transition: none; -o-transition: none;
transition: none; transition: none;
} }
.modal.fade { .modal.fade,
.modal-backdrop.fade {
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
-o-transition: none; -o-transition: none;
@ -862,14 +863,6 @@ a.im_dialog:hover .im_dialog_date {
-webkit-user-select: text; -webkit-user-select: text;
} }
.im_history_empty {
padding: 100px 50px 0;
text-align: center;
color: #999;
font-size: 1.5em;
}
.im_history_to_bottom .im_history_scrollable { .im_history_to_bottom .im_history_scrollable {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -1413,11 +1406,12 @@ span.emoji {
background-image: url('../img/emojisprite_4.png'); background-image: url('../img/emojisprite_4.png');
} }
.im_history_not_selected { .im_history_not_selected,
.im_history_empty {
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 1.5em; font-size: 1.5em;
padding: 200px 50px 200px; padding: 0 50px;
} }
.im_send_panel_wrap { .im_send_panel_wrap {
@ -2621,21 +2615,21 @@ cd4073 pink
ce671b orange ce671b orange
*/ */
.user_color_1, .user_color_1,
.user_color_1:hover {color: #c03d33;} .user_color_1:hover {color: #b3577a;}
.user_color_2, .user_color_2,
.user_color_2:hover {color: #4fad2d;} .user_color_2:hover {color: #539e4f;}
.user_color_3, .user_color_3,
.user_color_3:hover {color: #d09306;} .user_color_3:hover {color: #ae9661;}
.user_color_4, .user_color_4,
.user_color_4:hover {color: #348cd4;} .user_color_4:hover {color: #4979a3;}
.user_color_5, .user_color_5,
.user_color_5:hover {color: #8544d6;} .user_color_5:hover {color: #8365ab;}
.user_color_6, .user_color_6,
.user_color_6:hover {color: #cd4073;} .user_color_6:hover {color: #b7635d;}
.user_color_7, .user_color_7,
.user_color_7:hover {color: #2996ad;} .user_color_7:hover {color: #5397b4;}
.user_color_8, .user_color_8,
.user_color_8:hover {color: #ce671b;} .user_color_8:hover {color: #c07844;}
.im_dialogs_contacts_wrap h5 { .im_dialogs_contacts_wrap h5 {

15
app/js/controllers.js
View File

@ -365,7 +365,6 @@ angular.module('myApp.controllers', [])
StatusManager.start(); StatusManager.start();
$scope.history = []; $scope.history = [];
$scope.historyEmpty = false;
$scope.mediaType = false; $scope.mediaType = false;
$scope.selectedMsgs = {}; $scope.selectedMsgs = {};
$scope.selectedCount = 0; $scope.selectedCount = 0;
@ -445,12 +444,15 @@ angular.module('myApp.controllers', [])
} }
// console.trace('load history'); // console.trace('load history');
var inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]}, var curJump = jump,
inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]},
getMessagesPromise = inputMediaFilter getMessagesPromise = inputMediaFilter
? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID)
: AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID);
getMessagesPromise.then(function (historyResult) { getMessagesPromise.then(function (historyResult) {
if (curJump != jump) return;
offset += historyResult.history.length; offset += historyResult.history.length;
hasMore = historyResult.count === null || offset < historyResult.count; hasMore = historyResult.count === null || offset < historyResult.count;
maxID = historyResult.history[historyResult.history.length - 1]; maxID = historyResult.history[historyResult.history.length - 1];
@ -460,8 +462,6 @@ angular.module('myApp.controllers', [])
}); });
$scope.$broadcast('ui_history_prepend'); $scope.$broadcast('ui_history_prepend');
}, function () {
safeReplaceObject($scope.state, {error: true});
}); });
} }
@ -476,13 +476,14 @@ angular.module('myApp.controllers', [])
? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID)
: AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID);
$scope.historyEmpty = false;
safeReplaceObject($scope.state, {loaded: false});
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;
$scope.historyEmpty = !historyResult.count;
hasMore = historyResult.count === null || offset < historyResult.count; hasMore = historyResult.count === null || offset < historyResult.count;
maxID = historyResult.history[historyResult.history.length - 1]; maxID = historyResult.history[historyResult.history.length - 1];
@ -502,8 +503,6 @@ angular.module('myApp.controllers', [])
$scope.historyUnread = {}; $scope.historyUnread = {};
} }
safeReplaceObject($scope.state, {loaded: true});
$scope.$broadcast('ui_history_change'); $scope.$broadcast('ui_history_change');
AppMessagesManager.readHistory($scope.curDialog.inputPeer); AppMessagesManager.readHistory($scope.curDialog.inputPeer);

37
app/js/directives.js
View File

@ -353,7 +353,7 @@ angular.module('myApp.directives', ['myApp.filters'])
function updateBottomizer () { function updateBottomizer () {
$(historyMessagesEl).css({marginTop: 0}); $(historyMessagesEl).css({marginTop: 0});
if (historyMessagesEl.offsetHeight <= scrollableWrap.offsetHeight) { if (historyMessagesEl.offsetHeight > 0 && historyMessagesEl.offsetHeight <= scrollableWrap.offsetHeight) {
$(historyMessagesEl).css({marginTop: (scrollableWrap.offsetHeight - historyMessagesEl.offsetHeight - 20 - 44) + 'px'}); $(historyMessagesEl).css({marginTop: (scrollableWrap.offsetHeight - historyMessagesEl.offsetHeight - 20 - 44) + 'px'});
} }
$(historyWrap).nanoScroller(); $(historyWrap).nanoScroller();
@ -984,4 +984,37 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
}); })
.directive('myVerticalPosition', function ($window, $timeout) {
return {
link: link
};
function link($scope, element, attrs) {
var updateMargin = function () {
var height = element[0].offsetHeight,
contHeight = $($window).height(),
ratio = attrs.myVerticalPosition && parseFloat(attrs.myVerticalPosition) || 0.5;
if (height < contHeight) {
element.css('marginTop', parseInt((contHeight - height) * ratio));
} else {
element.css('marginTop', '');
}
};
onContentLoaded(updateMargin);
$($window).on('resize', updateMargin);
$scope.$on('ui_height', function () {
onContentLoaded(updateMargin);
});
};
})

71
app/partials/im.html
View File

@ -59,10 +59,14 @@
</div> </div>
<div class="im_history_col_wrap" ng-controller="AppImHistoryController"> <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
<div ng-if="state.notSelected" class="im_history_not_selected">No history to display</div> <div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.3">
<div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected">Loading history<span my-typing-dots></span></div> Please select a chat to start messaging
</div>
<div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.3">
Loading history <span my-typing-dots></span>
</div>
<div ng-if="state.loaded"> <div ng-show="state.loaded">
<div my-history class="im_history_col"> <div my-history class="im_history_col">
<div class="im_history_panel_wrap"> <div class="im_history_panel_wrap">
@ -76,29 +80,23 @@
<div class="dropdown im_history_panel_media_dropdown pull-right"> <div class="dropdown im_history_panel_media_dropdown pull-right">
<a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a> <a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li><a ng-click="toggleMedia('photos')">Photos</a></li>
<a ng-click="toggleMedia('photos')">Photos</a> <li><a ng-click="toggleMedia('video')">Videos</a></li>
</li> <li><a ng-click="toggleMedia('documents')">Documents</a></li>
<li>
<a ng-click="toggleMedia('video')">Videos</a>
</li>
<li>
<a ng-click="toggleMedia('documents')">Documents</a>
</li>
</ul> </ul>
</div> </div>
<a ng-if="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()"> <a ng-show="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
Show all messages Show all messages
<strong class="im_history_panel_return_count" ng-show="missedCount > 0">+{{missedCount}}</strong> <strong class="im_history_panel_return_count" ng-show="missedCount > 0">+{{missedCount}}</strong>
</a> </a>
<h4 ng-if="mediaType !== false" ng-switch="mediaType"> <h4 ng-show="mediaType !== false" ng-switch="mediaType">
<span ng-switch-when="photos"> Photos </span> <span ng-switch-when="photos">Photos</span>
<span ng-switch-when="video"> Videos </span> <span ng-switch-when="video">Videos</span>
<span ng-switch-when="documents"> Documents </span> <span ng-switch-when="documents">Documents</span>
</h4> </h4>
<h4 ng-if="mediaType === false &amp;&amp; historyPeer.id < 0" ng-click="showPeerInfo()"> <h4 ng-show="mediaType === false &amp;&amp; historyPeer.id < 0" ng-click="showPeerInfo()">
<span ng-bind-html="historyPeer.data.rTitle"></span> <span ng-bind-html="historyPeer.data.rTitle"></span>
<small class="im_chat_users"> <small class="im_chat_users">
<ng-pluralize count="historyPeer.data.participants_count" <ng-pluralize count="historyPeer.data.participants_count"
@ -107,7 +105,7 @@
</small> </small>
</h4> </h4>
<h4 ng-if="mediaType === false &amp;&amp; historyPeer.id > 0" ng-click="showPeerInfo()"> <h4 ng-show="mediaType === false &amp;&amp; historyPeer.id > 0" ng-click="showPeerInfo()">
<span ng-bind-html="historyPeer.data.rFullName"></span> <span ng-bind-html="historyPeer.data.rFullName"></span>
<small class="im_peer_online">{{historyPeer.data | userStatus}}</small> <small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
</h4> </h4>
@ -125,7 +123,9 @@
<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="historyEmpty &amp;&amp; !history.length">No messages to display</div> <div class="im_history_empty" ng-show="!history.length" my-vertical-position="0.3">
No messages here yet...
</div>
<div class="im_history_messages"> <div class="im_history_messages">
<div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div> <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
</div> </div>
@ -189,24 +189,21 @@
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
<textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea> <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field"></textarea>
<div class="" style="position: relative;"> <div class="im_media_attach pull-right">
<div class="im_media_attach pull-right"> <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/>
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/> <i class="icon icon-camera"></i>
<i class="icon icon-camera"></i>
</div>
<div class="im_attach pull-right">
<input type="file" class="im_attach_input" size="28" multiple="true" title="Send file" />
<i class="icon icon-paperclip"></i>
</div>
<div class="im_emoji_btn pull-right">
<i class="icon icon-emoji"></i>
</div>
<button type="submit" class="btn btn-success im_submit">Send</button>
</div> </div>
<div class="im_attach pull-right">
<input type="file" class="im_attach_input" size="28" multiple="true" title="Send file" />
<i class="icon icon-paperclip"></i>
</div>
<div class="im_emoji_btn pull-right">
<i class="icon icon-emoji"></i>
</div>
<button type="submit" class="btn btn-success im_submit">Send</button>
</form> </form>
</div> </div>