Merge branch 'feature/redesign' into develop

* feature/redesign: Add ability to select messages by click Different colors for users in chat Change date style Different style for system and normal messages Mark system telegram messages in rake task Add is_system to telegram messages Add photos with author initials Redesign telegram messages
southbridgeio · Apr 4, 2016 · b31d41c · b31d41c
2 parents 70aabaa + bf2954f
commit b31d41c
Show file tree

Hide file tree

Showing 9 changed files with 222 additions and 24 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
@@ -20,5 +22,12 @@ def author_name
     full_name.present? ? full_name : from_username
   end
 
+  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/_archive_form.html.erb b/app/views/telegram_messages/_archive_form.html.erb
@@ -1,18 +1,9 @@
 <% if User.current.allowed_to?(:view_telegram_chat_archive, @issue.project) and @issue.telegram_messages.present? %>
   <%= form_tag publish_issue_telegram_messages_path, class: 'archive-form' do %>
     <% messages_by_date.each do |date, messages| %>
-      <fieldset class="message-date">
-        <legend><%= date %></legend>
-      </fieldset>
+      <div class="telegram-system-message"><%= date %></div>
       <% messages.each do |message| %>
-        <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>
-          <span><%= message.author_name %></span>
-          <p class="telegram-message-text">
-            <%= message.message %>
-          </p>
-        </div>
+        <%= render partial: "message", locals: { message: message } %>
       <% end %>
     <% end %>
   <% end %>

diff --git a/app/views/telegram_messages/_message.html.erb b/app/views/telegram_messages/_message.html.erb
@@ -0,0 +1,26 @@
+<% if message.is_system? %>
+  <div class="telegram-system-message">
+    <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, false, class: "telegram-message-checkbox" %>
+    <time><%= format_time message.sent_at, false %></time>
+    <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 <%= "user-color-#{color_number_for_user(message.user_id)}" %>">
+        <%= message.author_name %>
+      </span>
+      <div class="telegram-message-text">
+        <%= message.message %>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/telegram_messages/index.js.erb b/app/views/telegram_messages/index.js.erb
@@ -49,3 +49,21 @@ var formHeight = $('#ajax-modal').css('height').match(/\d+/)[0] - 75
 $('.archive-form').css({
   height: formHeight
 })
+
+$(".telegram-message").click(function(){
+  if ($(this).hasClass("telegram-selected-message")) {
+    $(this).removeClass("telegram-selected-message")
+    $(this).find(".telegram-message-checkbox").prop("checked", false);
+  } else {
+    $(this).addClass("telegram-selected-message")
+    $(this).find(".telegram-message-checkbox").prop("checked", true);
+  }
+})
+
+$(".telegram-message").hover(function(){
+  $(this).find(".telegram-message-checkbox").css("visibility", "visible");
+}, function(){
+  if (!$(this).hasClass("telegram-selected-message")) {
+    $(this).find(".telegram-message-checkbox").css("visibility", "hidden");
+  }
+})
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -2,10 +2,6 @@
   background: #fff;
   position: fixed;
 }
-.telegram-message-text{
-  margin-top: 5px;
-  padding-left: 68px;
-}
 
 .archive-form{
   display: block;
@@ -16,13 +12,138 @@
   height: 40px;
 }
 
-.message-date{
-  border:0px;
-  border-top:1px solid #e4e4e4;
+
+.telegram-message{
+  padding: 15px 0px;
+}
+
+.telegram-message:hover{
+  background: #f2f6fa;
+}
+
+.telegram-selected-message{
+  background: #f2f6fa;
+}
+
+.telegram-message time{
+  float: right;
+  color: #adadad;
+  font-size: .85em;
+}
+
+.telegram-message-checkbox{
+  float: right;
+  margin-left: 10px;
+  visibility: hidden;
+}
+
+.telegram-message-body{
+  display: block;
+  overflow: hidden;
+}
+
+.telegram-message-author{
+  margin: 1px 0 4px;
+  display: inline-block;
+  font-weight: 700;
+}
+
+.telegram-message-text{
+  line-height: 150%;
+}
+
+.telegram-author-photo{
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 15px 0 0;
+  float: left;
+}
+
+.telegram-author-photo span{
+  line-height: 42px;
+  display: block;
+  color: #fff;
   text-align: center;
-  margin: 10px 0;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.telegram-system-message{
+  display: block;
+  min-width: 10px;
+  padding: 4px 7px;
+  line-height: 1.4;
+  color: #999;
+  text-align: center;
+  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;
 }
 
-.message-date legend{
-  padding: 0 10px;
+.user-bgcolor-8{
+  background: #fba76f;
 }
diff --git a/db/migrate/006_add_is_system_to_telegram_message.rb b/db/migrate/006_add_is_system_to_telegram_message.rb
@@ -0,0 +1,5 @@
+class AddIsSystemToTelegramMessage < ActiveRecord::Migration
+  def change
+    add_column :telegram_messages, :is_system, :boolean, default: false
+  end
+end
diff --git a/lib/tasks/chat_telegram.rake b/lib/tasks/chat_telegram.rake
@@ -98,7 +98,8 @@ namespace :chat_telegram do
                                                     telegram_id:    telegram_id,
                                                     sent_at:        sent_at, message: message_text,
                                                     from_id:        from_id, from_first_name: from_first_name,
-                                                    from_last_name: from_last_name, from_username: from_username
+                                                    from_last_name: from_last_name, from_username: from_username,
+                                                    is_system: true
         else
           issue = Issue.find_by(telegram_id: telegram_chat_id)
           issue = set_telegram_id(message, telegram_chat_id) unless issue.present?
@@ -114,7 +115,8 @@ namespace :chat_telegram do
                                                           telegram_id:    telegram_id,
                                                           sent_at:        sent_at, message: message_text,
                                                           from_id:        from_id, from_first_name: from_first_name,
-                                                          from_last_name: from_last_name, from_username: from_username
+                                                          from_last_name: from_last_name, from_username: from_username,
+                                                          is_system: true
           elsif message.left_chat_participant.present?
             left_chat_participant = message.left_chat_participant
             message_text          = if message.from.id == left_chat_participant.id
@@ -126,7 +128,8 @@ namespace :chat_telegram do
                                                            telegram_id:    telegram_id,
                                                            sent_at:        sent_at, message: message_text,
                                                            from_id:        from_id, from_first_name: from_first_name,
-                                                           from_last_name: from_last_name, from_username: from_username
+                                                           from_last_name: from_last_name, from_username: from_username,
+                                                           is_system: true
 
           elsif message.text.present? and message.chat.type == 'group'
             issue_url = RedmineChatTelegram.issue_url(issue.id)