Added new media attach button, new styles

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: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat;
-  background-size: 15px 14px;
+  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-left: 262px;
-  margin-top: -25px;
+  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: url(../img/icons/IconsetW.png) -12px -68px no-repeat;
-  background-size: 19px 22px;
+  background-size: 42px 280px;
-  opacity: 0.6;
+  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;
+  width: 23px;
-  height: 22px;
+  height: 23px;
   vertical-align: text-top;
-  background: url(../img/icons/Smile_2x.png) 0 0 no-repeat;
+  background: url(../img/icons/IconsetW.png) -10px -4px no-repeat;
-  background-size: 22px 22px;
+  background-size: 42px 280px;
-  opacity: 0.6;
+  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: url(../img/icons/IconsetW.png) -14px -268px no-repeat;
-  background-size: 14px 7px;
+  background-size: 42px 280px;
   width: 14px;
   height: 7px;
   margin: 0 83px;

app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
-  <link rel="stylesheet" href="css/app.css?12"/>
+  <link rel="stylesheet" href="css/app.css?13"/>
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
 
   <meta property="og:title" content="Webogram">
@@ -51,11 +51,11 @@
   <script type="text/javascript" src="js/lib/mtproto.js?17"></script>
 
   <script type="text/javascript" src="js/util.js"></script>
-  <script type="text/javascript" src="js/app.js?9"></script>
+  <script type="text/javascript" src="js/app.js?10"></script>
-  <script type="text/javascript" src="js/services.js?12"></script>
+  <script type="text/javascript" src="js/services.js?13"></script>
-  <script type="text/javascript" src="js/controllers.js?18"></script>
+  <script type="text/javascript" src="js/controllers.js?19"></script>
   <script type="text/javascript" src="js/filters.js?3"></script>
-  <script type="text/javascript" src="js/directives.js?10"></script>
+  <script type="text/javascript" src="js/directives.js?11"></script>
 
 </body>
 </html>

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: '/'});
 
 }]);

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');
       }
     }

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 () {

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) {
+          switch (attachType) {
-            inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile};
+            case 'photo':
-          } else {
+              inputMedia = {_: 'inputMediaUploadedPhoto', file: inputFile};
-            inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type};
+              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,

app/partials/im.html

@@ -7,9 +7,7 @@
     <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController">
       <div class="im_dialogs_search">
         <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="searchQuery"/>
-        <a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length">
+        <a class="im_dialogs_search_clear" ng-click="searchQuery = ''" ng-show="searchQuery.length"></a>
-          <span class=" glyphicon glyphicon-remove"></span>
-        </a>
       </div>
       <div my-dialogs-list class="im_dialogs_col">
         <div class="im_dialogs_wrap nano">
@@ -117,6 +115,11 @@
                 <i class="icon icon-paperclip"></i>
               </div>
 
+              <div class="im_media_attach pull-right">
+                <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/x-png, image/png, image/gif, image/jpeg, video/*" />
+                <i class="icon icon-camera"></i>
+              </div>
+
               <button type="submit" class="btn btn-tg im_submit">Send</button>
             </form>
           </div>