#74 (style) - Fix style for listModeSwitch

voxxrin · Aug 27, 2024 · fc922ad · fc922ad
1 parent 4c628b0
commit fc922ad
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 55 deletions.
diff --git a/mobile/src/components/speaker-card/SpeakerCard.vue b/mobile/src/components/speaker-card/SpeakerCard.vue
@@ -18,11 +18,13 @@
       </div>
     </div>
     <div class="speakerCard-content">
-      <ion-list class="talkResumeList">
+      <!-- TODO Display only mode full / hide mode compact -->
+      <ion-list class="talkResumeList" v-if="true">
         <SpeakerResumeTalk></SpeakerResumeTalk>
         <SpeakerResumeTalk></SpeakerResumeTalk>
       </ion-list>
-      <div class="bulletTagList" role="list">
+      <!-- TODO Display only mode compact / hide mode full -->
+      <div class="bulletTagList" role="list" v-if="true">
         <div class="bulletTag" role="listitem">
           <span class="bulletTag-nb">2</span>Conf.
         </div>
@@ -208,7 +210,7 @@
       }
 
       .bulletTagList {
-        padding-left: 54px;
+        padding-left: 72px;
       }
     }
   }

diff --git a/mobile/src/components/speaker-card/SpeakerFavTalkButton.vue b/mobile/src/components/speaker-card/SpeakerFavTalkButton.vue
@@ -4,7 +4,7 @@
            <span class="btn-talkFavorite-group">
               <ion-icon class="btn-talkFavorite-group-icon" v-if="true" aria-hidden="true"
                         src="/assets/icons/line/bookmark-line-favorite.svg"></ion-icon>
-              <ion-icon class="btn-talkFavorite-group-icon" v-if="true" aria-hidden="true"
+              <ion-icon class="btn-talkFavorite-group-icon" v-if="false" aria-hidden="true"
                         src="/assets/icons/solid/bookmark-favorite.svg"></ion-icon>
               <ion-label class="btn-talkFavorite-group-nb" v-if="true">-</ion-label>
            </span>

diff --git a/mobile/src/components/speaker-card/SpeakerResumeTalk.vue b/mobile/src/components/speaker-card/SpeakerResumeTalk.vue
@@ -17,7 +17,7 @@
               JAVA
             </div>
           </ion-badge>
-          <div class="bulletTag _labelOnly" role="listitem">Conf.</div>
+          <div class="bulletTag _labelOnly">Conf.</div>
         </div>
 
         <div class="avatarContainer">
@@ -59,6 +59,10 @@ const baseUrl = import.meta.env.BASE_URL;
   --inner-padding-bottom: var(--app-gutters-medium);
   overflow: visible;
 
+  @media (prefers-color-scheme: dark) {
+    --border-color: var(--app-dark-contrast);
+  }
+
   &:last-child {
     --border-style: none;
     --inner-padding-bottom: 0;
@@ -111,6 +115,10 @@ const baseUrl = import.meta.env.BASE_URL;
     margin-right: var(--app-gutters-medium);
     border-radius: 4px;
     background: var(--app-primary);
+
+    @media (prefers-color-scheme: dark) {
+      background: var(--app-white-50);
+    }
   }
 
   &-content {

diff --git a/mobile/src/components/ui/ListModeSwitch.vue b/mobile/src/components/ui/ListModeSwitch.vue
@@ -0,0 +1,85 @@
+<template>
+  <ion-segment value="buttons" class="listModesSwitch">
+    <ion-segment-button class="listModesSwitch-button" value="default" :aria-label="LL.Big_list_mode()">
+      <ion-icon :icon="albums" aria-hidden="true"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button class="listModesSwitch-button" value="segment" :aria-label="LL.Compact_list_mode()">
+      <ion-icon :icon="list" aria-hidden="true"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script setup lang="ts">
+  import {albums, list} from "ionicons/icons";
+  import {IonSegment, IonSegmentButton} from "@ionic/vue";
+  import {typesafeI18n} from "@/i18n/i18n-vue";
+
+  const { LL } = typesafeI18n()
+</script>
+
+<style lang="scss">
+  :root {
+    --listModeSwitch-height: 44px;
+    --listModeSwitch-button-height: 38px;
+  }
+
+  .listModesSwitch {
+    width: fit-content;
+    min-height: inherit;
+    background-color: var(--app-background);
+    border-radius: var(--listModeSwitch-height);
+    border: 1px solid var(--app-beige-line);
+
+    ::part(native) {
+      border-radius: var(--listModeSwitch-height);
+    }
+
+    ::part(indicator) {
+      height: 100%;
+      padding: 0;
+      z-index: -1;
+    }
+
+    ::part(indicator-background) {
+      height: 100%;
+      border-radius: var(--listModeSwitch-height);
+      background-color: var(--app-primary);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--app-white);
+      }
+    }
+
+    &-button {
+      position: relative;
+      height: var(--listModeSwitch-button-height);
+      width: 52px;
+      min-width: 48px;
+      min-height: inherit;
+      margin: 0;
+      --border-radius: var(--listModeSwitch-height);
+      --background-checked: transparent;
+      --color: var(--app-primary);
+      --color-checked: var(--app-white);
+      --indicator-height: 44px;
+
+      @media (prefers-color-scheme: dark) {
+        --color: var(--app-white);
+        --color-checked: var(--app-primary);
+      }
+
+      &._active {
+        --background: var(--app-primary);
+        --background-activated: var(--app-primary);
+        --color: var(--app-white);
+
+        @media (prefers-color-scheme: dark) {
+          --background: var(--app-white);
+          --background-activated: var(--app-white);
+          --color: var(--app-primary);
+          --ion-toolbar-background: var(--app-primary);
+        }
+      }
+    }
+}
+</style>
diff --git a/mobile/src/styles/components/_bulletTag.scss b/mobile/src/styles/components/_bulletTag.scss
@@ -35,13 +35,14 @@
     justify-content: center;
     height: 20px;
     min-width: 20px;
+    margin-right: var(--app-gutters-tiny);
     padding: 0 4px;
     border-radius: 22px;
     background-color: var(--app-primary-shade);
     color: var(--app-white);
 
     @media (prefers-color-scheme: dark) {
-      border-right: 1px solid var(--app-white);
+      border-right: 2px solid var(--app-white);
       background-color: var(--app-medium--contrast);
     }
   }

diff --git a/mobile/src/styles/components/_listModeSwitch.scss b/mobile/src/styles/components/_listModeSwitch.scss
diff --git a/mobile/src/styles/main.scss b/mobile/src/styles/main.scss
@@ -10,7 +10,6 @@
 @import "@/styles/components/avatar.scss";
 @import "@/styles/components/bulletTag.scss";
 @import "@/styles/components/listCardsButtons.scss";
-@import "@/styles/components/listModeSwitch.scss";
 @import "@/styles/components/tabsSelection.scss";
 
 /* ~ BASE */

diff --git a/mobile/src/views/event/SpeakersDirectoryPage.vue b/mobile/src/views/event/SpeakersDirectoryPage.vue
@@ -6,14 +6,7 @@
         <ion-toolbar>
           <ion-title slot="start">{{ LL.Speakers() }}</ion-title>
           <div class="toolbarHeader-options" slot="end">
-            <ion-segment value="buttons" class="listModesSwitch">
-              <ion-segment-button class="listModesSwitch-button" value="default" :aria-label="LL.Big_list_mode()">
-                <ion-icon :icon="albums" aria-hidden="true"></ion-icon>
-              </ion-segment-button>
-              <ion-segment-button class="listModesSwitch-button" value="segment" :aria-label="LL.Compact_list_mode()">
-                <ion-icon :icon="list" aria-hidden="true"></ion-icon>
-              </ion-segment-button>
-            </ion-segment>
+            <ListModeSwitch></ListModeSwitch>
             <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>
@@ -32,17 +25,15 @@
   import CurrentEventHeader from "@/components/events/CurrentEventHeader.vue";
   import {useRoute} from "vue-router";
   import {EventId} from "@/models/VoxxrinEvent";
-  import {getRouteParamsValue, isRefDefined} from "@/views/vue-utils";
+  import {getRouteParamsValue} from "@/views/vue-utils";
   import {useSharedConferenceDescriptor} from "@/state/useConferenceDescriptor";
   import {typesafeI18n} from "@/i18n/i18n-vue";
   import {managedRef as ref} from "@/views/vue-utils";
   import PoweredVoxxrin from "@/components/ui/PoweredVoxxrin.vue";
   import SpeakerCard from "@/components/speaker-card/SpeakerCard.vue";
-  import {albums, list} from "ionicons/icons";
-  import {IonSegmentButton, IonSegment} from "@ionic/vue";
+  import ListModeSwitch from "@/components/ui/ListModeSwitch.vue";
 
   const { LL } = typesafeI18n()
-
   const route = useRoute();
   const eventId = ref(new EventId(getRouteParamsValue(route, 'eventId')));
   const {conferenceDescriptor: confDescriptor} = useSharedConferenceDescriptor(eventId);