poprawki do popupów

src/App.vue

@@ -48,6 +48,7 @@ import StorageManager from './managers/storageManager';
 import PopUp from './components/PopUp/PopUp.vue';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
+import { usePopupStore } from './store/popupStore';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -64,6 +65,7 @@ export default defineComponent({
     VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
+    popupStore: usePopupStore(),
 
     currentLang: 'pl',
     releaseURL: '',
@@ -81,6 +83,28 @@ export default defineComponent({
       this.apiStore.fetchActiveData();
     });
 
+    // popup handling
+    window.addEventListener('mousemove', (e: MouseEvent) => {
+      e.stopPropagation();
+
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
+
+        return;
+      }
+
+      const popupComponentKey = targetEl.getAttribute('data-popup-key');
+      const popupContent = targetEl.getAttribute('data-popup-content');
+
+      if (popupComponentKey && popupContent)
+        this.popupStore.onPopUpShow(e, popupComponentKey, popupContent);
+      else if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
+    });
+
     watch(
       () => this.store.blockScroll,
       (value) => {

src/components/Global/StockList.vue

@@ -24,14 +24,11 @@
           {{ stockName.split(':')[1] }}
         </p>
 
-        <span
+        <span>
-          @mouseenter="
-            popupStore.onPopUpShow($event, 'VehiclePreviewPopUp', stockName.split(':')[0])
-          "
-          @mousemove="popupStore.onPopUpMove"
-          @mouseleave="popupStore.onPopUpHide"
-        >
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
               /^EN/.test(stockName) ? 'rb' : ''
             }.png`"
@@ -42,6 +39,9 @@
 
           <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -50,7 +50,9 @@
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^EN71/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -59,7 +61,9 @@
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
             @error="
@@ -76,7 +80,6 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
-import { usePopupStore } from '../../store/popupStore';
 
 export default defineComponent({
   props: {
@@ -92,8 +95,7 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore(),
+      apiStore: useApiStore()
-      popupStore: usePopupStore()
     };
   },
 

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="item-general">
-    <span
+    <span class="general-train">
-      class="general-train"
-      tabindex="0"
-      @click.stop="showTimetable(timetable, $event.currentTarget)"
-      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
-    >
       <span class="text--grayed">#{{ timetable.id }}</span>
 
       <span class="badges" v-if="timetable.skr || timetable.twr">
@@ -39,6 +34,17 @@
       <strong v-else>
         {{ timetable.driverName }}
       </strong>
+
+      <span v-if="timetable.terminated == false">
+        &bull;
+        <button
+          class="btn--image btn-timetable"
+          @click.stop="showTimetable(timetable, $event.currentTarget)"
+        >
+          <img src="/images/icon-train.svg" alt="" />
+          RJ ONLINE
+        </button>
+      </span>
     </span>
 
     <span class="general-time">
@@ -148,6 +154,11 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.btn-timetable {
+  display: inline-block;
+  padding: 0;
+}
+
 @include smallScreen {
   .item-general {
     justify-content: center;

src/components/StationsView/StationTable.vue

@@ -120,15 +120,8 @@
                   <b
                     v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                     @click.stop="openDonationModal"
-                    @mouseenter="
+                    data-popup-key="DonatorPopUp"
-                      popupStore.onPopUpShow(
+                    :data-popup-content="$t('donations.dispatcher-message')"
-                        $event,
-                        'DonatorPopUp',
-                        $t('donations.dispatcher-message')
-                      )
-                    "
-                    @mousemove="popupStore.onPopUpMove"
-                    @mouseleave="popupStore.onPopUpHide"
                   >
                     <img src="/images/icon-diamond.svg" alt="" />
                     {{ station.onlineInfo.dispatcherName }}
@@ -380,6 +373,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
+      this.popupStore.currentPopupComponent = null;
     },
 
     openForumSite(e: Event, url: string | undefined) {

src/components/TrainsView/TrainInfo.vue

@@ -36,21 +36,22 @@
         <div class="train-driver">
           <b
             v-if="apiStore.donatorsData.includes(train.driverName)"
-            @mouseenter="
+            data-popup-key="DonatorPopUp"
-              popupStore.onPopUpShow($event, 'DonatorPopUp', $t('donations.driver-message'))
+            :data-popup-content="$t('donations.driver-message')"
-            "
-            @mousemove="popupStore.onPopUpMove"
-            @mouseleave="popupStore.onPopUpHide"
           >
             {{ train.driverName }}
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
+
           <span v-else>{{ train.driverName }}</span>
-          &bull;
+
-          <button class="btn--image btn--text btn-journal" v-if="extended">
+          <span v-if="extended">
-            <img src="/images/icon-train.svg" alt="" />
+            &bull;
-            DZIENNIK
+            <button class="btn--image btn--text btn-timetable" @click="navigateToJournal">
-          </button>
+              <img src="/images/icon-train.svg" alt="" />
+              DZIENNIK
+            </button>
+          </span>
         </div>
       </div>
 
@@ -58,17 +59,10 @@
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
         <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          @mouseenter="
+          data-popup-key="TrainCommentsPopUp"
-            popupStore.onPopUpShow(
+          :data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-              $event,
+            train.timetableData
-              'TrainCommentsPopUp',
+          )})`"
-              `${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-                train.timetableData
-              )})`
-            )
-          "
-          @mousemove="popupStore.onPopUpMove"
-          @mouseleave="popupStore.onPopUpHide"
         >
           <img class="image-warning" src="/images/icon-warning.svg" />
         </span>
@@ -143,9 +137,10 @@ import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
 import { usePopupStore } from '../../store/popupStore';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin],
+  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
   components: { ProgressBar, StockList },
 
   props: {
@@ -164,6 +159,19 @@ export default defineComponent({
       apiStore: useApiStore(),
       popupStore: usePopupStore()
     };
+  },
+
+  methods: {
+    navigateToJournal() {
+      this.$router.push({
+        path: '/journal/timetables',
+        query: {
+          'search-driver': this.train.driverName
+        }
+      });
+
+      this.closeModal();
+    }
   }
 });
 </script>
@@ -205,7 +213,7 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
-.btn-journal {
+.btn-timetable {
   display: inline-block;
   padding: 0;
 }

src/mixins/modalTrainMixin.ts

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
+import { usePopupStore } from '../store/popupStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      store: useMainStore(),
+      popupStore: usePopupStore()
     };
   },
 
@@ -23,6 +25,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+      this.popupStore.currentPopupComponent = null;
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();

src/store/popupStore.ts

@@ -1,19 +1,22 @@
 import { defineStore } from 'pinia';
 
+export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
+export type PopUp = (typeof popupKeys)[number];
+
+const isPopUp = (v: any): v is PopUp => popupKeys.includes(v);
+
 export const usePopupStore = defineStore('popupStore', {
   state: () => ({
     popupPosition: { x: 0, y: 0 },
-    currentPopupComponent: null as
+    currentPopupComponent: null as PopUp | null,
-      | null
-      | 'DonatorPopUp'
-      | 'TrainCommentsPopUp'
-      | 'VehiclePreviewPopUp',
     currentPopupContent: '',
     donatorPopupVisible: false
   }),
 
   actions: {
-    onPopUpShow(e: MouseEvent, componentKey: typeof this.currentPopupComponent, value?: string) {
+    onPopUpShow(e: MouseEvent, componentKey: string, value?: string) {
+      if (!isPopUp(componentKey)) return;
+
       this.popupPosition.x = e.pageX;
       this.popupPosition.y = e.pageY;
 

src/styles/animations.scss

@@ -1,4 +1,4 @@
-$animDuration: 150ms;
+$animDuration: 95ms;
 $animType: ease-in-out;
 
 // List animation
@@ -72,7 +72,6 @@ $animType: ease-in-out;
 
   &-enter-from,
   &-leave-to {
-    transform: translateY(-25%);
     opacity: 0;
   }
 }

src/styles/global.scss

@@ -234,7 +234,7 @@ a.a-button {
     padding: 0.35em 0.75em;
 
     img {
-      width: 1.5em;
+      width: 1.35em;
       vertical-align: middle;
     }
   }