Misterzym
/
webogram
mirror of https://github.com/misterzym/webogram.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

TitanNano-voice_recorder
Igor Zhukov 11 years ago
parent
645c1d5cbf
commit
3273329a3d
4 changed files with 87 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      app/css/app.css
  2. 15
      app/js/controllers.js
  3. 35
      app/js/directives.js
  4. 37
      app/partials/im.html

32
app/css/app.css
Unescape View File

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

15
app/js/controllers.js
Unescape View File

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

35
app/js/directives.js
Unescape View File

@ -353,7 +353,7 @@ angular.module('myApp.directives', ['myApp.filters'])
function updateBottomizer () {
$(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'});
}
$(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);
});
};
})

37
app/partials/im.html
Unescape View File

@ -59,10 +59,14 @@
</div>
<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 &amp;&amp; !state.loaded" class="im_history_not_selected">Loading history<span my-typing-dots></span></div>
<div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.3">
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 class="im_history_panel_wrap">
@ -76,29 +80,23 @@
<div class="dropdown im_history_panel_media_dropdown pull-right">
<a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
<ul class="dropdown-menu">
<li>
<a ng-click="toggleMedia('photos')">Photos</a>
</li>
<li>
<a ng-click="toggleMedia('video')">Videos</a>
</li>
<li>
<a ng-click="toggleMedia('documents')">Documents</a>
</li>
<li><a ng-click="toggleMedia('photos')">Photos</a></li>
<li><a ng-click="toggleMedia('video')">Videos</a></li>
<li><a ng-click="toggleMedia('documents')">Documents</a></li>
</ul>
</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
<strong class="im_history_panel_return_count" ng-show="missedCount > 0">+{{missedCount}}</strong>
</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="video">Videos</span>
<span ng-switch-when="documents">Documents</span>
</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>
<small class="im_chat_users">
<ng-pluralize count="historyPeer.data.participants_count"
@ -107,7 +105,7 @@
</small>
</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>
<small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
</h4>
@ -125,7 +123,9 @@
<div class="im_history_scrollable">
<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_message_wrap" my-message ng-repeat="historyMessage in history"></div>
</div>
@ -189,7 +189,6 @@
<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>
<div class="" style="position: relative;">
<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"/>
<i class="icon icon-camera"></i>
@ -200,13 +199,11 @@
<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>
</form>
</div>

Write Preview
Loading…
Cancel
Save