diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index e1a9b3ed47df843d247e249f10216d546616f4cf..700c0c50d2a455e96f37e462491da7a6554d1e29 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -266,3 +266,20 @@ input[type=file]::-webkit-file-upload-button {
::-webkit-scrollbar-thumb:hover {
background: #0033ff;
}
+.bounce-enter-active {
+ animation: bounce-in 0.5s;
+}
+.bounce-leave-active {
+ animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+ 0% {
+ transform: scale(0);
+ }
+ 50% {
+ transform: scale(1.25);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 59a1b2640b7fbd8b29c9eb83f1848520b711def0..4b32cae1cea132f61b42d754f17dcce82c192498 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -27,34 +27,44 @@ declare module 'vue' {
EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
- HamburgerMenu: typeof import('./../shared/icons/HamburgerMenu.vue')['default']
+ HamburgerIcon: typeof import('./../shared/icons/HamburgerIcon.vue')['default']
HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
+ HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
+ ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
+ ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
+ MenuDial: typeof import('./../shared/ui/MenuDial.vue')['default']
MenuHeader: typeof import('./../components/MenuHeader.vue')['default']
Modal: typeof import('./../shared/ui/Modal.vue')['default']
NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
PageHeader: typeof import('./../modules/PageHeader.vue')['default']
PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
+ ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
+ PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
+ SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
+ SidebarMenuHeader: typeof import('./../modules/SidebarMenuHeader.vue')['default']
SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
+ TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
- TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
+ TextSettings: typeof import('./../components/entities/settings/TextSettings.vue')['default']
TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
+ TrashIcon: typeof import('./../shared/icons/TrashIcon.vue')['default']
Tree: typeof import('./../shared/ui/Tree.vue')['default']
VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
}
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index 052bb4bf764efb66f579309bab463ae091a21afe..e626cbb69dab9032afa4e1e695e7958776cfc1b8 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -81,8 +81,8 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
websocketStore.sendData(data);
};
-export const convertThemeToColorWhiteDefault = (theme: string) => {
- if (!theme) return '#0ea5e9';
+export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
+ if (!theme) return '#ffffff';
switch (theme) {
case 'white':
return '#ffffff';
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index c52ea6e5281b778fa8722f91efb0c7eeea1ee533..a96c3f6180fb6bd8c63ad19d1a4ffe498513d800 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -3,6 +3,7 @@ import { useFileDialog, useWindowSize } from '@vueuse/core';
import { useAuthorizationStore } from '@/app/stores/authorization';
import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
import { useDataStore } from '@/app/stores/data';
+import cookies from '@/app/plugins/Cookie';
const emit = defineEmits(['createEntity']);
@@ -12,6 +13,9 @@ const { open: uploadFile, onChange } = useFileDialog({
});
const authorizationStore = useAuthorizationStore();
const dataStore = useDataStore();
+
+const themeColor: string = cookies.get('favorite_color');
+const isMenu = ref(false);
const userNickName = computed(() => authorizationStore.userNickName);
const entitiesCount = computed(() => dataStore.entities.length);
@@ -58,8 +62,9 @@ onChange((files) => {
const speedDialItems = ref([
{
label: 'Divider',
- icon: 'pi pi-pause',
- command: () => {
+ textStyle: 'bold',
+ theme: 'blue',
+ onClick: () => {
emit('createEntity', {
entity_type: 'divider',
entity_order: entitiesCount.value + 1,
@@ -70,8 +75,9 @@ const speedDialItems = ref([
},
{
label: 'Paragraph',
- icon: 'pi pi-pencil',
- command: () => {
+ textStyle: 'bold',
+ theme: 'green',
+ onClick: () => {
emit('createEntity', {
entity_type: 'paragraph',
entity_order: entitiesCount.value + 1,
@@ -84,13 +90,15 @@ const speedDialItems = ref([
},
{
label: 'Image',
- icon: 'pi pi-image',
- command: () => uploadFile()
+ textStyle: 'bold',
+ theme: 'orange',
+ onClick: () => uploadFile()
},
{
label: 'Table',
- icon: 'pi pi-table',
- command: () => {
+ textStyle: 'bold',
+ theme: 'red',
+ onClick: () => {
emit('createEntity', {
entity_type: 'table',
entity_order: entitiesCount.value + 1,
@@ -115,36 +123,20 @@ const speedDialItems = ref([
</script>
<template>
- <SpeedDial
- :model="speedDialItems"
- direction="right"
- :button-props="{ severity: 'primary', rounded: true }"
- style="position: absolute; left: 5%; top: 0"
- >
- <template #item="{ item, toggleCallback }">
- <div
- class="flex flex-col items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer"
- @click="toggleCallback"
- >
- <span v-show="item.label !== 'Divider'" :class="item.icon" />
- <svg
- v-show="item.label === 'Divider'"
- fill="#fff"
- width="20px"
- height="20px"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
- />
- </svg>
- <span>
- {{ item.label }}
- </span>
- </div>
+ <MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="extraLarge" :theme="themeColor">
+ <template #1IconAfter>
+ <HorizontalLineIcon color="white" size="25" />
+ </template>
+ <template #2IconAfter>
+ <ParagraphIcon color="white" size="25" />
+ </template>
+ <template #3IconAfter>
+ <ImageIcon color="white" size="25" />
+ </template>
+ <template #4IconAfter>
+ <TableIcon color="white" size="30" />
</template>
- </SpeedDial>
+ </MenuDial>
</template>
<style scoped></style>
diff --git a/src/components/PageMenuButton.vue b/src/components/PageMenuButton.vue
index 8cbf1363d382720b4a04793f8067252829304eae..bd289f831e169b8a1616b991cffea34591937b45 100644
--- a/src/components/PageMenuButton.vue
+++ b/src/components/PageMenuButton.vue
@@ -5,11 +5,11 @@ const emit = defineEmits(['openMenu']);
<template>
<div class="fixed top-0 left-0 z-50">
<button
- class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
+ class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md flex flex-col items-center justify-center gap-1.5"
@click.prevent="emit('openMenu')"
>
- Menu
- <HamburgerMenu color="white" size="40" />
+ <span>Menu</span>
+ <HamburgerIcon color="white" size="30" />
</button>
</div>
</template>
diff --git a/src/components/entities/settings/EntityPositionSettings.vue b/src/components/entities/settings/EntityPositionSettings.vue
index 6177ca0ebd2d3f89c77398c4f881565debcdf28f..4bf2eb3def33f27cab975f6e7f3740030a0d14e3 100644
--- a/src/components/entities/settings/EntityPositionSettings.vue
+++ b/src/components/entities/settings/EntityPositionSettings.vue
@@ -1,7 +1,51 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { changeEntitiesOrder } from '@/app/helpers';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+ entityUuid: string;
+ entityIndex: number;
+ entitiesLength: number;
+}
+const props = defineProps<Props>();
+
+const isMenu = ref(false);
+const themeColor: string = cookies.get('favorite_color');
+const menuItems = computed(() => {
+ const state = [];
+ if (props.entityIndex !== 0) {
+ state.push({
+ label: 'Up',
+ theme: 'black',
+ onClick: () => changeEntitiesOrder(props.entityUuid, 'up')
+ });
+ }
+ if (props.entityIndex !== props.entitiesLength - 1) {
+ state.push({
+ label: 'Down',
+ theme: 'black',
+ onClick: () => changeEntitiesOrder(props.entityUuid, 'down')
+ });
+ }
+ return state;
+});
+</script>
<template>
- <MenuDial />
+ <div class="settings absolute right-2 top-0 transition-all select-none">
+ <MenuDial
+ v-model:isActive="isMenu"
+ :items="menuItems"
+ :theme="themeColor"
+ size="extraLarge"
+ direction="left"
+ ><template #buttonIcon>
+ <VerticalArrowsIcon
+ :color="themeColor === 'white' ? 'black' : 'white'"
+ :size="30"
+ /> </template
+ ></MenuDial>
+ </div>
</template>
<style scoped></style>
diff --git a/src/components/entities/settings/ImageMenu.vue b/src/components/entities/settings/ImageSettings.vue
similarity index 100%
rename from src/components/entities/settings/ImageMenu.vue
rename to src/components/entities/settings/ImageSettings.vue
diff --git a/src/components/entities/settings/TextMenu.vue b/src/components/entities/settings/TextSettings.vue
similarity index 88%
rename from src/components/entities/settings/TextMenu.vue
rename to src/components/entities/settings/TextSettings.vue
index aa6e41c7fa647639ebd2418ce1c5cc631bd0fe95..99845110f8719a1a0880b900ee82013c41938773 100644
--- a/src/components/entities/settings/TextMenu.vue
+++ b/src/components/entities/settings/TextSettings.vue
@@ -1,8 +1,9 @@
<script setup lang="ts">
-import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
-import type { IParagraph } from '@/app/interfaces/entities';
+import { convertThemeToColorWhiteDefault, editEntity } from '@/app/helpers';
import { useVModel } from '@vueuse/core';
-import type { TTheme } from '@/app/interfaces/environment';
+import { useDataStore } from '@/app/stores/data';
+import type { IParagraph } from '@/app/interfaces/entities';
+import type { IEntity } from '@/app/interfaces/environment';
import cookies from '@/app/plugins/Cookie';
interface Props {
@@ -43,13 +44,13 @@ const themeColor = convertThemeToColorWhiteDefault(cookies.get('favorite_color')
</script>
<template>
- <div
+ <button
:style="`background-color: ${themeColor}`"
- class="speedDial absolute left-2 top-0 transition-all select-none size-12 p-2 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
+ class="settings absolute left-2 top-0 transition-all select-none size-12 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
@click.prevent="isModal = true"
>
<SettingsIcon color="white" size="25" />
- </div>
+ </button>
<Modal v-model:isVisible="isModal" theme="black"
><template #header>Edit paragraph</template>
<div>
diff --git a/src/components/entities/text/TextStateMenu.vue b/src/components/entities/text/TextStateMenu.vue
index 343501a387faca0f4359daedd70d538ae96788ba..961fad600aad952d3eddf8be5110ebc392f49e83 100644
--- a/src/components/entities/text/TextStateMenu.vue
+++ b/src/components/entities/text/TextStateMenu.vue
@@ -33,36 +33,12 @@ const speedDialState = computed(() => {
});
return state;
});
+const isMenu = ref(false);
</script>
<template>
<div class="relative z-40">
- <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot size-12">
- <template #button="{ toggleCallback }">
- <button
- class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
- @click="toggleCallback"
- >
- <i class="pi pi-pen-to-square"></i>
- </button>
- </template>
- <template #item="{ item, toggleCallback }">
- <div
- :class="[
- 'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
- {
- 'text-red-400 font-semibold': item.icon.includes('trash')
- }
- ]"
- @click="toggleCallback"
- >
- <span :class="item.icon" />
- <span class="text-center">
- {{ item.label }}
- </span>
- </div>
- </template>
- </SpeedDial>
+ <MenuDial v-model:isActive="isMenu" :items="speedDialState" size="large"></MenuDial>
</div>
</template>
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/SidebarMenuContent.vue
similarity index 76%
rename from src/modules/BaseSidebarMenu.vue
rename to src/modules/SidebarMenuContent.vue
index 00bd61cae798b2e20c31c11138d378c297b71106..50088ad58d3f3207acafbfc4e180963465410ec2 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/SidebarMenuContent.vue
@@ -51,18 +51,21 @@ onMounted(() => {
<span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
</div>
<Tree :expand="true" theme="black" :items="sheets">
- <!-- <template #url="slotProps">-->
- <!-- <a-->
- <!-- :href="slotProps.node.data"-->
- <!-- :class="[-->
- <!-- 'block',-->
- <!-- {-->
- <!-- 'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data-->
- <!-- }-->
- <!-- ]"-->
- <!-- >{{ slotProps.node.label }}</a-->
- <!-- >-->
- <!-- </template>-->
+ <template #1IconBefore>
+ <HamburgerIcon color="white" size="20" />
+ </template>
+ <template #1-2IconAfter>
+ <DottedIcon color="white" size="20" />
+ </template>
+ <template #1-1IconBefore>
+ <ParagraphIcon color="white" size="20" />
+ </template>
+ <template #1-1-2IconBefore>
+ <DottedIcon color="white" size="20" />
+ </template>
+ <template #1-2-1IconBefore>
+ <ImageIcon color="white" size="20" />
+ </template>
</Tree>
</nav>
</div>
diff --git a/src/components/MenuHeader.vue b/src/modules/SidebarMenuHeader.vue
similarity index 100%
rename from src/components/MenuHeader.vue
rename to src/modules/SidebarMenuHeader.vue
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
index d8adc5d2b5ddd47807f8f4edc4d9f139ec7fc965..9ca6c0fcae51bbac8187c12ec040f792db965217 100644
--- a/src/modules/entities/DividerItem.vue
+++ b/src/modules/entities/DividerItem.vue
@@ -12,7 +12,7 @@ defineProps<Props>();
<section class="entityContainer relative px-16 py-6">
<Divider :type="entityData.divider_type" :height="entityData.divider_height" />
<DividerSettings v-if="isEditMode" :entityData="entityData" />
- <EntityPositionSettings />
+ <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
</section>
</template>
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
index a537c47e60458a9ba89e3b3a8343cf405ad3e43a..fca0fc14e545e8978a5d55dfafdea9a8f282e4b3 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -20,9 +20,11 @@ const createEntity = (entity: IEntity) => {
:entity="entitiesItem"
:isEditMode="isEditMode"
/>
- <div class="relative mt-2">
- <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
- <div v-else style="height: 68px"></div>
+ <div class="my-4" style="margin-left: 64px">
+ <Transition name="bounce">
+ <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
+ </Transition>
+ <div v-if="!isEditMode" style="height: 50px"></div>
</div>
</template>
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 3dce9b472aec00012d8419825fb1ea4733f91e2c..34303dfcba73abd9747f98dd8f41b8d6e5f6fe2f 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -118,7 +118,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
v-model:entityData="entityData"
@openCropImageModal="openCropImageModal"
/>
- <EntityPositionSettings />
+ <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
</div>
</section>
</template>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index 3d511980c59062d053067ddbb9cb5bf198b4c1a0..a01172c36e8c38f675936221e6087f9bda82351c 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -2,6 +2,8 @@
import { useElementSize, useTextareaAutosize } from '@vueuse/core';
import type { IParagraph } from '@/app/interfaces/entities';
import { editEntity } from '@/app/helpers';
+import { useDataStore } from '@/app/stores/data';
+import type { IEntity } from '@/app/interfaces/environment';
interface Props {
entityData: IParagraph;
@@ -10,6 +12,13 @@ interface Props {
const props = defineProps<Props>();
const entityData = ref(props.entityData);
+const dataStore = useDataStore();
+const entities = computed(() => dataStore.entities);
+const entityIndex = computed(() =>
+ entities.value.findIndex((entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid)
+);
+const entitiesLength = computed(() => entities.value.length);
+
const editTitle = () => {
editEntity({ ...entityData.value, title: entityData.value.title });
};
@@ -18,7 +27,6 @@ const editText = () => {
};
const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
-const { height: textareaHeight } = useElementSize(textarea);
</script>
<template>
@@ -64,17 +72,22 @@ const { height: textareaHeight } = useElementSize(textarea);
@input="triggerResize"
/>
</div>
- <TextMenu v-if="isEditMode" v-model:entityData="entityData" />
- <EntityPositionSettings />
+ <TextSettings v-if="isEditMode" v-model:entityData="entityData" />
+ <EntityPositionSettings
+ v-if="isEditMode && entitiesLength > 1"
+ :entityUuid="entityData.entity_uuid"
+ :entityIndex="entityIndex"
+ :entitiesLength="entitiesLength"
+ />
</div>
</section>
</template>
<style>
-.entityContainer .speedDial {
+.entityContainer .settings {
opacity: 0;
}
-.entityContainer:hover .speedDial {
+.entityContainer:hover .settings {
opacity: 100;
}
.entityContainer:hover .aggregateHigh {
diff --git a/src/output.css b/src/output.css
index 4c24ee2a45527177b191aa47d89d9081ae24b24e..1060844815523306785f02dc71d8fbad7a2140c4 100644
--- a/src/output.css
+++ b/src/output.css
@@ -628,6 +628,10 @@ video {
left: 0.5rem;
}
+.right-2 {
+ right: 0.5rem;
+}
+
.right-6 {
right: 1.5rem;
}
@@ -652,6 +656,10 @@ video {
top: 1.5rem;
}
+.left-4 {
+ left: 1rem;
+}
+
.z-40 {
z-index: 40;
}
@@ -672,10 +680,6 @@ video {
order: 3;
}
-.-m-2 {
- margin: -0.5rem;
-}
-
.-my-2 {
margin-top: -0.5rem;
margin-bottom: -0.5rem;
@@ -686,6 +690,11 @@ video {
margin-right: auto;
}
+.my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
.-mb-2 {
margin-bottom: -0.5rem;
}
@@ -710,10 +719,6 @@ video {
margin-bottom: 2rem;
}
-.ml-0 {
- margin-left: 0px;
-}
-
.ml-4 {
margin-left: 1rem;
}
@@ -734,10 +739,6 @@ video {
margin-right: 1rem;
}
-.mt-2 {
- margin-top: 0.5rem;
-}
-
.mt-4 {
margin-top: 1rem;
}
@@ -786,10 +787,6 @@ video {
height: 2rem;
}
-.h-0 {
- height: 0px;
-}
-
.h-12 {
height: 3rem;
}
@@ -927,6 +924,10 @@ video {
justify-content: space-between;
}
+.gap-1\.5 {
+ gap: 0.375rem;
+}
+
.gap-10 {
gap: 2.5rem;
}
@@ -1083,11 +1084,6 @@ video {
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
-.bg-sky-900 {
- --tw-bg-opacity: 1;
- background-color: rgb(12 74 110 / var(--tw-bg-opacity));
-}
-
.bg-violet-500 {
--tw-bg-opacity: 1;
background-color: rgb(139 92 246 / var(--tw-bg-opacity));
@@ -1259,11 +1255,6 @@ video {
line-height: 1.5;
}
-.text-black {
- --tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1325,11 +1316,6 @@ video {
cursor: pointer;
}
-.hover\:bg-slate-700:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
.hover\:bg-slate-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
@@ -1343,9 +1329,4 @@ video {
.hover\:brightness-75:hover {
--tw-brightness: brightness(.75);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.hover\:brightness-125:hover {
- --tw-brightness: brightness(1.25);
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
\ No newline at end of file
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 32629c2240e78f3299c0a52bd1b4377eedae4b23..c1b6d0b169a834ffa6fc5ea3081f4dc1151826b9 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -82,8 +82,8 @@ const openMenu = () => (isMenuVisible.value = true);
<PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
<PageMenuButton @openMenu="openMenu" />
<Drawer v-model:isVisible="isMenuVisible" theme="black">
- <template #header><MenuHeader /></template>
- <BaseSidebarMenu class="relative z-50" />
+ <template #header><SidebarMenuHeader /></template>
+ <SidebarMenuContent class="relative z-50" />
</Drawer>
<TelegramSection />
<CropImageModal
diff --git a/src/shared/MenuDial.vue b/src/shared/MenuDial.vue
deleted file mode 100644
index f782875f33736c6fe5a45e52ccaca1b911a27141..0000000000000000000000000000000000000000
--- a/src/shared/MenuDial.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core';
-import PlusIcon from '@/shared/icons/PlusIcon.vue';
-import { computed } from 'vue';
-
-interface Props {
- isActive: boolean;
- items: {
- label: string;
- color?: string;
- onClick?: () => void;
- }[];
- size?: 'large' | 'extraLarge';
- color?: string;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:isActive']);
-const isActive = useVModel(props, 'isActive', emit);
-
-const elementsSize = computed(() => {
- if (!props?.size) return 30;
- switch (props.size) {
- case 'large':
- return 40;
- case 'extraLarge':
- return 50;
- }
-});
-</script>
-
-<template>
- <section class="menuContainer">
- <button
- :style="`background-color: ${color ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(45deg)' : ''};`"
- class="menuButton"
- @click.prevent="isActive = !isActive"
- >
- <slot name="button" />
- <PlusIcon v-if="!$slots.button" :size="elementsSize - 10" />
- </button>
- <ul
- :class="[
- 'menuList',
- {
- menuListOpened: isActive
- }
- ]"
- :style="`transform: translateY(-${elementsSize / 2}px) translateX(${isActive ? elementsSize + 10 : 0}px)`"
- >
- <li
- v-for="item of items"
- :key="item.label"
- :style="`background-color: ${item?.color ?? 'white'}; height: ${elementsSize}px`"
- class="menuElement"
- @click.prevent="item?.onClick"
- >
- {{ item.label }}
- </li>
- </ul>
- </section>
- {{ elementsSize }}
-</template>
-
-<style scoped>
-.menuContainer {
- position: relative;
-}
-.menuButton {
- position: relative;
- border: 2px solid black;
- z-index: 2;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 50%;
- transition: 0.2s ease-in-out;
-}
-.menuButton:hover {
- filter: brightness(75%);
-}
-.menuList {
- display: flex;
- gap: 10px;
- position: absolute;
- top: 50%;
- left: 0;
- opacity: 0;
- transition: 0.2s ease-in-out;
-}
-.menuListOpened {
- opacity: 1;
-}
-.menuElement {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 5px;
- border-radius: 5px;
- user-select: none;
- cursor: pointer;
- transition: 0.2s ease-in-out;
-}
-.menuElement:hover {
- filter: brightness(75%);
-}
-</style>
diff --git a/src/shared/icons/HamburgerIcon.vue b/src/shared/icons/HamburgerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8563c80035ad0ab13ba405a311364d05fbc77987
--- /dev/null
+++ b/src/shared/icons/HamburgerIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 20 20"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+ >
+ <g
+ id="Page-1"
+ stroke="none"
+ stroke-width="1"
+ fill="none"
+ fill-rule="evenodd"
+ sketch:type="MSPage"
+ >
+ <g
+ id="Icon-Set-Filled"
+ sketch:type="MSLayerGroup"
+ transform="translate(-212.000000, -888.000000)"
+ :fill="color ?? '#000000'"
+ >
+ <path
+ id="hamburger"
+ d="M230,904 L214,904 C212.896,904 212,904.896 212,906 C212,907.104 212.896,908 214,908 L230,908 C231.104,908 232,907.104 232,906 C232,904.896 231.104,904 230,904 L230,904 Z M230,896 L214,896 C212.896,896 212,896.896 212,898 C212,899.104 212.896,900 214,900 L230,900 C231.104,900 232,899.104 232,898 C232,896.896 231.104,896 230,896 L230,896 Z M214,892 L230,892 C231.104,892 232,891.104 232,890 C232,888.896 231.104,888 230,888 L214,888 C212.896,888 212,888.896 212,890 C212,891.104 212.896,892 214,892 L214,892 Z"
+ sketch:type="MSShapeGroup"
+ ></path>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HamburgerMenu.vue b/src/shared/icons/HamburgerMenu.vue
deleted file mode 100644
index bdbe96ab7f306a652a869e5107483214acfea6af..0000000000000000000000000000000000000000
--- a/src/shared/icons/HamburgerMenu.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-interface Props {
- color?: string;
- size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
- <svg
- :width="`${size ?? 40}px`"
- :height="`${size ?? 40}px`"
- viewBox="0 0 24 24"
- :fill="color ?? 'none'"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M3.46447 20.5355C4.92893 22 7.28595 22 12 22C16.714 22 19.0711 22 20.5355 20.5355C22 19.0711 22 16.714 22 12C22 7.28595 22 4.92893 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355ZM18.75 16C18.75 16.4142 18.4142 16.75 18 16.75H6C5.58579 16.75 5.25 16.4142 5.25 16C5.25 15.5858 5.58579 15.25 6 15.25H18C18.4142 15.25 18.75 15.5858 18.75 16ZM18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H6C5.58579 11.25 5.25 11.5858 5.25 12C5.25 12.4142 5.58579 12.75 6 12.75H18ZM18.75 8C18.75 8.41421 18.4142 8.75 18 8.75H6C5.58579 8.75 5.25 8.41421 5.25 8C5.25 7.58579 5.58579 7.25 6 7.25H18C18.4142 7.25 18.75 7.58579 18.75 8Z"
- :fill="color ?? '#1C274C'"
- />
- </svg>
-</template>
-
-<style scoped></style>
diff --git a/src/shared/icons/HorizontalLineIcon.vue b/src/shared/icons/HorizontalLineIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59773e5c5a30487824ceae43312bb3897ee5e68a
--- /dev/null
+++ b/src/shared/icons/HorizontalLineIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ImageIcon.vue b/src/shared/icons/ImageIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..681e3b170ed04bae6a27f9755f2502ae370f2d8b
--- /dev/null
+++ b/src/shared/icons/ImageIcon.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 32 32"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+ >
+ <defs></defs>
+ <g
+ id="Page-1"
+ stroke="none"
+ stroke-width="1"
+ fill="none"
+ fill-rule="evenodd"
+ sketch:type="MSPage"
+ >
+ <g
+ id="Icon-Set"
+ sketch:type="MSLayerGroup"
+ transform="translate(-360.000000, -99.000000)"
+ :fill="color ?? '#000000'"
+ >
+ <path
+ id="image-picture"
+ d="M368,109 C366.896,109 366,108.104 366,107 C366,105.896 366.896,105 368,105 C369.104,105 370,105.896 370,107 C370,108.104 369.104,109 368,109 L368,109 Z M368,103 C365.791,103 364,104.791 364,107 C364,109.209 365.791,111 368,111 C370.209,111 372,109.209 372,107 C372,104.791 370.209,103 368,103 L368,103 Z M390,116.128 L384,110 L374.059,120.111 L370,116 L362,123.337 L362,103 C362,101.896 362.896,101 364,101 L388,101 C389.104,101 390,101.896 390,103 L390,116.128 L390,116.128 Z M390,127 C390,128.104 389.104,129 388,129 L382.832,129 L375.464,121.535 L384,112.999 L390,118.999 L390,127 L390,127 Z M364,129 C362.896,129 362,128.104 362,127 L362,126.061 L369.945,118.945 L380.001,129 L364,129 L364,129 Z M388,99 L364,99 C361.791,99 360,100.791 360,103 L360,127 C360,129.209 361.791,131 364,131 L388,131 C390.209,131 392,129.209 392,127 L392,103 C392,100.791 390.209,99 388,99 L388,99 Z"
+ sketch:type="MSShapeGroup"
+ ></path>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ParagraphIcon.vue b/src/shared/icons/ParagraphIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8061cbe1ae4f0c99c2bc34bba650dd94aa4b37b4
--- /dev/null
+++ b/src/shared/icons/ParagraphIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2,12H5a1,1,0,0,0,0-2H4.635l.586-1.692H8.779L9.365,10H9a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2h-.518L8.945,2.673A1,1,0,0,0,8,2H6a1,1,0,0,0-.945.673L2.518,10H2a1,1,0,0,0,0,2ZM6.712,4h.576l.8,2.308H5.913ZM23,4a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,4Zm0,6a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,10Zm0,5a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,15Zm0,6a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,21Z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/PlusIcon.vue b/src/shared/icons/PlusIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9afde0ac92569afeb69fc904d12e2addda34e45b
--- /dev/null
+++ b/src/shared/icons/PlusIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6 12H18M12 6V18"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TableIcon.vue b/src/shared/icons/TableIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d010f47bd2fd9f1a8e6dd51365a56cbc546659d8
--- /dev/null
+++ b/src/shared/icons/TableIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M3 9.5H21M3 14.5H21M8 4.5V19.5M6.2 19.5H17.8C18.9201 19.5 19.4802 19.5 19.908 19.282C20.2843 19.0903 20.5903 18.7843 20.782 18.408C21 17.9802 21 17.4201 21 16.3V7.7C21 6.5799 21 6.01984 20.782 5.59202C20.5903 5.21569 20.2843 4.90973 19.908 4.71799C19.4802 4.5 18.9201 4.5 17.8 4.5H6.2C5.0799 4.5 4.51984 4.5 4.09202 4.71799C3.71569 4.90973 3.40973 5.21569 3.21799 5.59202C3 6.01984 3 6.57989 3 7.7V16.3C3 17.4201 3 17.9802 3.21799 18.408C3.40973 18.7843 3.71569 19.0903 4.09202 19.282C4.51984 19.5 5.07989 19.5 6.2 19.5Z"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TrashIcon.vue b/src/shared/icons/TrashIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a18eee55aa46c96e746a85de0979cf841238c92
--- /dev/null
+++ b/src/shared/icons/TrashIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17"
+ :stroke="color ?? '#000000'"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
index 59a831a24ce852b8ec1dbaf79615f4d835571c98..a0f76aa739f72475cd8c527be5a2bdcd6430113b 100644
--- a/src/shared/ui/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -25,7 +25,7 @@ interface Props {
| 'black';
}
const props = defineProps<Props>();
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
if (!props?.theme) return '#0ea5e9';
switch (props?.theme) {
case 'white':
@@ -64,7 +64,7 @@ const colorTheme = computed(() => {
return '#ffffff';
});
const textColor = computed(() => {
- if (!props.theme) return '#ffffff';
+ if (!props.theme) return '#000000';
if (props.theme === 'white') return '#000000';
return '#ffffff';
});
@@ -81,7 +81,7 @@ const textColor = computed(() => {
}
]"
>
- <span :style="`background-color: ${colorTheme}`" class="background"></span>
+ <span :style="`background-color: ${themeColor}`" class="background"></span>
<span
:class="[
'icon',
diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue
index 50dfbf48849771ea6308d3962d5b10eaf206b96c..9a3bb523be9711b76350e339644d4df66829568d 100644
--- a/src/shared/ui/Drawer.vue
+++ b/src/shared/ui/Drawer.vue
@@ -23,7 +23,7 @@ interface Props {
| 'black';
}
const props = defineProps<Props>();
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
if (!props?.theme) return '#0ea5e9';
switch (props?.theme) {
case 'white':
@@ -82,7 +82,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
@click.prevent="isVisible = false"
></section>
<section
- :style="`color: ${textColor}; background-color: ${colorTheme}`"
+ :style="`color: ${textColor}; background-color: ${themeColor}`"
:class="[
'drawer',
{
diff --git a/src/shared/ui/MenuDial.vue b/src/shared/ui/MenuDial.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7b45ba983eb538e529be4e14d544c14cf59416f
--- /dev/null
+++ b/src/shared/ui/MenuDial.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import PlusIcon from '@/shared/icons/PlusIcon.vue';
+import { computed } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+
+interface Props {
+ isActive: boolean;
+ items: {
+ label: string;
+ theme?: string;
+ textStyle?: 'bold' | 'italic';
+ onClick?: () => void;
+ }[];
+ size?: 'large' | 'extraLarge';
+ theme?: string;
+ direction?: 'left' | 'right' | 'up' | 'down';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+
+const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
+const textColor = computed(() => {
+ if (!props.theme) return '#000000';
+ if (props.theme === 'white') return '#000000';
+ return '#ffffff';
+});
+const elementsSize = computed(() => {
+ if (!props?.size) return 30;
+ switch (props.size) {
+ case 'large':
+ return 40;
+ case 'extraLarge':
+ return 50;
+ }
+});
+const menuListStyles = computed(() => {
+ if (!props.direction)
+ return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+ switch (props.direction) {
+ case 'right':
+ return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+ case 'left':
+ return `flex-direction: row-reverse; transform: translateY(-${elementsSize.value / 2}px) ${isActive.value ? `translateX(calc(-100% - 10px))` : ''}`;
+ case 'up':
+ return `transform: translateY(-${isActive.value ? (0.5 + props.items.length) * elementsSize.value + 10 : elementsSize.value / 2}px)`;
+ case 'down':
+ return `transform: translateY(${isActive.value ? 20 : 0}px)`;
+ }
+});
+</script>
+
+<template>
+ <section class="menuContainer">
+ <button
+ :style="`background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(135deg)' : ''};`"
+ class="menuButton"
+ @click.prevent="isActive = !isActive"
+ >
+ <slot name="buttonIcon" />
+ <PlusIcon v-if="!$slots.buttonIcon" :size="elementsSize - 10" :color="textColor" />
+ </button>
+ <ul
+ :class="[
+ 'menuList',
+ {
+ menuListColumn: direction === 'up' || direction === 'down',
+ menuListOpened: isActive
+ }
+ ]"
+ :style="menuListStyles"
+ >
+ <li
+ v-for="(item, index) of items"
+ :key="item.label"
+ :style="`height: ${elementsSize}px; background-color: ${convertThemeToColorWhiteDefault(item.theme)};
+ color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}`"
+ class="menuElement"
+ @click.prevent="item?.onClick"
+ >
+ <slot :name="`${index + 1}IconBefore`" />
+ <p
+ style="padding: 5px"
+ :class="[
+ '',
+ {
+ bold: item.textStyle === 'bold',
+ italic: item.textStyle === 'italic'
+ }
+ ]"
+ >
+ {{ item.label }}
+ </p>
+ <slot :name="`${index + 1}IconAfter`" />
+ </li>
+ </ul>
+ </section>
+</template>
+
+<style scoped>
+.menuContainer {
+ position: relative;
+}
+.menuButton {
+ position: relative;
+ border: 2px solid black;
+ z-index: 2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ transition: 0.2s ease-in-out;
+}
+.menuButton:hover {
+ filter: brightness(75%);
+}
+.menuList {
+ display: flex;
+ pointer-events: none;
+ gap: 10px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ opacity: 0;
+ transition: 0.2s ease-in-out;
+}
+.menuListColumn {
+ flex-direction: column;
+}
+.menuListOpened {
+ pointer-events: auto;
+ opacity: 1;
+}
+.menuElement {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ border: 1px solid white;
+ border-radius: 5px;
+ user-select: none;
+ cursor: pointer;
+ transition: 0.2s ease-in-out;
+}
+.menuElement:hover {
+ filter: brightness(75%);
+}
+.bold {
+ font-weight: bold;
+}
+.italic {
+ font-style: italic;
+}
+</style>
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
index a72aa736bf69874c94ffd0cf26991066b687bcd4..0ede5dd267cf05565f1a636ad86d5ac01fbaa619 100644
--- a/src/shared/ui/Modal.vue
+++ b/src/shared/ui/Modal.vue
@@ -23,8 +23,8 @@ interface Props {
| 'black';
}
const props = defineProps<Props>();
-const colorTheme = computed(() => {
- if (!props?.theme) return '#0ea5e9';
+const themeColor = computed(() => {
+ if (!props?.theme) return '#ffffff';
switch (props?.theme) {
case 'white':
return '#ffffff';
@@ -59,7 +59,7 @@ const colorTheme = computed(() => {
case 'black':
return '#000000';
}
- return '#0ea5e9';
+ return '#ffffff';
});
const textColor = computed(() => {
if (!props.theme) return '#000000';
@@ -81,7 +81,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
]"
></section>
<section
- :style="`color: ${textColor}; background-color: ${colorTheme}`"
+ :style="`color: ${textColor}; background-color: ${themeColor}`"
:class="[
'modal',
{
@@ -103,7 +103,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
fill-rule="evenodd"
clip-rule="evenodd"
d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
- :fill="textColor ?? '#1C274C'"
+ :fill="textColor ?? '#ffffff'"
/>
</svg>
</div>
diff --git a/src/shared/ui/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
index 86ba7f32d91fc76265660c62e6d1cbabb675876f..a2a81016abdc0b6d8619255d338b5084964cb8b3 100644
--- a/src/shared/ui/ToggleSwitch.vue
+++ b/src/shared/ui/ToggleSwitch.vue
@@ -26,7 +26,7 @@ const props = defineProps<Props>();
const emit = defineEmits(['update:isActive']);
const isActive = useVModel(props, 'isActive', emit);
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
switch (props.theme) {
case 'white':
return '#ffffff';
@@ -102,7 +102,7 @@ const sizes = computed(() => {
@click.prevent="isActive = !isActive"
>
<span
- :style="`background-color: ${colorTheme ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
+ :style="`background-color: ${themeColor ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
:class="[
'activeBackground',
{
diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue
index cc4d7366528380cf83957e4083430c4de72c0eba..2705c18508614c23a3ec1f4bdd05f1186a6d7ccb 100644
--- a/src/shared/ui/Tree.vue
+++ b/src/shared/ui/Tree.vue
@@ -39,7 +39,7 @@ interface Props {
}
const props = defineProps<Props>();
const items = computed(() => props.items);
-const colorTheme = computed(() => {
+const themeColor = computed(() => {
if (!props?.theme) return '#ffffff';
switch (props?.theme) {
case 'white':
@@ -121,11 +121,11 @@ const toggleIsOpen = (item) =>
<template>
<ul
- :style="`background-color: ${colorTheme ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
+ :style="`background-color: ${themeColor ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
class="tree"
>
<li
- v-for="item of items"
+ v-for="(item, index) of items"
:key="item.text"
:class="[
'item flex',
@@ -183,9 +183,13 @@ const toggleIsOpen = (item) =>
}
]"
>
- <a :href="item.link" class="text">{{ item.text }}</a>
+ <div class="textContainer">
+ <slot :name="`${index + 1}IconBefore`" />
+ <a :href="item.link" class="text">{{ item.text }}</a>
+ <slot :name="`${index + 1}IconAfter`" />
+ </div>
<div class="children">
- <div v-for="child of item.children" :key="child.text" class="flex item">
+ <div v-for="(child, indexChild) of item.children" :key="child.text" class="flex item">
<svg
v-if="child.children"
:class="[
@@ -237,9 +241,17 @@ const toggleIsOpen = (item) =>
}
]"
>
- <a :href="child.link" class="text">{{ child.text }}</a>
+ <div class="textContainer">
+ <slot :name="`${index + 1}-${indexChild + 1}IconBefore`" />
+ <a :href="child.link" class="text">{{ child.text }}</a>
+ <slot :name="`${index + 1}-${indexChild + 1}IconAfter`" />
+ </div>
<div class="children">
- <div v-for="grandChild of child.children" :key="grandChild.text" class="flex item">
+ <div
+ v-for="(grandChild, indexGrandChild) of child.children"
+ :key="grandChild.text"
+ class="flex item"
+ >
<div
:class="[
'content',
@@ -250,7 +262,15 @@ const toggleIsOpen = (item) =>
}
]"
>
- <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+ <div class="textContainer">
+ <slot
+ :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconBefore`"
+ />
+ <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+ <slot
+ :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconAfter`"
+ />
+ </div>
</div>
</div>
</div>
@@ -275,15 +295,15 @@ const toggleIsOpen = (item) =>
position: relative;
overflow: hidden;
transition: all 0.3s ease;
- background-color: v-bind(colorTheme);
+ background-color: v-bind(themeColor);
}
.text {
- display: block;
+ display: inline-block;
position: relative;
- padding: 4px 0 4px 5px;
+ padding: 4px 0;
z-index: 3;
color: v-bind(textColor);
- background-color: v-bind(colorTheme);
+ background-color: v-bind(themeColor);
word-break: break-word;
}
.openButton {
@@ -312,6 +332,11 @@ const toggleIsOpen = (item) =>
opacity: 1;
max-height: 1000px;
}
+.textContainer {
+ display: flex;
+ gap: 10px;
+ margin-left: 10px;
+}
.flex {
display: flex;
align-items: start;