refactor(scenery): moved thumbnails toggler to header

src/components/SceneryView/SceneryTimetable.vue

@@ -4,12 +4,15 @@
       :station="station"
       :onlineScenery="onlineScenery"
       :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+      @toggleThumbnails="toggleThumbnails"
     />
 
     <SceneryTimetableList
       :station="station"
       :onlineScenery="onlineScenery"
       :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
     />
   </section>
 </template>
@@ -45,7 +48,8 @@ export default defineComponent({
   },
 
   data: () => ({
-    listOpen: false
+    listOpen: false,
+    showStockThumbnails: false
   }),
 
   activated() {
@@ -82,6 +86,10 @@ export default defineComponent({
   },
 
   methods: {
+    toggleThumbnails() {
+      this.showStockThumbnails = !this.showStockThumbnails;
+    },
+
     loadSelectedOption() {
       const queryCheckpoint = this.$route.query['checkpoint']?.toString();
 

src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue

@@ -39,6 +39,15 @@
         >
           <img src="/images/icon-tablice.ico" alt="icon-tablice" />
         </a>
+
+        <button
+          class="thumbnails-btn"
+          data-tooltip-type="HtmlTooltip"
+          :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
+          @click="toggleThumbnails"
+        >
+          <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-eye' : 'fa-eye-slash'}`"></i>
+        </button>
       </span>
     </h3>
   </div>
@@ -61,9 +70,16 @@ const props = defineProps({
   chosenCheckpoint: {
     type: String,
     required: true
+  },
+
+  showStockThumbnails: {
+    type: Boolean,
+    required: true
   }
 });
 
+const emits = defineEmits(['toggleThumbnails']);
+
 const mainStore = useMainStore();
 
 const tabliceZbiorczeHref = computed(() => {
@@ -83,6 +99,10 @@ const pragotronHref = computed(() => {
 const generatorHref = computed(() => {
   return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`;
 });
+
+function toggleThumbnails() {
+  emits('toggleThumbnails');
+}
 </script>
 
 <style lang="scss" scoped>
@@ -111,4 +131,9 @@ img {
   gap: 0.25em;
   margin-left: 0.5em;
 }
+
+.thumbnails-btn {
+  padding: 0.25em;
+  width: 2em;
+}
 </style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -35,15 +35,6 @@
       </template>
     </div>
 
-    <div class="timetable-options">
-      <div class="thumbnails-checkbox">
-        <label>
-          <input type="checkbox" v-model="showStockThumbnails" />
-          <span>POKAZUJ PODGLĄDY SKŁADÓW</span>
-        </label>
-      </div>
-    </div>
-
     <div class="list-container">
       <transition-group name="list-anim">
         <div
@@ -250,6 +241,11 @@ const props = defineProps({
   chosenCheckpoint: {
     type: String,
     required: true
+  },
+
+  showStockThumbnails: {
+    type: Boolean,
+    required: true
   }
 });
 
@@ -257,8 +253,6 @@ const route = useRoute();
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
-const showStockThumbnails = ref(false);
-
 const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   if (!props.onlineScenery) return [];
 
@@ -310,7 +304,7 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
 
 .scenery-timetable-list {
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto 1fr;
   overflow: hidden;
 }
 
@@ -358,26 +352,6 @@ const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
   }
 }
 
-.thumbnails-checkbox {
-  label {
-    cursor: pointer;
-    color: #aaa;
-  }
-
-  input {
-    width: 0;
-    outline: none;
-  }
-
-  input:checked + span {
-    color: var(--clr-success);
-  }
-
-  input:focus-visible + span {
-    outline: 1px solid white;
-  }
-}
-
 .list-container {
   position: relative;
   overflow-y: auto;

src/locales/pl.json

@@ -558,6 +558,8 @@
     "option-active-timetables": "Aktywne rozkłady jazdy",
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
+    "btn-show-timetable-thumbnails": "Pokazuj podglądy składów",
+    "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów",
     "timetable-includesScenery": "WSZYSTKIE RJ",
     "timetable-via": "PRZEJEŻDŻA",
     "timetable-issuedFrom": "ROZPOCZYNA BIEG",