Merge branch 'pr/508'

Also improved styles for new material design

Conflicts:
	app/css/desktop.css
	app/partials/desktop/im.html
	app/vendor/jquery.emojiarea/jquery.emojiarea.js

app/css/desktop.css

@@ -635,6 +635,8 @@ a.footer_link.active:active {
   border-radius: 0;
   float: right;
   min-width: 0;
+  margin-top: 5px;
+  margin-left: 10px;
   width: auto;
   padding: 0;
   font-weight: bold;
@@ -644,6 +646,25 @@ a.footer_link.active:active {
   background: inherit;
 }
 
+.im_emoji_quick_select_area {
+  display: block;
+  height: 30px;
+  overflow: hidden;
+  max-width: 210px;
+}
+
+.im_emoji_quick_select_area a {
+  display: inline-block;
+  padding: 5px;
+}
+
+.im_emoji_quick_select_area a:hover {
+  background-color: #edf2f5;
+}
+.im_emoji_quick_select_area a .label {
+  display: none;
+}
+
 .im_message_selected .im_message_date,
 .im_message_selected .im_message_document_size,
 .im_message_selected .im_message_audio_duration,
@@ -795,6 +816,7 @@ a.footer_link.active:active {
 
 .im_send_panel_wrap {
   max-width: 554px;
+  padding-bottom: 23px;
 }
 .im_send_form {
   max-width: 382px;
@@ -873,7 +895,7 @@ a.im_panel_peer_photo .peer_initials {
 }
 
 .im_send_field_wrap {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 .emoji-wysiwyg-editor,
 .im_message_field {
@@ -904,7 +926,7 @@ a.im_panel_peer_photo .peer_initials {
   width: 18px;
   height: 17px;
   margin-right: 28px;
-  margin-top: 1px;
+  margin-top: 6px;
 }
 
 .icon-paperclip {
@@ -938,6 +960,8 @@ a.im_panel_peer_photo .peer_initials {
 
   width: 20px;
   height: 18px;
+  margin-top: 5px;
+  margin-right: 25px;
 }
 
 

app/js/directives.js

@@ -1061,9 +1061,10 @@ angular.module('myApp.directives', ['myApp.filters'])
           fileSelects = $('input', element),
           dropbox = $('.im_send_dropbox_wrap', element)[0],
           emojiButton = $('.im_emoji_btn', element)[0],
+          emojiQuickSelect = !Config.Mobile ? $('.im_emoji_quick_select_area', element)[0] : false,
           editorElement = messageField,
           dragStarted, dragTimeout,
-          emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true}),
+          emojiArea = $(messageField).emojiarea({button: emojiButton, norealTime: true, quickSelect: emojiQuickSelect}),
           emojiMenu = $('.emoji-menu', element)[0],
           submitBtn = $('.im_submit', element)[0],
           richTextarea = $('.emoji-wysiwyg-editor', element)[0];

app/partials/desktop/im.html

@@ -182,6 +182,8 @@
                     </div>
 
                     <div class="clearfix">
+                      <button type="submit" class="btn btn-md im_submit" my-i18n="im_submit_message"></button>
+
                       <div class="im_attach pull-left">
                         <input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_attach_file_title' | i18n}}" />
                         <i class="icon icon-paperclip"></i>
@@ -192,7 +194,8 @@
                         <i class="icon icon-camera"></i>
                       </div>
 
-                      <button type="submit" class="btn btn-md im_submit" my-i18n="im_submit_message"></button>
+                      <div class="im_emoji_quick_select_area"></div>
+
                     </div>
                   </form>
                 </div>

app/vendor/jquery.emojiarea/jquery.emojiarea.js

@@ -172,7 +172,7 @@
 	/*! MODIFICATION START
 		 This function was added by Igor Zhukov to save recent used emojis.
 		 */
-	util.emojiInserted = function (emojiKey, menu) {
+	util.emojiInserted = function (emojiKey, menu, quickSelect) {
 		ConfigStorage.get('emojis_recent', function (curEmojis) {
 			curEmojis = curEmojis || defaultRecentEmojis || [];
 
@@ -189,6 +189,14 @@
 			}
 
 			ConfigStorage.set({emojis_recent: curEmojis});
+
+			if (menu) {
+				menu.updateRecentTab(curEmojis);
+			}
+
+			if (quickSelect) {
+				quickSelect.load(0);
+			}
 		})
 	};
 	/*! MODIFICATION END */
@@ -204,6 +212,11 @@
 		this.$editor.on('blur', function() { self.hasFocus = false; });
 
 		this.setupButton();
+
+		if (this.options.quickSelect) {
+			var $items = $(this.options.quickSelect);
+			this.quickSelect = new EmojiQuickSelectArea(self, $items);
+		}
 	};
 
 	EmojiArea.prototype.setupButton = function() {
@@ -275,7 +288,7 @@
 		if (!$.emojiarea.icons.hasOwnProperty(emoji)) return;
 		util.insertAtCursor(emoji, this.$textarea[0]);
 		/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
-		util.emojiInserted(emoji, this.menu);
+		util.emojiInserted(emoji, this.menu, this.quickSelect);
 		this.$textarea.trigger('change');
 	};
 
@@ -394,7 +407,7 @@
 		/*! MODIFICATION END */
 
 		/* MODIFICATION: Following line was added by Igor Zhukov, in order to save recent emojis */
-		util.emojiInserted(emoji, this.menu);
+		util.emojiInserted(emoji, this.menu, this.quickSelect);
 
 
 		this.onChange();
@@ -597,12 +610,12 @@
 		if (path.length && path.charAt(path.length - 1) !== '/') {
 			path += '/';
 		}
-		
+
 		/*! MODIFICATION: Following function was added by Igor Zhukov, in order to add scrollbars to EmojiMenu */
 		var updateItems = function () {
 			self.$items.html(html.join(''));
 
-			if (!Config.Mobile) {
+			if (!Config.Mobile && self.$itemsWrap) {
 				setTimeout(function () {
 					self.$itemsWrap.nanoScroller();
 				}, 100);
@@ -680,4 +693,21 @@
 		};
 	})();
 
-})(jQuery, window, document);
+	var EmojiQuickSelectArea = function(emojiarea, $items) {
+		var self = this;
+
+		this.emojiarea = emojiarea;
+		this.$items = $items;
+
+		this.load(0);
+		this.$items.on('click', 'a', function(e) {
+			var emoji = $('.label', $(this)).text();
+			self.onItemSelected(emoji);
+			e.stopPropagation();
+			return false;
+		});
+	};
+
+	util.extend(EmojiQuickSelectArea.prototype, EmojiMenu.prototype);
+
+})(jQuery, window, document);