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

Added head typing, improved mobile attachments

master
Igor Zhukov 11 years ago
parent
91988aa087
commit
99a0a7509a
9 changed files with 289 additions and 90 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. 1
      app/css/app.css
  2. 194
      app/css/app_mobile.css
  3. 18
      app/js/controllers.js
  4. 13
      app/js/directives.js
  5. 62
      app/js/services.js
  6. 76
      app/partials/head.html
  7. 6
      app/partials/message_attach_audio.html
  8. 2
      app/partials/message_attach_document.html
  9. 7
      app/partials/video_modal.html

1
app/css/app.css
Unescape View File

@ -1686,6 +1686,7 @@ img.im_message_document_thumb { @@ -1686,6 +1686,7 @@ img.im_message_document_thumb {
padding-left: 2px;
}
.im_message_audio_info audio {
width: 100%;
height: 38px;
line-height: 38px;
}

194
app/css/app_mobile.css
Unescape View File

@ -130,7 +130,7 @@ html { @@ -130,7 +130,7 @@ html {
height: 18px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -15px -419px no-repeat;
background: url(../img/icons/IconsetW.png) -15px -418px no-repeat;
background-size: 42px 710px;
opacity: 0.8;
}
@ -158,9 +158,7 @@ html { @@ -158,9 +158,7 @@ html {
font-size: 13px;
height: 46px;
}
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover {
color: #b9cfe3;
}
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover,
.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
background-color: rgba(0,0,0,0.1);
}
@ -176,7 +174,7 @@ html { @@ -176,7 +174,7 @@ html {
white-space: nowrap;
}
.navbar-quick-back-title {
max-width: 130px;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
@ -225,7 +223,8 @@ html { @@ -225,7 +223,8 @@ html {
}
.navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title,
.navbar_offline .im_head_attach,
.navbar_offline .navbar-search-wrap {
.navbar_offline .navbar-search-wrap,
.navbar_offline .navbar-history-edit {
display: none;
}
@ -247,6 +246,33 @@ html { @@ -247,6 +246,33 @@ html {
}
.navbar_history_select .navbar-peer-wrap,
.navbar_history_select .navbar-toggle-wrap {
display: none;
}
.tg_page_head .navbar-quick-nav li.navbar-quick-right {
float: right;
}
.tg_page_head .navbar-quick-nav li.navbar-quick-left {
float: left;
}
.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-right > a,
.tg_page_head .navbar-inverse .navbar-quick-nav > .navbar-quick-left > a {
font-size: 15px;
color: #FFF;
padding: 14px 15px;
}
.tg_page_head .navbar-quick-nav li.navbar-quick-title {
position: static;
float: none;
color: #FFF;
font-size: 15px;
font-weight: bold;
padding: 14px 0;
text-align: center;
}
.login_form_wrap {
border-radius: 0;
max-width: auto;
@ -272,28 +298,131 @@ html { @@ -272,28 +298,131 @@ html {
}
.im_message_text,
.im_message_document {
/*float: left;*/
padding: 7px 10px;
border-radius: 3px;
background: #f1f1f1;
}
.im_history_selectable .im_message_outer_wrap:hover,
.im_message_selected {
background: #e1e9f0;
}
.im_message_out .im_message_text,
.im_message_out .im_message_document {
background: #e4ecf2;
/*float: right;*/
}
.im_message_selected .im_message_text,
.im_message_selected .im_message_document,
.im_message_selected .im_message_text a {
color: #FFF;
background: #497495;
}
.im_message_document {
padding: 5px;
width: 250px;
}
.im_message_audio,
.im_message_document {
position: relative;
}
.im_message_audio > a,
.im_message_document .icon-document,
.im_message_audio .icon-audio,
.im_message_document_thumb_wrap {
position: absolute;
}
.im_message_document_thumb_wrap {
background-color: transparent;
}
.im_message_audio_done i {
display: none;
}
.im_message_audio_info,
.im_message_document_info {
float: none;
margin-left: 48px;
width: auto;
min-height: 38px;
}
.im_message_document_thumbed .im_message_document_info {
margin-left: 110px;
}
.im_message_audio_name,
.im_message_audio_duration {
display: inline;
vertical-align: baseline;
line-height: 38px;
}
.im_message_audio_progress .im_message_audio_name,
.im_message_audio_progress .im_message_audio_duration, {
line-height: 18px;
}
.im_message_audio_done .im_message_audio_info {
margin-left: 0;
width: auto;
float: none;
}
.im_message_audio_actions,
.im_message_document_actions {
display: none;
}
.im_message_audio_player_wrap {
height: 38px;
line-height: 38px;
}
.im_message_document_size {
display: block;
padding-left: 0;
}
.im_message_document_thumbed .im_message_document_info {
min-height: 100px;
}
.im_message_document_info .cancelable_progress_wrap,
.im_message_audio_info .cancelable_progress_wrap {
margin-top: 4px;
}
.im_message_document_thumbed .im_message_document_name_wrap,
.im_message_document_thumbed .im_message_audio_name_wrap,
.im_message_document_name_wrap,
.im_message_audio_name_wrap {
width: auto;
}
.im_message_document_progress .im_message_document_size {
display: inline;
}
.im_message_document_progress .im_message_document_name {
max-width: 50%;
}
.im_message_document_progress.im_message_document_thumbed .im_message_document_name {
display: inline;
max-width: none;
}
.im_message_document_thumbed .im_message_document_name {
white-space: normal;
}
.im_message_document_thumbed .im_message_upload_progress_wrap,
.im_message_document_thumbed .im_message_download_progress_wrap {
width: 130px;
}
.im_message_document_thumbed .im_message_document_name {
max-width: 70px;
.img_gif_label,
.img_gif_size,
.im_message_video_duration {
font-size: 13px;
}
a.im_message_video_thumb {
margin-right: 0;
}
.im_message_video .im_message_document_info {
display: none;
}
.im_message_document_thumb_wrap {
position: absolute;
}
/*.im_message_document,
.im_message_audio,
@ -396,28 +525,43 @@ a.im_message_author { @@ -396,28 +525,43 @@ a.im_message_author {
.form-control {
font-size: 1.2em;
}
.im_history_typing {
padding: 0 15px 0 56px;
.im_history_typing_wrap {
display: none;
}
.im_history_panel_info_link {
display: none;
}
.im_edit_flush_link,
.im_edit_cancel_link,
.im_edit_cancel_link {
display: none;
}
.im_edit_delete_btn,
.im_edit_forward_btn {
padding-left: 5px;
padding-right: 5px;
margin: 6px 4px;
background: none !important;
border: 0 !important;
width: 50%;
margin: 0;
font-size: 15px;
padding: 13px 0;
}
.im_edit_forward_btn {
color: #497495 !important;
}
.im_edit_delete_btn {
color: #c3584d !important;
}
.im_edit_delete_btn strong,
.im_edit_forward_btn strong {
font-weight: normal;
}
.im_edit_panel_border {
margin: 0 18px 22px 3px;
display: none;
}
.im_edit_panel_wrap {
margin: 0 5px;
padding-bottom: 18px;
padding: 5px 0;
margin: 0;
}
.im_history_col .nano > .nano-pane {
top: 3px;
@ -745,14 +889,6 @@ a.im_dialog_selected .im_dialog_unread { @@ -745,14 +889,6 @@ a.im_dialog_selected .im_dialog_unread {
margin-top: -267px;
}
.im_edit_panel_wrap {
padding-top: 2px;
padding-bottom: 4px;
}
.im_edit_panel_border {
margin-bottom: 3px;
}
.im_head_attach {
display: block;
float: right;

18
app/js/controllers.js
Unescape View File

@ -305,15 +305,15 @@ angular.module('myApp.controllers', []) @@ -305,15 +305,15 @@ angular.module('myApp.controllers', [])
$scope.toggleEdit = function () {
$scope.$broadcast('history_edit_toggle');
};
$scope.returnToRecent = function () {
$scope.$broadcast('history_return_recent');
$scope.selectedFlush = function () {
$scope.$broadcast('history_edit_flush');
};
$scope.toggleMedia = function (mediaType) {
$scope.$broadcast('history_media_toggle', mediaType);
};
$scope.returnToRecent = function () {
$scope.$broadcast('history_return_recent');
};
$scope.toggleSearch = function () {
$scope.$broadcast('dialogs_search_toggle');
};
@ -653,9 +653,12 @@ angular.module('myApp.controllers', []) @@ -653,9 +653,12 @@ angular.module('myApp.controllers', [])
$scope.returnToRecent = returnToRecent;
$scope.$on('history_edit_toggle', toggleEdit);
$scope.$on('history_edit_flush', selectedFlush);
$scope.$on('history_media_toggle', function (e, mediaType) {
toggleMedia(mediaType);
});
$scope.$on('history_return_recent', returnToRecent);
var peerID,
@ -1262,6 +1265,7 @@ angular.module('myApp.controllers', []) @@ -1262,6 +1265,7 @@ angular.module('myApp.controllers', [])
if (Config.Navigator.mobile) {
$scope.canForward = true;
$scope.canDelete = true;
return;
}
@ -1512,6 +1516,10 @@ angular.module('myApp.controllers', []) @@ -1512,6 +1516,10 @@ angular.module('myApp.controllers', [])
});
};
$scope.download = function () {
$rootScope.downloadVideo($scope.videoID)
};
$scope.$on('history_delete', function (e, historyUpdate) {
if (historyUpdate.msgs[$scope.messageID]) {
$modalInstance.dismiss();

13
app/js/directives.js
Unescape View File

@ -1564,12 +1564,15 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -1564,12 +1564,15 @@ angular.module('myApp.directives', ['myApp.filters'])
var userID = $scope.$eval(attrs.myUserLink),
user = AppUsersManager.getUser(userID);
element
.on('click', function () {
$rootScope.openUser(userID);
})
.html(user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'].valueOf());
element.html(
(user[attrs.short && $scope.$eval(attrs.short) ? 'rFirstName' : 'rFullName'] || '').valueOf()
);
if (element[0].tagName == 'A') {
element.on('click', function () {
$rootScope.openUser(userID);
});
}
if (attrs.color && $scope.$eval(attrs.color)) {
element.addClass('user_color_' + user.num);
}

62
app/js/services.js
Unescape View File

@ -2115,7 +2115,9 @@ angular.module('myApp.services', []) @@ -2115,7 +2115,9 @@ angular.module('myApp.services', [])
})
.service('AppPhotosManager', function ($modal, $window, $timeout, $rootScope, MtpApiManager, MtpApiFileManager, AppUsersManager, FileManager) {
var photos = {};
var photos = {},
windowW = $(window).width(),
windowH = $(window).height();
function savePhoto (apiPhoto) {
photos[apiPhoto.id] = apiPhoto;
@ -2200,8 +2202,8 @@ angular.module('myApp.services', []) @@ -2200,8 +2202,8 @@ angular.module('myApp.services', [])
function wrapForHistory (photoID) {
var photo = angular.copy(photos[photoID]) || {_: 'photoEmpty'},
width = 260,
height = 260,
width = Math.min(windowW - 80, 260),
height = Math.min(windowH - 100, 260),
thumbPhotoSize = choosePhotoSize(photo, width, height),
thumb = {
placeholder: 'img/placeholders/PhotoThumbConversation.gif',
@ -2211,10 +2213,15 @@ angular.module('myApp.services', []) @@ -2211,10 +2213,15 @@ angular.module('myApp.services', [])
// console.log('chosen photo size', photoID, thumbPhotoSize);
if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
if (thumbPhotoSize.w > thumbPhotoSize.h) {
if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
} else {
}
else {
thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
if (thumb.width > width) {
thumb.height = parseInt(thumb.height * width / thumb.width);
thumb.width = width;
}
}
thumb.location = thumbPhotoSize.location;
@ -2349,8 +2356,10 @@ angular.module('myApp.services', []) @@ -2349,8 +2356,10 @@ angular.module('myApp.services', [])
.service('AppVideoManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, AppUsersManager, FileManager) {
var videos = {};
var videosForHistory = {};
var videos = {},
videosForHistory = {},
windowW = $(window).width(),
windowH = $(window).height();
function saveVideo (apiVideo) {
videos[apiVideo.id] = apiVideo;
@ -2371,8 +2380,8 @@ angular.module('myApp.services', []) @@ -2371,8 +2380,8 @@ angular.module('myApp.services', [])
}
var video = angular.copy(videos[videoID]),
width = 200,
height = 200,
width = Math.min(windowW - 80, windowW <= 479 ? 260 : 200),
height = Math.min(windowH - 100, windowW <= 479 ? 260 : 200),
thumbPhotoSize = video.thumb,
thumb = {
placeholder: 'img/placeholders/VideoThumbConversation.gif',
@ -2381,10 +2390,15 @@ angular.module('myApp.services', []) @@ -2381,10 +2390,15 @@ angular.module('myApp.services', [])
};
if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
if (thumbPhotoSize.w > thumbPhotoSize.h) {
if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
} else {
}
else {
thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
if (thumb.width > width) {
thumb.height = parseInt(thumb.height * width / thumb.width);
thumb.width = width;
}
}
thumb.location = thumbPhotoSize.location;
@ -2513,8 +2527,10 @@ angular.module('myApp.services', []) @@ -2513,8 +2527,10 @@ angular.module('myApp.services', [])
})
.service('AppDocsManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, FileManager) {
var docs = {};
var docsForHistory = {};
var docs = {},
docsForHistory = {},
windowW = $(window).width(),
windowH = $(window).height();
function saveDoc (apiDoc) {
docs[apiDoc.id] = apiDoc;
@ -2536,20 +2552,25 @@ angular.module('myApp.services', []) @@ -2536,20 +2552,25 @@ angular.module('myApp.services', [])
var doc = angular.copy(docs[docID]),
isGif = doc.mime_type == 'image/gif',
width = isGif ? 260 : 100,
height = isGif ? 260 : 100,
width = isGif ? Math.min(windowW - 80, 260) : 100,
height = isGif ? Math.min(windowH - 100, 260) : 100,
thumbPhotoSize = doc.thumb,
thumb = {
// placeholder: 'img/placeholders/DocThumbConversation.jpg',
width: width,
height: height
};
if (thumbPhotoSize && thumbPhotoSize._ != 'photoSizeEmpty') {
if (thumbPhotoSize.w > thumbPhotoSize.h) {
if ((thumbPhotoSize.w / thumbPhotoSize.h) > (width / height)) {
thumb.height = parseInt(thumbPhotoSize.h * width / thumbPhotoSize.w);
} else {
}
else {
thumb.width = parseInt(thumbPhotoSize.w * height / thumbPhotoSize.h);
if (thumb.width > width) {
thumb.height = parseInt(thumb.height * width / thumb.width);
thumb.width = width;
}
}
thumb.location = thumbPhotoSize.location;
@ -3257,7 +3278,10 @@ angular.module('myApp.services', []) @@ -3257,7 +3278,10 @@ angular.module('myApp.services', [])
var time = tsNow();
if (!notificationsCount || time % 2000 > 1000) {
document.title = titleBackup;
$('link[rel="icon"]').replaceWith(faviconBackupEl);
var curFav = $('link[rel="icon"]');
if (curFav.attr('href').indexOf('favicon_unread') != -1) {
curFav.replaceWith(faviconBackupEl);
}
} else {
document.title = notificationsCount > 1
? (notificationsCount + ' notifications')

76
app/partials/head.html
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<div class="tg_page_head">
<div class="navbar navbar-static-top navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline}">
<div class="navbar navbar-static-top navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline, navbar_history_select: historyState.selectActions}">
<div class="container">
<a class="navbar-peer-wrap" ng-click="showPeerInfo()">
@ -43,6 +43,7 @@ @@ -43,6 +43,7 @@
<div class="navbar-header">
<a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a>
<div ng-show="curDialog.peer" ng-switch="curDialog.peer &amp;&amp; historyFilter.mediaType.length > 0">
<ul ng-switch-when="true" class="nav navbar-nav navbar-quick-nav">
<li>
@ -57,30 +58,55 @@ @@ -57,30 +58,55 @@
</a>
</li>
</ul>
<ul ng-switch-default class="nav navbar-nav navbar-quick-nav" ng-switch="historyPeer.id > 0">
<li ng-switch-when="true">
<a href="#/im" class="navbar-quick-profile-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rFullName"></h4>
<small ng-bind="historyPeer.data | userStatus"></small>
</div>
</a>
</li>
<li ng-switch-default>
<a href="#/im" class="navbar-quick-group-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rTitle"></h4>
<small>
<ng-pluralize count="historyPeer.data.participants_count"
when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
</ng-pluralize>
</small>
</div>
</a>
</li>
</ul>
<div ng-switch-default ng-switch="historyState.selectActions">
<ul ng-switch-when="true" class="nav navbar-navbar navbar-quick-nav navbar-history-edit">
<li class="navbar-quick-right">
<a ng-click="toggleEdit()">Cancel</a>
</li>
<li class="navbar-quick-left">
<a ng-click="selectedFlush()">Clear All</a>
</li>
<li class="navbar-quick-title">Edit</li>
</ul>
<ul ng-switch-default class="nav navbar-nav navbar-quick-nav" ng-switch="historyPeer.id > 0">
<li ng-switch-when="true">
<a href="#/im" class="navbar-quick-profile-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rFullName"></h4>
<small ng-switch="historyState.typing.length">
<span ng-switch-when="1">
typing<span my-loading-dots></span>
</span>
<span ng-switch-default ng-bind="historyPeer.data | userStatus"></span>
</small>
</div>
</a>
</li>
<li ng-switch-default>
<a href="#/im" class="navbar-quick-group-back">
<i class="icon icon-back"></i>
<div class="navbar-quick-back-title">
<h4 ng-bind-html="historyPeer.data.rTitle"></h4>
<small ng-switch="historyState.typing.length">
<ng-pluralize ng-switch-when="0" count="historyPeer.data.participants_count"
when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
</ng-pluralize>
<span ng-switch-when="1">
<span my-user-link="historyState.typing[0]" short="true"></span> is typing<span my-loading-dots></span>
</span>
<span ng-switch-when="2">
<span my-user-link="historyState.typing[0]" short="true"></span>, <span my-user-link="historyState.typing[1]" short="true"></span><span my-loading-dots></span>
</span>
<span ng-switch-default>
<span my-user-link="historyState.typing[0]" short="true"></span>+{{historyState.typing.length - 1}}<span my-loading-dots></span>
</span>
</small>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>

6
app/partials/message_attach_audio.html
Unescape View File

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
<div class="im_message_document">
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}">
<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>
@ -25,8 +25,8 @@ @@ -25,8 +25,8 @@
</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/ogg" />
<embed ng-src="::historyMessage.media.audio.url" hidden="true" autostart="true" loop="false" />
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" />
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" />
</audio>
</div>
</div>

2
app/partials/message_attach_document.html
Unescape View File

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
<div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
<div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb}">
<div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}">
<a href="" ng-click="downloadDoc(historyMessage.media.document.id, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
<i class="icon icon-document" ng-if="::!historyMessage.media.document.thumb"></i>

7
app/partials/video_modal.html
Unescape View File

@ -5,9 +5,10 @@ @@ -5,9 +5,10 @@
<div class="video_modal_image_wrap" my-load-video video="video"></div>
<div class="media_meta_wrap clearfix">
<div class="media_modal_actions pull-right" ng-if="messageID">
<a href="" class="media_modal_action_link" ng-click="forward()">Forward</a>
<a href="" class="media_modal_action_link" ng-click="delete()">Delete</a>
<div class="media_modal_actions pull-right">
<a href="" class="media_modal_action_link" ng-click="download()">Download</a>
<a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()">Forward</a>
<a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()">Delete</a>
</div>
<p class="media_modal_info">

Write Preview
Loading…
Cancel
Save