Browse Source

Mass edit draft

master
Igor Zhukov 10 years ago
parent
commit
7a09eb0b37
  1. 153
      app/css/app.css
  2. 24
      app/js/controllers.js
  3. 13
      app/js/directives.js
  4. 8
      app/partials/im.html
  5. 380
      app/partials/message.html
  6. 2
      app/partials/welcome.html

153
app/css/app.css

@ -109,9 +109,9 @@ fieldset[disabled] .btn-tg.active { @@ -109,9 +109,9 @@ fieldset[disabled] .btn-tg.active {
border-color: #999;
}
/*.tg_page_head .navbar {
min-height: 42px;
}*/
.tg_page_head .navbar {
min-height: 44px;
}
.tg_page_head .container {
display: block;
width: auto;
@ -128,8 +128,7 @@ fieldset[disabled] .btn-tg.active { @@ -128,8 +128,7 @@ fieldset[disabled] .btn-tg.active {
margin: 0;
}
.tg_page_head .navbar > .container .navbar-brand {
padding: 12px 15px;
/*padding: 8px 15px;*/
padding: 9px 15px;
opacity: 0.9;
margin-left: 0;
margin-right: 20px;
@ -195,8 +194,8 @@ fieldset[disabled] .btn-tg.active { @@ -195,8 +194,8 @@ fieldset[disabled] .btn-tg.active {
}
.tg_page_head .navbar-inverse .navbar-nav > li > a {
/*padding-top: 11px;
padding-bottom: 11px;*/
padding-top: 12px;
padding-bottom: 12px;
color: #b9cfe3;
font-size: 13px;
}
@ -648,16 +647,13 @@ a.im_dialog:hover .im_dialog_date { @@ -648,16 +647,13 @@ a.im_dialog:hover .im_dialog_date {
/* IM history */
.im_history_col {
padding: 0 8px 0 15px;
}
.im_history_col .nano > .pane {
background : rgba(3,36,64,0.08);
/*background: #E9EBED;*/
width : 9px;
top: 10px;
/*margin-top: 10px;*/
/*bottom: */
right: 8px;
-webkit-transition : .2s;
-moz-transition : .2s;
-o-transition : .2s;
@ -668,7 +664,6 @@ a.im_dialog:hover .im_dialog_date { @@ -668,7 +664,6 @@ a.im_dialog:hover .im_dialog_date {
}
.im_history_col .nano > .pane > .slider {
background : rgba(3,46,79,0.22);
/*background: #B3BFC7;*/
margin: 0;
-moz-border-radius : 2px;
-webkit-border-radius : 2px;
@ -676,12 +671,12 @@ a.im_dialog:hover .im_dialog_date { @@ -676,12 +671,12 @@ a.im_dialog:hover .im_dialog_date {
}
.im_history_panel_wrap {
margin: 0 23px 0 15px;
cursor: pointer;
position: relative;
-webkit-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
margin-right: 15px;
position: relative;
z-index: 2;
@ -728,9 +723,10 @@ a.im_dialog:hover .im_dialog_date { @@ -728,9 +723,10 @@ a.im_dialog:hover .im_dialog_date {
width: 100%;
}
.im_history {
padding: 20px 0 0 3px;
max-width: 500px;
margin: 0 auto;
/*padding: 20px 0 0 3px;*/
padding: 20px 0 0 0;
/*max-width: 500px;*/
/*margin: 0 auto;*/
position: relative;
}
@ -1130,7 +1126,7 @@ span.emoji { @@ -1130,7 +1126,7 @@ span.emoji {
.im_send_panel_wrap {
max-width: 526px;
margin: 0 auto;
padding: 10px 12px 22px 0;
padding: 10px 20px 22px 15px;
}
.im_send_form_wrap {
position: relative;
@ -1631,21 +1627,9 @@ img.img_fullsize { @@ -1631,21 +1627,9 @@ img.img_fullsize {
}
@media (max-height: 480px) {
.navbar {
min-height: 40px;
}
.tg_page_head .navbar > .container .navbar-brand {
padding: 7px 15px;
display: block;
}
.navbar-nav > li > a,
.tg_page_head .navbar-quick-nav a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
margin-top: 4px;
margin-bottom: 4px;
}
.im_page_footer {
display: none;
@ -1869,4 +1853,109 @@ img.img_fullsize { @@ -1869,4 +1853,109 @@ img.img_fullsize {
height: 40px;
margin-right: 10px;
overflow: hidden;
}
}
/* Messages edit panel */
.im_edit_panel_wrap {
border-top: 1px solid #EEE;
padding: 5px 5px;
}
.im_panel_to_top .im_edit_panel_wrap {
background: #FFF;
position: absolute;
/*width: 652px;*/
width: 100%;
}
.im_edit_delete_link,
.im_edit_cancel_link {
display: block;
padding: 8px 17px;
}
.im_edit_cancel_link {
float: left;
}
.im_edit_delete_link {
float: right;
}
.im_edit_delete_link:hover,
.im_edit_cancel_link:hover {
background: #f2f6fa;
text-decoration: none;
}
.im_edit_delete_link {
line-height: 0;
}
.im_edit_panel_title {
text-align: center;
margin: 0;
font-size: 14px;
line-height: 34px;
}
.icon-delete {
display: inline-block;
width: 12px;
height: 15px;
background: url(../img/icons/IconsetW.png?1) -15px -319px no-repeat;
background-size: 42px 460px;
}
.is_1x .icon-delete {
background-image: url(../img/icons/IconsetW_1x.png?2);
}
.im_message_date:hover {
cursor: pointer;
text-decoration: underline;
}
.im_message_selected {
background: #f2f6fa;
}
.im_history_selectable .im_message_outer_wrap {
cursor: pointer;
}
.im_history_selectable .im_message_outer_wrap:hover {
background: #f2f6fa;
}
.im_message_selected .im_message_date,
.im_history_selectable .im_message_outer_wrap:hover .im_message_date {
color: #91a6ba;
}
.im_history_selectable .im_message_date:hover {
text-decoration: none;
}
.im_message_wrap {
max-width: 500px;
margin: 0 auto;
position: relative;
}
.icon-select-tick {
display: none;
position: absolute;
width: 17px;
height: 15px;
margin: 10px 0 0 -75px;
background: url(../img/icons/IconsetW.png?1) -13px -344px no-repeat;
background-size: 42px 460px;
}
.is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png?2);
}
.im_history_selectable .icon-select-tick {
display: inline-block;
}
.im_message_selected .icon-select-tick,
.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick {
background-position: -13px -367px;
opacity: 0.6;
}
.im_message_selected .icon-select-tick {
opacity: 1 !important;
}

24
app/js/controllers.js

@ -311,7 +311,8 @@ angular.module('myApp.controllers', []) @@ -311,7 +311,8 @@ angular.module('myApp.controllers', [])
$scope.selectedMsgs = {};
$scope.selectedCount = 0;
$scope.selectActions = false;
// $scope.toggleMessage = toggleMessage;
$scope.toggleMessage = toggleMessage;
$scope.selectedCancel = selectedCancel;
$scope.typing = {};
$scope.state = {};
@ -424,21 +425,34 @@ angular.module('myApp.controllers', []) @@ -424,21 +425,34 @@ angular.module('myApp.controllers', [])
$scope.$broadcast('ui_history_change');
}
function toggleMessage (messageID) {
console.log('toggle', messageID);
function toggleMessage (messageID, target) {
if (!$scope.selectActions && !$(target).hasClass('im_message_date') && !$(target).hasClass('im_message_meta')) {
return false;
}
if ($scope.selectedMsgs[messageID]) {
delete $scope.selectedMsgs;
delete $scope.selectedMsgs[messageID];
$scope.selectedCount--;
if (!$scope.selectedCount) {
$scope.selectActions = false;
$scope.$broadcast('ui_panel_update');
}
} else {
$scope.selectedMsgs[messageID] = true;
$scope.selectedCount++;
$scope.selectActions = true;
if (!$scope.selectActions) {
$scope.selectActions = true;
$scope.$broadcast('ui_panel_update');
}
}
}
function selectedCancel () {
$scope.selectedMsgs = {};
$scope.selectedCount = 0;
$scope.selectActions = false;
$scope.$broadcast('ui_panel_update');
}
var typingTimeouts = {};

13
app/js/directives.js

@ -203,6 +203,19 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -203,6 +203,19 @@ angular.module('myApp.directives', ['myApp.filters'])
});
});
scope.$on('ui_panel_update', function () {
element.addClass('im_panel_to_top');
onContentLoaded(function () {
element.removeClass('im_panel_to_top');
updateSizes(true);
if (atBottom) {
scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
updateScroller();
}
});
});
scope.$on('ui_editor_resize', updateSizes);
var atBottom = true;

8
app/partials/im.html

@ -55,9 +55,9 @@ @@ -55,9 +55,9 @@
</div>
<div class="im_edit_panel_wrap" ng-if="selectActions">
<a ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
<a ng-click="selectedCancel()">Cancel</a>
<div class="im_edit_panel_wrap clearfix" ng-if="selectActions">
<a class="im_edit_delete_link" ng-click="selectedDelete()"><i class="icon icon-delete"></i></a>
<a class="im_edit_cancel_link" ng-click="selectedCancel()">Cancel</a>
<h4 class="im_edit_panel_title">
<ng-pluralize count="selectedCount"
when="{'0': 'No messages', 'one': '1 message', 'other': '{} messages'}">
@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
<div class="im_history_scrollable">
<div class="im_history">
<div class="im_history" ng-class="{im_history_selectable: selectActions}">
<div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
</div>

380
app/partials/message.html

@ -1,232 +1,240 @@ @@ -1,232 +1,240 @@
<div class="im_message_wrap clearfix" ng-class="{im_message_out: historyMessage.out}">
<div class="im_message_outer_wrap" ng-class="{im_message_selected: selectedMsgs[historyMessage.id]}" ng-click="toggleMessage(historyMessage.id, $event.target)">
<div class="im_service_message_wrap" ng-if="historyMessage._ == 'messageService'">
<div class="im_service_message">
<a ng-click="openUser(historyMessage.from_id)" class="im_message_author" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
<div class="im_message_wrap clearfix">
<span class="im_message_service" ng-switch="historyMessage.action['_']">
<span ng-switch-when="messageActionChatCreate">
created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
</span>
<span ng-switch-when="messageActionChatEditTitle">
changed group name to &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
</span>
<span ng-switch-when="messageActionChatEditPhoto">
changed group photo
</span>
<span ng-switch-when="messageActionChatDeletePhoto">
removed group photo
</span>
<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>
<div class="im_service_message_wrap" ng-if="historyMessage._ == 'messageService'">
<div class="im_service_message">
<a ng-click="openUser(historyMessage.from_id)" class="im_message_author" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
<span class="im_message_service" ng-switch="historyMessage.action['_']">
<span ng-switch-when="messageActionChatCreate">
created the group &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
</span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
returned to group
<span ng-switch-when="messageActionChatEditTitle">
changed group name to &laquo;<strong>{{historyMessage.action.title}}</strong>&raquo;
</span>
</span>
<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>
<span ng-switch-when="messageActionChatEditPhoto">
changed group photo
</span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
left group
<span ng-switch-when="messageActionChatDeletePhoto">
removed group photo
</span>
<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>
</span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
returned to group
</span>
</span>
<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>
</span>
<span ng-if="historyMessage.from_id == historyMessage.action.user_id">
left group
</span>
</span>
</span>
<span ng-switch-default>
unsupported action {{historyMessage.action}}
<span ng-switch-default>
unsupported action {{historyMessage.action}}
</span>
</span>
</span>
</div>
<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}}"
/>
</a>
</div>
</div>
<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}}"
/>
</a>
<div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
<a ng-click="historyMessage.send()" ng-if="historyMessage.error">
<i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>
</a>
<i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-if="!historyMessage.error"></i>
<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"
/>
</a>
<div class="im_message_meta pull-right text-right">
<span ng-click="toggleMessage(historyMessage.id)" class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
</div>
<div class="im_message_body">
<div class="im_content_message_wrap" ng-if="historyMessage._ != 'messageService'">
<i class="icon icon-select-tick"></i>
<a ng-click="historyMessage.send()" ng-if="historyMessage.error">
<i class="icon-message-status icon-message-status-error" tooltip="Try again"></i>
</a>
<i class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-if="!historyMessage.error"></i>
<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"
/>
</a>
<div class="im_message_meta pull-right text-right">
<span class="im_message_date">{{historyMessage.date | dateOrTime}}</span>
</div>
<a class="im_message_author" ng-click="openUser(historyMessage.from_id)" ng-bind-html="historyMessage.fromUser.rFirstName"></a>
<div class="im_message_body">
<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._">
<a ng-switch-when="messageMediaPhoto" class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id)" style="width: {{historyMessage.media.photo.thumb.width}}px;">
<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}}"
/>
</a>
<a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;">
<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}}"
/>
<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="glyphicon glyphicon-facetime-video"></span>
</div>
</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 ng-switch-when="messageMediaDocument" class="im_message_document">
<a href="" ng-click="openDoc(historyMessage.media.document.id)" ng-if="!historyMessage.media.document.progress.enabled">
<i class="icon icon-document"></i>
<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)" style="width: {{historyMessage.media.photo.thumb.width}}px;">
<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}}"
/>
</a>
<i class="icon icon-document" ng-if="historyMessage.media.document.progress.enabled"></i>
<div class="im_message_document_info">
<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>
<a ng-switch-when="messageMediaVideo" class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id)" style="width: {{historyMessage.media.video.thumb.width}}px;">
<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}}"
/>
<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="glyphicon glyphicon-facetime-video"></span>
</div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
<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}}%">
<span class="sr-only">
{{historyMessage.media.document.progress.percent}}% Complete (success)
</span>
</a>
<div ng-switch-when="messageMediaDocument" class="im_message_document">
<a href="" ng-click="openDoc(historyMessage.media.document.id)" ng-if="!historyMessage.media.document.progress.enabled">
<i class="icon icon-document"></i>
</a>
<i class="icon icon-document" ng-if="historyMessage.media.document.progress.enabled"></i>
<div class="im_message_document_info">
<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="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}}%">
<span class="sr-only">
{{historyMessage.media.document.progress.percent}}% Complete (success)
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-switch-when="messageMediaAudio" class="im_message_document">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<i class="icon icon-audio"></i>
</a>
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
<div class="im_message_audio_info">
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
<span class="im_message_audio_name">
Voice message
</span>
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled">
{{historyMessage.media.audio.duration | duration}}
</span>
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled">
{{historyMessage.media.audio.progress | formatSizeProgress}}
</span>
</div>
<div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a>
</div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
<div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.audio.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.audio.progress.percent}}%">
<span class="sr-only">
{{historyMessage.media.audio.progress.percent}}% Complete (success)
</span>
<div ng-switch-when="messageMediaAudio" class="im_message_document">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<i class="icon icon-audio"></i>
</a>
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
<div class="im_message_audio_info">
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
<span class="im_message_audio_name">
Voice message
</span>
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled">
{{historyMessage.media.audio.duration | duration}}
</span>
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled">
{{historyMessage.media.audio.progress | formatSizeProgress}}
</span>
</div>
<div class="im_message_audio_actions" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
<a href="" ng-click="openAudio(historyMessage.media.audio.id)">Play</a>
</div>
<div class="im_message_download_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
<div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{historyMessage.media.audio.progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{historyMessage.media.audio.progress.percent}}%">
<span class="sr-only">
{{historyMessage.media.audio.progress.percent}}% Complete (success)
</span>
</div>
</div>
</div>
</div>
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
<source ng-src="{{historyMessage.media.audio.url}}" type="audio/mpeg" />
<embed hidden="true" autostart="true" loop="false" src="{{historyMessage.media.audio.url}}" />
</audio>
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
<source ng-src="{{historyMessage.media.audio.url}}" type="audio/mpeg" />
<embed hidden="true" autostart="true" loop="false" src="{{historyMessage.media.audio.url}}" />
</audio>
</div>
</div>
</div>
</div>
<a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
<i class="icon icon-geo-point"></i>
</a>
<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">
<img
class="im_message_contact_photo"
my-load-thumb
thumb="historyMessage.media.userPhoto"
/>
<a ng-switch-when="messageMediaGeo" my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
<i class="icon icon-geo-point"></i>
</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_phone">
{{historyMessage.media.phone_number}}
</div>
</div>
<div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}">
<i class="icon icon-{{historyMessage.media.type}}"></i>
<div class="im_message_document_info">
<div class="im_message_document_name_wrap">
<span class="im_message_document_name">
{{historyMessage.media.file_name}}
</span>
<span class="im_message_document_size" ng-if="historyMessage.media.progress">
{{historyMessage.media.progress | formatSizeProgress}}
</span>
<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">
<img
class="im_message_contact_photo"
my-load-thumb
thumb="historyMessage.media.userPhoto"
/>
</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_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}}%">
<span class="sr-only">
{{historyMessage.media.progress.percent}}% Complete (success)
</span>
<div class="im_message_contact_phone">
{{historyMessage.media.phone_number}}
</div>
</div>
<div ng-switch-when="messageMediaPending" class="im_message_upload_file im_message_upload_{{historyMessage.media.type}}">
<i class="icon icon-{{historyMessage.media.type}}"></i>
<div class="im_message_document_info">
<div class="im_message_document_name_wrap">
<span class="im_message_document_name">
{{historyMessage.media.file_name}}
</span>
<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}}%">
<span class="sr-only">
{{historyMessage.media.progress.percent}}% Complete (success)
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="im_message_text" ng-if="historyMessage.message.length" ng-bind-html="historyMessage.richMessage"></div>
</div>
<div class="im_message_text" ng-if="historyMessage.message.length" ng-bind-html="historyMessage.richMessage"></div>
</div>
</div>
</div>

2
app/partials/welcome.html

@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
<div class="welcome_box_wrap">
<div class="welcome_text">
<p>Welcome to an unofficial web-client of mobile <strong>Telegram</strong> messenger.</p>
<p>Is in alpha, which means it is still not 200% secure and functional.</p>
<p>It is an alpha, which means it is still not 200% secure and functional.</p>
<p>Visit <a target="_blank" href="https://telegram.org/">telegram.org</a> to learn more.</p>
</div>
<a href="#/login" class="btn btn-tg btn-block">Start Messaging</a>

Loading…
Cancel
Save