css changes

Author: Emre Üstere

frontend/express/public/javascripts/countly/vue/components/helpers.js

@@ -1314,44 +1314,41 @@
                     },
                     scrollPanel: {
                         initialScrollX: false,
-                        maxHeight: '150px',
-                        minHeight: '36px',
+                        // heigh: '50px',
+                        // maxHeight: '150px',
                     },
                     rail: {
                         gutterOfSide: "4px",
                         gutterOfEnds: "16px",
+                        keepShow: false,
                     },
                     bar: {
                         background: "#A7AEB8",
                         size: "6px",
+                        keepShow: false,
                     }
                 },
             };
         },
-        computed: {
-            listArrow: function() {
-                if (this.isOpen) {
-                    return "cly-io-chevron-up";
-                }
-                else {
-                    return "cly-io-chevron-down";
-                }
-            }
-        },
         methods: {
             toggleList: function() {
                 this.isOpen = !this.isOpen;
             },
         },
         template: '<div class="cly-list-drawer">\
-                        <div class="cly-list-drawer__text-clickable bu-pt-4 bu-pb-3 bu-has-text-weight-medium" @click="toggleList">{{dropdownText}}<i class="cly-io-16 cly-io" :class="listArrow"></i></div>\
-                            <div v-if="isOpen" class="cly-list-drawer__list">\
-                                <vue-scroll :ops="options">\
+                        <div class="cly-list-drawer__text-clickable bu-pt-4 bu-pb-3 bu-has-text-weight-medium" @click="toggleList">\
+                            {{ dropdownText }}\
+                            <i class="cly-io-16 cly-io cly-io-chevron-down" :class="{ \'rotate-icon\': isOpen }"></i>\
+                        </div>\
+                        <div v-if="isOpen" class="cly-list-drawer__list">\
+                            <vue-scroll :ops="options">\
+                                <div>\
                                     <ul>\
                                         <li v-for="ev in list">{{ev}}</li>\
                                     </ul>\
-                                </vue-scroll>\
-                            </div>\
+                                </div>\
+                            </vue-scroll>\
+                        </div>\
                     </div>'
     }));
 

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4502,24 +4502,35 @@
 }
 
 .cly-list-drawer {
-    &__text-clickable {
-        color:#0166D6
+    .cly-list-drawer__text-clickable {
+        color: #0166D6;
+        cursor: pointer;
+    }
+    .cly-list-drawer__text-clickable i {
+        transition: transform 0.3s, -webkit-transform .3s;
+    }
+    
+    .rotate-icon {
+        transform: rotate(180deg);
+    }
+
+    .cly-io {
+        display: inline-block;
     }
 
     &__list {
-        height: auto;
-        min-height: 36px;
-        max-height: 150px;
+        height: 100px;
         background-color: #F6F6F6;
         overflow: auto;
         ul {
-            list-style: none; padding: 0;
+            list-style: none;
+            padding: 0px;
             li {
                 padding-left: 16px;
                 padding-bottom: 0.5rem;
             }
             li:last-child {
-                padding-bottom: 0;
+                padding-bottom: 0px;
             }
         }
     }