src/App.vue

@@ -6,12 +6,14 @@ import MyDialog from "@/components/MyDialog.vue";
 import MyDropMenu from "@/components/MyDropMenu.vue";
 import copyToclipboard from "@/shared/copyToclipboard";
 import ContextMenu from "@imengyu/vue3-context-menu";
-import CustomButton from '@/components/UI/CustomButton.vue'
 import CodeView from "@/components/CodeView.vue";
-
-import emergencyAndNavigate from './shablons/emergency_and_navigate.js'
-import color from './shablons/color.js'
-import qr from './shablons/qr.js'
+import emergencyAndNavigate from '@/shablons/emergency_and_navigate.js'
+import color from '@/shablons/color.js'
+import qr from '@/shablons/qr.js'
+import Preview from "@/components/UI/svg/Preview.vue";
+import Save from "@/components/UI/svg/Save.vue";
+import Trash from "@/components/UI/svg/Trash.vue";
+import Back from "@/components/UI/svg/Back.vue";
 
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
@@ -20,6 +22,7 @@ const listOfTrips = ref([]);
 const isModalVisible = ref(false);
 const isCodeViewVisible = ref(false);
 const finallyText = ref("");
+const dropMenu = ref(null)
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -57,7 +60,24 @@ function setNumber(item) {
     }
 }
 
-async function saveResult() {
+function openPreview() {
+    generateCode()
+    if (!listOfTrips.value.length) {
+        izitoast.error({
+            title: 'Ошибка',
+            message: 'Для предпросмотра нужно создать маршрут'
+        })
+        return
+    }
+    isCodeViewVisible.value = true;
+}
+
+function saveResult() {
+    isModalVisible.value = true;
+    generateCode()
+}
+
+function generateCode() {
     finallyText.value = "";
     const mainCode = ref("");
     const colorDetectClass = ref("");
@@ -67,7 +87,6 @@ async function saveResult() {
     const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
     const isUsedQR = listOfTrips.value.some(item => item.isQR);
 
-    isModalVisible.value = true;
     if (!listOfTrips.value.length) {
         return
     }
@@ -128,6 +147,7 @@ function cleanResult() {
         item.variable = [];
         item.BgImg = 'images/ArUco-marker.jpg'
     })
+    listOfTrips.value = []
     izitoast.info({
         title: 'Поле очищено',
         message: 'Поле очищено. Можно строить маршрут заново',
@@ -142,6 +162,9 @@ const handleKeydown = (event) => {
     } else if (event.ctrlKey && event.code === "KeyS") {
         event.preventDefault();
         saveResult();
+    } else if (event.ctrlKey && event.code === "KeyN") {
+        event.preventDefault();
+        dropMenu.value.open();
     } else if (event.code === "Delete") {
         event.preventDefault();
         cleanResult();
@@ -277,7 +300,7 @@ function onContextMenu(e, item) {
                     {
                         label: "Удалить",
                         onClick: () => deletePlatform(item),
-                        icon: createIcon('icons/trash.webp'),
+                        icon: createIcon('icons/trash.svg'),
                     },
                 ]
             },
@@ -293,14 +316,14 @@ function onContextMenu(e, item) {
                     {
                         label: "Удалить",
                         onClick: () => deleteQR(item),
-                        icon: createIcon('icons/trash.webp')
+                        icon: createIcon('icons/trash.svg')
 
                     },
                 ],
             },
             {
                 label: "Удалить",
-                icon: createIcon('icons/trash.webp'),
+                icon: createIcon('icons/trash.svg'),
                 onClick: () => deletePointMap(item),
             },
         ]
@@ -318,11 +341,12 @@ function onContextMenu(e, item) {
         </div>
 
         <div class="actions">
-            <custom-button @click="saveResult">Сохранить</custom-button>
-            <custom-button @click="cleanResult">Очистить</custom-button>
-            <custom-button @click="cancel">Отменить</custom-button>
+            <Save @click="saveResult"/>
+            <Trash @click="cleanResult"/>
+            <Back @click="cancel"/>
+            <Preview @click="openPreview"/>
         </div>
-        <MyDropMenu/>
+        <MyDropMenu ref="dropMenu"/>
         <MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
             <template #header>
                 <strong v-if="listOfTrips.length">Код готов!</strong>
@@ -365,9 +389,7 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding-top: 20px;
-    //padding: 20% 0;
-    //TODO: рассмотреть вариант
+    padding: 20px 0 80px 0;
 }
 
 .grid {
@@ -415,11 +437,44 @@ body {
 }
 
 .actions {
-    margin: 3px 0 0 10px;
+    position: fixed;
+    bottom: 10px;
     display: flex;
-    flex-direction: column;
     gap: 10px;
-    width: 150px;
+    padding: 10px 20px;
+    border-radius: 10px;
+    background-color: #2f2f2f;
+
+
+    //background: rgba(255, 255, 255, 0.2);
+    //backdrop-filter: blur(10px);
+    //-webkit-backdrop-filter: blur(10px);
+    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    //border: 2px solid rgba(255, 255, 255, 0.18);
+    /*
+        Эффект жидкого стекла
+        Оставил для обсуждения
+        Не удалять!
+    */
+}
+
+.actions svg {
+    width: 40px;
+    height: 40px;
+    transition: color 0.4s;
+}
+
+.actions svg:hover {
+    color: rgba(20, 104, 140, 0.89);
+}
+
+.actions svg:active {
+    transition: color 0s;
+    color: #23aae3e2;
+}
+
+path {
+    fill: currentColor;
 }
 
 .actions button {

src/components/MyDropMenu.vue

@@ -20,7 +20,12 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
+                    <custom-button
+                        @click="openInfoCard(item)"
+                        v-for="item in informationForDirectory"
+                    >
+                        {{ item.title }}
+                    </custom-button>
                 </nav>
             </aside>
         </transition>
@@ -48,6 +53,7 @@ import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
 import informationForDirectory from "../data/informationForDirectory";
+import {useEventListener} from "@vueuse/core";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -72,6 +78,14 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
+const handleKeydown = (event) => {
+    if (event.code === "Escape" && isOpen.value) {
+        event.preventDefault();
+        closeMenu();
+    }
+};
+useEventListener("keydown", handleKeydown);
+
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>
@@ -138,6 +152,17 @@ h1 {
     overflow-y: scroll;
     overflow: auto;
     border-right: white 2px solid;
+
+    //background: rgba(255, 255, 255, 0.2);
+    //backdrop-filter: blur(10px);
+    //-webkit-backdrop-filter: blur(10px);
+    //box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    //border-right: 2px solid rgba(255, 255, 255, 0.18);
+    /*
+        Эффект жидкого стекла
+        Оставил для обсуждения
+        Не удалять!
+    */
 }
 
 /* Затемнение фона */

src/components/UI/svg/Back.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M7.29292 11.7071L2.58582 7L7.29292 2.29289L8.70714 3.70711L6.41424 6H14C17.866 6 21 9.13401 21 13C21 16.866 17.866 20 14 20H6V18H14C16.7614 18 19 15.7614 19 13C19 10.2386 16.7614 8 14 8H6.41424L8.70714 10.2929L7.29292 11.7071Z"
+              fill="black"/>
+    </svg>
+</template>

src/components/UI/svg/Preview.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+        <g id="Reading_Mode" data-name="Reading Mode">
+            <path d="M12,20C6,20,1.35,12.84,1.16,12.54a1,1,0,0,1,0-1.08C1.35,11.16,6,4,12,4s10.65,7.16,10.84,7.46a1,1,0,0,1,0,1.08C22.65,12.84,18,20,12,20ZM3.22,12c1.14,1.56,4.72,6,8.78,6s7.65-4.43,8.78-6C19.64,10.44,16.06,6,12,6S4.35,10.43,3.22,12ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"/>
+        </g>
+    </svg>
+</template>

src/components/UI/svg/Save.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+        <title/>
+        <path d="M61.88,93.12h0a3,3,0,0,0,.44.36l.24.13a1.74,1.74,0,0,0,.59.24l.25.07h0a3,3,0,0,0,1.16,0l.26-.08.3-.09a3,3,0,0,0,.3-.16l.21-.12a3,3,0,0,0,.46-.38L93,66.21A3,3,0,1,0,88.79,62L67,83.76V3a3,3,0,0,0-6,0V83.76L39.21,62A3,3,0,0,0,35,66.21Z"/>
+        <path d="M125,88a3,3,0,0,0-3,3v22a9,9,0,0,1-9,9H15a9,9,0,0,1-9-9V91a3,3,0,0,0-6,0v22a15,15,0,0,0,15,15h98a15,15,0,0,0,15-15V91A3,3,0,0,0,125,88Z"/>
+    </svg>
+</template>

src/components/UI/svg/Trash.vue

@@ -0,0 +1,22 @@
+<script setup>
+</script>
+<template>
+    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <title/>
+        <g data-name="Layer 2" id="Layer_2">
+            <path d="M20,29H12a5,5,0,0,1-5-5V12a1,1,0,0,1,2,0V24a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V12a1,1,0,0,1,2,0V24A5,5,0,0,1,20,29Z"/>
+            <path d="M26,9H6A1,1,0,0,1,6,7H26a1,1,0,0,1,0,2Z"/>
+            <path d="M20,9H12a1,1,0,0,1-1-1V6a3,3,0,0,1,3-3h4a3,3,0,0,1,3,3V8A1,1,0,0,1,20,9ZM13,7h6V6a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1Z"/>
+            <path d="M14,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,14,23Z"/>
+            <path d="M18,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,18,23Z"/>
+        </g>
+        <g id="frame">
+            <rect class="cls-1" height="32" width="32"/>
+        </g>
+    </svg>
+</template>
+
+<style scoped>
+.cls-1{fill:none;}
+
+</style>