Different colors for users in chat

southbridgeio · Apr 3, 2016 · 1132e1d · 1132e1d
1 parent 4303c67
commit 1132e1d
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 5 deletions.
diff --git a/app/controllers/telegram_messages_controller.rb b/app/controllers/telegram_messages_controller.rb
@@ -5,6 +5,7 @@ class TelegramMessagesController < ApplicationController
   def index
     @issue = Issue.visible.find(params[:id])
     @telegram_messages = @issue.telegram_messages
+    @chat_users = colored_chat_users
 
     respond_to do |format|
       format.html
@@ -19,4 +20,20 @@ def publish
     @issue.save
     redirect_to @issue
   end
+
+  private
+
+  def colored_chat_users
+    chat_user_ids = @telegram_messages.select(:from_id).uniq.pluck(:from_id)
+    colored_users = []
+    current_color = 1
+
+    chat_user_ids.each do |user_id|
+      current_color = 1 if current_color > TelegramMessage::COLORS_NUMBER
+      colored_users << { id: user_id, color_number: current_color }
+      current_color += 1
+    end
+
+    colored_users
+  end
 end
diff --git a/app/helpers/telegram_messages_helper.rb b/app/helpers/telegram_messages_helper.rb
@@ -4,4 +4,12 @@ def messages_by_date
     @telegram_messages.group_by{|x| x.sent_at.strftime("%d.%m.%Y")}
   end
 
+  def color_number_for_user(user_id)
+    user = @chat_users.detect do |user|
+      user[:id] == user_id
+    end
+
+    user[:color_number]
+  end
+
 end
diff --git a/app/models/telegram_message.rb b/app/models/telegram_message.rb
@@ -3,6 +3,8 @@ class TelegramMessage < ActiveRecord::Base
 
   include Redmine::I18n
 
+  COLORS_NUMBER = 8
+
   def self.as_text
     all.map(&:as_text).join("\n\n")
   end
@@ -24,4 +26,8 @@ def author_initials
     [from_first_name.first, from_last_name.first].join
   end
 
+  def user_id
+    from_id
+  end
+
 end
diff --git a/app/views/telegram_messages/_message.html.erb b/app/views/telegram_messages/_message.html.erb
@@ -1,19 +1,23 @@
 <% if message.is_system? %>
   <div class="telegram-system-message">
-    <span class="telegram-message-author"><%= message.author_name %></span>
+    <span class="telegram-message-author <%= "user-color-#{color_number_for_user(message.user_id)}" %>">
+      <%= message.author_name %>
+    </span>
     <span><%= message.message %></div>
   </div>
 <% else %>
   <div class="telegram-message" data-sent-at=<%= message.sent_at.to_i %>>
     <%= check_box_tag 'telegram_message_ids[]', message.id %>
     <time><%= format_time message.sent_at, false %></time>
-    <div class="telegram-author-photo">
+    <div class="telegram-author-photo <%= "user-bgcolor-#{color_number_for_user(message.user_id)}" %>">
       <span>
         <%= message.author_initials %>
       </span>
     </div>
     <div class="telegram-message-body">
-      <span class="telegram-message-author"><%= message.author_name %></span>
+      <span class="telegram-message-author <%= "user-color-#{color_number_for_user(message.user_id)}" %>">
+        <%= message.author_name %>
+      </span>
       <div class="telegram-message-text">
         <%= message.message %>
       </div>

diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -37,7 +37,6 @@
 .telegram-message-author{
   margin: 1px 0 4px;
   display: inline-block;
-  color: #b7635d;
   font-weight: 700;
 }
 
@@ -64,7 +63,6 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: #80d066;
 }
 
 .telegram-system-message{
@@ -77,3 +75,67 @@
   margin: 5px 0;
   font-size: 0.85em;
 }
+
+.user-color-1{
+  color: #8365ab;
+}
+
+.user-color-2{
+  color: #539e4f;
+}
+
+.user-color-3{
+  color: #ae9661;
+}
+
+.user-color-4{
+  color: #4979a3;
+}
+
+.user-color-5{
+  color: #b7635d;
+}
+
+.user-color-6{
+  color: #b3577a;
+}
+
+.user-color-7{
+  color: #5397b4;
+}
+
+.user-color-8{
+  color: #c07844;
+}
+
+.user-bgcolor-1{
+  background: #cc90e2;
+}
+
+.user-bgcolor-2{
+  background: #80d066;
+}
+
+.user-bgcolor-3{
+  background: #ecd074;
+}
+
+.user-bgcolor-4{
+  background: #6fb1e4;
+}
+
+.user-bgcolor-5{
+  background: #e57979;
+}
+
+.user-bgcolor-6{
+  background: #f98bae;
+}
+
+.user-bgcolor-7{
+  background: #73cdd0;
+}
+
+.user-bgcolor-8{
+  background: #fba76f;
+}