Переделал панель с кнопками #11
This commit is contained in:
Ilia Miheev
+75
-20
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
/*
|
||||
Эффект жидкого стекла
|
||||
Оставил для обсуждения
|
||||
Не удалять!
|
||||
*/
|
||||
}
|
||||
|
||||
/* Затемнение фона */
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user