💄 Site > Chat > Add design

site/src/components/alert/style.styl

@@ -7,6 +7,15 @@
     height 40px
     background #24263A
 
+    .stroke
+        position absolute
+        top 0
+        left 0
+        right 0
+        height 1px
+        background #FD4141
+        display none
+
     .icon
         position absolute
         top 10px
@@ -25,3 +34,6 @@
 
             &.hover
                 display inline-block
+
+        .stroke
+            display block

site/src/components/alert/template.html

@@ -1,4 +1,5 @@
 <a href="#" class="alert" @click.prevent="onAlertClick">
+    <span class="stroke"></span>
     <img class="icon default" src="../../../static/svg/alert.svg" alt="">
     <img class="icon hover" src="../../../static/svg/alert-hover.svg" alt="">
 </a>

site/src/components/chat/script.js

@@ -31,6 +31,11 @@ export default
         user()
         {
             return this.$store.state.chat.user
+        },
+
+        scrollbarWidth()
+        {
+            return this.$store.state.scrollbarWidth
         }
     },
 
@@ -152,6 +157,9 @@ export default
 
                     // Reset question
                     this.$store.commit('setQuestion', null)
+
+                    // Scroll to bottom
+                    this.scrollToBottom()
                 }
             }
         },
@@ -197,6 +205,25 @@ export default
         scrollToBottom()
         {
             this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight
+        },
+
+        formatMinutes(time)
+        {
+            const date = new Date(time)
+
+            let minutes = '' + date.getMinutes()
+            if(minutes.length === 1)
+            {
+                minutes = `0${minutes}`
+            }
+
+            let hours = '' + date.getHours()
+            if(hours.length === 1)
+            {
+                hours = `0${hours}`
+            }
+
+            return `${hours}:${minutes}`
         }
     }
 }

site/src/components/chat/style.styl

@@ -16,6 +16,15 @@
     font-size 14px
     white-space nowrap
 
+    .stroke
+        position absolute
+        top 0
+        left 0
+        right 0
+        height 1px
+        background #4BD1C5
+        display none
+
     .icon
         margin-left 4px
 
@@ -31,12 +40,153 @@
         color #4BD1C5
 
     &:hover
+        .stroke
+            display block
+
+.content
+    position relative
+    background #24263A
+    height 450px
+    width 300px
+    overflow hidden
+
+    .header
+        position absolute
+        top 0
+        left 0
+        width 100%
+        height 40px
+        padding-left 14px
+        line-height 40px
+        font-size 14px
+
+        .stroke
+            position absolute
+            top 0
+            left 0
+            right 0
+            height 1px
+            background #4BD1C5
+            display none
+
+        .dash
+            position absolute
+            top calc(50% - 1px)
+            right 14px
+            height 2px
+            width 12px
+            background #fff
+
+        &:hover
+            .stroke
+                display block
+
+    .messages
+        position absolute
+        top 40px
+        left 0
+        right 0
+        height 330px
+        padding-top 4px
+        overflow-y scroll
+        background #393855
+        font-size 12px
+
+        .message
+            position relative
+            padding-left 21px
+            margin-bottom 10px
+
+            .stroke
+                position absolute
+                top 0px
+                left 10px
+                width 2px
+                bottom 2px
+
+            .message-user
+                padding-bottom 3px
+
+            .message-date
+                display inline-block
+                opacity 0
+                padding-left 4px
+                padding-bottom 3px
+
+            .message-file
+                display block
+                padding-bottom 3px
+                opacity 0.7
+
+                &:hover
+                    opacity 1
                     color #4BD1C5
 
+            &:hover
+                .message-date
+                    opacity 0.4
+
+
+    .user
+        position absolute
+        top 374px
+        left 0
+        font-size 12px
+        padding-left 8px
+
+        .user-label
+            opacity 0.7
+
         .user-name
             outline none
             border none
 
-.messages
-    height 300px
-    overflow-y scroll
+    .question
+        position absolute
+        bottom 0
+        right 0
+        padding 4px
+        font-size 12px
+
+        .question-file
+            position absolute
+            bottom 5px
+            right 22px
+            opacity 0.7
+            white-space nowrap
+            pointer-events none
+
+        .remove
+            position absolute
+            bottom 0
+            right 0
+            width 20px
+            height 20px
+            padding-top 4px
+            padding-left 3px
+
+            .icon
+                &.default
+                    display block
+
+                &.hover
+                    display none
+
+            &:hover
+                .icon
+                    &.default
+                        display none
+
+                    &.hover
+                        display block
+
+    textarea
+        position absolute
+        bottom 0
+        left 0
+        font-size 12px
+        width 100%
+        height 58px
+        padding-left 8px
+        resize none
+        // opacity 0.8

site/src/components/chat/template.html

@@ -1,5 +1,6 @@
 <div class="chat">
     <a href="#" v-show="!open" class="trigger" @click="onHeaderClick">
+        <span class="stroke"></span>
         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="">
@@ -7,34 +8,37 @@
     </a>
     <div class="content" v-show="open">
         <a href="#" class="header" @click="onHeaderClick">
+            <span class="stroke"></span>
+            <div class="dash"></div>
             Discussions
         </a>
-        <div class="messages" @scroll="onMessagesScroll">
+        <div class="messages" :style="`right: -${scrollbarWidth}px;`" @scroll="onMessagesScroll">
             <div class="inner-messages">
                 <div class="message" v-for="message of messages" :key="message.date">
-                    <div class="date">
-                        {{ message.time }}
-                    </div>
-                    <div class="user" :style="`color: ${message.user.color};`">
+                    <div class="stroke" :style="`background: ${message.user.color};`"></div>
+                    <span class="message-user" :style="`color: ${message.user.color};`">
                         {{ message.user.name }}
-                    </div>
-                    <a href="#" class="file" v-if="message.file && message.line" @click.prevent="onFileClick(message.file, message.version, message.line)">
+                    </span>
+                    <span class="message-date">
+                        {{ formatMinutes(message.time) }}
+                    </span>
+                    <a href="#" class="message-file" v-if="message.file && message.line" @click.prevent="onFileClick(message.file, message.version, message.line)">
                         {{ message.file }}:{{ message.line }}
                     </a>
-                    <div class="text" v-html="message.text.replace(/\n/g, '<br>')"></div>
+                    <div class="message-text" v-html="message.text.replace(/\n/g, '<br>')"></div>
                 </div>
             </div>
         </div>
-        <div class="infos" v-if="user">
-            Your nickname is <input maxlength="22" class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
+        <div class="user" v-if="user">
+            <span class="user-label">Your nickname is</span> <input maxlength="22" class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
         </div>
+        <textarea class="textarea" :style="`width:calc(100% + ${scrollbarWidth}px);padding-right:${scrollbarWidth}px;`" v-model="messageText" @keydown="onMessageTextKeyDown($event)" placeholder="Type you message here..."></textarea>
         <div class="question" v-if="question">
-            Question:
             <span class="question-file">{{ question.file }}:{{ question.line }}</span>
-            <a href="#" class="remove" @click.prevent="onQuestionRemoveClick">x</a>
-        </div>
-        <div class="message">
-            <textarea class="textarea" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
+            <a href="#" class="remove" @click.prevent="onQuestionRemoveClick">
+                <img class="icon default" src="../../../static/svg/cross.svg" alt="">
+                <img class="icon hover" src="../../../static/svg/cross-hover.svg" alt="">
+            </a>
         </div>
     </div>
 </div>

site/static/svg/cross-hover.svg

@@ -4,7 +4,7 @@
     <title>croix</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
         <g id="03.2.2---Questions-ouvert-click-ligne-6" transform="translate(-1299.000000, -826.000000)" fill="#4BD1C5">
             <g id="Question" transform="translate(1018.000000, 450.000000)">
                 <g id="Croix" transform="translate(281.000000, 376.000000)">

site/static/svg/cross.svg

@@ -4,7 +4,7 @@
     <title>croix</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
         <g id="03.2.2---Questions-ouvert-click-ligne-6" transform="translate(-1299.000000, -826.000000)" fill="#F6F6F6">
             <g id="Question" transform="translate(1018.000000, 450.000000)">
                 <g id="Croix" transform="translate(281.000000, 376.000000)">