diff --git a/app/css/app.css b/app/css/app.css index 0dceacfc..a3164ac5 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -20,9 +20,12 @@ body { } body.non_osx, .non_osx .font-light { - font: 12px/18px Verdana, Tahoma, sans-serif, Arial, Helvetica; + font: 13px/18px Tahoma, sans-serif, Arial, Helvetica; font-weight: normal; } +.non_osx h4 { + font-size: 17px; +} a { color: #3a6d99; @@ -387,8 +390,8 @@ fieldset[disabled] .btn-tg.active { .im_dialogs_search_field { font-size: 12px; line-height: normal; - background: #F2F2F2 url(../img/icons/Search_2x.png) 7px 9px no-repeat; - background-size: 15px 14px; + background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat; + background-size: 42px 280px; border: 1px solid #F2F2F2; border-radius: 3px; padding: 6px 6px 6px 30px; @@ -402,10 +405,18 @@ fieldset[disabled] .btn-tg.active { .im_dialogs_search_clear { position: absolute; - margin-left: 260px; - margin-top: -25px; + margin-left: 262px; + margin-top: -23px; color: #999; - font-size: 15px; + width: 13px; + height: 13px; + vertical-align: text-top; + background: url(../img/icons/IconsetW.png) -15px -192px no-repeat; + background-size: 42px 280px; + opacity: 0.6; +} +.im_dialogs_search_clear:hover { + opacity: 1; } @@ -673,6 +684,9 @@ a.im_dialog:hover .im_dialog_message_text { color: #3a6d99; font-weight: bold; } +.non_osx .im_message_author { + font-size: 12px; +} .im_message_from_photo, .im_message_contact_photo { @@ -690,6 +704,9 @@ a.im_message_contact_photo { color: #3C6E97; font-weight: bold; } +.non_osx .im_message_contact_name { + font-size: 12px; +} a.im_message_photo_thumb, a.im_message_video_thumb { display: block; @@ -763,8 +780,9 @@ div.im_message_video_thumb { width: 38px; height: 38px; vertical-align: text-top; - background: #F2F2F2 url(../img/icons/DocGrey_2x.png) 8px 10px no-repeat; - background-size: 20px 20px; + + background: #F2F2F2 url(../img/icons/IconsetW.png) -2px -229px no-repeat; + background-size: 42px 280px; border-radius: 3px; margin-right: 10px; } @@ -903,7 +921,7 @@ div.im_message_body { } div.im_message_fwd_header { - font-weight: bold; + color: #808080; } .im_message_text { @@ -976,30 +994,31 @@ textarea.im_message_field { padding: 0 2px; width: 23px; - height: 23px; + height: 24px; margin-top: 4px; + margin-left: 17px; } .icon-paperclip { display: inline-block; width: 19px; - height: 22px; + height: 23px; vertical-align: text-top; - background: url(../img/icons/Attach_2x.png) 0 0 no-repeat; - background-size: 19px 22px; - opacity: 0.6; + background: url(../img/icons/IconsetW.png) -12px -68px no-repeat; + background-size: 42px 280px; + opacity: 0.8; } .im_attach:hover .icon-paperclip { opacity: 1; } .im_attach:active .icon-paperclip { - background-image: url(../img/icons/Attach_pressed_2x.png); + background-position: -12px -100px; opacity: 1; } .im_emoji_btn { cursor: pointer; - padding: 0 2px; + padding: 0; width: 23px; height: 23px; @@ -1008,23 +1027,24 @@ textarea.im_message_field { } .icon-emoji { display: inline-block; - width: 22px; - height: 22px; + width: 23px; + height: 23px; vertical-align: text-top; - background: url(../img/icons/Smile_2x.png) 0 0 no-repeat; - background-size: 22px 22px; - opacity: 0.6; + background: url(../img/icons/IconsetW.png) -10px -4px no-repeat; + background-size: 42px 280px; + opacity: 0.8; } .im_emoji_btn:hover .icon-emoji { opacity: 1; } .im_emoji_btn:active .icon-emoji, .im_emoji_btn.on .icon-emoji { - background-image: url(../img/icons/Smile_pressed_2x.png); + background-position: -10px -36px; opacity: 1; } -.im_attach_input { +.im_attach_input, +.im_media_attach_input { cursor: pointer; font-size: 72px !important; /*visibility: hidden;*/ @@ -1037,6 +1057,36 @@ textarea.im_message_field { right: 0; } + +.im_media_attach { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + padding: 0; + + width: 24px; + height: 22px; + margin-top: 4px; +} + +.icon-camera { + display: inline-block; + width: 25px; + height: 21px; + vertical-align: text-top; + background: url(../img/icons/IconsetW.png) -9px -132px no-repeat; + background-size: 42px 280px; + opacity: 0.8; +} +.im_media_attach:hover .icon-camera { + opacity: 1; +} +.im_media_attach:active .icon-camera { + background-position: -9px -162px; + opacity: 1; +} + .im_panel_peer_photo, .im_panel_own_photo { width: 50px; @@ -1096,6 +1146,9 @@ img.img_fullsize { .media_modal_author { font-weight: bold; } +.non_osx .media_modal_author { + font-size: 12px; +} .user_modal_window .modal-dialog { padding-top: 150px; @@ -1167,6 +1220,9 @@ img.img_fullsize { font-weight: bold; margin: 1px 0 2px; } +.non_osx .chat_modal_participant_name { + font-size: 12px; +} .chat_modal_participant_status { color: #999; } @@ -1263,8 +1319,8 @@ img.img_fullsize { } .emoji-menu-tail { - background: url(../img/icons/Arrow_2x.png) 0 0 no-repeat; - background-size: 14px 7px; + background: url(../img/icons/IconsetW.png) -14px -268px no-repeat; + background-size: 42px 280px; width: 14px; height: 7px; margin: 0 83px; diff --git a/app/img/icons/IconsetW.png b/app/img/icons/IconsetW.png new file mode 100644 index 00000000..2c33d55f Binary files /dev/null and b/app/img/icons/IconsetW.png differ diff --git a/app/index.html b/app/index.html index 6218ea59..96fd8bf5 100644 --- a/app/index.html +++ b/app/index.html @@ -7,7 +7,7 @@ - + @@ -51,11 +51,11 @@ - - - + + + - + diff --git a/app/js/app.js b/app/js/app.js index 4579a37b..e152cff9 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -55,7 +55,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc // $locationProvider.html5Mode(true); $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'}); $routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'}); - $routeProvider.when('/im', {templateUrl: 'partials/im.html?6', controller: 'AppIMController', reloadOnSearch: false}); + $routeProvider.when('/im', {templateUrl: 'partials/im.html?7', controller: 'AppIMController', reloadOnSearch: false}); $routeProvider.otherwise({redirectTo: '/'}); }]); diff --git a/app/js/controllers.js b/app/js/controllers.js index d8401533..3867eb91 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -530,7 +530,9 @@ angular.module('myApp.controllers', []) } for (var i = 0; i < newVal.length; i++) { - AppMessagesManager.sendFile($scope.curDialog.peerID, newVal[i]); + AppMessagesManager.sendFile($scope.curDialog.peerID, newVal[i], { + isMedia: $scope.draftMessage.isMedia + }); $scope.$broadcast('ui_message_send'); } } diff --git a/app/js/directives.js b/app/js/directives.js index 3fd4b8c2..61f7ba35 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -250,7 +250,7 @@ angular.module('myApp.directives', ['myApp.filters']) function link (scope, element, attrs) { var messageField = $('textarea', element)[0], - fileSelect = $('input', element)[0], + fileSelects = $('input', element), dropbox = $('.im_send_dropbox_wrap', element)[0], emojiButton = $('.im_emoji_btn', element)[0], editorElement = messageField, @@ -268,12 +268,14 @@ angular.module('myApp.directives', ['myApp.filters']) // $(emojiMenu.firstChild).addClass('nano').nanoScroller({preventPageScrolling: true, tabIndex: -1}); - $(fileSelect).on('change', function () { + fileSelects.on('change', function () { + var self = this; scope.$apply(function () { - scope.draftMessage.files = Array.prototype.slice.call(fileSelect.files); + scope.draftMessage.files = Array.prototype.slice.call(self.files); + scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input'); setTimeout(function () { try { - fileSelect.value = ''; + self.value = ''; } catch (e) {}; }, 1000); }); @@ -358,6 +360,7 @@ angular.module('myApp.directives', ['myApp.filters']) if (e.type == 'drop') { scope.$apply(function () { scope.draftMessage.files = Array.prototype.slice.call(e.originalEvent.dataTransfer.files); + scope.draftMessage.isMedia = false; }); } dragTimeout = setTimeout(function () { diff --git a/app/js/services.js b/app/js/services.js index 3dd4bfe0..e345daea 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -717,12 +717,23 @@ angular.module('myApp.services', []) }; function sendFile(peerID, file, options) { + options = options || {}; var messageID = tempID--, randomID = [nextRandomInt(0xFFFFFFFF), nextRandomInt(0xFFFFFFFF)], randomIDS = bigint(randomID[0]).shiftLeft(32).add(bigint(randomID[1])).toString(), historyStorage = historiesStorage[peerID], inputPeer = AppPeersManager.getInputPeerByID(peerID), - isPhoto = file.type == 'image/jpeg' && file.size <= 5242880; // 5Mb + attachType; + + if (!options.isMedia) { + attachType = 'doc'; + } else if (['image/jpeg', 'image/gif', 'image/png', 'image/bmp'].indexOf(file.type) >= 0) { + attachType = 'photo'; + } else if (file.type.substr(0, 6) == 'video/') { + attachType = 'video'; + } else { + attachType = 'doc'; + } if (historyStorage === undefined) { historyStorage = historiesStorage[peerID] = {count: null, history: [], pending: []}; @@ -731,7 +742,7 @@ angular.module('myApp.services', []) MtpApiManager.getUserID().then(function (fromID) { var media = { _: 'messageMediaPending', - type: isPhoto ? 'photo' : 'doc', + type: attachType, file_name: file.name, size: file.size, progress: {percent: 1, total: file.size} @@ -754,10 +765,18 @@ angular.module('myApp.services', []) message.send = function () { MtpApiFileManager.uploadFile(file).then(function (inputFile) { var inputMedia; - if (isPhoto) { - inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile}; - } else { - inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type}; + switch (attachType) { + case 'photo': + inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile}; + break; + + case 'video': + inputMedia = {_: 'inputMediaUploadedVideo', file: inputFile, duration: 0, w: 0, h: 0}; + break; + + case 'doc': + default: + inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type}; } MtpApiManager.invokeApi('messages.sendMedia', { peer: inputPeer, diff --git a/app/partials/im.html b/app/partials/im.html index 99d6dcbe..e9c481a6 100644 --- a/app/partials/im.html +++ b/app/partials/im.html @@ -7,9 +7,7 @@
@@ -117,6 +115,11 @@
+
+ + +
+