Add artist card

docs/.vitepress/config.ts

@@ -13,12 +13,16 @@ export default defineConfig({
 			{
         text: "Components",
         items: [
-			    { text: "Button", link: "/components/button/" },
+			    { text: "Button", items: [
+            { text: "Basic Button", link: "/components/button/basic" },
+            { text: "Play Button", link: "/components/button/play" },
+          ] },
 			    { text: "Pill", link: "/components/pill/" },
 			    { text: "Loader", link: "/components/loader/" },
 			    { text: "Card", items: [
             { text: "Basic Card", link: "/components/card/basic" },
             { text: "Radio Card", link: "/components/card/radio" },
+            { text: "Artist Card", link: "/components/card/artist" },
           ] },
         ]
       }

docs/components/button/play.md

+# Play Button
+```html
+<fw-play-button @play="play" />
+```
+<fw-play-button />

docs/components/card/artist.md

+<script setup lang="ts">
+const artist = {
+  name: 'Artist Name',
+  tags: ['Electro'],
+  albums: [{}, {}, {}, {}],
+  cover: {
+    urls: {
+      original: 'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
+    }
+  }
+}
+</script>
+
+# Artist card
+## Normal card
+```html
+<fw-artist-card :artist="artist" />
+```
+<fw-artist-card :artist="artist" />

src/components/button/Button.vue

@@ -9,6 +9,7 @@ interface Props extends ColorProps {
   isActive?: boolean
   isLoading?: boolean
 
+  shadow?: boolean
   round?: boolean
   icon?: string
 
@@ -44,7 +45,7 @@ const click = async (...args: any[]) => {
 <template>
 	<button
     class="funkwhale input button"
-    :class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading, 'icon-only': iconOnly, 'is-round': round }]"
+    :class="[type, { 'is-active': isActive, 'is-outline': outline, 'is-loading': isLoading, 'icon-only': iconOnly, 'is-round': round, 'is-shadow': shadow }]"
     @click="click"
   >
     <span>

src/components/button/options/Button.vue

+<script setup lang="ts">
+import { FwButton } from '~/components'
+</script>
+
+<template>
+  <fw-button
+    icon="bi-three-dots-vertical"
+    class="options-button"
+    secondary
+  />
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/button/options/style.scss

+.funkwhale {
+  &.options-button {
+
+    &:not(:hover):not(:active) {
+      --fw-bg-color: transparent !important;
+    }
+
+    transform: translateX(0);
+    transition: all .2s ease;
+    font-size: 0.6rem;
+
+    i {
+      font-size: 1.2rem;
+    }
+  }
+}

src/components/button/play/Button.vue

+<script setup lang="ts">
+import { FwButton } from '~/components'
+
+interface Events {
+  (e: 'play'): void
+}
+
+const emit = defineEmits<Events>()
+</script>
+
+<template>
+  <fw-button
+    @click="emit('play')"
+    icon="bi-play-fill"
+    class="play-button"
+    shadow
+    round
+  />
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/button/play/style.scss

+.funkwhale {
+  &.play-button {
+    --fw-bg-color: #fff !important;
+    --fw-text-color: var(--fw-grey-600) !important;
+
+    transform: translateX(0);
+    transition: all .2s ease;
+    font-size: 0.6rem;
+
+    i {
+      font-size: 2rem;
+    }
+
+    &:hover {
+      --fw-text-color: var(--fw-pastel-4, var(--fw-primary)) !important;
+    }
+  }
+}

src/components/button/style.scss

@@ -17,6 +17,10 @@
     border-radius: var(--fw-border-radius);
     margin: 0 0.5ch;
 
+    &.is-shadow {
+      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+    }
+
     &:not(.icon-only) {
       min-width: 8.5rem;
     }
@@ -30,9 +34,18 @@
       cursor: default;
     }
 
-    &.is-focused,
-    &:focus {
-      box-shadow: none !important;
+    &.is-secondary.is-dark {
+      --fw-bg-color: var(--fw-grey-600);
+
+      &.is-hovered,
+      &:hover {
+        --fw-bg-color: var(--fw-grey-700);
+      }
+
+      &.is-active,
+      &:active {
+        --fw-text-color: var(--fw-grey-300);
+      }
     }
 
     &.is-outline {

src/components/card/Card.vue

@@ -34,7 +34,7 @@ defineProps<Props>()
       v-if="buttonTitle"
       class="card-button"
     >
-      <fw-button outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
+      <fw-button class="is-dark" outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
     </div>
   </div>
 </template>

src/components/card/artist/Card.vue

+<script setup lang="ts">
+import { FwCard, FwPill, FwPlayButton, FwOptionsButton } from '~/components'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+interface Artist {
+  id: number
+  name: string
+  tags: string[]
+  albums: object[]
+  cover: {
+    urls: {
+      original: string
+    }
+  }
+}
+
+interface Events {
+  (e: 'play', artist: Artist): void
+}
+
+interface Props {
+  artist: Artist
+}
+
+const emit = defineEmits<Events>()
+const props = defineProps<Props>()
+
+let navigate = () => {}
+
+if (import.meta.env.PROD) {
+  const router = useRouter()
+  navigate = () => router.push({ name: 'library.artists.detail', params: { id: props.artist.id } })
+}
+</script>
+
+<template>
+  <fw-card
+    :title="artist.name"
+    :image="artist.cover.urls.original"
+    @click="navigate"
+    class="artist-card"
+  >
+    <div class="card-tags">
+      <fw-pill
+        v-for="tag in artist.tags"
+        :key="tag"
+      >
+        #{{ tag }}
+      </fw-pill>
+    </div>
+
+    <fw-play-button @play="emit('play', artist)" />
+
+    <div class="card-footer">
+      {{ t('vui.albums', artist.albums.length) }}
+      <fw-options-button />
+    </div>
+  </fw-card>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/card/artist/style.scss

+.funkwhale {
+  &.card.artist-card {
+    position: relative;
+    width: 208px;
+    padding-bottom: 14px;
+
+    &:hover {
+      .play-button {
+        opacity: 1 !important;
+        transform: translateX(6px) !important;
+      }
+
+      .options-button {
+        opacity: 1 !important;
+        transform: translate(12px) !important;
+      }
+    }
+
+    .play-button,
+    .options-button {
+      opacity: 0;
+    }
+
+    .options-button {
+      transform: translateX(6px) !important;
+      transition-delay: .1s;
+    }
+
+    > .card-image {
+      border-radius: 50%;
+      height: 192px;
+      width: 192px;
+      max-width: 192px;
+      margin: -16px -16px 0;
+    }
+
+    > .card-title {
+      font-size: 1rem;
+      text-align: left !important;
+    }
+
+    > .card-content {
+      padding-top: 6px !important;
+      text-align: left !important;
+      color: var(--fw-grey-700);
+      font-size: 0.8125rem;
+
+      > .card-tags {
+        font-size: 0.875rem;
+        margin: 0 -8px;
+        width: 188px;
+        padding-bottom: 12px;
+      }
+
+      > .play-button {
+        position: absolute;
+        right: 8px;
+        top: 8px + 192px - 44px;
+      }
+
+      > .card-footer {
+        display: flex;
+        align-items: center;
+
+        > .options-button {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

src/components/card/radio/Card.vue

 <script setup lang="ts">
 import { type PastelProps, usePastel } from '~/composables/usePastels'
-import { FwCard, FwButton } from '~/components'
+import { FwCard, FwPlayButton } from '~/components'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
@@ -51,11 +51,7 @@ if (import.meta.env.PROD) {
     <div class="radio-cover">
       <div class="cover-name">
         {{ t('vui.radio') }}
-        <fw-button
-          @click="emit('play', props.radio)"
-          icon="bi-play-fill"
-          round
-        />
+        <fw-play-button @play="emit('play', props.radio)" />
       </div>
     </div>
     <div

src/components/card/radio/style.scss

@@ -8,8 +8,13 @@
     width: 208px;
     background: var(--fw-bg-color);
 
+    .play-button {
+      opacity: 0;
+      margin-left: auto;
+    }
+
     &:hover {
-      .funkwhale.button {
+      .play-button {
         opacity: 1 !important;
         transform: translateX(6px) !important;
       }
@@ -39,25 +44,6 @@
         pointer-events: auto;
         display: flex;
         align-items: center;
-
-        > .funkwhale.button {
-          --fw-bg-color: #fff;
-          --fw-text-color: var(--fw-grey-600);
-
-          opacity: 0;
-          margin-left: auto;
-          transform: translateX(0);
-          transition: all .2s ease;
-          font-size: 0.6rem;
-
-          i {
-            font-size: 2rem;
-          }
-
-          &:hover {
-            --fw-text-color: var(--fw-pastel-4);
-          }
-        }
       }
     }
 

src/components/index.ts

+export { default as FwOptionsButton } from './button/options/Button.vue'
+export { default as FwPlayButton } from './button/play/Button.vue'
 export { default as FwButton } from './button/Button.vue'
-export { default as FwLoader } from './loader/Loader.vue'
-export { default as FwPill } from './pill/Pill.vue'
 
-export { default as FwAudioCard } from './card/audio/Card.vue'
+export { default as FwArtistCard } from './card/artist/Card.vue'
 export { default as FwRadioCard } from './card/radio/Card.vue'
 export { default as FwCard } from './card/Card.vue'
+
+export { default as FwLoader } from './loader/Loader.vue'
+export { default as FwPill } from './pill/Pill.vue'

src/locales/en.yaml

 vui:
   radio: Radio
+  albums: '{n} album | {n} albums'

src/styles/colors.scss

@@ -95,10 +95,6 @@ html.dark {
     --fw-bg-color: var(--fw-grey-200);
     --fw-text-color: var(--fw-grey-800);
 
-    html:not(.dark) & {
-      --fw-bg-color: var(--fw-grey-600);
-    }
-
     &.input {
       &[disabled] {
         --fw-bg-color: var(--fw-grey-100) !important;
@@ -107,18 +103,11 @@ html.dark {
       &.is-hovered,
       &:hover {
         --fw-bg-color: var(--fw-grey-300);
-
-        html:not(.dark) & {
-          --fw-bg-color: var(--fw-grey-700);
-        }
       }
 
       &.is-active,
       &:active {
         --fw-bg-color: var(--fw-grey-400);
-        html:not(.dark) & {
-          --fw-text-color: var(--fw-grey-300);
-        }
       }
     }
   }