From 040b9df215ff54d8c688177c85f8e00fdb2305e8 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 18 Jan 2025 01:27:07 +0100
Subject: [PATCH] refactor(front): [WIP] implement new layout for Album base
 page

---
 .../components/common/RenderedDescription.vue |  6 ++--
 .../favorites/TrackFavoriteIcon.vue           |  3 +-
 front/src/components/library/AlbumBase.vue    | 28 ++++++++++---------
 front/src/components/library/AlbumDetail.vue  |  4 +--
 .../src/components/library/AlbumDropdown.vue  |  1 +
 front/src/components/library/TrackBase.vue    |  1 +
 front/src/components/ui/button/Options.vue    | 10 ++++++-
 7 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index 1e1a858df..a92b6d7b2 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   canUpdate: true,
   fetchHtml: false,
   permissive: false,
-  truncateLength: 500
+  truncateLength: 150
 })
 
 const preview = ref('')
@@ -112,9 +112,9 @@ const submit = async () => {
         </a>
       </template>
     </template>
-    <p v-else-if="!isUpdating">
+    <span v-else-if="!isUpdating">
       {{ t('components.common.RenderedDescription.empty.noDescription') }}
-    </p>
+    </span>
     <form
       v-if="isUpdating"
       @submit.prevent="submit()"
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index d69615596..0dc05c5ee 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -46,8 +46,7 @@ const title = computed(() => isFavorite.value
   </Button>
   <Button
     v-else
-    round
-    outline
+    secondary
     icon="bi-heart-fill"
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="title"
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 25473e764..e109684be 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -177,14 +177,14 @@ const remove = async () => {
         >
         <!-- ({target}) => target -->
         <!-- Header (TODO: Put into Header component) -->
-        <Section no-items :h1="object.title" style="margin-top: 58px">
-          <Layout stack style="grid-column: 1 / -1">
+          <Layout stack style="flex: 1; gap: 8px;">
+            <h1>{{ object.title }}</h1>
             <artist-credit-label
               v-if="artistCredit"
               :artist-credit="artistCredit"
             />
             <!-- Metadata: -->
-            <div>
+            <div class="meta">
               <template v-if="object.release_date">
                 {{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }}
                 <i class="bi bi-dot" />
@@ -213,7 +213,7 @@ const remove = async () => {
               <rendered-description
                 v-if="object.description"
                 :content="object.description"
-                :can-update="false"
+                :can-update="true"
               />
             </Layout>
             <Layout flex>
@@ -246,15 +246,6 @@ const remove = async () => {
               />
             </Layout>
           </Layout>
-        </Section>
-      </Layout>
-
-      <Layout flex>
-        <!-- Toolbar: -->
-         <!-- Organize in playlist -->
-          <!-- <Options... -->
-           <Spacer h grow />
-           <!-- 1 selected -->
       </Layout>
 
     <div style="flex 1;">
@@ -274,3 +265,14 @@ const remove = async () => {
     </template>
   </Layout>
 </template>
+
+<style scopen>
+  .channel-image {
+    width: 300px;
+    height: 300px;
+    border: none;
+  }
+  .meta {
+    line-height: 48px;
+  }
+</style>
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index 2d120a30c..f07387a0e 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -57,14 +57,14 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
   <div
     v-if="!isLoadingTracks"
   >
-    <h2 class="ui header">
+    <!-- <h2 class="ui header">
       <span v-if="isSerie">
         {{ t('components.library.AlbumDetail.header.episodes') }}
       </span>
       <span v-else>
         {{ t('components.library.AlbumDetail.header.tracks') }}
       </span>
-    </h2>
+    </h2> -->
 
     <channel-entries
       v-if="artistCredit && artistCredit[0].artist.channel && isSerie"
diff --git a/front/src/components/library/AlbumDropdown.vue b/front/src/components/library/AlbumDropdown.vue
index cdb0a4b5f..f8fa1f7c0 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -86,6 +86,7 @@ const open = ref(false)
       <template #default="{ toggleOpen }">
         <OptionsButton
           :title="labels.more"
+          isSquare
           @click="toggleOpen()"
         />
       </template>
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 074d0f51c..d5606c082 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -196,6 +196,7 @@ const open = ref(false)
                   </Button>
                 </div>
               </semantic-modal>
+
               <Popover v-model:open="open">
                 <template #default="{ toggleOpen }">
                   <OptionsButton @click="toggleOpen" />
diff --git a/front/src/components/ui/button/Options.vue b/front/src/components/ui/button/Options.vue
index 9b3f539be..dc0a4462f 100644
--- a/front/src/components/ui/button/Options.vue
+++ b/front/src/components/ui/button/Options.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import Button from '../Button.vue'
+
+interface Props {
+  isSquare?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSquare: false
+})
 </script>
 
 <template>
@@ -7,7 +15,7 @@ import Button from '../Button.vue'
     icon="bi-three-dots-vertical"
     class="options-button"
     secondary
-    round
+    :round="!isSquare"
   />
 </template>