From e362d29d7e4fb7c01beb6f7be481179dde40b586 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Mon, 4 Sep 2017 00:20:47 +0200
Subject: [PATCH] :lipstick: Site > Chat > Trigger > Add style

---
 site/src/components/chat/style.styl    | 34 +++++++++++++++++++++++---
 site/src/components/chat/template.html | 12 ++++++---
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/site/src/components/chat/style.styl b/site/src/components/chat/style.styl
index 941faa8..f93f950 100644
--- a/site/src/components/chat/style.styl
+++ b/site/src/components/chat/style.styl
@@ -1,11 +1,37 @@
 .chat
     position fixed
     bottom 0
-    right 90px
-    background #fff
+    right 123px
+    color #fff
 
-.header
-    cursor pointer
+.trigger
+    position absolute
+    bottom 0
+    right 0
+    height 40px
+    padding-left 14px
+    padding-right 18px
+    line-height 40px
+    background #24263A
+    font-size 14px
+    white-space nowrap
+
+    .icon
+        margin-left 4px
+
+    .unread
+        display inline-block
+        position absolute
+        top 7px
+        left calc(100% - 25px)
+        width 20px
+        text-align center
+        font-size 9px
+        line-height 9px
+        color #4BD1C5
+
+    &:hover
+        color #4BD1C5
 
 .user-name
     outline none
diff --git a/site/src/components/chat/template.html b/site/src/components/chat/template.html
index a2f3724..08543ba 100644
--- a/site/src/components/chat/template.html
+++ b/site/src/components/chat/template.html
@@ -1,8 +1,14 @@
 <div class="chat">
-    <header class="header" @click="onHeaderClick">
-        Discussions ({{ unreadCount }})
-    </header>
+    <a href="#" v-show="!open" class="trigger" @click="onHeaderClick">
+        Discussions
+        <img v-if="unreadCount === 0" class="icon default" src="../../../static/svg/chat-star.svg" alt="">
+        <img v-if="unreadCount > 0" class="icon hover" src="../../../static/svg/chat-star-hover.svg" alt="">
+        <span v-if="unreadCount > 0" class="unread">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+    </a>
     <div class="content" v-show="open">
+        <a href="#" class="header" @click="onHeaderClick">
+            Discussions
+        </a>
         <div class="messages" @scroll="onMessagesScroll">
             <div class="inner-messages">
                 <div class="message" v-for="message of messages" :key="message.date">