From bc8ba484c3bea41af94bfc876e1a20c3e350ae93 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 13 May 2024 21:15:32 +0530
Subject: [PATCH] fix: added fadedScrollableDiv component

---
 .../src/components/FadedScrollableDiv.vue     | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 frontend/src/components/FadedScrollableDiv.vue

diff --git a/frontend/src/components/FadedScrollableDiv.vue b/frontend/src/components/FadedScrollableDiv.vue
new file mode 100644
index 00000000..f54e8f38
--- /dev/null
+++ b/frontend/src/components/FadedScrollableDiv.vue
@@ -0,0 +1,29 @@
+<template>
+  <div ref="scrollableDiv" class="scrr" :style="`maskImage: ${maskStyle}`">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+  maskHeight: {
+    type: Number,
+    default: 20,
+  },
+})
+
+const scrollableDiv = ref(null)
+const maskStyle = ref('none')
+
+function setMaskStyle() {
+  // show mask only if div is scrollable
+  if (scrollableDiv.value.scrollHeight > scrollableDiv.value.clientHeight) {
+    maskStyle.value = `linear-gradient(to bottom, black calc(100% - ${props.maskHeight}px), transparent 100%);`
+  } else {
+    maskStyle.value = 'none'
+  }
+}
+
+onMounted(() => setMaskStyle())
+</script>