#74 (style) - Add btn search speaker list

mobile/src/i18n/en/index.ts

@@ -49,6 +49,8 @@ const en = {
 	Close_talk_details: `Close talk details`,
 	Speakers: `Speakers`,
 	Like_Speaker: `Like speaker`,
+	Big_list_mode: `Big list mode`,
+	Compact_list_mode: `Compact list mode`,
 	View_Profil_Speaker: `See the speaker's page`,
 	Welcome_to: `Welcome to`,
 	Hello_xxx: `Hello, {name:string}`,

mobile/src/i18n/i18n-types.ts

@@ -203,6 +203,22 @@ type RootTranslation = {
 	 * S​p​e​a​k​e​r​s
 	 */
 	Speakers: string
+	/**
+	 * L​i​k​e​ ​s​p​e​a​k​e​r
+	 */
+	Like_Speaker: string
+	/**
+	 * B​i​g​ ​l​i​s​t​ ​m​o​d​e
+	 */
+	Big_list_mode: string
+	/**
+	 * C​o​m​p​a​c​t​ ​l​i​s​t​ ​m​o​d​e
+	 */
+	Compact_list_mode: string
+	/**
+	 * S​e​e​ ​t​h​e​ ​s​p​e​a​k​e​r​'​s​ ​p​a​g​e
+	 */
+	View_Profil_Speaker: string
 	/**
 	 * W​e​l​c​o​m​e​ ​t​o
 	 */
@@ -770,6 +786,22 @@ export type TranslationFunctions = {
 	 * Speakers
 	 */
 	Speakers: () => LocalizedString
+	/**
+	 * Like speaker
+	 */
+	Like_Speaker: () => LocalizedString
+	/**
+	 * Big list mode
+	 */
+	Big_list_mode: () => LocalizedString
+	/**
+	 * Compact list mode
+	 */
+	Compact_list_mode: () => LocalizedString
+	/**
+	 * See the speaker's page
+	 */
+	View_Profil_Speaker: () => LocalizedString
 	/**
 	 * Welcome to
 	 */

mobile/src/styles/components/_listModeSwitch.scss

@@ -5,7 +5,7 @@
 
   &-button {
     height: 38px;
-    width: 38px;
+    width: 52px;
     margin: 0;
     --background: transparent;
     --background-activated: var(--app-grey-line);

mobile/src/views/event/SpeakersDirectoryPage.vue

@@ -5,12 +5,19 @@
       <ion-header class="toolbarHeader">
         <ion-toolbar>
           <ion-title slot="start">{{ LL.Speakers() }}</ion-title>
-          <div slot="end" class="listModesSwitch">
-            <ion-button class="listModesSwitch-button _active">
-              <ion-icon :icon="albums"></ion-icon>
-            </ion-button>
-            <ion-button class="listModesSwitch-button">
-              <ion-icon :icon="list"></ion-icon>
+          <div class="toolbarHeader-options" slot="end">
+            <div class="listModesSwitch">
+              <ion-button class="listModesSwitch-button _active" :aria-label="LL.Big_list_mode()">
+                <ion-icon :icon="albums" aria-hidden="true"></ion-icon>
+              </ion-button>
+              <ion-button class="listModesSwitch-button" :aria-label="LL.Compact_list_mode()">
+                <ion-icon :icon="list" aria-hidden="true"></ion-icon>
+              </ion-button>
+            </div>
+
+            <ion-button slot="end" shape="round" size="small" @click="toggleSearchField()"
+                        :aria-label="LL.Search()">
+              <ion-icon src="/assets/icons/line/search-line.svg"></ion-icon>
             </ion-button>
           </div>
         </ion-toolbar>
@@ -35,6 +42,7 @@
   import SpeakerCard from "@/components/speaker-card/SpeakerCard.vue";
   import SpeakerCompactCard from "@/components/speaker-card/SpeakerCompactCard.vue";
   import {albums, list} from "ionicons/icons";
+  import {IonInput} from "@ionic/vue";
 
   const { LL } = typesafeI18n()
 
@@ -43,3 +51,13 @@
   const {conferenceDescriptor: confDescriptor} = useSharedConferenceDescriptor(eventId);
   const baseUrl = import.meta.env.BASE_URL;
 </script>
+
+<style lang="scss" scoped>
+  .toolbarHeader {
+    &-options {
+      display: flex;
+      align-items: center;
+      gap: var(--app-gutters);
+    }
+  }
+</style>