chat 0.2.0 → 0.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +11 -8
  3. data/Rakefile +2 -0
  4. data/app/assets/javascripts/chat/channels/message.coffee +33 -43
  5. data/app/assets/javascripts/chat/channels/status.coffee +2 -2
  6. data/app/assets/javascripts/chat/messages.coffee +12 -11
  7. data/app/assets/stylesheets/chat/avatar_grid.sass +40 -0
  8. data/app/assets/stylesheets/chat/chat.sass +9 -4
  9. data/app/assets/stylesheets/chat/checkbox.sass +3 -3
  10. data/app/assets/stylesheets/chat/emojionearea.min.css +1 -1
  11. data/app/assets/stylesheets/chat/header.sass +25 -8
  12. data/app/assets/stylesheets/chat/launch.sass +39 -3
  13. data/app/assets/stylesheets/chat/list.sass +56 -23
  14. data/app/assets/stylesheets/chat/message_form.sass +7 -4
  15. data/app/assets/stylesheets/chat/new.sass +27 -22
  16. data/app/assets/stylesheets/chat/transcript.sass +60 -64
  17. data/app/channels/chat/messages_channel.rb +3 -2
  18. data/app/channels/chat/notification_channel.rb +2 -0
  19. data/app/channels/chat/status_channel.rb +12 -10
  20. data/app/controllers/chat/application_controller.rb +5 -1
  21. data/app/controllers/chat/conversations_controller.rb +24 -2
  22. data/app/controllers/chat/messages_controller.rb +8 -2
  23. data/app/helpers/chat/application_helper.rb +35 -24
  24. data/app/jobs/chat/application_job.rb +9 -1
  25. data/app/jobs/chat/message_relay_job.rb +5 -13
  26. data/app/jobs/chat/notification_relay_job.rb +10 -4
  27. data/app/jobs/chat/status_relay_job.rb +3 -3
  28. data/app/mailers/chat/application_mailer.rb +2 -0
  29. data/app/models/chat/application_record.rb +2 -0
  30. data/app/models/chat/conversation.rb +12 -0
  31. data/app/models/chat/dot_command.rb +2 -0
  32. data/app/models/chat/dot_command/gif.rb +2 -0
  33. data/app/models/chat/dot_command/shrug.rb +3 -1
  34. data/app/models/chat/dot_command/validator.rb +3 -1
  35. data/app/models/chat/message.rb +10 -2
  36. data/app/models/chat/session.rb +3 -3
  37. data/app/views/chat/_chat.html.haml +10 -6
  38. data/app/views/chat/conversations/_conversation.html.haml +23 -0
  39. data/app/views/chat/conversations/_index.html.haml +1 -6
  40. data/app/views/chat/conversations/_new.html.haml +2 -4
  41. data/app/views/chat/conversations/_show.html.haml +8 -7
  42. data/app/views/chat/conversations/create.js.erb +14 -10
  43. data/app/views/chat/conversations/show.js.erb +8 -5
  44. data/app/views/chat/messages/_message.haml +9 -12
  45. data/config/routes.rb +4 -2
  46. data/lib/chat.rb +5 -1
  47. data/lib/chat/engine.rb +2 -0
  48. data/lib/chat/user.rb +7 -12
  49. data/lib/chat/version.rb +3 -1
  50. data/lib/generators/chat/install/install_generator.rb +2 -0
  51. data/lib/generators/chat/install/templates/add_chat_to_users.rb +3 -1
  52. data/lib/generators/chat/install/templates/chat.rb +2 -0
  53. data/lib/generators/chat/install/templates/create_chat.rb +19 -7
  54. data/lib/tasks/chat_tasks.rake +1 -0
  55. metadata +15 -48
  56. data/app/models/chat/dot_command/leave.rb +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 6bcdf0fb7ca57a7f9a8e9c8be615fc159f088842
4
- data.tar.gz: ecffe773589c5a3eec5c0d3eb60bf4cc8b0bf381
3
+ metadata.gz: 8c04efa8bf767bd15cd682113ee7f406968f302f
4
+ data.tar.gz: 320469c4a892576b96abed7b8ee05d3fc6e46915
5
5
  SHA512:
6
- metadata.gz: a9a9b349a7d5a088d991da1120af2ad9c706dbbe1489a487f10c9b2921bbd3766acd30be7928bbd9ee482df1900a6182492fe78f86374799f5ce9e41f8106fea
7
- data.tar.gz: e891fd403f4c3756fe340f9d2259c9e835bf059dd967516a01e8907a6a16768e9da758478401ce1076d9063580d5458ff1f584ebc1a43cfcb4768ab66fd16e55
6
+ metadata.gz: e0f32bdb14c13a4a76ddbcfab976384e9e6d62bc5b93afb08d16d00fd8cdb439a8c05dbae0951da16f5da6765dd84207fe110057c7192c5aae468771e83965ac
7
+ data.tar.gz: 7fa5ddf4623c18056852146f3007ec1a520db6bcd87f5249f9c97010b7b849c4df728242dd74854f4519cd6deccb7f7e66c92ad2b1971719f0039db669c43fe9
data/README.md CHANGED
@@ -37,28 +37,31 @@ Run the installer to setup migrations and helpers and then migrate:
37
37
 
38
38
  Require chat in your app/assets/javascripts/application.js file:
39
39
 
40
- ```
40
+ ```js
41
41
  //= require chat
42
42
  ```
43
43
 
44
44
  Require chat in your app/assets/stylesheets/application.css file
45
45
 
46
- ```
46
+ ```css
47
47
  *= require chat
48
48
  ```
49
49
 
50
- Finally the following line to your application.html.erb file or any view file
50
+ Finally, add the following line to your application.html.erb file or any view file
51
51
  you'd like Chat available from:
52
- ```html
53
- <!-- background is the background color of the launch fab -->
54
- <!-- color is the icon color on the launch fab. Can be light or dark -->
55
- <%= render_chat(background, color) %>
52
+ ```erb
53
+ <%= render_chat %>
56
54
  ```
57
55
 
58
56
  ### Dot Commands
59
57
 
58
+ Dot commands behave differently than regular messages and begin with a dot(.).
59
+ The following commands are available:
60
+ - .shrug followed by an optional message outputs a srugging emoticon
61
+ - .gif following by a label fetches a random gif from giphy with the given label
62
+
60
63
  ## Contributing
61
- Contribution directions go here.
64
+ Bug reports and pull requests are welcome on GitHub at https://github.com/npezza93/chat.
62
65
 
63
66
  ## License
64
67
  The gem is available as open source under the terms of the
data/Rakefile CHANGED
@@ -1,3 +1,5 @@
1
+ # frozen_string_literal: true
2
+
1
3
  begin
2
4
  require "bundler/setup"
3
5
  rescue LoadError
data/app/assets/javascripts/chat/channels/message.coffee CHANGED
@@ -7,14 +7,14 @@ App.chat_message =
7
7
 
8
8
  received: (data) ->
9
9
  @collection().append @generateMessage(data)
10
- height = $('.chat__transcript').prop('scrollHeight')
11
- $('.chat__transcript').animate { scrollTop: height }, 'slow'
10
+ height = $('.current_chat').prop('scrollHeight')
11
+ $('.current_chat').animate { scrollTop: height }, 'slow'
12
12
 
13
13
  followCurrentChat: ->
14
14
  if chatId = @current_chat()
15
15
  @perform 'follow', chat_id: chatId
16
16
  else
17
- @perform 'unfollow'
17
+ @perform 'unsubscribed'
18
18
 
19
19
  current_user: ->
20
20
  if @collection().length > 0
@@ -24,52 +24,42 @@ App.chat_message =
24
24
  if @collection().length > 0
25
25
  @collection().data().currentChat
26
26
 
27
- div: ->
28
- document.createElement('div')
29
-
30
- flex: ->
31
- element = @div()
32
- element.classList += 'chat__flex'
33
- element.outerHTML
34
-
35
- text_message_container: ->
36
- element = @div()
37
- element.classList += 'chat__message'
27
+ div: (classes = "")->
28
+ element = document.createElement('div')
29
+ element.classList += classes if classes.length > 0
38
30
  element
39
31
 
40
- image_message_container: ->
41
- element = @div()
42
- element.classList += 'chat__image-message'
43
- element
32
+ render_container: (user) ->
33
+ @div("message-container #{if user == @current_user() then 'right' else ''}")
44
34
 
45
- image_message: (data) ->
46
- element = @image_message_container()
47
- if data.user == @current_user()
48
- element.classList += ' current'
49
- element.innerHTML = data.message
50
- element.outerHTML
35
+ render_avatar: (data) ->
36
+ last_message_classes = @collection().children().last()[0]
37
+ last_message_classes =
38
+ if last_message_classes == undefined
39
+ []
40
+ else
41
+ last_message_classes.classList
51
42
 
52
- message: (data) ->
53
- element = @div()
54
- element.classList += 'text'
55
- if data.user == @current_user()
56
- element.classList += ' right'
43
+ if data.user == @current_user() &&
44
+ $.inArray("right", last_message_classes) >= 0
45
+ @div("transcript_placeholder_avatar").outerHTML
57
46
  else
58
- element.classList += ' left'
59
- element.innerHTML = data.message
60
- element.outerHTML
47
+ data.avatar
61
48
 
62
- text_message: (data) ->
63
- msg = [data.avatar, @message(data), @flex()]
64
- msg = msg.reverse() if data.user == @current_user()
65
-
66
- message = @text_message_container()
67
- message.innerHTML = msg.join('')
68
- message.outerHTML
49
+ render_content: (data) ->
50
+ el = @div("message #{if data.image then 'image' else ''}")
51
+ if data.image
52
+ el.innerHTML = data.message
53
+ else
54
+ content = @div("content")
55
+ content.innerHTML = data.message
56
+ el.innerHTML = content.outerHTML
69
57
 
58
+ el
70
59
 
71
60
  generateMessage: (data) ->
72
- if data.image
73
- @image_message(data)
74
- else
75
- @text_message(data)
61
+ container = @render_container(data.user)
62
+ container.innerHTML =
63
+ @render_avatar(data) + @render_content(data).outerHTML
64
+
65
+ container
data/app/assets/javascripts/chat/channels/status.coffee CHANGED
@@ -1,10 +1,10 @@
1
1
  App.chat_status =
2
2
  App.cable.subscriptions.create "Chat::StatusChannel",
3
3
  connected: ->
4
- @perform 'online', user_id: App.chat_notification.current_user()
4
+ @perform "online", user_id: App.chat_notification.current_user()
5
5
 
6
6
  disconnected: ->
7
- @perform 'unsubscribed', user_id: App.chat_notification.current_user()
7
+ @perform "unsubscribed", user_id: App.chat_notification.current_user()
8
8
 
9
9
  received: (data) ->
10
10
  label = $("label[for='conversation_user_ids_#{data.user_id}'] .chat__status")
data/app/assets/javascripts/chat/messages.coffee CHANGED
@@ -7,21 +7,27 @@ event =
7
7
  document.addEventListener event, ->
8
8
  $('.chat__launch').click ->
9
9
  $('#chat').addClass('active')
10
- show_chats()
10
+ $('.chat__launch').addClass('chat__disappear')
11
11
  return
12
12
 
13
13
  $('.chat__close').click ->
14
14
  $('#chat').removeClass('active')
15
+ $('.chat__launch').removeClass('chat__disappear')
15
16
  return
16
17
 
17
18
  $('.chat__settings').click ->
18
- show_chats()
19
+ $('.current_chat').removeClass("slide_left")
20
+ $('.chat__list').removeClass("slide_left")
21
+ $('.chat__list').removeClass("slide_right")
22
+ $('.chat__start-new').removeClass("chat__disappear")
23
+ $('.new_conversation').removeClass("slide_right")
19
24
  return
20
25
 
21
26
  $(document).on 'click', '.chat__start-new', (e) ->
22
27
  e.preventDefault()
23
- $('.chat__list').css('display', 'none')
24
- $('.new_conversation').css('display', 'flex')
28
+ $('.chat__start-new').addClass("chat__disappear")
29
+ $('.chat__list').addClass("slide_right")
30
+ $('.new_conversation').addClass("slide_right")
25
31
  return
26
32
 
27
33
  $(document).on 'click', '.chat__insert-image', ->
@@ -30,15 +36,10 @@ document.addEventListener event, ->
30
36
 
31
37
  $(document).on 'keyup', '.new_message .emojionearea-editor', (e) ->
32
38
  if e.keyCode == 13 && !e.shiftKey
33
- $('.new_message textarea').val($('.new_message .emojionearea-editor').html())
39
+ str = $('.new_message .emojionearea-editor').html()
40
+ $('.new_message textarea').val(str)
34
41
  $('.new_message').submit()
35
42
  $('#message_text').prop('value', '')
36
43
  el = $('.new_message textarea').emojioneArea()
37
44
  el[0].emojioneArea.setText('')
38
45
  return
39
-
40
- show_chats = ->
41
- $('.chat__list').css('display', 'flex')
42
- $('.current_chat').css('display', 'none')
43
- $('.new_conversation').css('display', 'none')
44
- return
data/app/assets/stylesheets/chat/avatar_grid.sass ADDED
@@ -0,0 +1,40 @@
1
+ #chat .chat__list .avatar_container
2
+ width: 50px
3
+ height: 50px
4
+ position: relative
5
+ margin: 10px 0
6
+ color: #212121
7
+
8
+ &.count_1
9
+ img
10
+ width: 100%
11
+ height: 100%
12
+ border-radius: 50%
13
+ object-fit: cover
14
+
15
+ &.count_2, &.count_default
16
+ img
17
+ width: 50%
18
+ height: 50%
19
+ border-radius: 50%
20
+ object-fit: cover
21
+ img:nth-of-type(2)
22
+ position: absolute
23
+ bottom: 0
24
+ right: 0
25
+ img:nth-of-type(1)
26
+ position: absolute
27
+ left: 0
28
+ top: 0
29
+ div
30
+ width: 50%
31
+ height: 50%
32
+ border-radius: 50%
33
+ background-color: #fff
34
+ position: absolute
35
+ bottom: 0
36
+ right: 0
37
+ span
38
+ position: absolute
39
+ left: 33%
40
+ top: 6%
data/app/assets/stylesheets/chat/chat.sass CHANGED
@@ -1,4 +1,4 @@
1
- @import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
1
+ @import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
2
2
 
3
3
  #chat
4
4
  font-family: "Lato" !important
@@ -9,12 +9,12 @@
9
9
  right: 0
10
10
  top: 0
11
11
  opacity: 0
12
- background: rgb(245, 245, 245)
12
+ background: transparent
13
13
  visibility: hidden
14
14
  transform: scale(0)
15
15
  transform-origin: bottom right
16
- transition: transform .3s ease-in-out, opacity .1s linear .15s
17
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)
16
+ transition: transform .3s ease-in-out, opacity .3s ease-in-out
17
+ overflow: hidden
18
18
  @media (max-width: 450px)
19
19
  width: 100%
20
20
  &.active
@@ -23,3 +23,8 @@
23
23
  transform: scale(1)
24
24
  .chat__flex
25
25
  flex: 1
26
+ #chat__background
27
+ height: 100%
28
+ width: 100%
29
+ position: absolute
30
+ background-color: rgba(40,44,52, 0.75)
data/app/assets/stylesheets/chat/checkbox.sass CHANGED
@@ -25,7 +25,7 @@
25
25
  width: 21px
26
26
  height: 21px
27
27
  z-index: 0
28
- border: 2px solid #5a5a5a
28
+ border: 2px solid #fff
29
29
  border-radius: 1px
30
30
  margin-top: 2px
31
31
  transition: .2s
@@ -46,8 +46,8 @@
46
46
  height: 26px
47
47
  border-top: 2px solid transparent
48
48
  border-left: 2px solid transparent
49
- border-right: 2px solid #26a69a
50
- border-bottom: 2px solid #26a69a
49
+ border-right: 2px solid #A3EEA0
50
+ border-bottom: 2px solid #A3EEA0
51
51
  -webkit-transform: rotate(40deg)
52
52
  transform: rotate(40deg)
53
53
  -webkit-backface-visibility: hidden
data/app/assets/stylesheets/chat/emojionearea.min.css CHANGED
@@ -1 +1 @@
1
- .dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px}.emojionearea .emojionearea-editor{display:block;height:auto;max-height:80px;overflow:auto;padding:6px 57px 6px 0;line-height:1.42857143;font-size:17px;color:#212121;background-color:transparent;border:0;cursor:text;margin-right:1px;border-bottom:1px solid rgba(0,0,0,.26);word-wrap:break-word}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#bbb}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:0;left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;opacity:.6;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-picker{background:#fff;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:236px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:236px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;background:#F5F7F9;padding:0 0 0 7px;height:40px;z-index:95}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:196px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones{position:absolute;top:6px;right:10px;height:22px;z-index:2}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area h1{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#fff;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-246px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-229px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/png;base64,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)!important}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}
1
+ .dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px}.emojionearea .emojionearea-editor{display:block;height:auto;max-height:80px;overflow:auto;padding:6px 57px 6px 0;line-height:1.42857143;font-size:17px;color:#212121;background-color:transparent;border:0;cursor:text;margin-right:1px;border-bottom:1px solid rgba(0,0,0,.26);word-wrap:break-word}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#bbb}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:0;left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{filter:alpha(enabled=false);}.emojionearea .emojionearea-picker{background:#fff;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:236px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:236px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;background:#F5F7F9;padding:0 0 0 7px;height:40px;z-index:95}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:196px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones{position:absolute;top:6px;right:10px;height:22px;z-index:2}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area h1{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#fff;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-246px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-229px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNiZGJkYmQiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjMuOTkgNEMxMi45NCA0IDQgMTIuOTUgNCAyNHM4Ljk0IDIwIDE5Ljk5IDIwQzM1LjA0IDQ0IDQ0IDM1LjA1IDQ0IDI0UzM1LjA0IDQgMjMuOTkgNHpNMjQgNDBjLTguODQgMC0xNi03LjE2LTE2LTE2UzE1LjE2IDggMjQgOHMxNiA3LjE2IDE2IDE2LTcuMTYgMTYtMTYgMTZ6bTctMThjMS42NiAwIDMtMS4zNCAzLTNzLTEuMzQtMy0zLTMtMyAxLjM0LTMgMyAxLjM0IDMgMyAzem0tMTQgMGMxLjY2IDAgMy0xLjM0IDMtM3MtMS4zNC0zLTMtMy0zIDEuMzQtMyAzIDEuMzQgMyAzIDN6bTcgMTNjNC42NiAwIDguNjEtMi45MSAxMC4yMS03SDEzLjc5YzEuNiA0LjA5IDUuNTUgNyAxMC4yMSA3eiIvPjwvc3ZnPg==)!important;background-size:contain;}.emojionearea .emojionearea-button > div:hover, .emojionearea .emojionearea-button:hover, .emojionearea .emojionearea-button.active > div {background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjMuOTkgNEMxMi45NCA0IDQgMTIuOTUgNCAyNHM4Ljk0IDIwIDE5Ljk5IDIwQzM1LjA0IDQ0IDQ0IDM1LjA1IDQ0IDI0UzM1LjA0IDQgMjMuOTkgNHpNMjQgNDBjLTguODQgMC0xNi03LjE2LTE2LTE2UzE1LjE2IDggMjQgOHMxNiA3LjE2IDE2IDE2LTcuMTYgMTYtMTYgMTZ6bTctMThjMS42NiAwIDMtMS4zNCAzLTNzLTEuMzQtMy0zLTMtMyAxLjM0LTMgMyAxLjM0IDMgMyAzem0tMTQgMGMxLjY2IDAgMy0xLjM0IDMtM3MtMS4zNC0zLTMtMy0zIDEuMzQtMyAzIDEuMzQgMyAzIDN6bTcgMTNjNC42NiAwIDguNjEtMi45MSAxMC4yMS03SDEzLjc5YzEuNiA0LjA5IDUuNTUgNyAxMC4yMSA3eiIvPjwvc3ZnPg==)!important;background-size:contain;}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}
data/app/assets/stylesheets/chat/header.sass CHANGED
@@ -1,27 +1,44 @@
1
- @import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
1
+ @import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
2
2
 
3
3
  #chat .chat__header
4
4
  font-family: 'Lato' !important
5
5
  letter-spacing: 1.5px !important
6
- height: 48px
7
- background-color: #fff
8
- box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2)
6
+ height: 50px
9
7
  display: flex
10
8
  flex-direction: row
11
9
  align-items: center
10
+ position: relative
11
+ z-index: 11
12
+ .chat__settings
13
+ width: 20px
14
+ height: 20px
15
+ margin: 0 25px
16
+ cursor: pointer
17
+ div
18
+ height: 2px
19
+ background: #fff
20
+ border-radius: 2px
21
+ div:nth-of-type(1)
22
+ width: 94%
23
+ margin-bottom: 4px
24
+ margin-top: 5px
25
+ div:nth-of-type(2)
26
+ width: 57%
27
+
12
28
  h6
13
29
  font-family: 'Lato' !important
14
30
  letter-spacing: 1.5px !important
15
31
  margin: 0
16
- font-weight: 300
17
32
  font-size: 19px
33
+ color: #fff
34
+ font-weight: 400
18
35
  i
19
- margin: 0 10px 0 10px
20
- color: #BDBDBD
36
+ margin: 0 25px
37
+ color: #fff
21
38
  transition: all .3s ease
22
39
  cursor: pointer
23
40
  &:hover
24
- color: #212121
41
+ color: #eee
25
42
 
26
43
  #chat .chat__badge
27
44
  position: relative
data/app/assets/stylesheets/chat/launch.sass CHANGED
@@ -17,10 +17,46 @@
17
17
  outline: none
18
18
  cursor: pointer
19
19
  text-decoration: none
20
+ transition: 0.5s
21
+ transform: scale(1)
22
+ background: #fff
20
23
  i
21
- position: fixed
22
- right: 28px
23
- bottom: 28px
24
24
  font-size: 30px
25
25
  &:active
26
26
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)
27
+
28
+
29
+ .chat__start-new
30
+ position: fixed
31
+ right: 10px
32
+ bottom: 15px
33
+ border-radius: 50%
34
+ height: 50px
35
+ margin: auto
36
+ min-width: 50px
37
+ width: 50px
38
+ padding: 0
39
+ overflow: hidden
40
+ box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)
41
+ line-height: normal
42
+ border: none
43
+ will-change: box-shadow
44
+ transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1)
45
+ outline: none
46
+ cursor: pointer
47
+ text-decoration: none
48
+ transition: 0.5s
49
+ transform: scale(1)
50
+ z-index: 15
51
+ background: #fff
52
+ i
53
+ position: absolute
54
+ left: 12px
55
+ top: 12px
56
+ font-size: 25px
57
+ color: #212121
58
+ &:active
59
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)
60
+
61
+ .chat__disappear
62
+ transform: scale(0)
data/app/assets/stylesheets/chat/list.sass CHANGED
@@ -1,35 +1,68 @@
1
1
  @keyframes pulse
2
2
  50%
3
3
  background-color: #C8E6C9
4
-
4
+ #chat .slide_left
5
+ transform: translate3d(-100%,0,0)
6
+ #chat .slide_right
7
+ transform: translate3d(100%,0,0)
5
8
  #chat .chat__list
6
- height: calc(100% - 58px)
7
- display: flex
8
- flex-direction: column
9
- padding-top: 10px
10
- a
11
- padding: 10px
9
+ position: absolute
10
+ width: 100%
11
+ height: calc(100% - 50px)
12
+ left: 0px
13
+ opacity: 1
14
+ transition: 0.5s
15
+ overflow-y: scroll
16
+ z-index: 13
17
+ &::-webkit-scrollbar
18
+ visibility: hidden
19
+ a:not(.chat__start-new)
20
+ padding: 10px 25px
12
21
  text-align: center
13
22
  transition: all 0.3s ease
14
- text-decoration: none
15
- color: #212121
16
- &:hover
17
- background: #BDBDBD
18
- .chat__index
19
23
  display: flex
20
- flex-direction: column
21
- overflow-y: auto
22
- &::-webkit-scrollbar
23
- display: none
24
24
  .chat__has_new_message
25
25
  animation: pulse 1s ease-out infinite
26
-
27
- #chat .chat__start-new
28
- font-weight: 300
29
- border-top: 1px solid #BDBDBD
30
- margin: 0 !important
31
- font-size: 17px
32
-
26
+ .chat__glance
27
+ display: flex
28
+ flex-direction: column
29
+ flex: 1
30
+ .chat__glance-name-date
31
+ display: flex
32
+ flex-direction: row
33
+ flex: 1
34
+ margin-left: 15px
35
+ margin-top: 15px
36
+ color: #fff
37
+ font-weight: 600
38
+ .flex
39
+ flex: 1
40
+ .name
41
+ font-size: 15px
42
+ .date
43
+ font-size: 11px
44
+ padding-top: 3px
45
+ letter-spacing: 0.5px
46
+ .chat__glance-last-message
47
+ margin-left: 15px
48
+ text-align: left
49
+ margin-top: 7px
50
+ font-size: 13px
51
+ color: #fff
52
+ word-break: break-all
53
+ font-weight: 300
54
+ img
55
+ font-size: inherit
56
+ height: 2ex
57
+ width: 2.1ex
58
+ min-height: 20px
59
+ min-width: 20px
60
+ display: inline-block
61
+ margin: -.2ex .15em .2ex
62
+ line-height: normal
63
+ vertical-align: middle
64
+ max-width: 100%
65
+ top: 0
33
66
  #chat .chat__none-available
34
67
  height: 100%
35
68
  display: flex