From b1db052908a2f53ec985adf0d1a45d271e9ba977 Mon Sep 17 00:00:00 2001
From: Robin Lopez <robinlopez.contact@gmail.com>
Date: Mon, 25 Mar 2024 11:31:04 +0100
Subject: [PATCH] #74 (style) - Clean styles for actionsCardButton (Like,
 favorites, watch later) + add components for card speaker

---
 .../speaker-card/SpeakerLikeButton.vue        |  27 +++
 .../speaker-card/SpeakerResumeTalk.vue        |  94 ++++++++
 .../src/components/talk-card/ScheduleTalk.vue |  21 --
 mobile/src/styles/components/_avatar.scss     |   8 +
 .../ionic/customs/_custom-ion-buttons.scss    |  56 +++--
 .../src/views/event/SpeakersDirectoryPage.vue | 226 ++++++++++++------
 6 files changed, 316 insertions(+), 116 deletions(-)
 create mode 100644 mobile/src/components/speaker-card/SpeakerLikeButton.vue
 create mode 100644 mobile/src/components/speaker-card/SpeakerResumeTalk.vue

diff --git a/mobile/src/components/speaker-card/SpeakerLikeButton.vue b/mobile/src/components/speaker-card/SpeakerLikeButton.vue
new file mode 100644
index 00000000..d5d0b454
--- /dev/null
+++ b/mobile/src/components/speaker-card/SpeakerLikeButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <!-- TODO Dev Btn -->
+  <ion-button class="btnActionCard" :class="{ 'btnActionCard': true, '_is-active': true }" :aria-label="LL.Like_Speaker()">
+        <span class="btnActionCard-group">
+           <ion-icon class="btnActionCard-group-icon" v-if="true" aria-hidden="true" src="/assets/icons/line/heart-line.svg"></ion-icon>
+           <ion-icon class="btnActionCard-group-icon" v-if="false" aria-hidden="true" src="/assets/icons/solid/heart.svg"></ion-icon>
+           <ion-label class="btnActionCard-group-nb" v-if="true">-</ion-label>
+        </span>
+  </ion-button>
+</template>
+
+<script setup lang="ts">
+  import {typesafeI18n} from "@/i18n/i18n-vue";
+  const { LL } = typesafeI18n()
+</script>
+
+<style scoped lang="scss">
+.btnActionCard {
+
+  &._is-active {
+    --background: var(--voxxrin-event-theme-colors-primary-hex);
+    --color: var(--voxxrin-event-theme-colors-primary-contrast-hex);
+    border-left: 1px solid var(--app-primary-shade);
+    --border-radius:  0 0 8px 0 !important;
+  }
+}
+</style>
diff --git a/mobile/src/components/speaker-card/SpeakerResumeTalk.vue b/mobile/src/components/speaker-card/SpeakerResumeTalk.vue
new file mode 100644
index 00000000..5186b290
--- /dev/null
+++ b/mobile/src/components/speaker-card/SpeakerResumeTalk.vue
@@ -0,0 +1,94 @@
+<template>
+  <!-- TODO Dev Resume Card -->
+  <ion-item class="talkResumeCard">
+    <span class="talkResumeCard-line"></span>
+    <div class="talkResumeCard-content">
+      <ion-text class="talkResumeCard-content-description">
+        Unlocking the Secrets of the Devoxx Mobile App: A Deep Dive into Open Source PWA with Vue and Firebase
+      </ion-text>
+      <div class="talkResumeCard-footer">
+        <ion-badge class="trackBadge">
+          <div class="trackBadge-content">
+            <ion-icon src="/assets/icons/solid/tag.svg"></ion-icon>JAVA
+          </div>
+        </ion-badge>
+        <div class="avatarContainer">
+          <div class="avatarGroup" v-if="true">
+            <div class="avatarItem">
+              <ion-thumbnail class="avatar _small">
+                <img v-if="false" :src="speaker.photoUrl" @error="handle404OnSpeakerThumbnail($event.target as HTMLImageElement)" />
+                <img v-if="true" :src="baseUrl+'assets/images/svg/avatar-shadow.svg'" />
+              </ion-thumbnail>
+            </div>
+          </div>
+          <div class="avatarInfos _small">
+            <ion-text class="avatarInfos-title">Conference</ion-text>
+            <ion-text class="avatarInfos-subTitle" v-if="true">
+              (+X Speaker(s))
+            </ion-text>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ion-item>
+</template>
+
+<script setup lang="ts">
+import {typesafeI18n} from "@/i18n/i18n-vue";
+import {IonBadge, IonThumbnail} from "@ionic/vue";
+const { LL } = typesafeI18n()
+const baseUrl = import.meta.env.BASE_URL;
+</script>
+
+<style lang="scss" scoped>
+  .talkResumeCard {
+  --padding-start: 0;
+  --inner-padding-top: var(--app-gutters-medium);
+  --inner-padding-bottom: var(--app-gutters-medium);
+  padding: 0;
+
+  &:last-child {
+    --border-style: none;
+    --inner-padding-bottom: 0;
+  }
+
+  &-line {
+    height: 100%;
+    min-width: 2px;
+    margin-right: var(--app-gutters-medium);
+    border-radius: 4px;
+    background: var(--app-primary);
+  }
+
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--app-gutters-medium);
+
+    &-description {
+      width: 100%;
+      font-size: 14px;
+      line-height: 1.2;
+      color: var(--app-primary);
+    }
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+
+    .avatarContainer {
+      gap: var(--app-gutters);
+    }
+
+    .avatarInfos {
+      justify-content: end;
+    }
+  }
+}
+</style>
diff --git a/mobile/src/components/talk-card/ScheduleTalk.vue b/mobile/src/components/talk-card/ScheduleTalk.vue
index eeef89d8..cf380570 100644
--- a/mobile/src/components/talk-card/ScheduleTalk.vue
+++ b/mobile/src/components/talk-card/ScheduleTalk.vue
@@ -318,7 +318,6 @@ const theme = {
   }
 
   //* States card talk *//
-
   &._is-highlighted {
     border : {
       top: 2px solid var(--app-primary);
@@ -380,27 +379,7 @@ const theme = {
 
       .talkCard-footer {
         border-color: var(--app-primary-shade);
-
-        /* TODO RLZ: move it to a proper place in talk actions components */
-        :deep(.btnActionCard) { border-color: var(--app-primary-shade);}
-      }
-    }
-
-    //* TODO - Start - Delete when btn is component *//
-    //* Change style type actions *//
-    ion-button {
-      &.btn-watchLater {
-        --background: var(--voxxrin-event-theme-colors-secondary-hex);
-        --color: var(--voxxrin-event-theme-colors-secondary-contrast-hex);
-        border-left: 1px solid var(--voxxrin-event-theme-colors-secondary-hex);
-      }
-
-      &.btn-feedbackSelect {
-        --background: var(--voxxrin-event-theme-colors-primary-hex);
-        --color: var(--voxxrin-event-theme-colors-primary-contrast-hex);
-        border-left: 1px solid var(--voxxrin-event-theme-colors-primary-hex);
       }
-      //* END - Delete when btn is component *//
     }
   }
 
diff --git a/mobile/src/styles/components/_avatar.scss b/mobile/src/styles/components/_avatar.scss
index f0a4037d..008d83cc 100644
--- a/mobile/src/styles/components/_avatar.scss
+++ b/mobile/src/styles/components/_avatar.scss
@@ -56,6 +56,10 @@
       color: var(--app-primary);
       font-size: 16px;
       line-height: 1.2;
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--app-white);
+      }
     }
 
     &-subTitle {
@@ -64,6 +68,10 @@
       align-items: center;
       gap: var(--app-gutters-tiny);
       font-weight: 500;
+
+      @media (prefers-color-scheme: dark) {
+        color: var(--app-whit-90);
+      }
     }
   }
 }
diff --git a/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss b/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss
index 44aff47e..5084bee5 100644
--- a/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss
+++ b/mobile/src/styles/vendors/ionic/customs/_custom-ion-buttons.scss
@@ -103,28 +103,46 @@ ion-button {
             }
         }
     }
+}
 
-    /* TODO RLZ: move it to a proper place in talk actions components */
-    &.btnActionCard {
-        height: 100% !important;
-        min-height: 55px !important;
-        width: 58px !important;
-        margin: 0;
-        --border-radius: 0;
-        --background: rgba(white, 0.5);
-        --color: var(--app-primary);
-        border-left: 1px solid var(--app-grey-line);
-        font-size: 22px;
-        --padding-start: 0;
-        --padding-end: 0;
-        --background-activated-opacity: 0.1;
-        --background-hover-opacity: 0.1;
-        --box-shadow: none;
+.btnActionCard {
+    height: 100% !important;
+    min-height: 55px !important;
+    width: 58px !important;
+    margin: 0;
+    --border-radius: 0;
+    --background: rgba(white, 0.5);
+    --color: var(--app-primary);
+    border-left: 1px solid var(--app-grey-line);
+    font-size: 22px;
+    --padding-start: 0;
+    --padding-end: 0;
+    --background-activated-opacity: 0.1;
+    --background-hover-opacity: 0.1;
+    --box-shadow: none;
 
+    &.button-solid {
         @media (prefers-color-scheme: dark) {
-            --background: rgba(white, 0.2);
-            --color: var(--app-white);
-            border-left: 1px solid var(--app-line-contrast);
+            border-color: var(--app-line-contrast);
+            --background: transparent;
+            color: var(--app-white);
+        }
+    }
+
+    .btnActionCard-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 2px;
+
+        &-icon {
+            position: relative;
+            font-size: 26px;
+        }
+
+        &-nb {
+            font-size: 14px !important;
+            font-weight: 700;
         }
     }
 }
diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
index 1ea196f9..1f428c49 100644
--- a/mobile/src/views/event/SpeakersDirectoryPage.vue
+++ b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -8,7 +8,9 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-card class="speakerCard">
+      <!-- TODO Dev Card Speaker List -->
+      <ion-card class="speakerCard"
+                :class="{ '_is-highlighted': true, '_has-liked': true}">
         <div class="speakerCard-head">
           <div class="avatarContainer">
             <ion-thumbnail class="avatar _large">
@@ -26,82 +28,15 @@
         </div>
         <div class="speakerCard-content">
           <ion-list class="talkResumeList">
-            <ion-item class="talkResumeCard">
-              <span class="talkResumeCard-line"></span>
-              <div class="talkResumeCard-content">
-                <ion-text class="talkResumeCard-content-description">
-                  C'est pas Versailles ici ! Eteignez vos envs projets K8S la nuit pour sauver la planète.
-                </ion-text>
-                <div class="talkResumeCard-footer">
-                  <ion-badge class="trackBadge">
-                    <div class="trackBadge-content">
-                      <ion-icon src="/assets/icons/solid/tag.svg"></ion-icon>JAVA
-                    </div>
-                  </ion-badge>
-                  <div class="avatarContainer">
-                    <div class="avatarGroup" v-if="true">
-                      <div class="avatarItem">
-                        <ion-thumbnail class="avatar _small">
-                          <img v-if="false" :src="speaker.photoUrl" @error="handle404OnSpeakerThumbnail($event.target as HTMLImageElement)" />
-                          <img v-if="true" :src="baseUrl+'assets/images/svg/avatar-shadow.svg'" />
-                        </ion-thumbnail>
-                      </div>
-                    </div>
-                    <div class="avatarInfos _small">
-                      <ion-text class="avatarInfos-title">Conference</ion-text>
-                      <ion-text class="avatarInfos-subTitle" v-if="true">
-                        (+X Speaker(s))
-                      </ion-text>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ion-item>
-            <ion-item class="talkResumeCard">
-              <span class="talkResumeCard-line"></span>
-              <div class="talkResumeCard-content">
-                <ion-text class="talkResumeCard-content-description">
-                  Unlocking the Secrets of the Devoxx Mobile App: A Deep Dive into Open Source PWA with Vue and Firebase
-                </ion-text>
-                <div class="talkResumeCard-footer">
-                  <ion-badge class="trackBadge">
-                    <div class="trackBadge-content">
-                      <ion-icon src="/assets/icons/solid/tag.svg"></ion-icon>JAVA
-                    </div>
-                  </ion-badge>
-                  <div class="avatarContainer">
-                    <div class="avatarGroup" v-if="false">
-                      <div class="avatarItem">
-                        <ion-thumbnail class="avatar _small">
-                          <img v-if="false" :src="speaker.photoUrl" @error="handle404OnSpeakerThumbnail($event.target as HTMLImageElement)" />
-                          <img v-if="true" :src="baseUrl+'assets/images/svg/avatar-shadow.svg'" />
-                        </ion-thumbnail>
-                      </div>
-                    </div>
-                    <div class="avatarInfos _small">
-                      <ion-text class="avatarInfos-title">Conference</ion-text>
-                      <ion-text class="avatarInfos-subTitle" v-if="false">
-                        (+X Speaker(s))
-                      </ion-text>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ion-item>
+           <SpeakerResumeTalk></SpeakerResumeTalk>
           </ion-list>
         </div>
         <div class="speakerCard-footer">
           <div class="speakerActions">
-            <ion-button class="btnActionCard btn-info">
-              <span class="btn-favorite-group">
-               <ion-icon name="heart-outline"></ion-icon>
-              </span>
-            </ion-button>
-            <ion-button class="btnActionCard btn-follow">
-                <span class="btn-favorite-group">
-                  <ion-icon :icon="heartOutline"></ion-icon>
-                </span>
+            <ion-button class="btnActionCard">
+              <ion-icon :icon="informationCircleSharp"></ion-icon>
             </ion-button>
+            <SpeakerLikeButton></SpeakerLikeButton>
           </div>
         </div>
       </ion-card>
@@ -120,7 +55,9 @@
   import {managedRef as ref} from "@/views/vue-utils";
   import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
   import {IonBadge, IonInput, IonThumbnail} from "@ionic/vue";
-  import {business, businessSharp, heartOutline} from "ionicons/icons";
+  import {businessSharp, informationCircleSharp} from "ionicons/icons";
+  import SpeakerLikeButton from "@/components/speaker-card/SpeakerLikeButton.vue";
+  import SpeakerResumeTalk from "@/components/speaker-card/SpeakerResumeTalk.vue";
 
   const { LL } = typesafeI18n()
 
@@ -130,7 +67,7 @@
   const baseUrl = import.meta.env.BASE_URL;
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   .speakerCard {
     display: flex;
     flex-direction: column;
@@ -152,12 +89,122 @@
       }
     }
 
+    //* States card talk *//
     &:active {
       transition: 80ms ease-in-out;
       transform: scale(0.99);
       box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
     }
 
+    &:before, &:after {
+      position: absolute;
+      content: '';
+      z-index: -1;
+    }
+
+    &._is-highlighted {
+      border : {
+        top: 2px solid var(--app-primary);
+        bottom: 2px solid var(--app-primary);
+        right: 2px solid var(--app-primary);
+        left: 2px solid var(--app-primary);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        border : {
+          top: 2px solid var(--app-white) !important;
+          bottom: 2px solid var(--app-white) !important;
+          right: 2px solid var(--app-white) !important;
+          left: 2px solid var(--app-white) !important;
+        }
+      }
+
+      ion-thumbnail {
+        background-color: var(--app-background);
+        border: 2px solid var(--app-primary);
+
+        @media (prefers-color-scheme: dark) {
+          border: 2px solid var(--app-white) !important;
+        }
+      }
+
+      .speakerCard-footer {
+        border-width: 2px;
+        border-color: var(--app-primary);
+        border-bottom: none;
+
+        @media (prefers-color-scheme: dark) {
+          border-color: var(--app-white) !important;
+        }
+      }
+
+      &._has-liked {
+        border : {
+          top: 2px solid var(--app-primary-shade);
+          bottom: 2px solid var(--app-primary-shade);
+          right: 2px solid var(--app-primary-shade);
+        }
+
+        @media (prefers-color-scheme: dark) {
+          --border : {
+            top: 2px solid var(--app-white);
+            bottom: 2px solid var(--app-white);
+            right: 2px solid var(--app-white);
+          }
+        }
+
+        .btnActionCard {
+          border-color: var(--app-primary-shade);
+          border-width: 2px;
+
+          @media (prefers-color-scheme: dark) {
+            border-color: var(--app-white);
+          }
+        }
+
+        &:before { background: rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6);}
+
+        ion-thumbnail { border: 2px solid var(--app-primary-shade);}
+
+        .talkCard-footer {
+          border-color: var(--app-primary-shade);
+        }
+      }
+    }
+
+    &._has-liked {
+      &:before {
+        width: 40%;
+        height: 70%;
+        right: 0;
+        bottom: 0;
+        transform: scale(1);
+        background: linear-gradient(331deg, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 30%, rgba(var(--voxxrin-event-theme-colors-primary-rgb), 0.6) 80%);
+        opacity: 1;
+        filter: blur(32px);
+        animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      }
+
+      &:after {
+        width: 50%;
+        height: 100%;
+        right: 0;
+        bottom: 0;
+        background-image: url('/assets/images/png/texture-favorited.png');
+        background-repeat: no-repeat;
+        background-position: right;
+        background-size: cover;
+        transform: scale(1);
+        opacity: 0.5;
+        mix-blend-mode: overlay;
+        animation: scale-in-center 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+
+        @media (prefers-color-scheme: dark) {
+          mix-blend-mode: difference;
+        }
+      }
+    }
+
     &-head {
       display: flex;
       align-items: center;
@@ -171,13 +218,23 @@
       justify-content: space-between;
       padding: 0 var(--app-gutters) var(--app-gutters-small) var(--app-gutters);
 
+
+      .talkResumeList {
+        background: transparent;
+        width: 100%;
+      }
+
       .talkResumeCard {
         --padding-start: 0;
         --inner-padding-top: var(--app-gutters-medium);
         --inner-padding-bottom: var(--app-gutters-medium);
+        --background: transparent;
         padding: 0;
 
-        &:last-child { --border-style: none;}
+        &:last-child {
+          --border-style: none;
+          --inner-padding-bottom: 0;
+        }
 
         &-line {
           height: 100%;
@@ -185,18 +242,28 @@
           margin-right: var(--app-gutters-medium);
           border-radius: 4px;
           background: var(--app-primary);
+
+          @media (prefers-color-scheme: dark) {
+            background: var(--app-white-90);
+          }
         }
 
         &-content {
+          flex: 1;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: var(--app-gutters-medium);
 
           &-description {
+            width: 100%;
             font-size: 14px;
             line-height: 1.2;
             color: var(--app-primary);
+
+            @media (prefers-color-scheme: dark) {
+              color: var(--app-white);
+            }
           }
         }
 
@@ -206,7 +273,6 @@
           justify-content: space-between;
           width: 100%;
 
-
           .avatarContainer {
             gap: var(--app-gutters);
           }
@@ -229,6 +295,14 @@
       }
       background-color: rgba(white, 0.6);
 
+      @media (prefers-color-scheme: dark) {
+        background-color: rgba(white, 0.05);
+        border : {
+          top: 1px solid var(--app-line-contrast);
+          bottom: 1px solid var(--app-line-contrast);
+        }
+      }
+
       .speakerActions {
         display: flex;
         flex-direction: row;