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

Added forwarded messages support, reverted send message animation, improved styles

TitanNano-voice_recorder
Igor Zhukov 11 years ago
parent
463f1d186e
commit
e4707f6114
13 changed files with 267 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 124
      app/css/app.css
  2. BIN
      app/img/blank.gif
  3. BIN
      app/img/sound_a.wav
  4. 2
      app/index.html
  5. 19
      app/js/controllers.js
  6. 71
      app/js/directives.js
  7. 29
      app/js/filters.js
  8. 22
      app/js/services.js
  9. 8
      app/partials/chat_modal.html
  10. 14
      app/partials/dialog.html
  11. 6
      app/partials/head.html
  12. 18
      app/partials/im.html
  13. 61
      app/partials/message.html

124
app/css/app.css
Unescape View File

@ -2,6 +2,8 @@
html { html {
background: #dee4e9 url(../img/bg_tile.png?1) 0 0 repeat; background: #dee4e9 url(../img/bg_tile.png?1) 0 0 repeat;
background-size: 300px 468px;
/*background: #dee4e9 url(../img/bg_full.png) 0 0 no-repeat;*/ /*background: #dee4e9 url(../img/bg_full.png) 0 0 no-repeat;*/
/*background-size: cover;*/ /*background-size: cover;*/
/*background-size: contain;*/ /*background-size: contain;*/
@ -166,11 +168,13 @@ fieldset[disabled] .btn-tg.active {
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.modal {
overflow-y: auto;
}
.modal-content { .modal-content {
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
} }
.modal_close_wrap { .modal_close_wrap {
cursor: pointer; cursor: pointer;
@ -287,12 +291,28 @@ fieldset[disabled] .btn-tg.active {
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
margin-bottom: 40px; /*margin-bottom: 40px;*/
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
overflow: hidden; overflow: hidden;
} }
.im_page_footer {
font-size: 11px;
text-align: center;
color: #9cacb9;
line-height: 40px;
}
.im_page_footer_brand {
color: #9cacb9;
font-weight: bold;
}
.im_page_footer_brand:hover,
.im_page_footer_brand:active {
color: #8499aa;
text-decoration: none;
}
.im_dialogs_col_wrap { .im_dialogs_col_wrap {
float: left; float: left;
width: 310px; width: 310px;
@ -511,6 +531,7 @@ a.im_dialog:hover .im_dialog_message_text {
} }
.im_history_panel_wrap { .im_history_panel_wrap {
cursor: pointer;
position: relative; position: relative;
-webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
@ -573,6 +594,7 @@ a.im_dialog:hover .im_dialog_message_text {
width: 100%; width: 100%;
margin-bottom: 13px; margin-bottom: 13px;
overflow: hidden; overflow: hidden;
-webkit-user-select: none;
} }
.im_history_typing { .im_history_typing {
font-size: 11px; font-size: 11px;
@ -714,66 +736,53 @@ div.im_message_video_thumb {
margin-top: 3px; margin-top: 3px;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
line-height: 0; /*line-height: 0;*/
width: 300px; width: 340px;
} }
.icon-document { .icon-document {
display: inline-block; display: block;
float: left;
width: 38px; width: 38px;
height: 38px; height: 38px;
vertical-align: text-top; vertical-align: text-top;
background: #F2F2F2 url(../img/icons/DocGrey_2x.png) 8px 10px no-repeat; background: #F2F2F2 url(../img/icons/DocGrey_2x.png) 8px 10px no-repeat;
background-size: 20px 20px; background-size: 20px 20px;
border-radius: 3px; border-radius: 3px;
margin-right: 0; margin-right: 10px;
}
.im_message_document .icon-group {
background-image: url(../img/icons/DialogListGroupChatIcon_Highlighted@2x.png);
} }
.im_message_document_size { .im_message_document_info {
color: #999; float: left;
float: right; }
vertical-align: text-top; .im_message_document_name_wrap {
display: inline-block;
line-height: 20px;
padding: 9px 3px 9px 0;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} width: 290px;
.im_message_document:hover .im_message_document_size { padding: 0 0 1px;
color: #698192;
} }
.im_message_document_name { .im_message_document_name {
color: #000; color: #000;
font-weight: bold;
vertical-align: text-top;
display: inline-block; display: inline-block;
line-height: 20px; font-weight: bold;
padding: 9px 5px 9px 0;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
vertical-align: text-top;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.im_message_document:hover, .im_message_document_size {
.im_message_document:hover .icon-document { color: #999;
background: #EBF0F5; padding-left: 2px;
text-decoration: none;
}
.im_message_document:hover .icon-document {
background: #EBF0F5 url(../img/icons/DocBlue_2x.png) 8px 10px no-repeat;
background-size: 20px 20px;
} }
.im_message_upload_progress_wrap, .im_message_upload_progress_wrap,
.im_message_download_progress_wrap { .im_message_download_progress_wrap {
margin-top: 5px; margin-top: 5px;
width: 300px; width: 290px;
} }
.tg_up_progress, .tg_up_progress,
@ -781,10 +790,9 @@ div.im_message_video_thumb {
height: 5px; height: 5px;
margin: 0; margin: 0;
padding: 0; padding: 0;
/*background: rgba(0,0,0, 0.1);*/ background: #F2F2F2;
background: #E9EBED;
border: 0; border: 0;
border-radius: 4px; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -792,19 +800,12 @@ div.im_message_video_thumb {
.tg_down_progress .progress-bar { .tg_down_progress .progress-bar {
height: 5px; height: 5px;
line-height: 5px; line-height: 5px;
/*background: #43A4DB;*/ background: #6B9ABD;
background: #B3BFC7; border-radius: 0;
border-radius: 3px;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.tg_down_progress .progress-bar {
background: #A1D2ED;
/*background: #6DBF69;*/
}
/*.tg_up_progress .progress-bar {
}*/
@ -839,7 +840,7 @@ div.im_message_video_thumb {
display: block; display: block;
width: 11px; width: 11px;
height: 11px; height: 11px;
border-radius: 5px; border-radius: 7px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
margin-left: -27px; margin-left: -27px;
@ -886,6 +887,10 @@ div.im_message_body {
overflow: hidden; overflow: hidden;
} }
div.im_message_fwd_header {
font-weight: bold;
}
.im_message_text { .im_message_text {
word-wrap: break-word; word-wrap: break-word;
} }
@ -1028,12 +1033,24 @@ div.im_panel_own_photo {
display: block; display: block;
width: 11px; width: 11px;
height: 11px; height: 11px;
border-radius: 5px; border-radius: 6px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
margin-top: -7px; margin-top: -7px;
margin-left: 43px; margin-left: 43px;
} }
.modal_participant_online {
background: #6DBF69;
border: 1px solid #FFF;
display: block;
width: 11px;
height: 11px;
border-radius: 6px;
overflow: hidden;
position: absolute;
margin-top: -7px;
margin-left: 33px;
}
.media_modal_wrap .modal-body { .media_modal_wrap .modal-body {
@ -1111,24 +1128,25 @@ img.img_fullsize {
} }
.chat_modal_members_header { .chat_modal_members_header {
margin-top: 15px; margin: 20px 0 6px;
} }
.chat_modal_participant_wrap { .chat_modal_participant_wrap {
padding: 8px 7px; padding: 8px 7px;
border-top: 1px solid #E0E0E0; border-top: 1px solid #F0F0F0;
} }
.chat_modal_participant_name { .chat_modal_participant_name {
display: block;
color: #3C6E97; color: #3C6E97;
font-weight: bold; font-weight: bold;
margin: 4px 0 5px; margin: 1px 0 2px;
} }
.chat_modal_participant_status { .chat_modal_participant_status {
color: #999; color: #999;
} }
.chat_modal_participant_photo { .chat_modal_participant_photo {
width: 50px; width: 40px;
height: 50px; height: 40px;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
} }

BIN
app/img/blank.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 B

BIN
app/img/sound_a.wav
View File

Binary file not shown.

2
app/index.html
Unescape View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" ng-app="myApp" ng-csp=""> <html lang="en" ng-app="myApp"><!-- ng-csp=""-->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

19
app/js/controllers.js
Unescape View File

@ -14,9 +14,9 @@ angular.module('myApp.controllers', [])
.controller('AppWelcomeController', function($scope, $location, MtpApiManager) { .controller('AppWelcomeController', function($scope, $location, MtpApiManager) {
MtpApiManager.getUserID().then(function (id) { MtpApiManager.getUserID().then(function (id) {
if (id) { if (id) {
$location.path('/im'); $location.url('/im');
} else { } else {
$location.path('/login'); $location.url('/login');
} }
}); });
}) })
@ -33,7 +33,7 @@ angular.module('myApp.controllers', [])
id: result.user.id id: result.user.id
}); });
$location.path('/im'); $location.url('/im');
}; };
$scope.sendCode = function () { $scope.sendCode = function () {
@ -116,10 +116,15 @@ angular.module('myApp.controllers', [])
$scope.isLoggedIn = true; $scope.isLoggedIn = true;
$scope.logOut = function () { $scope.logOut = function () {
MtpApiManager.logOut().then(function () { MtpApiManager.logOut().then(function () {
$location.path('/login'); location.href = 'login';
}); });
} }
// $scope.userID = 0;
// MtpApiManager.getUserID().then(function (userID) {
// $scope.userID = userID;
// });
updateCurDialog(); updateCurDialog();
@ -190,7 +195,7 @@ angular.module('myApp.controllers', [])
$scope.$broadcast('ui_dialogs_change'); $scope.$broadcast('ui_dialogs_change');
}, function (error) { }, function (error) {
if (error.code == 401) { if (error.code == 401) {
$location.path('/login'); $location.url('/login');
} }
}); });
} }
@ -245,7 +250,7 @@ angular.module('myApp.controllers', [])
function updateHistoryPeer(preload) { function updateHistoryPeer(preload) {
var peerData = AppPeersManager.getPeer(peerID); var peerData = AppPeersManager.getPeer(peerID);
dLog('update', preload, peerData); // dLog('update', preload, peerData);
if (!peerData || peerData.deleted) { if (!peerData || peerData.deleted) {
return false; return false;
} }
@ -274,7 +279,7 @@ angular.module('myApp.controllers', [])
return; return;
} }
console.trace('load history'); // console.trace('load history');
AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit).then(function (historyResult) { AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit).then(function (historyResult) {
offset += limit; offset += limit;
hasMore = offset < historyResult.count; hasMore = offset < historyResult.count;

71
app/js/directives.js
Unescape View File

@ -105,33 +105,52 @@ angular.module('myApp.directives', ['myApp.filters'])
moreNotified = false; moreNotified = false;
onContentLoaded(function () { onContentLoaded(function () {
$(historyWrap).nanoScroller({preventPageScrolling: true, scroll: 'bottom', tabIndex: -1}); scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1});
}); });
var updateScroller = function (delay) { var updateScroller = function (delay) {
$timeout(function () { $timeout(function () {
if (!$(scrollableWrap).hasClass('im_history_to_bottom')) {
$(historyWrap).nanoScroller(); $(historyWrap).nanoScroller();
}
}, delay || 0); }, delay || 0);
} }
var animated = true,
curAnimation = false;
scope.$on('ui_history_append', function () { scope.$on('ui_history_append', function () {
// var st = scrollableWrap.scrollTop; if (!atBottom) {
$(scrollableWrap).addClass('im_history_to_bottom'); return;
}
if (animated) {
$(scrollableWrap).stop();
} else {
$(scrollable).css({bottom: 0}); $(scrollable).css({bottom: 0});
$(scrollableWrap).addClass('im_history_to_bottom');
}
if (atBottom) {
onContentLoaded(function () { onContentLoaded(function () {
$(scrollableWrap).removeClass('im_history_to_bottom'); if (animated) {
$(scrollable).css({bottom: ''}); curAnimation = true;
// updateSizes(true); $(scrollableWrap).stop().animate({
$(historyWrap).nanoScroller({scrollBottom: 0}); scrollTop: scrollableWrap.scrollHeight - scrollableWrap.clientHeight
// scrollableWrap.scrollTop = st; }, {
// $(scrollableWrap).animate({ duration: 200,
// scrollTop: scrollableWrap.scrollHeight - scrollableWrap.clientHeight always: function () {
// }, 200); curAnimation = false;
updateScroller(); updateScroller();
}
}); });
updateScroller();
} else {
$(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: ''});
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyWrap).nanoScroller();
} }
});
}); });
scope.$on('ui_history_change', function () { scope.$on('ui_history_change', function () {
@ -141,9 +160,8 @@ angular.module('myApp.directives', ['myApp.filters'])
$(scrollableWrap).removeClass('im_history_to_bottom'); $(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: ''}); $(scrollable).css({bottom: ''});
updateSizes(); updateSizes();
$(historyWrap).nanoScroller(); scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
$(historyWrap).nanoScroller({scrollBottom: 0}); updateScroller();
updateScroller(100);
moreNotified = false; moreNotified = false;
}); });
}); });
@ -160,17 +178,21 @@ angular.module('myApp.directives', ['myApp.filters'])
onContentLoaded(function () { onContentLoaded(function () {
$(scrollableWrap).removeClass('im_history_to_bottom'); $(scrollableWrap).removeClass('im_history_to_bottom');
$(scrollable).css({bottom: ''}); $(scrollable).css({bottom: ''});
$(historyWrap).nanoScroller(); scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh;
$(historyWrap).nanoScroller({scrollTop: st + scrollableWrap.scrollHeight - sh});
// updateScroller(); updateScroller();
updateScroller(50);
moreNotified = false; moreNotified = false;
}); });
}); });
var atBottom = true; var atBottom = true;
$(scrollableWrap).on('scroll', function (e) { $(scrollableWrap).on('scroll', function (e) {
if ($(scrollableWrap).hasClass('im_history_to_bottom')) {
return cancelEvent(e);
}
if (curAnimation) {
return;
}
atBottom = scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight; atBottom = scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight;
if (!moreNotified && scrollableWrap.scrollTop <= 300) { if (!moreNotified && scrollableWrap.scrollTop <= 300) {
@ -190,7 +212,9 @@ angular.module('myApp.directives', ['myApp.filters'])
if (heightOnly) return; if (heightOnly) return;
if (atBottom) { if (atBottom) {
onContentLoaded(function () { onContentLoaded(function () {
$(historyWrap).nanoScroller({scroll: 'bottom'}); scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
// $(historyWrap).nanoScroller({scroll: 'bottom'});
}); });
} }
updateScroller(100); updateScroller(100);
@ -252,7 +276,6 @@ angular.module('myApp.directives', ['myApp.filters'])
if (submit) { if (submit) {
$(element).trigger('submit'); $(element).trigger('submit');
// dLog('after submit');
return cancelEvent(e); return cancelEvent(e);
} }
}); });
@ -270,7 +293,10 @@ angular.module('myApp.directives', ['myApp.filters'])
$('body').on('dragenter dragleave dragover drop', onDragDropEvent); $('body').on('dragenter dragleave dragover drop', onDragDropEvent);
scope.$on('ui_peer_change ui_history_change ui_message_send', focusField); scope.$on('ui_peer_change', focusField);
scope.$on('ui_history_change', focusField);
scope.$on('ui_message_send', focusField);
scope.$on('$destroy', function cleanup() { scope.$on('$destroy', function cleanup() {
$('body').off('dragenter dragleave dragover drop', onDragDropEvent); $('body').off('dragenter dragleave dragover drop', onDragDropEvent);
}); });
@ -333,6 +359,7 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
function link (scope, element, attrs) { function link (scope, element, attrs) {
element.src = 'img/blank.gif';
scope.$watch('thumb.location', function (newVal) { scope.$watch('thumb.location', function (newVal) {
if (!scope.thumb || !scope.thumb.location) { if (!scope.thumb || !scope.thumb.location) {
element.attr('src', scope.thumb && scope.thumb.placeholder || ''); element.attr('src', scope.thumb && scope.thumb.placeholder || '');

29
app/js/filters.js
Unescape View File

@ -82,7 +82,8 @@ angular.module('myApp.filters', [])
.filter('phoneNumber', [function() { .filter('phoneNumber', [function() {
return function (phoneRaw) { return function (phoneRaw) {
if (phoneRaw.charAt(0) == '7') { phoneRaw = (phoneRaw || '').replace(/\D/g, '');
if (phoneRaw.charAt(0) == '7' && phoneRaw.length == 11) {
return '+' + phoneRaw.charAt(0) + ' (' + phoneRaw.substr(1, 3) + ') ' + phoneRaw.substr(4, 3) + '-' + phoneRaw.substr(7, 2) + '-' + phoneRaw.substr(9, 2); return '+' + phoneRaw.charAt(0) + ' (' + phoneRaw.substr(1, 3) + ') ' + phoneRaw.substr(4, 3) + '-' + phoneRaw.substr(7, 2) + '-' + phoneRaw.substr(9, 2);
} }
return '+' + phoneRaw; return '+' + phoneRaw;
@ -91,7 +92,31 @@ angular.module('myApp.filters', [])
.filter('formatSize', [function () { .filter('formatSize', [function () {
return function (size) { return function (size) {
return Math.round(size / 1024) + 'Kb'; if (!size) {
return '0';
}
else if (size < 1024) {
return size + ' b';
}
else if (size < 1048576) {
return (Math.round(size / 1024 * 10) / 10) + ' Kb';
}
return (Math.round(size / 1048576 * 100) / 100) + ' Mb';
}
}])
.filter('formatSizeProgress', ['$filter', function ($filter) {
return function (progress) {
var done = $filter('formatSize')(progress.done),
doneParts = done.split(' '),
total = $filter('formatSize')(progress.total),
totalParts = total.split(' ');
if (totalParts[1] === doneParts[1]) {
return doneParts[0] + ' of ' + totalParts[0] + ' ' + (doneParts[1] || '');
}
return done + ' of ' + total;
} }
}]) }])

22
app/js/services.js
Unescape View File

@ -710,7 +710,7 @@ angular.module('myApp.services', [])
type: isPhoto ? 'photo' : 'doc', type: isPhoto ? 'photo' : 'doc',
file_name: file.name, file_name: file.name,
size: file.size, size: file.size,
progress: {percent: 1} progress: {percent: 1, total: file.size}
}; };
var message = { var message = {
@ -764,8 +764,10 @@ angular.module('myApp.services', [])
var historyMessage = messagesForHistory[messageID], var historyMessage = messagesForHistory[messageID],
percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
media.progress.done = progress.done;
media.progress.percent = percent; media.progress.percent = percent;
if (historyMessage) { if (historyMessage) {
historyMessage.media.progress.done = progress.done;
historyMessage.media.progress.percent = percent; historyMessage.media.progress.percent = percent;
$rootScope.$broadcast('history_update', {peerID: peerID}); $rootScope.$broadcast('history_update', {peerID: peerID});
} }
@ -879,6 +881,10 @@ angular.module('myApp.services', [])
message.fromUser = AppUsersManager.getUser(message.from_id); message.fromUser = AppUsersManager.getUser(message.from_id);
message.fromPhoto = AppUsersManager.getUserPhoto(message.from_id, 'User'); message.fromPhoto = AppUsersManager.getUserPhoto(message.from_id, 'User');
if (message._ == 'messageForwarded') {
message.fwdUser = AppUsersManager.getUser(message.fwd_from_id);
}
if (message.media) { if (message.media) {
switch (message.media._) { switch (message.media._) {
case 'messageMediaPhoto': case 'messageMediaPhoto':
@ -1383,10 +1389,11 @@ angular.module('myApp.services', [])
access_hash: accessHash || doc.access_hash access_hash: accessHash || doc.access_hash
}; };
historyDoc.progress = {enabled: true, percent: 1}; historyDoc.progress = {enabled: true, percent: 1, total: doc.size};
function updateDownloadProgress (progress) { function updateDownloadProgress (progress) {
dLog('dl progress', progress); dLog('dl progress', progress);
historyDoc.progress.done = progress.done;
historyDoc.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); historyDoc.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
$rootScope.$broadcast('history_update'); $rootScope.$broadcast('history_update');
} }
@ -1927,11 +1934,14 @@ angular.module('myApp.services', [])
function notificationsClear() { function notificationsClear() {
angular.forEach(notificationsShown, function (notification) { angular.forEach(notificationsShown, function (notification) {
notification.close(); try {
if (notification.close) {
notification.close()
} else if (notification.cancel) {
notification.cancel();
}
} catch (e) {}
}); });
notificationsShown = []; notificationsShown = [];
} }
}) })

8
app/partials/chat_modal.html
Unescape View File

@ -19,7 +19,7 @@
</ng-pluralize> </ng-pluralize>
</p> </p>
<button class="btn btn-link chat_modal_invite_btn">Add member</button> <!--button class="btn btn-link chat_modal_invite_btn">Add member</button-->
</div> </div>
<h5 class="chat_modal_members_header">Members</h5> <h5 class="chat_modal_members_header">Members</h5>
@ -28,9 +28,11 @@
<div class="chat_modal_participant_wrap clearfix" ng-repeat="participant in chatFull.participants.participants"> <div class="chat_modal_participant_wrap clearfix" ng-repeat="participant in chatFull.participants.participants">
<a ng-click="openUser(participant.user_id)" class="chat_modal_participant_photo pull-left"> <a ng-click="openUser(participant.user_id)" class="chat_modal_participant_photo pull-left">
<img class="chat_modal_participant_photo" my-load-thumb thumb="participant.userPhoto"/> <img class="chat_modal_participant_photo" my-load-thumb thumb="participant.userPhoto"/>
<i class="icon modal_participant_online" ng-show="participant.user.status._ == 'userStatusOnline'"></i>
</a> </a>
<div class="chat_modal_participant_name">{{participant.user | userName}}</div> <div class="chat_modal_participant_name">
<!--div class="chat_modal_participant_desc">invited by {{participant.inviter | userName}} {{participant.date | dateOrTime}}</div--> <a ng-click="openUser(participant.user.id)" ng-bind-html="participant.user.rFullName"></a>
</div>
<div class="chat_modal_participant_status">{{participant.user | userStatus}}</div> <div class="chat_modal_participant_status">{{participant.user | userStatus}}</div>
</div> </div>

14
app/partials/dialog.html
Unescape View File

@ -10,7 +10,7 @@
</div> </div>
<div class="im_dialog_photo pull-left"> <div class="im_dialog_photo pull-left">
<img class="im_dialog_photo" my-load-thumb thumb="dialogMessage.peerPhoto" aaa="{{dialogMessage.peerPhoto.location}}" /> <img class="im_dialog_photo" src="img/blank.gif" my-load-thumb thumb="dialogMessage.peerPhoto" aaa="{{dialogMessage.peerPhoto.location}}" />
</div> </div>
<div class="im_dialog_message_wrap"> <div class="im_dialog_message_wrap">
@ -58,12 +58,24 @@
<span ng-switch-when="messageActionChatDeletePhoto"> <span ng-switch-when="messageActionChatDeletePhoto">
removed group photo removed group photo
</span> </span>
<span ng-switch-when="messageActionChatAddUser"> <span ng-switch-when="messageActionChatAddUser">
<span ng-if="dialogMessage.from_id != dialogMessage.action.user_id">
invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span> invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
</span> </span>
<span ng-if="dialogMessage.from_id == dialogMessage.action.user_id">
returned to group
</span>
</span>
<span ng-switch-when="messageActionChatDeleteUser"> <span ng-switch-when="messageActionChatDeleteUser">
<span ng-if="dialogMessage.from_id != dialogMessage.action.user_id">
kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span> kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
</span> </span>
<span ng-if="dialogMessage.from_id == dialogMessage.action.user_id">
left group
</span>
</span>
</span> </span>
<span class="im_dialog_message_text" ng-if="dialogMessage.message" ng-bind-html="dialogMessage.richMessage"></span> <span class="im_dialog_message_text" ng-if="dialogMessage.message" ng-bind-html="dialogMessage.richMessage"></span>

6
app/partials/head.html
Unescape View File

@ -2,16 +2,14 @@
<div class="navbar navbar-static-top navbar-inverse" role="navigation"> <div class="navbar navbar-static-top navbar-inverse" role="navigation">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="http://zhukov.github.io/webogram"><img src="img/Logo_2x.png" class="tg_head_logo" alt="Telegram logo" width="110" height="31" /> <span class="navbar-brand-alpha font-light">alpha</span></a> <a class="navbar-brand" href="http://zhukov.github.io/webogram"><img src="img/Logo_2x.png" class="tg_head_logo" alt="Telegram logo" width="110" height="31" /></a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<!-- <ul class="nav navbar-nav"></ul> -->
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li> <li><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
<li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log out</a></li> <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log out</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div>
</div> </div>
</div> </div>
</div> </div>

18
app/partials/im.html
Unescape View File

@ -30,9 +30,9 @@
<div class="im_history_panel clearfix" ng-controller="AppImPanelController"> <div class="im_history_panel clearfix" ng-controller="AppImPanelController">
<div class="im_history_panel_title"> <div class="im_history_panel_title">
<div ng-if="historyPeer.id < 0"> <div ng-if="historyPeer.id < 0" ng-click="openChat(-historyPeer.id)">
<h4> <h4>
<!-- <a class="im_history_panel_info_link pull-right" ng-click="openChat(-historyPeer.id)">Info</a> --> <a class="im_history_panel_info_link pull-right" ng-click="openChat(-historyPeer.id)">Info</a>
<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"
@ -42,9 +42,9 @@
</h4> </h4>
</div> </div>
<div ng-if="historyPeer.id > 0"> <div ng-if="historyPeer.id > 0" ng-click="openUser(historyPeer.id)">
<h4> <h4>
<!-- <a class="im_history_panel_info_link pull-right" ng-click="openUser(historyPeer.id)">Info</a> --> <a class="im_history_panel_info_link pull-right" ng-click="openUser(historyPeer.id)">Info</a>
<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>
@ -80,14 +80,14 @@
<div class="im_send_form_wrap clearfix" ng-controller="AppImSendController"> <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
<div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0"> <div class="pull-right im_panel_peer_photo" ng-click="openUser(historyPeer.id)" ng-if="historyPeer.id > 0">
<img class="im_panel_peer_photo" my-load-thumb thumb="historyPeer.photo" /> <img class="im_panel_peer_photo" src="img/blank.gif" my-load-thumb thumb="historyPeer.photo" />
<i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i> <i class="icon im_panel_peer_online" ng-show="historyPeer.data.status._ == 'userStatusOnline'"></i>
</div> </div>
<div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0"> <div class="pull-right im_panel_peer_photo" ng-click="openChat(-historyPeer.id)" ng-if="historyPeer.id < 0">
<img class="im_panel_peer_photo" my-load-thumb thumb="historyPeer.photo" /> <img class="im_panel_peer_photo" src="img/blank.gif" my-load-thumb thumb="historyPeer.photo" />
</div> </div>
<div class="pull-left im_panel_own_photo"> <div class="pull-left im_panel_own_photo">
<img class="im_panel_own_photo" my-load-thumb thumb="ownPhoto" /> <img class="im_panel_own_photo" src="img/blank.gif" my-load-thumb thumb="ownPhoto" />
</div> </div>
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)"> <form my-send-form draft-message="draftMessage" class="im_send_form" ng-submit="sendMessage($event)">
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
@ -116,3 +116,7 @@
</div> </div>
<div class="im_page_footer font-light">
<a class="im_page_footer_brand" target="_blank" href="https://github.com/zhukov/webogram">Telegram alpha</a> by izhukov &amp; toberg
</div>

61
app/partials/message.html
Unescape View File

@ -19,11 +19,21 @@
removed group photo removed group photo
</span> </span>
<span ng-switch-when="messageActionChatAddUser"> <span ng-switch-when="messageActionChatAddUser">
<span ng-if="historyMessage.from_id != historyMessage.action.user_id">
invited <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a> invited <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
</span> </span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
returned to group
</span>
</span>
<span ng-switch-when="messageActionChatDeleteUser"> <span ng-switch-when="messageActionChatDeleteUser">
<span ng-if="historyMessage.from_id != historyMessage.action.user_id">
kicked <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a> kicked <a ng-click="openUser(historyMessage.action.user_id)" ng-bind-html="historyMessage.action.user.rFullName"></a>
</span> </span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
left group
</span>
</span>
<span ng-switch-default> <span ng-switch-default>
unsupported action {{historyMessage.action}} unsupported action {{historyMessage.action}}
@ -33,7 +43,7 @@
</div> </div>
<a ng-if="historyMessage.action._ == 'messageActionChatEditPhoto'" class="im_service_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.action.photo.id)"> <a ng-if="historyMessage.action._ == 'messageActionChatEditPhoto'" class="im_service_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.action.photo.id)">
<img class="im_service_message_photo_thumb" my-load-thumb thumb="historyMessage.action.photo.thumb" width="{{historyMessage.action.photo.thumb.width}}" height="{{historyMessage.action.photo.thumb.height}}" /> <img class="im_service_message_photo_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.action.photo.thumb" width="{{historyMessage.action.photo.thumb.width}}" height="{{historyMessage.action.photo.thumb.height}}" />
</a> </a>
</div> </div>
@ -42,7 +52,7 @@
<i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}"></i> <i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}"></i>
<a ng-click="openUser(historyMessage.from_id)" class="im_message_from_photo pull-left"> <a ng-click="openUser(historyMessage.from_id)" class="im_message_from_photo pull-left">
<img class="im_message_from_photo" my-load-thumb thumb="historyMessage.fromPhoto"/> <img class="im_message_from_photo" src="img/blank.gif" my-load-thumb thumb="historyMessage.fromPhoto"/>
</a> </a>
<div class="im_message_meta pull-right text-right"> <div class="im_message_meta pull-right text-right">
<i ng-if="historyMessage.out" class="icon icon-message-status-tick" ng-class="{'message-status-delivered-tick': true, 'message-status-unread-tick': historyMessage.unread}"></i> <i ng-if="historyMessage.out" class="icon icon-message-status-tick" ng-class="{'message-status-delivered-tick': true, 'message-status-unread-tick': historyMessage.unread}"></i>
@ -53,27 +63,40 @@
<a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a> <a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
<div class="im_message_fwd_header" ng-if="historyMessage._ == 'messageForwarded'">
Forwarded message from <a class="im_message_fwd_author" ng-click="openUser(historyMessage.fwd_from_id)" ng-bind-html="historyMessage.fwdUser.rFirstName"></a>, <span class="im_message_fwd_date">{{historyMessage.fwd_date | dateOrTime}}</span>
</div>
<div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._"> <div class="im_message_media" ng-if="historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'" ng-switch="historyMessage.media._">
<a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" > <a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" >
<img class="im_message_photo_thumb" my-load-thumb thumb="historyMessage.media.photo.thumb" width="{{historyMessage.media.photo.thumb.width}}" height="{{historyMessage.media.photo.thumb.height}}" /> <img class="im_message_photo_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.photo.thumb" width="{{historyMessage.media.photo.thumb.width}}" height="{{historyMessage.media.photo.thumb.height}}" />
</a> </a>
<a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)"> <a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)">
<img class="im_message_video_thumb" my-load-thumb thumb="historyMessage.media.video.thumb" width="{{historyMessage.media.video.thumb.width}}" height="{{historyMessage.media.video.thumb.height}}" /> <img class="im_message_video_thumb" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.video.thumb" width="{{historyMessage.media.video.thumb.width}}" height="{{historyMessage.media.video.thumb.height}}" />
<div class="im_message_video_duration_wrap" style="width: {{historyMessage.media.video.thumb.width}}px;"> <div class="im_message_video_duration_wrap" style="width: {{historyMessage.media.video.thumb.width}}px;">
<span class="im_message_video_duration pull-right">{{historyMessage.media.video.duration | duration}}</span> <span class="im_message_video_duration pull-right">{{historyMessage.media.video.duration | duration}}</span>
<span class="glyphicon glyphicon-facetime-video"></span> <span class="glyphicon glyphicon-facetime-video"></span>
</div> </div>
</a> </a>
<div ng-switch-when="messageMediaDocument"> <div ng-switch-when="messageMediaDocument" class="im_message_document">
<a class="im_message_document" href="" ng-click="openDoc(historyMessage.media.document.id)">
<div class="im_message_document_size">{{historyMessage.media.document.size | formatSize}}</div>
<i class="icon icon-document"></i> <i class="icon icon-document"></i>
<div class="im_message_document_name">{{historyMessage.media.document.file_name}}</div> <div class="im_message_document_info">
</a> <div class="im_message_document_name_wrap">
<span class="im_message_document_name">{{historyMessage.media.document.file_name}}</span>
<span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled">
{{historyMessage.media.document.size | formatSize}}
</span>
<span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled">
{{historyMessage.media.document.progress | formatSizeProgress}}
</span>
</div>
<div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled">
<a href="" ng-click="openDoc(historyMessage.media.document.id)">Download</a>
</div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled"> <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
<div class="progress tg_down_progress"> <div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.document.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.document.progress.percent}}%"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.document.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.document.progress.percent}}%">
@ -82,6 +105,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint"> <a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
<i class="icon icon-geo-point"></i> <i class="icon icon-geo-point"></i>
@ -89,25 +113,30 @@
<div ng-switch-when="messageMediaContact"> <div ng-switch-when="messageMediaContact">
<a ng-click="openUser(historyMessage.media.user.id)" class="im_message_contact_photo pull-left" ng-if="historyMessage.media.user"> <a ng-click="openUser(historyMessage.media.user.id)" class="im_message_contact_photo pull-left" ng-if="historyMessage.media.user">
<img class="im_message_contact_photo" my-load-thumb thumb="historyMessage.media.userPhoto"/> <img class="im_message_contact_photo" src="img/blank.gif" my-load-thumb thumb="historyMessage.media.userPhoto"/>
</a> </a>
<div class="im_message_contact_name"><span class="glyphicon glyphicon-user"></span> {{historyMessage.media.first_name}} {{historyMessage.media.last_name}}</div> <div class="im_message_contact_name"><span class="glyphicon glyphicon-user"></span> {{historyMessage.media.first_name}} {{historyMessage.media.last_name}}</div>
<div class="im_message_contact_phone">{{historyMessage.media.phone_number}}</div> <div class="im_message_contact_phone">{{historyMessage.media.phone_number}}</div>
</div> </div>
<div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}"> <div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}">
<div class="im_message_document_size">{{historyMessage.media.size | formatSize}}</div>
<i class="icon icon-document"></i> <i class="icon icon-document"></i>
<div class="im_message_document_name">{{historyMessage.media.file_name}}</div> <div class="im_message_document_info">
<div class="im_message_document_name_wrap">
<div class="im_message_upload_progress_wrap"> <span class="im_message_document_name">{{historyMessage.media.file_name}}</span>
<div class="progress tg_up_progress"> <span class="im_message_document_size" ng-if="historyMessage.media.progress">
{{historyMessage.media.progress | formatSizeProgress}}
</span>
</div>
<div class="im_message_download_progress_wrap">
<div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.progress.percent}}%"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.progress.percent}}%">
<span class="sr-only">{{historyMessage.media.progress.percent}}% Complete (success)</span> <span class="sr-only">{{historyMessage.media.progress.percent}}% Complete (success)</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save