#74 (style) - Init skin details speakers

mobile/src/i18n/en/index.ts

@@ -51,6 +51,7 @@ const en = {
 	Go_To_Ticketing: `Go to ticketing`,
 	Like_Speaker: `Like speaker`,
 	Big_list_mode: `Big list mode`,
+	Speaker_bio: `Biography`,
 	Compact_list_mode: `Compact list mode`,
 	View_Profil_Speaker: `See the speaker's page`,
 	Welcome_to: `Welcome to`,

mobile/src/styles/components/_avatar.scss

@@ -66,10 +66,11 @@
       flex-direction: row;
       align-items: center;
       gap: var(--app-gutters-tiny);
+      color: var(--app-beige-dark);
       font-weight: 500;
 
       @media (prefers-color-scheme: dark) {
-        color: var(--app-whit-90);
+        color: var(--app-white-90);
       }
     }
   }

mobile/src/styles/components/_tabsSelection.scss

@@ -7,6 +7,29 @@
   border-bottom: 1px solid var(--app-beige-line);
   background: var(--app-white);
 
+  &._clearMode {
+    border: none;
+
+    ::part(native) {border-radius: 24px;}
+    ::part(indicator-background) { border-radius: 24px;}
+
+    ion-segment-button {
+      top: 0;
+      --color: var(--app-primary);
+      --indicator-color: var(--app-primary);
+      --indicator-box-shadow: none;
+
+      &.segment-button-checked:hover .button-native {
+      --color-hover: var(--app-white) !important;
+    }
+
+      @media (prefers-color-scheme: dark) {
+        --color: var(--app-primary);
+        --indicator-color: var(--app-beige-line);
+      }
+    }
+  }
+
   ::part(native) {
     border-radius: 16px 16px 0 0;
   }
@@ -43,6 +66,8 @@
     min-height: 46px;
     letter-spacing: normal;
     color: var(--app-primary);
+    --color-checked: var(--app-white);
+    --color-hover: var(--app-white);
     --indicator-color: var(--app-voxxrin);
     --indicator-box-shadow: none;
 

mobile/src/styles/layout/_content.scss

@@ -1,3 +1,7 @@
 .contentView {
-  padding: 16px;
+  padding: var(--app-gutters);
+}
+
+.sectionBloc {
+  padding: var(--app-gutters) 0;
 }

mobile/src/views/SpeakerDetailsPage.vue

@@ -1,18 +1,77 @@
 <template>
   <ion-page>
-    <ion-content v-themed-event-styles="confDescriptor" :fullscreen="true" v-if="confDescriptor && detailedSpeaker">
+    <ion-content class="speakerDetailsView"
+                 :class="{'_scrolling-down': isScrollingDown}"
+                 :scroll-events="true"
+                 @ionScrollStart="handleScrollStart()"
+                 @ionScroll="handleScroll($event)"
+                 @ionScrollEnd="handleScrollEnd()"
+                 v-themed-event-styles="confDescriptor"  v-if="confDescriptor && detailedSpeaker">
       <ion-header class="stickyHeader">
         <ion-toolbar>
           <ion-button class="stickyHeader-close" shape="round" slot="start" size="small" fill="outline" @click="closeAndNavigateBack()"
                       :aria-label="LL.Close_speaker_details()">
             <ion-icon src="/assets/icons/solid/close.svg"></ion-icon>
           </ion-button>
-          <ion-title class="stickyHeader-title" slot="start" >{{ LL.Speaker_details() }}</ion-title>
+          <div class="speakerInfoHeader" slot="start">
+            <ion-avatar class="speakerInfoHeader-avatar">
+              <img :src="detailedSpeaker.photoUrl"  :alt="LL.Avatar_Speaker() + ' ' + detailedSpeaker.fullName"/>
+            </ion-avatar>
+            <ion-text class="speakerInfoHeader-title">{{detailedSpeaker.fullName}}</ion-text>
+          </div>
         </ion-toolbar>
       </ion-header>
 
-      <div class="talkDetails">
-        {{detailedSpeaker.fullName}}
+      <div class="speakerDetailsView-container">
+        <div class="speakerDetailsView-head">
+          <div class="speakerDetailsView-head-stats ion-text-left">
+            <ion-label>Total talks</ion-label>
+            <span class="count">-</span>
+          </div>
+          <ion-avatar class="speakerAvatar">
+            <img :src="detailedSpeaker.photoUrl"  :alt="LL.Avatar_Speaker() + ' ' + detailedSpeaker.fullName"/>
+          </ion-avatar>
+          <div class="speakerDetailsView-head-stats ion-text-right">
+            <ion-label>Total favorites</ion-label>
+            <span class="count">-</span>
+          </div>
+        </div>
+        <div class="speakerDetailsView-content">
+          <div class="avatarInfos">
+            <ion-text class="avatarInfos-title">{{detailedSpeaker.fullName}}</ion-text>
+            <ion-text class="avatarInfos-subTitle">
+              <ion-icon :icon="businessSharp" aria-hidden="true"></ion-icon>
+              {{detailedSpeaker.companyName}}
+            </ion-text>
+          </div>
+          <div class="speakerDetailsView-tabs">
+            <ion-segment class="tabsSelection _clearMode" value="talks">
+              <ion-segment-button value="talks">
+                <ion-label>Talks</ion-label>
+              </ion-segment-button>
+              <ion-segment-button value="infos">
+                <ion-label>Infos</ion-label>
+              </ion-segment-button>
+            </ion-segment>
+            <div class="sectionBloc">
+              <VoxDivider>{{LL.Speaker_bio()}}</VoxDivider>
+              <ion-text>
+                {{detailedSpeaker.bio}}
+              </ion-text>
+            </div>
+
+            <div class="sectionBloc linksInfoSpeaker" v-if="detailedSpeaker.social.length">
+              <VoxDivider>{{ LL.Social_media() }}</VoxDivider>
+              <ul class="linksInfoSpeaker-list">
+                <li v-for="social in detailedSpeaker.social" :key="social.type">
+                  <ion-button color="theming" slot="end" shape="round" size="small" :href="social.type.url">
+                    <ion-icon :icon="social.type.icon" :alt="social.type.label"></ion-icon>
+                  </ion-button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </ion-content>
   </ion-page>
@@ -21,24 +80,21 @@
 <script setup lang="ts">
 import {useRoute} from "vue-router";
 import {EventId} from "@/models/VoxxrinEvent";
-import {getRouteParamsValue, isRefDefined, toManagedRef as toRef, managedRef as ref} from "@/views/vue-utils";
-import {
-    useUserEventTalkNotes,
-    useUserTalkNoteActions,
-} from "@/state/useUserTalkNotes";
+import {getRouteParamsValue, managedRef as ref} from "@/views/vue-utils";
 import {TalkId} from "@/models/VoxxrinTalk";
-import {useSharedEventTalk} from "@/state/useEventTalk";
-import {computed, toValue} from "vue";
 import {typesafeI18n} from "@/i18n/i18n-vue";
-import {IonBadge, IonAvatar, IonText, useIonRouter} from "@ionic/vue";
-import {business} from "ionicons/icons";
+import {IonBadge,
+  IonAvatar,
+  IonText,
+  IonSegment,
+  IonSegmentButton,
+  useIonRouter} from "@ionic/vue";
 import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
-import VoxDivider from "@/components/ui/VoxDivider.vue";
 import {goBackOrNavigateTo} from "@/router";
-import TalkDetailsHeader from "@/components/talk-details/TalkDetailsHeader.vue";
-import {useEventTalkStats} from "@/state/useEventTalkStats";
 import {Logger} from "@/services/Logger";
 import {SpeakerId, VoxxrinDetailedSpeaker} from "@/models/VoxxrinSpeaker";
+import {businessSharp} from "ionicons/icons";
+import VoxDivider from "@/components/ui/VoxDivider.vue";
 
 const LOGGER = Logger.named("TalkDetailsPage");
 
@@ -63,26 +119,178 @@ const detailedSpeaker: VoxxrinDetailedSpeaker = {
 Web developer at 4SH by day, and OSS commiter by night, he has created/contributed to some more or less well known projects: Voxxrin app, Vitemadose frontend during COVID Pandemic, Devoxx France CFP, RestX framework, as well as some (old) Jenkins plugins.
 As a big fan of strong typing, he loves Typescript, but also like doing all kinds of stuff in Google Spreadsheets.`,
   social: [
-    {type:'twitter', url: 'https://www.twitter.com/fcamblor'}
+    {type:'twitter', url: 'https://www.twitter.com/fcamblor', label: 'twitter', icon: 'twitter'}
   ]
 }
 
+
+// * TODO #74 Check perf impact * //
+const isScrollingDown = ref(false);
+const handleScrollStart = () => {};
+const handleScroll = (ev: CustomEvent) => {
+  isScrollingDown.value = ev.detail.deltaY > 0;
+};
+const handleScrollEnd = () => {};
 </script>
 
 <style lang="scss" scoped>
-  ion-header {
-    ion-toolbar {
-      padding-top: 0;
-
-      &:before, &:after {
-        position: absolute;
-        content: '';
-        z-index: 1;
+  .speakerDetailsView {
+    &._scrolling-down {
+      ion-header {
+        background: var(--app-background);
+
+        @media (prefers-color-scheme: dark) {
+          box-shadow: none;
+          background: var(--app-background);
+        }
+
+        .speakerInfoHeader {
+          opacity: 1;
+          transition: opacity 240ms ease-in-out;
+        }
+      }
+    }
+
+    .speakerInfoHeader {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+      opacity: 0;
+      transition: opacity 240ms ease-in-out;
+
+      &-avatar {
+        height: 54px;
+        width: 54px;
+        top: 50%;
+        border: 2px solid var(--app-white);
+
+        @media (prefers-color-scheme: dark) {
+          border: none;
+        }
       }
 
+      &-title {
+        font-size: 16px;
+        font-weight: bold;
+      }
     }
-  }
 
-  .speakerDetails {
+    ion-header {
+      box-shadow: none;
+      transition: 240ms ease-in-out;
+      z-index: 1;
+
+      ion-toolbar {
+        --background: transparent;
+        padding-top: 0;
+      }
+
+      .speakerAvatarHeader {
+        opacity: 0;
+      }
+    }
+
+    &-container {
+      display: flex;
+      flex-direction: column;
+      border-radius: var(--app-gutters-large) var(--app-gutters-large) 0 0;
+      background: var(--app-white);
+      min-height: 100%;
+      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+
+      @media (prefers-color-scheme: dark) {
+        background: var(--app-medium-contrast);
+      }
+    }
+
+    &-head {
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      padding: var(--app-gutters-large);
+      padding-bottom: 0;
+
+      &-stats {
+        display: flex;
+        flex-direction: column;
+
+        .count {
+          font-size: 22px;
+          font-weight: bold;
+        }
+      }
+
+      .speakerAvatar {
+        height: 124px;
+        width: 124px;
+        margin-top: -64px;
+        border: 8px solid var(--app-white);
+
+        @media (prefers-color-scheme: dark) {
+          border: 8px solid var(--app-medium-contrast);
+        }
+      }
+    }
+
+    &-content {
+      .avatarInfos {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 16px;
+        gap: var(--app-gutters-tiny);
+
+        &-title {
+          flex: 1 1 0;
+          font-weight: 900;
+          color: var(--app-primary);
+          font-size: 24px;
+          line-height: 1.2;
+
+          @media (prefers-color-scheme: dark) {
+            color: var(--app-white);
+          }
+        }
+
+        &-subTitle {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: var(--app-gutters-tiny);
+          color: var(--app-grey-dark);
+          font-weight: 500;
+
+          @media (prefers-color-scheme: dark) {
+            color: var(--app-white-90);
+          }
+        }
+      }
+    }
+
+   .linksInfoSpeaker {
+     &-list {
+       display: flex;
+       flex-direction: row;
+       flex-wrap: wrap;
+       column-gap: 8px;
+       margin: 0;
+       padding: 0;
+
+       li {
+         list-style: none;
+       }
+     }
+   }
+
+    &-tabs {
+      padding: var(--app-gutters);
+
+      ion-segment {
+        margin-bottom:  var(--app-gutters);
+        padding: var(--app-gutters) 0;
+      }
+    }
   }
 </style>