merged with master

css/app.css

@@ -187,22 +187,6 @@ fieldset[disabled] .btn-tg.active {
 }
 
 
-
-
-
-.icon-back {
-  display: inline-block;
-  width: 10px;
-  height: 18px;
-  vertical-align: text-top;
-
-  background: url(../img/icons/IconsetW.png?1) -15px -419px no-repeat;
-  background-size: 42px 460px;
-}
-.is_1x .icon-back {
-  background-image: url(../img/icons/IconsetW_1x.png?2);
-}
-
 .tg_page_head .navbar > .container .navbar-brand:hover {
   opacity: 1;
 }
@@ -241,6 +225,23 @@ fieldset[disabled] .btn-tg.active {
   padding-top: 15px;
   padding-bottom: 15px;
 }
+.icon-back {
+  display: inline-block;
+  width: 10px;
+  height: 18px;
+  vertical-align: text-top;
+
+  background: url(../img/icons/IconsetW.png?1) -15px -419px no-repeat;
+  background-size: 42px 560px;
+  opacity: 0.6;
+}
+.is_1x .icon-back {
+  background-image: url(../img/icons/IconsetW_1x.png?2);
+}
+.tg_page_head .navbar-quick-nav a:hover .icon-back {
+  opacity: 1;
+}
+
 
 .tg_progress {
   height: 12px;
@@ -486,7 +487,7 @@ fieldset[disabled] .btn-tg.active {
   font-size: 12px;
   line-height: normal;
   background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   border: 1px solid #F2F2F2;
   border-radius: 3px;
   padding: 6px 20px 6px 30px;
@@ -510,7 +511,7 @@ fieldset[disabled] .btn-tg.active {
   height: 13px;
   vertical-align: text-top;
   background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   opacity: 0.6;
 }
 .is_1x .im_dialogs_search_clear {
@@ -709,6 +710,7 @@ a.im_dialog:hover .im_dialog_date {
 
   position: relative;
   z-index: 2;
+  min-height: 44px;
 }
 .im_history_panel {
   padding: 10px 4px 0;
@@ -762,7 +764,7 @@ a.im_dialog:hover .im_dialog_date {
   margin-left: 6px;
 
   background: url(../img/icons/IconsetW.png?1) -17px -444px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
 }
 .is_1x .icon-caret {
   background-image: url(../img/icons/IconsetW_1x.png?2);
@@ -961,7 +963,7 @@ div.im_message_video_thumb {
   height: 19px;
 
   background: url(../img/icons/IconsetW.png?1) -14px -389px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
 }
 .is_1x .icon-geo-point {
   background-image: url(../img/icons/IconsetW_1x.png?2);
@@ -989,7 +991,7 @@ div.im_message_video_thumb {
   vertical-align: text-top;
 
   background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -229px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   border-radius: 3px;
   margin-right: 10px;
 }
@@ -1041,7 +1043,7 @@ div.im_message_video_thumb {
   vertical-align: text-top;
 
   background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -277px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   border-radius: 3px;
   margin-right: 10px;
 }
@@ -1206,16 +1208,37 @@ span.emoji {
   *display: inline;
   height: 18px;
   width: 18px;
-  background-size: 18px;
   background-repeat: no-repeat;
   text-indent: -9999px;
 }
 
+/* widths and heights calculated according to spritesheet dimensions and icon size */
+.emoji-spritesheet-0 {
+  background-size: 486px 126px;
+  background-image: url('../img/emojisprite_0.png');
+}
+.emoji-spritesheet-1 {
+  background-size: 522px 72px;
+  background-image: url('../img/emojisprite_1.png');
+}
+.emoji-spritesheet-2 {
+  background-size: 594px 126px;
+  background-image: url('../img/emojisprite_2.png');
+}
+.emoji-spritesheet-3 {
+  background-size: 612px 54px;
+  background-image: url('../img/emojisprite_3.png');
+}
+.emoji-spritesheet-4 {
+  background-size: 612px 108px;
+  background-image: url('../img/emojisprite_4.png');
+}
+
 .im_history_not_selected {
   text-align: center;
   color: #999;
   font-size: 1.5em;
-  padding: 200px 50px 0;
+  padding: 200px 50px 200px;
 }
 
 .im_send_panel_wrap {
@@ -1279,7 +1302,7 @@ textarea.im_message_field {
   height: 23px;
   vertical-align: text-top;
   background: url(../img/icons/IconsetW.png?1) -12px -68px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   opacity: 0.8;
 }
 .is_1x .icon-paperclip {
@@ -1307,7 +1330,7 @@ textarea.im_message_field {
   height: 23px;
   vertical-align: text-top;
   background: url(../img/icons/IconsetW.png?1) -10px -4px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   opacity: 0.8;
 }
 .is_1x .icon-emoji {
@@ -1357,7 +1380,7 @@ textarea.im_message_field {
   height: 21px;
   vertical-align: text-top;
   background: url(../img/icons/IconsetW.png?1) -9px -132px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   opacity: 0.8;
 }
 .is_1x .icon-camera {
@@ -1445,6 +1468,7 @@ img.img_fullsize {
 .settings_profile_photo_wrap {
   width: 120px;
   margin-right: 22px;
+  margin-bottom: 15px;
 }
 .settings_profile_photo {
   position: relative;
@@ -1771,7 +1795,7 @@ img.img_fullsize {
 
 .emoji-menu-tail {
   background: url(../img/icons/IconsetW.png?1) -14px -268px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   width: 14px;
   height: 7px;
   margin: 0 83px;
@@ -1849,8 +1873,8 @@ img.img_fullsize {
 .settings_profile_first_name,
 .settings_profile_last_name {
   width: 180px;
-  margin-bottom: 10px;
   float: left;
+  margin-bottom: 0;
 }
 .settings_profile_first_name label,
 .settings_profile_last_name label {
@@ -1858,18 +1882,23 @@ img.img_fullsize {
 }
 .settings_profile_first_name {
   margin-right: 22px;
+  margin-bottom: 10px;
 }
 .settings_profile_last_name {
   margin-right: 10px;
+  margin-bottom: 15px;
 }
 .settings_profile_save {
-  padding-top: 23px;
+  padding-top: 21px;
   float: left;
 }
 .settings_profile_save_btn {
   width: 50px;
 }
 
+.settings_profile_edit_form {
+  margin-bottom: 0;
+}
 .settings_profile_edit_form input {
   font-size: 12px;
   line-height: normal;
@@ -1914,7 +1943,7 @@ img.img_fullsize {
   font-size: 12px;
   line-height: normal;
   background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   border: 1px solid #F2F2F2;
   border-radius: 3px;
   padding: 6px 20px 6px 30px;
@@ -1938,7 +1967,7 @@ img.img_fullsize {
   height: 13px;
   vertical-align: text-top;
   background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
   opacity: 0.6;
 }
 .is_1x .contacts_modal_search_clear {
@@ -2014,22 +2043,28 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   top: 22px;
   width: 17px;
   height: 15px;
-  /*margin: 10px 0 0 -75px;*/
-  background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat;
-  background-size: 42px 460px;
+  background: url(../img/icons/IconsetW.png?1) -13px -366px no-repeat;
+  background-size: 42px 560px;
+  opacity: 0.5;
 }
 .is_1x .icon-contact-tick {
   background-image: url(../img/icons/IconsetW_1x.png?2);
 }
-
-.contacts_modal_members_list .active .icon-contact-tick,
 .contacts_modal_members_list a.contacts_modal_contact:hover .icon-contact-tick {
-  background-position: -13px -367px;
-  opacity: 0.5;
+  background-position: -13px -366px;
+  opacity: 1;
 }
 .contacts_modal_members_list .active .icon-contact-tick {
-  opacity: 1 !important;
+  background-position: -13px -458px !important;
+  opacity: 1;
+}
+.contacts_modal_members_list .disabled {
+  pointer-events: none;
 }
+.contacts_modal_members_list .disabled .icon-contact-tick {
+  display: none;
+}
+
 
 .contacts_modal_panel {
   padding-top: 10px;
@@ -2043,6 +2078,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 
 /* Messages edit panel */
 .im_edit_panel_wrap {
+  display: none;
   border-top: 1px solid #EEE;
   padding: 5px 5px;
 }
@@ -2089,7 +2125,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   height: 15px;
 
   background: url(../img/icons/IconsetW.png?1) -15px -319px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
 }
 .is_1x .icon-delete {
   background-image: url(../img/icons/IconsetW_1x.png?2);
@@ -2133,7 +2169,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   height: 15px;
   margin: 10px 0 0 -75px;
   background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat;
-  background-size: 42px 460px;
+  background-size: 42px 560px;
 }
 .is_1x .icon-select-tick {
   background-image: url(../img/icons/IconsetW_1x.png?2);

js/directives.js

@@ -89,18 +89,19 @@ angular.module('myApp.directives', ['myApp.filters'])
           return;
         }
 
-        $(element).css({
-          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 50) - 72
-        });
-        updateScroller();
         if (!headWrap) {
           headWrap = $('.tg_page_head')[0];
         }
+        $(element).css({
+          height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - 72
+        });
+        updateScroller();
       }
 
       $($window).on('resize', updateSizes);
 
       updateSizes();
+      setTimeout(updateSizes, 1000);
     };
 
   })
@@ -286,7 +287,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           height: $(sendForm).height()
         });
 
-        var historyH = $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - headWrap.offsetHeight - footer.offsetHeight;
+        var historyH = $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - footer.offsetHeight;
         $(historyWrap).css({
           height: historyH
         });
@@ -306,6 +307,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       $($window).on('resize', updateSizes);
 
+      updateSizes();
       onContentLoaded(updateSizes);
     }
 

js/services.js

@@ -2238,6 +2238,7 @@ angular.module('myApp.services', [])
   var emojiUtf = [],
       emojiMap = {},
       emojiData = Config.Emoji,
+      emojiIconSize = 18,
       emojiCode;
 
   for (emojiCode in emojiData) {
@@ -2259,8 +2260,21 @@ angular.module('myApp.services', [])
       }).
       replace(/</g, '&lt;').
       replace(/>/g, '&gt;');
-  };
+  }
 
+  function getEmojiSpritesheetCoords(emojiCode) {
+    var i, row, column, totalColumns;
+    for (var cat = 0; cat < Config.EmojiCategories.length; cat++) {
+      totalColumns = Config.EmojiCategorySpritesheetDimens[cat][1];
+      i = Config.EmojiCategories[cat].indexOf(emojiCode);
+      if (i > -1) {
+        row = Math.floor(i / totalColumns);
+        column = (i % totalColumns);
+        return { category: cat, row: row, column: column };
+      }
+    }
+    return null;
+  }
 
   function wrapRichText(text, options) {
     if (!text || !text.length) {
@@ -2275,10 +2289,9 @@ angular.module('myApp.services', [])
         raw = text,
         html = [],
         url,
-        emojiTitle,
+        emojiStyle = '',
         emojiFound = false;
 
-
     while ((match = raw.match(regExp))) {
       // console.log(2, match);
       html.push(encodeEntities(raw.substr(0, match.index)));
@@ -2317,15 +2330,15 @@ angular.module('myApp.services', [])
 
         if (emojiCode = emojiMap[match[6]]) {
           emojiFound = true;
-          emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
+          var emojiTitle = encodeEntities(emojiData[emojiCode][1][0]);
+          var emojiCoords = getEmojiSpritesheetCoords(emojiCode);
+          var xoffset = -(emojiIconSize * emojiCoords.column);
+          var yoffset = -(emojiIconSize * emojiCoords.row);
+          emojiStyle = 'background-position:' + xoffset + 'px ' + yoffset + 'px;';
           html.push(
-            '<span class="emoji emoji-file-',
-            encodeEntities(emojiCode),
-            '" title="',
-            emojiTitle,
-            '">:',
-            emojiTitle,
-            ':</span>'
+            '<span class="emoji emoji-spritesheet-'+emojiCoords.category+'" ',
+            'title="', emojiTitle, '">',
+            ':', emojiTitle, ':</span>'
           );
         } else {
           html.push(encodeEntities(match[6]));
@@ -2341,8 +2354,8 @@ angular.module('myApp.services', [])
     // console.log(3, text, html);
 
     if (emojiFound) {
-      text = text.replace(/<span class="emoji emoji-file-([0-9a-f]+?)"(.+?)<\/span>/g,
-                          '<span class="emoji" style="background-image: url(\'vendor/gemoji/images/$1.png\')"$2</span>');
+      text = text.replace(/<span class="emoji emoji-spritesheet-([0-9]+?)"(.+?)<\/span>/g,
+                          '<span class="emoji emoji-spritesheet-$1" style="'+emojiStyle+'" $2</span>');
     }
 
     // console.log(4, text, html);

partials/contacts_modal.html

@@ -1,7 +1,7 @@
 <div class="contacts_modal_wrap">
 
   <div class="modal-header">
-    <a class="modal-close-link" ng-click="$close()">Close</a>
+    <a class="modal-close-link" ng-click="$dismiss()">Close</a>
     <h4 class="modal-title">Contacts</h4>
   </div>
 

partials/im.html

@@ -22,6 +22,7 @@
 
     <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
       <div ng-if="state.notSelected" class="im_history_not_selected">No history to display</div>
+      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected">Loading history<span my-typing-dots></span></div>
 
       <div ng-if="state.loaded">
         <div my-history class="im_history_col">

partials/settings_modal.html

@@ -7,51 +7,55 @@
 
   <div class="modal-body">
 
-    <div class="settings_profile_photo_wrap pull-left">
-
-      <div class="settings_profile_photo">
-        <img
-          class="user_modal_image"
-          my-load-thumb
-          thumb="profile.photo"
-        />
-        <div class="settings_profile_photo_change_wrap">
-          <div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-typing-dots></span></div>
-          <div ng-if="!photo.updating">
-            <div class="settings_profile_photo_update_link">
-              <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
-              Update photo
+    <div class="clearfix">
+
+      <div class="settings_profile_photo_wrap pull-left">
+
+        <div class="settings_profile_photo">
+          <img
+            class="user_modal_image"
+            my-load-thumb
+            thumb="profile.photo"
+          />
+          <div class="settings_profile_photo_change_wrap">
+            <div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-typing-dots></span></div>
+            <div ng-if="!photo.updating">
+              <div class="settings_profile_photo_update_link">
+                <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
+                Update photo
+              </div>
+              <a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
             </div>
-            <a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
           </div>
         </div>
+
       </div>
 
-    </div>
+      <form my-settings-form name="profileForm" class="settings_profile_edit_form">
 
-    <form my-settings-form name="profileForm" class="settings_profile_edit_form clearfix">
+        <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
+          <label class="control-label" for="first_name">
+            <span ng-if="error.field == 'first_name'">Invalid First Name</span>
+            <span ng-if="error.field != 'first_name'">First Name</span>
+          </label>
+          <input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required />
+        </div>
 
-      <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
-        <label class="control-label" for="first_name">
-          <span ng-if="error.field == 'first_name'">Invalid First Name</span>
-          <span ng-if="error.field != 'first_name'">First Name</span>
-        </label>
-        <input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required />
-      </div>
+        <div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}">
+          <label class="control-label" for="last_name">
+            <span ng-if="error.field == 'last_name'">Invalid Last Name</span>
+            <span ng-if="error.field != 'last_name'">Last Name</span>
+          </label>
+          <input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
+        </div>
 
-      <div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}">
-        <label class="control-label" for="last_name">
-          <span ng-if="error.field == 'last_name'">Invalid Last Name</span>
-          <span ng-if="error.field != 'last_name'">Last Name</span>
-        </label>
-        <input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
-      </div>
+        <div class="settings_profile_save">
+          <button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
+        </div>
 
-      <div class="settings_profile_save">
-        <button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
-      </div>
+      </form>
 
-    </form>
+    </div>
 
     <form class="settings_send_choose_form">
       <div class="radio">

vendor/gemoji/THIRDPARTY_LICENSE

@@ -1,14 +0,0 @@
-octocat, squirrel, shipit
-Copyright (c) 2013 GitHub Inc. All rights reserved.
-
-bowtie, neckbeard, fu
-Copyright (c) 2013 37signals, LLC. All rights reserved.
-
-feelsgood, finnadie, goberserk, godmode, hurtrealbad, rage 1-4, suspect
-Copyright (c) 2013 id Software. All rights reserved.
-
-trollface
-Copyright (c) 2013 whynne@deviantart. All rights reserved.
-
-All other images
-Copyright (c) 2013 Apple Inc. All rights reserved.