Browse Source

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
master
Igor Zhukov 10 years ago
parent
commit
2dbffb6154
  1. 28
      app/css/desktop.css
  2. 3
      app/js/directives.js
  3. 5
      app/partials/desktop/im.html
  4. 42
      app/vendor/jquery.emojiarea/jquery.emojiarea.js

28
app/css/desktop.css

@ -635,6 +635,8 @@ a.footer_link.active:active {
border-radius: 0; border-radius: 0;
float: right; float: right;
min-width: 0; min-width: 0;
margin-top: 5px;
margin-left: 10px;
width: auto; width: auto;
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
@ -644,6 +646,25 @@ a.footer_link.active:active {
background: inherit; 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_date,
.im_message_selected .im_message_document_size, .im_message_selected .im_message_document_size,
.im_message_selected .im_message_audio_duration, .im_message_selected .im_message_audio_duration,
@ -795,6 +816,7 @@ a.footer_link.active:active {
.im_send_panel_wrap { .im_send_panel_wrap {
max-width: 554px; max-width: 554px;
padding-bottom: 23px;
} }
.im_send_form { .im_send_form {
max-width: 382px; max-width: 382px;
@ -873,7 +895,7 @@ a.im_panel_peer_photo .peer_initials {
} }
.im_send_field_wrap { .im_send_field_wrap {
margin-bottom: 20px; margin-bottom: 15px;
} }
.emoji-wysiwyg-editor, .emoji-wysiwyg-editor,
.im_message_field { .im_message_field {
@ -904,7 +926,7 @@ a.im_panel_peer_photo .peer_initials {
width: 18px; width: 18px;
height: 17px; height: 17px;
margin-right: 28px; margin-right: 28px;
margin-top: 1px; margin-top: 6px;
} }
.icon-paperclip { .icon-paperclip {
@ -938,6 +960,8 @@ a.im_panel_peer_photo .peer_initials {
width: 20px; width: 20px;
height: 18px; height: 18px;
margin-top: 5px;
margin-right: 25px;
} }

3
app/js/directives.js

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

5
app/partials/desktop/im.html

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

42
app/vendor/jquery.emojiarea/jquery.emojiarea.js vendored

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

Loading…
Cancel
Save