Небольшие функции и правки стилей

src/App.vue

@@ -131,6 +131,12 @@ const handleKeydown = (event) => {
     if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
         event.preventDefault();
         cancel();
+    } else if (event.ctrlKey && event.code === "KeyS") {
+        event.preventDefault();
+        saveResult();
+    } else if (event.code === "Delete") {
+        event.preventDefault();
+        cleanResult();
     }
 };
 useEventListener("keydown", handleKeydown);
@@ -320,16 +326,14 @@ function onContextMenu(e, item) {
             </main>
             <template #footer>
                 <div v-if="listOfTrips.length">
-                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="isCodeViewVisible = true">Предпросмотр</button>
+                    <button @click="handleDownloadBtn">Скачать код</button>
                     <button @click="copyAndToast(finallyText)">Скопировать код</button>
                 </div>
             </template>
         </MyDialog>
     </div>
     <CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
-
-
 </template>
 
 <style>
@@ -353,7 +357,8 @@ body {
 .wraper {
     display: flex;
     justify-content: center;
-    padding-top: 10px;
+    //padding: 20% 0;
+    //TODO: рассмотреть вариант
 }
 
 .grid {

src/components/CodeBlock.vue

@@ -24,3 +24,9 @@ function highlight() {
 
 onMounted(highlight)
 </script>
+
+<style scoped>
+pre {
+    padding-left: 10px;
+}
+</style>

src/components/CodeView.vue

@@ -12,7 +12,6 @@ const props = defineProps({
         default: false
     }
 })
-console.log(props.code)
 </script>
 
 <template>

src/components/MovementButtons.vue

@@ -32,16 +32,16 @@ function scrollToBottom() {
     gap: 2px;
     flex-direction: column;
     position: fixed;
-    right: 25px;
+    right: 15px;
     bottom: calc(50% - 50px);
 }
 
 .movement-buttons > button {
     width: auto;
     font-size: 15px;
-    border: 2px solid white;
+    border: 2px solid #d0d0d0;
     color: white;
-    background-color: #23aae3e2;
+    background-color: #383838;
     height: 50px;
 }
 

src/components/MyDialog.vue

@@ -26,6 +26,7 @@
 
 <script setup>
 import {defineEmits} from 'vue'
+import {useEventListener} from "@vueuse/core";
 
 const emit = defineEmits({
     close: null,
@@ -46,6 +47,13 @@ function onClose() {
     emit('update:show')
     emit('close')
 }
+
+const handleKeydown = (event) => {
+    if (event.code === "Escape") {
+        emit('update:show')
+    }
+}
+useEventListener("keydown", handleKeydown);
 </script>
 
 <style>
@@ -104,14 +112,15 @@ function onClose() {
 .modal-footer {
     justify-content: flex-end;
     border-top: 1px solid white;
-
 }
 
 .modal-footer button {
     justify-content: flex-end;
     border-top: 1px solid white;
     padding: 5px;
-    color: rgb(0, 0, 0);
+    color: black;
+    font-size: 15px;
+    border-radius: 5px;
 }
 
 .modal-footer-success button {
@@ -146,16 +155,19 @@ function onClose() {
     opacity: 0;
     transform: translateY(20px);
 }
+
 /* Конец появления: на месте и видим */
 .modal-fade-enter-to {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Начало исчезания: на месте и видим */
 .modal-fade-leave-from {
     opacity: 1;
     transform: translateY(0);
 }
+
 /* Конец исчезания: выше и прозрачный */
 .modal-fade-leave-to {
     opacity: 0;

src/components/MyDropMenu.vue

@@ -20,7 +20,7 @@
                 </div>
 
                 <nav class="menu-content">
-                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
+                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
                 </nav>
             </aside>
         </transition>
@@ -47,6 +47,7 @@
 import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import informationForDirectory from "../data/informationForDirectory";
 
 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -71,63 +72,6 @@ function openInfoCard(obj) {
     infoCard.value = obj
 }
 
-const links = [
-    {
-        title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
-        hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
-    },
-    {
-        title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
-        hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
-    },
-    {
-        title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
-        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
-        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
-    },
-    {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
-    },
-    {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
-    },
-    {
-        title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
-        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
-    },
-]
-
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>

src/data/informationForDirectory.js

@@ -0,0 +1,56 @@
+export default [
+    {
+        title: 'ROS',
+        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
+        hrefToDoc: 'https://www.ros.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
+    },
+    {
+        title: 'OpenCV',
+        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
+        hrefToDoc: 'https://opencv.org/',
+        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
+    },
+    {
+        title: 'navigate_wait',
+        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
+        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
+        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
+    },
+    {
+        title: 'Topic',
+        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Нода',
+        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
+    },
+    {
+        title: 'Издатель',
+        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Подписчик',
+        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
+    },
+    {
+        title: 'Сервис',
+        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
+        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
+        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
+    },
+    {
+        title: 'Системы координат',
+        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
+        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
+        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
+    },
+]