feat: Add logo app in avatar

ktquez · Jun 21, 2020 · 94b0ff3 · 94b0ff3
1 parent 030f3a7
commit 94b0ff3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 320 deletions.
diff --git a/src/ListChat.vue b/src/ListChat.vue
@@ -17,6 +17,10 @@
             :src="attendant.avatar.src"
             :alt="attendant.avatar.alt"
           >
+          <span
+            class="vsc-popup-body__link-avatar-brand"
+            :style="props.logo ? `background-image: url(https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/logos/${props.logo}.png)` : ''"
+          />
         </div>
         <div class="vsc-popup-body__link-info">
           <span
@@ -38,6 +42,10 @@ export default {
   name: 'ListChat',
 
   props: {
+    logo: {
+      type: String,
+      default: null
+    },
     attendants: {
       type: Array,
       default: () => ([])

diff --git a/src/PopupChat.vue b/src/PopupChat.vue
diff --git a/src/SocialChat.vue b/src/SocialChat.vue
@@ -116,6 +116,7 @@ export default {
 <style lang="stylus">
 $bg = #333
 $bgButton = #333
+$waColor = #46c056
 
 :root
   --vsc-bg-header: $bg
@@ -127,6 +128,9 @@ $bgButton = #333
   --vsc-outline-color: #333
   --vsc-border-default: 1px solid #f3f3f3
 
+.vsc-whatsapp.vsc-popup
+  --vsc-bg-button: $waColor
+
 .vsc-popup *
   box-sizing: border-box
   padding: 0
@@ -168,7 +172,7 @@ $bgButton = #333
     color: var(--vsc-text-color-header)
 
   &-body
-    padding: 16px
+    padding: 14px
     background-color: white
 
     &__list
@@ -180,17 +184,17 @@ $bgButton = #333
         width: 100%
 
         &:not(:last-child)
-          margin-bottom: 3px;
+          border-bottom: 1px solid #fbfbfb
 
     &__link
       outline: none;
       display: flex
-      padding: 20px
+      padding: 10px 14px
       text-decoration: none
-      border-radius: 10px
       color: #333
       letter-spacing: .2px
-      transition: box-shadow .3s
+      margin: 1.5px 0
+      border-radius: 10px
 
       &:hover, &:focus
         background-color: #fbfbfb
@@ -199,16 +203,25 @@ $bgButton = #333
         box-shadow: 0 0 0 3px var(--vsc-outline-color)
 
       &-avatar
+        position: relative
         width: 62px
         height: 62px
-        overflow: hidden
 
         > img
           width: 100%
           height: 100%
           object-fit: cover
           border-radius: 50%
 
+        &-brand
+          position: absolute;
+          right: 2px;
+          bottom: 2px;
+          width: 15px;
+          height: 15px;
+          background-repeat: no-repeat;
+          background-size: contain;
+
       &-info
         padding-top: 12px
         padding-left: 12px
@@ -237,7 +250,7 @@ $bgButton = #333
     -webkit-appearance: none
     -moz-appearance: none
     background-color: transparent
-    color: inherit
+    color: var(--vsc-text-color-button)
     border: none
     cursor: pointer
     border-radius: 50%
@@ -247,11 +260,10 @@ $bgButton = #333
     padding-top: 2px;
     box-shadow: 0 3px 10px rgba(0,0,0,0.3)
     font-family: inherit
-    transition: background-color .3s, box-shadow .3s
+    transition: background-color .3s, box-shadow .2s
 
     &--default
       background-color: var(--vsc-bg-button)
-      color: var(--vsc-text-color-button)
 
     &--no-icon
       border-radius: 30px