From ab6ae2a58e6ab6ad8600975381cc68a0ef4cd006 Mon Sep 17 00:00:00 2001
From: cnouguier <ch.nouguier@gmail.com>
Date: Wed, 21 Aug 2024 18:28:01 +0200
Subject: [PATCH] wip: Refactor collections based components #917

---
 .../components/collection/KScrollDown.vue     | 13 ++++---
 .../components/collection/KScrollToTop.vue    | 37 +++++++++++++------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/core/client/components/collection/KScrollDown.vue b/core/client/components/collection/KScrollDown.vue
index 2a62f0132..2adf8fd0b 100644
--- a/core/client/components/collection/KScrollDown.vue
+++ b/core/client/components/collection/KScrollDown.vue
@@ -6,11 +6,10 @@
     />
     <KAction v-else
       v-if="isVisible"
-      id="load-more"
-      icon="las la-angle-double-down" 
-      color="accent"
+      id="scroll-down"
+      :color="color"
+      :icon="icon" 
       :size="size"
-      :flat="false"
       :handler="scrollOnce"
     />
   </div>
@@ -27,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  color: {
+    type: String,
+    default: 'grey-7'
+  },
   icon: {
     type: String,
     default: 'las la-angle-double-down'
@@ -81,4 +84,4 @@ function scrollOnce () {
 defineExpose({
   refresh
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/core/client/components/collection/KScrollToTop.vue b/core/client/components/collection/KScrollToTop.vue
index 0ec34e0cb..f2544f235 100644
--- a/core/client/components/collection/KScrollToTop.vue
+++ b/core/client/components/collection/KScrollToTop.vue
@@ -1,14 +1,16 @@
 <template>
-  <KAction
-    v-if="isVisible"
-    id="back-to-top"
-    tooltip="KScrollToTop.TOOLTIP"
-    icon="vertical_align_top" 
-    color="accent"
-    :flat="false"
-    :size="size"
-    :handler="scrollToTop"
-  />
+  <div class="k-scroll-to-top">
+    <KAction
+      v-if="isVisible"
+      id="scroll-to-top"
+      tooltip="KScrollToTop.TOOLTIP"
+      :icon="icon" 
+      :color="color"
+      :flat="false"
+      :size="size"
+      :handler="scrollToTop"
+    />
+</div>
 </template>
 
 <script setup>
@@ -21,9 +23,13 @@ const props = defineProps({
     type: String,
     required: true
   },
+  color: {
+    type: String,
+    default: 'grey-7'
+  },
   icon: {
     type: String,
-    default: 'vertical_align_top'
+    default: 'las la-arrow-up'
   },
   size: {
     type: String,
@@ -62,4 +68,11 @@ function scrollToTop () {
 defineExpose({
   refresh
 })
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.k-scroll-to-top {
+  position: relative;
+  transform: translate(-48px, -24px);
+}
+</style>
\ No newline at end of file