From fff04844f9691fa8260cee1b470bbbcc65af1af3 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Fri, 10 Jan 2025 01:14:54 +0100
Subject: [PATCH] fix(ui): use small buttons in pagination footer

---
 front/src/components/ui/Button.vue        | 11 +++----
 front/src/components/ui/Pagination.vue    | 39 +++++++++++------------
 front/src/components/ui/pagination.scss   |  8 -----
 front/ui-docs/components/ui/button.md     | 13 ++++++--
 front/ui-docs/components/ui/pagination.md |  4 +++
 5 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 3a8da2368..dc0089baa 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
   shadow?: boolean
   round?: boolean
-  icon?: string
+  icon?: string | `right ${string}`
 
   onClick?: (...args: any[]) => void | Promise<void>
 
@@ -38,7 +38,6 @@ const fontWeight = props.thinFont ? 400 : 900
 
 const button = ref()
 
-
 const click = async (...args: any[]) => {
   internalLoader.value = true
 
@@ -70,12 +69,14 @@ onMounted(() => {
     }"
     @click="click"
   >
-    <i v-if="icon" :class="['bi', icon]" />
+    <i v-if="icon && !icon.startsWith('right ')" :class="['bi', icon]" />
 
     <span>
       <slot />
     </span>
 
+    <i v-if="icon && icon.startsWith('right ')" :class="['bi', icon.replace('right ', '')]" />
+
     <Loader v-if="isLoading" :container="false" />
   </button>
 </template>
@@ -94,6 +95,7 @@ onMounted(() => {
     white-space: nowrap;
     justify-content: space-between;
     align-items: center;
+    gap: 10px;
 
     padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding);
     &.is-icon-only {
@@ -155,9 +157,6 @@ onMounted(() => {
       }
     }
 
-    i.bi + span:not(:empty) {
-      margin-left: 10px;
-    }
 
     &.is-icon-only i.bi {
       margin: -6px;
diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue
index 3f040dadb..788fcfe56 100644
--- a/front/src/components/ui/Pagination.vue
+++ b/front/src/components/ui/Pagination.vue
@@ -57,28 +57,25 @@ const setPage = () => {
     class="funkwhale pagination" role="navigation">
     <ul class="pages">
       <li>
-        <Button @click="page -= 1" :disabled="page <= 1" :aria-label="t('vui.aria.pagination.gotoPrevious')"
-          color="secondary" outline>
-          <i class="bi bi-chevron-left" />
+        <Button low-height min-content @click="page -= 1" :disabled="page <= 1" :aria-label="t('vui.aria.pagination.gotoPrevious')"
+          outline icon="bi-chevron-left">
           <span v-if="!isSmall">{{ t('vui.pagination.previous') }}</span>
         </Button>
       </li>
 
-      <template v-if="!isSmall">
-        <template v-for="(i, index) in renderPages" :key="i">
-          <li>
-            <Button v-if="i <= pages && i > 0 && pages > 3" @click="page = i" color="secondary"
-              :aria-label="page !== i ? t('vui.aria.pagination.gotoPage', i) : t('vui.aria.pagination.currentPage', page)"
-              :outline="page !== i">
-              {{ i }}
-            </Button>
-          </li>
-          <li v-if="i + 1 < renderPages[index + 1]">…</li>
-        </template>
+      <template v-if="!isSmall" v-for="(i, index) in renderPages" :key="i">
+        <li>
+          <Button square-small v-if="i <= pages && i > 0 && pages > 3" @click="page = i"
+            :aria-label="page !== i ? t('vui.aria.pagination.gotoPage', i) : t('vui.aria.pagination.currentPage', page)"
+            :outline="page !== i">
+            {{ i }}
+          </Button>
+        </li>
+        <li v-if="i + 1 < renderPages[index + 1]">…</li>
       </template>
       <template v-else>
         <li>
-          <Button @click="page = 1" color="secondary"
+          <Button square-small @click="page = 1"
             :aria-label="page !== 1 ? t('vui.aria.pagination.gotoPage', page) : t('vui.aria.pagination.currentPage', page)"
             :outline="page !== 1">
             1
@@ -86,12 +83,12 @@ const setPage = () => {
         </li>
         <li v-if="page === 1 || page === pages">…</li>
         <li v-else>
-          <Button color="secondary" :aria-label="t('vui.aria.pagination.currentPage', page)" aria-current="true">
+          <Button square-small :aria-label="t('vui.aria.pagination.currentPage', page)" aria-current="true">
             {{ page }}
           </Button>
         </li>
         <li>
-          <Button @click="page = pages" color="secondary"
+          <Button square-small @click="page = pages"
             :aria-label="page !== pages ? t('vui.aria.pagination.gotoPage', page) : t('vui.aria.pagination.currentPage', page)"
             :outline="page !== pages">
             {{ pages }}
@@ -100,10 +97,10 @@ const setPage = () => {
       </template>
 
       <li>
-        <Button @click="page += 1" :disabled="page >= pages" :aria-label="t('vui.aria.pagination.gotoNext')"
-          color="secondary" outline>
+        <Button low-height min-content @click="page += 1" :disabled="page >= pages" :aria-label="t('vui.aria.pagination.gotoNext')"
+           outline icon="right bi-chevron-right">
           <span v-if="!isSmall">{{ t('vui.pagination.next') }}</span>
-          <i class="bi bi-chevron-right" />
+
         </Button>
       </li>
     </ul>
@@ -112,7 +109,7 @@ const setPage = () => {
       {{ t('vui.go-to') }}
       <Input :placeholder="page.toString()" @keyup.enter="setPage" @keydown="preventNonNumeric"
         inputmode="numeric" pattern="[0-9]* // TODO: Move number input functionality into `Input` component"
-        v-model.number="goTo" />
+        v-model="goTo" />
     </div>
   </nav>
 </template>
diff --git a/front/src/components/ui/pagination.scss b/front/src/components/ui/pagination.scss
index e817fb871..65b69118a 100644
--- a/front/src/components/ui/pagination.scss
+++ b/front/src/components/ui/pagination.scss
@@ -54,14 +54,6 @@
           min-width: 94px;
           text-align: center;
         }
-
-        &:first-child > .funkwhale.button span > span {
-          padding-left: 0.5ch;
-        }
-
-        &:last-child > .funkwhale.button span > span {
-          padding-right: 0.5ch;
-        }
       }
     }
 
diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index 474b0fb15..b12624f87 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -386,10 +386,13 @@ You can override the promise state by passing a false `is-loading` prop.
 
 ## Add an icon
 
-You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button component
+You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button component.
 
 ::: info
-Icon buttons shrink down to the icon size if you don't pass any content. If you want to keep the button at full width with just an icon, add `width=standard`
+
+- Icon buttons shrink down to the icon size if you don't pass any content. If you want to keep the button at full width with just an icon, add `button-width` as a prop.
+- When combining icons with other content, prefix the icon prop with `right ` to place it after the content.
+
 :::
 
 ```vue-html
@@ -399,6 +402,9 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 <Button destructive icon="bi-trash">
   Delete
 </Button>
+<Button low-height icon="right bi-chevron-right">
+  Next
+</Button>
 ```
 
 <Layout flex>
@@ -408,6 +414,9 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 <Button destructive icon="bi-trash">
   Delete
 </Button>
+<Button low-height icon="right bi-chevron-right">
+  Next
+</Button>
 </Layout>
 
 ## Set width and alignment
diff --git a/front/ui-docs/components/ui/pagination.md b/front/ui-docs/components/ui/pagination.md
index 9ad37208c..2b8ce0870 100644
--- a/front/ui-docs/components/ui/pagination.md
+++ b/front/ui-docs/components/ui/pagination.md
@@ -6,6 +6,10 @@ import Pagination from "~/components/ui/Pagination.vue"
 const page = ref(1)
 </script>
 
+```ts
+import Pagination from "~/components/ui/Pagination.vue"
+```
+
 # Pagination
 
 The pagination component helps users navigate through large lists of results by splitting them up into pages.