restart cvičení Enter -> Delete, aby bylo těžší to udělat omylem, úpr…

…avy tooltipů
Firu115 · Nov 11, 2024 · 1118d85 · 1118d85
1 parent 6ff2538
commit 1118d85
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/frontend/src/components/Psani.vue b/frontend/src/components/Psani.vue
@@ -6,6 +6,7 @@ import { Howl } from "howler";
 import { MojeMapa, pridatOznameni } from "../utils";
 import { useRoute } from "vue-router";
 import { useHead } from "unhead";
+import Tooltip from "../components/Tooltip.vue";
 
 useHead({
     meta: [
@@ -296,7 +297,7 @@ function specialniKlik(e: KeyboardEvent) {
             }
         }
         if (zvukyZaply.value) zvuky[Math.floor(Math.random() * 2)].play()
-    } else if (e.key == "Enter") {
+    } else if (e.key == "Delete") {
         e.preventDefault()
         if (e.repeat) return
         resetTlacitko()
@@ -447,10 +448,12 @@ defineExpose({ restart, aktivniPismeno, fullHideKlavesnice })
                     :cekame="(aktivniPismeno.id == 0 || aktivniPismeno.id == -1) && cass == 0" :full-hide="fullHideKlavesnice" />
             </Transition>
             <Transition>
-                <div v-if="klavesnice != '' && props.resetBtn" id="reset-btn" @click="resetTlacitko(); animace()"
-                    :class="{ schovat: route.fullPath == '/prvni-psani' }">
-                    <img :style="{ transform: rotace }" src="../assets/icony/reset.svg" alt="Restart">
-                </div>
+                <Tooltip zprava="Restart cvičení <span class='klavesa-v-textu-mensi'>Delete</span>" :sirka="120" :vzdalenostX="485" :vzdalenost="32">
+                    <div v-if="klavesnice != '' && props.resetBtn" id="reset-btn" @click="resetTlacitko(); animace()"
+                        :class="{ schovat: route.fullPath == '/prvni-psani' }">
+                        <img :style="{ transform: rotace }" src="../assets/icony/reset.svg" alt="Restart">
+                    </div>
+                </Tooltip>
             </Transition>
             <Transition>
                 <div v-if="klavesnice != '' && props.resetBtn" id="hide-btn" @click="fullHideKlavesnice = !fullHideKlavesnice"

diff --git a/frontend/src/components/SipkaZpet.vue b/frontend/src/components/SipkaZpet.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
+import Tooltip from "../components/Tooltip.vue";
 
 onMounted(() => {
     document.addEventListener("keydown", e1)
@@ -41,9 +42,11 @@ function zpatky() {
 </script>
 
 <template>
-    <div @click="zpatky">
-        <img src="../assets/icony/sipkaL.svg" alt="Zpět">
-    </div>
+    <Tooltip zprava="Vrátit se zpět <span class='klavesa-v-textu-mensi'>Escape</span>" :sirka="110" :vzdalenost="-28">
+        <div @click="zpatky">
+            <img src="../assets/icony/sipkaL.svg" alt="Zpět">
+        </div>
+    </Tooltip>
 </template>
 
 <style scoped>
@@ -58,13 +61,14 @@ div img {
     height: 32px;
     width: 32px;
     cursor: pointer;
+    position: relative;
+    top: -3px;
 }
 
 @media screen and (max-width: 1100px) {
     div img {
         height: 35px;
-        position: relative;
-        top: -5px;
+        top: -7px;
     }
 }
 </style>
diff --git a/frontend/src/components/Tooltip.vue b/frontend/src/components/Tooltip.vue
@@ -12,6 +12,10 @@ const props = defineProps({
     vzdalenost: {
         type: Number,
         default: 15
+    },
+    vzdalenostX: {
+        type: Number,
+        default: 0
     }
 })
 
@@ -24,21 +28,34 @@ const y = computed(() => {
 })
 
 onMounted(() => {
-    if (props.xOffset != 0) {
+    if (props.xOffset !== 0) {
         let rect = tip.value.getBoundingClientRect()
         tip.value.style.left = `${props.xOffset + rect.left}px`
         obsah.value.style.left = `${props.xOffset}px`
     }
+
+    if (props.vzdalenostX !== 0) {
+        tip.value.style.left = `${getPageTopLeft(tip.value).left + props.vzdalenostX}px`
+    }
 })
 
+function getPageTopLeft(el: Element) {
+    var rect = el.getBoundingClientRect()
+    var docEl = document.documentElement
+    return {
+        left: rect.left + (window.scrollX || docEl.scrollLeft || 0),
+        top: rect.top + (window.scrollY || docEl.scrollTop || 0)
+    }
+}
+
 </script>
 
 <template>
     <div style="display: flex; flex-direction: column; align-items: center;">
         <div id="obsah" ref="obsah">
             <slot />
         </div>
-        <div id="tooltip" :style="{ top: `${y}px`, maxWidth: `${props.sirka == null ? obsah.getBoundingClientRect().width * 2.2 : props.sirka}px` }"
+        <div id="tooltip" :style="{ top: `${y}px`, width: `${props.sirka == null ? obsah.getBoundingClientRect().width * 2.2 : props.sirka}px` }"
             v-html="zprava" ref="tip" />
     </div>
 </template>
@@ -63,6 +80,7 @@ onMounted(() => {
 
 #obsah:hover~#tooltip {
     opacity: 100%;
+    transition-delay: 0.4s;
 }
 
 #obsah {

diff --git a/frontend/src/views/Teorie.vue b/frontend/src/views/Teorie.vue
@@ -92,7 +92,7 @@ useHead({
                 <li><span class="klavesa-v-textu"><img src="../assets/icony/sipkaL.svg" alt="Šipka" class="klav-sipka"
                             style="transform: scaleX(-1);"></span> - pokračuje na další cvičení
                 </li>
-                <li><span class="klavesa-v-textu">Enter</span> - opakuje cvičení</li>
+                <li><span class="klavesa-v-textu">Delete</span> - opakuje cvičení</li>
                 <li><span class="klavesa-v-textu">Esc</span> - zpět</li>
             </ul>
         </div>