From d4d41ea8be674da59f5984e5980e9c56f082876d Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Fri, 31 Jan 2014 19:05:47 +0400 Subject: [PATCH] Added new media attach button, new styles --- app/css/app.css | 106 ++++++++++++++++++++++++++++--------- app/img/icons/IconsetW.png | Bin 0 -> 6884 bytes app/index.html | 10 ++-- app/js/app.js | 2 +- app/js/controllers.js | 4 +- app/js/directives.js | 11 ++-- app/js/services.js | 31 ++++++++--- app/partials/im.html | 9 ++-- 8 files changed, 128 insertions(+), 45 deletions(-) create mode 100644 app/img/icons/IconsetW.png 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 0000000000000000000000000000000000000000..2c33d55f1cc640ee7e14b1c833eb58ba571af042 GIT binary patch literal 6884 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 QsQ@~f4>jK2w}1YB02~nz_W%F@ literal 0 HcmV?d00001 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 @@
+
+ + +
+