From 0c63732f80b0956d8d7d617c110ebe75345eb57a Mon Sep 17 00:00:00 2001
From: Jackie Nek <nguyenductai.eve@gmail.com>
Date: Wed, 20 Jun 2018 19:23:40 +0700
Subject: [PATCH] Open-Up/openup2018_01-barcamp#9 Add ellipsis and title to
 Chat channel's topic.

---
 .../app/conversation/topbar/conversation-topbar.less | 12 +++++++++---
 .../topic/conversation-topic-edition.less            |  4 ++++
 .../topic/conversation-topic-edition.pug             |  2 +-
 frontend/app/style.less                              |  1 +
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 frontend/app/conversation/topic/conversation-topic-edition.less

diff --git a/frontend/app/conversation/topbar/conversation-topbar.less b/frontend/app/conversation/topbar/conversation-topbar.less
index f78623f8..adc8ea1c 100644
--- a/frontend/app/conversation/topbar/conversation-topbar.less
+++ b/frontend/app/conversation/topbar/conversation-topbar.less
@@ -23,7 +23,9 @@
       margin-left: 4px;
     }
 
-    span {
+    div {
+      .ellipsis;
+      display: block;
       cursor: pointer;
       .label-emoji {
         width: @chatLabelEmojiSize;
@@ -42,8 +44,12 @@
     a {
       color: @secondaryTextColor;
     }
+
+    chat-conversation-topbar-actions-members span{
+        white-space: nowrap;
+    }
+
     font-size: 20px;
     color: @secondaryTextColor;
-  }
-
+    }
 }
diff --git a/frontend/app/conversation/topic/conversation-topic-edition.less b/frontend/app/conversation/topic/conversation-topic-edition.less
new file mode 100644
index 00000000..20e80d86
--- /dev/null
+++ b/frontend/app/conversation/topic/conversation-topic-edition.less
@@ -0,0 +1,4 @@
+chat-conversation-topic-edition {
+  width: 100%;
+  padding-left: 50px;
+}
diff --git a/frontend/app/conversation/topic/conversation-topic-edition.pug b/frontend/app/conversation/topic/conversation-topic-edition.pug
index b65d1229..96e52a71 100644
--- a/frontend/app/conversation/topic/conversation-topic-edition.pug
+++ b/frontend/app/conversation/topic/conversation-topic-edition.pug
@@ -1,4 +1,4 @@
 .chat-conversation-topic-edition
   span.editable(ng-if="!ctrl.conversation.topic.value" editable-text="ctrl.topic" onhide="ctrl.draft($data)" buttons="no" onbeforesave='ctrl.updateTopic($data)')
     | #{__('Set a topic')}
-  span.editable(ng-if="ctrl.conversation.topic.value" ng-bind-html="ctrl.conversation.topic.value | linky:'_blank' | esnEmoticonify:{class: 'label-emoji'}" editable-text="ctrl.topic" onhide="ctrl.draft($data)" buttons="no" onbeforesave='ctrl.updateTopic($data)')
+  div.editable(ng-if="ctrl.conversation.topic.value" ng-bind-html="ctrl.conversation.topic.value | linky:'_blank' | esnEmoticonify:{class: 'label-emoji'}" editable-text="ctrl.topic" onhide="ctrl.draft($data)" buttons="no" onbeforesave='ctrl.updateTopic($data)' title="{{ctrl.conversation.topic.value}}")
diff --git a/frontend/app/style.less b/frontend/app/style.less
index 0c4edcb8..b2a467c4 100644
--- a/frontend/app/style.less
+++ b/frontend/app/style.less
@@ -27,6 +27,7 @@
 @import './conversation/message/user/user-message.less';
 @import './conversation/message/actions/star/message-star.less';
 @import './conversation/topbar/conversation-topbar.less';
+@import './conversation/topic/conversation-topic-edition.less';
 @import './conversation/message-indicator/message-indicator.less';
 @import './conversation/messages-view';
 @import './conversation/user-typing/user-typing.less';