wip: Refactor collections based components #917

kalisio · Aug 21, 2024 · ab6ae2a · ab6ae2a
1 parent ea73a4b
commit ab6ae2a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git 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>
+</script>
diff --git 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>
+</script>
+
+<style lang="scss" scoped>
+.k-scroll-to-top {
+  position: relative;
+  transform: translate(-48px, -24px);
+}
+</style>