From 6c1d1c5785dcd5f6eedf7ee3659719722698068e Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 4 Jan 2025 14:34:49 +0100
Subject: [PATCH] feat(ui): default height of 48px for all inputs

---
 front/src/components/library/Artists.vue | 10 ++-
 front/src/components/ui/Button.vue       |  5 +-
 front/src/components/ui/Input.vue        |  5 +-
 front/src/components/ui/Pill.vue         |  4 +-
 front/src/components/ui/Pills.vue        | 60 ++++++++++++-----
 front/src/components/ui/input.scss       | 83 +++++++-----------------
 front/src/style/colors.scss              |  8 ++-
 front/src/style/inc/docs.scss            |  2 -
 front/ui-docs/components/ui/pills.md     | 19 +++++-
 front/ui-docs/using-color.md             |  2 +-
 10 files changed, 104 insertions(+), 94 deletions(-)

diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 1a33858ac..93352f5cd 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -24,6 +24,7 @@ import Input from '~/components/ui/Input.vue'
 import Toggle from '~/components/ui/Toggle.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
+import Pills from '~/components/ui/Pills.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -122,6 +123,11 @@ const labels = computed(() => ({
   title: t('components.library.Artists.title')
 }))
 
+const tagList = computed(() => ({
+  current: tags.value,
+  others: []
+}))
+
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
 </script>
 
@@ -143,8 +149,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           :placeholder="labels.searchPlaceholder"
         >
         </Input>
-        <Input
-          v-model="tags"
+        <Pills
+          v-model="tagList"
           :label="t('components.library.Artists.label.tags')"
           style="max-width: 150px;"
         />
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 21b6b9f59..e318336b9 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -88,14 +88,15 @@ onMounted(() => {
 
     // Layout
 
-    --padding: 10px;
+    --padding: 16px;
+    --shift-by: 0.5px;
 
     position: relative;
     display: inline-flex;
     white-space: nowrap;
     justify-content: space-between;
 
-    padding: 9px var(--padding) 11px var(--padding);
+    padding: calc(var(--padding) - var(--shift-by)) var(--padding) calc(var(--padding) + var(--shift-by)) var(--padding);
     &.is-icon-only {
       padding: var(--padding);
     }
diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index 3c791eb6f..d2cb545da 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n';
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut';
+import { color } from "~/composables/color.ts";
 
 import Button from "~/components/ui/Button.vue"
 import Layout from "~/components/ui/Layout.vue"
@@ -59,7 +60,7 @@ const model = defineModel<string|number>()
     </span>
 
     <input
-    v-bind="{...$attrs, ...attributes}"
+    v-bind="{...$attrs, ...attributes, ...color({}, ['default', 'raised', 'solid'])()}"
     v-model="model"
     ref="input"
     :placeholder="placeholder"
@@ -81,7 +82,7 @@ const model = defineModel<string|number>()
     <!-- Right side -->
 
     <div v-if="$slots['input-right']" class="input-right">
-      <span>
+      <span class="span-right">
         <slot name="input-right" />
       </span>
     </div>
diff --git a/front/src/components/ui/Pill.vue b/front/src/components/ui/Pill.vue
index 769e3e6cf..8c1b4448c 100644
--- a/front/src/components/ui/Pill.vue
+++ b/front/src/components/ui/Pill.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColorProps, type PastelProps, type VariantProps, color } from '~/composables/color'
+import { type ColorProps, type PastelProps, type VariantProps, type RaisedProps, color } from '~/composables/color'
 
 const emit = defineEmits<{
   click: [event: MouseEvent]
@@ -7,7 +7,7 @@ const emit = defineEmits<{
 const handleClick = (event: MouseEvent) => {
   emit('click', event)
 }
-const props = defineProps<{ noUnderline?:true } & (PastelProps | ColorProps) & VariantProps>()
+const props = defineProps<{ noUnderline?:true } & (PastelProps | ColorProps) & VariantProps & RaisedProps>()
 </script>
 
 <template>
diff --git a/front/src/components/ui/Pills.vue b/front/src/components/ui/Pills.vue
index 87160f797..2256ada7c 100644
--- a/front/src/components/ui/Pills.vue
+++ b/front/src/components/ui/Pills.vue
@@ -66,28 +66,35 @@ const deselectPill = (value:string) =>
     <!-- List of Pills -->
 
     <Layout flex gap-8
-      style="padding:4px; border-radius: 18px;"
       v-bind="color({}, ['solid', 'default', 'raised'])()"
       :class="$style.list"
     >
-      <Pill solid v-for="value in model.current" v-if="!model.others">
+      <Pill outline raised
+        v-for="value in model.current"
+        v-if="!model.others"
+        :class="$style.pill"
+      >
         <span>{{ value }}</span>
       </Pill>
-      <Pill solid no-underline @click="deselectPill(value)" v-for="value in model.current" v-if="model.others">
+      <Pill outline raised
+        no-underline @click="deselectPill(value)"
+        v-for="value in model.current"
+        v-if="model.others"
+        :class="$style.pill"
+      >
         <span :class="$style['pill-content']">{{ value }}</span>   ×
       </Pill>
 
-      <Spacer h grow />
-
       <!-- Add more pills -->
 
-      <select v-if="model.others"
+      <select
+        v-if="model.others"
         name="dropdown"
         v-model="selectedLabel"
         :class="$style.dropdown"
         @change="e => e.target.value='+'"
       >
-        <option value="+">+</option>
+        <option value="+"></option>
         <option v-for="value in model.others" :value="value">
           {{ value }}
         </option>
@@ -96,28 +103,47 @@ const deselectPill = (value:string) =>
   </Layout>
 </template>
 
-<style module>
+<style module lang="scss">
   .pills {
     >.label {
       margin-top: -18px;
       padding-bottom: 8px;
-      font-size:14px;
-      font-weight:600;
+      font-size: 14px;
+      font-weight: 600;
     }
-    >.list{
+    >.list {
+      padding:4px;
+      border-radius: 24px;
+
+      min-height: 48px;
+      min-width: 160px;
+
       >:is(:hover, :focus-visible) .pill-content {
         text-decoration: line-through !important;
       }
+      > .pill {
+        margin: 4px;
+        padding: 2px;
+      }
       >.dropdown{
         border-radius: 15px;
         padding: 2px 11.25px;
-        width:30px;
-      }
-      >.dropdown:focus-visible {
-        outline: 3px solid var(--fw-secondary);
-        outline-offset: 2px;
+        flex-grow: 1;
+        text-align: right;
+        background: transparent;
+        appearance: auto;
+        margin-right: 12px;
+
+        // From vitepress default, needed for app
+        border: 0;
+        color: inherit;
       }
     }
-
+    &:hover>.list {
+      box-shadow: inset 0 0 0 4px var(--border-color)
+    }
+    :has(>.dropdown:focus) {
+      box-shadow: inset 0 0 0 4px var(--focus-ring-color)
+    }
   }
 </style>
diff --git a/front/src/components/ui/input.scss b/front/src/components/ui/input.scss
index 217f77d4c..9717206d9 100644
--- a/front/src/components/ui/input.scss
+++ b/front/src/components/ui/input.scss
@@ -1,14 +1,19 @@
 .funkwhale.input {
-
   position: relative;
   flex-grow: 1;
 
+  --padding-v: 9px;
+  --padding: 16px;
+
   > input {
     background-color: var(--fw-bg-color);
     box-shadow: inset 0 0 0 4px var(--fw-border-color);
     outline: none;
+    border:none;
     width: 100%;
-    padding: 8px 12px;
+    padding: 9px 16px;
+    padding: calc(var(--padding-v) - 1px) var(--padding) calc(var(--padding-v) + 1px) var(--padding);
+
     font-size: 14px;
     font-family: $font-main;
     line-height: 28px;
@@ -19,41 +24,16 @@
     &:focus-visible {
       outline: none !important;
     }
+    &:hover {
+      box-shadow: inset 0 0 0 4px var(--border-color)
+    }
+    &:focus {
+      box-shadow: inset 0 0 0 4px var(--focus-ring-color)
+    }
 
     &::placeholder {
       color: var(--fw-placeholder-color);
     }
-
-    @include light-theme {
-      --fw-bg-color: var(--fw-gray-200);
-      --fw-border-color: var(--fw-bg-color);
-      --fw-placeholder-color: var(--fw-gray-600);
-
-      &:hover {
-        --fw-border-color: var(--fw-gray-300);
-      }
-
-      &:focus-within {
-        --fw-border-color: var(--fw-primary);
-        --fw-bg-color: var(--fw-blue-010);
-      }
-    }
-
-    @include dark-theme {
-      color: var(--fw-gray-300);
-      --fw-bg-color: var(--fw-gray-850);
-      --fw-border-color: var(--fw-bg-color);
-      --fw-placeholder-color: var(--fw-gray-300);
-
-      &:hover {
-        --fw-border-color: var(--fw-gray-700);
-      }
-
-      &:focus-within {
-        --fw-border-color: var(--fw-gray-600);
-        --fw-bg-color: var(--fw-gray-800);
-      }
-    }
   }
 
   &.has-icon > input {
@@ -79,8 +59,8 @@
     left: 0;
     bottom: 0;
 
-    height: 44px;
-    min-width: 44px;
+    height: 48px;
+    min-width: 48px;
     display: flex;
 
     > i {
@@ -97,14 +77,17 @@
     position: absolute;
     right: 0px;
     bottom: 0px;
-
-    height: 44px;
-    min-width: 44px;
+    height: 48px;
+    min-width: 48px;
     display: flex;
 
     > i {
       font-size:18px;
     }
+
+    > .span-right {
+      padding: calc(var(--padding-v) - 1px) var(--padding) calc(var(--padding-v) + 1px) var(--padding);
+    }
   }
 
   > .search {
@@ -131,12 +114,9 @@
 }
 
 form.ui.form {
-  select.dropdown {
-    /* display: none !important; */
-  }
   select.dropdown {
     display: block;
-    height: 44px;
+    height: 48px;
     margin-top: 7px;
     border-radius: var(--fw-border-radius);
     font-size: 14px;
@@ -152,31 +132,12 @@ form.ui.form {
       color: var(--fw-gray-800);
       background-color: var(--fw-gray-200);
       border-color: transparent;
-
-      &:hover {
-        outline: 4px solid var(--fw-gray-300);
-      }
-
-      &:focus-within {
-        outline: 4px solid var(--fw-primary);
-      }
     }
 
     @include dark-theme {
       color: var(--fw-gray-300);
       background-color: var(--fw-gray-850);
       border-color: var(--fw-gray-850);
-
-      &:hover,
-      &:focus-visible {
-        outline: 4px solid var(--fw-gray-700);
-        outline-offset: -4px;
-      }
-    }
-
-    & option {
-      color: red;
     }
   }
-  .selection.active.dropdown, .ui.selection.active.dropdown .menu {}
 }
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index b5bfd328d..f63584959 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -82,6 +82,8 @@
 // Light theme
 
 :is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme {
+  --focus-ring-color: var(--fw-primary);
+
   .default, .funkwhale, .VPDoc {
     --link-color:var(--fw-blue-400);
     --link-hover-color:var(--fw-blue-500);
@@ -296,6 +298,8 @@
 // Dark theme
 
 :is(body.theme-dark, html.dark>body:not(.theme-light)), .force-dark-theme.force-dark-theme.force-dark-theme {
+  --focus-ring-color: var(--fw-gray-600);
+
   .default, .funkwhale, .VPDoc {
     --link-color:var(--fw-gray-300);
     --link-hover-color:var(--fw-gray-200);
@@ -320,7 +324,7 @@
     --disabled-border-color:var(--fw-gray-950);
 
     &.raised{
-      --background-color:var(--fw-gray-900);
+      --background-color:var(--fw-gray-850);
       --border-color:var(--fw-gray-600);
       --link-color:var(--fw-gray-400);
       --link-hover-color:var(--fw-gray-200);
@@ -520,7 +524,7 @@
   // Fallback for focused elements without explicit focus-outline
 
   :is(button, input, a):focus-visible {
-    outline: 3px solid var(--fw-secondary);
+    outline: 3px solid var(--focus-ring-color);
     outline-offset: 2px;
   }
 
diff --git a/front/src/style/inc/docs.scss b/front/src/style/inc/docs.scss
index 0e41b5308..06dcd9f51 100644
--- a/front/src/style/inc/docs.scss
+++ b/front/src/style/inc/docs.scss
@@ -1,5 +1,3 @@
-@import "./theme.scss";
-
 @mixin docs {
   @if $docs {
     .vp-doc & {
diff --git a/front/ui-docs/components/ui/pills.md b/front/ui-docs/components/ui/pills.md
index 96d18d57b..9a47b9cb0 100644
--- a/front/ui-docs/components/ui/pills.md
+++ b/front/ui-docs/components/ui/pills.md
@@ -3,14 +3,20 @@ import { computed, ref } from 'vue'
 
 import Pills from '~/components/ui/Pills.vue';
 import Layout from '~/components/ui/Layout.vue';
+import Input from '~/components/ui/Input.vue';
+
+const nullModel = ref({
+  current: [],
+  others: []
+});
 
 const staticModel = ref({
-  current: ["Noise", "Field Recording", "Experiment"]
+  current: ["#Noise", "#FieldRecording", "#Experiment"]
 });
 
 const interactiveModel = ref({
-  current: ["Noise", "Field Recording", "Experiment"],
-  others: ["Melody", "Rhythm"]
+  current: ["#Noise", "#FieldRecording", "#Experiment"],
+  others: ["#Melody", "#Rhythm"]
 });
 </script>
 
@@ -24,4 +30,11 @@ Select a set of pills from presets, and add and remove custom ones
 
 <Layout class="preview" style="padding:16px">
   <Pills v-model="interactiveModel" label="Tags" />
+  <Input label="Label" placeholder="Placeholder"></Input>
+</Layout>
+
+## No pills
+
+<Layout class="preview" style="padding:16px">
+  <Pills v-model="nullModel"  />
 </Layout>
diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md
index 30725eb3e..57a0d1011 100644
--- a/front/ui-docs/using-color.md
+++ b/front/ui-docs/using-color.md
@@ -55,7 +55,7 @@ Want to fix colors?
 
 ```vue
 <script setup>
-import { color } from "~/composables/colors.ts";
+import { color } from "~/composables/color.ts";
 </script>
 
 <template>