diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 9d8258e0ea4b1ca7b2b397e73c61584bf069f6cc..9a7732fafc215e6d226d8b995f2eb982175ff67d 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -11,17 +11,17 @@ declare module 'vue' {
AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
- Button: typeof import('./../shared/Button.vue')['default']
+ Button: typeof import('./../shared/ui/Button.vue')['default']
CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
- Divider: typeof import('./../shared/Divider.vue')['default']
+ Divider: typeof import('./../shared/ui/Divider.vue')['default']
DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
DividerMenu: typeof import('./../modules/entities/settings/DividerMenu.vue')['default']
DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
- Drawer: typeof import('./../shared/Drawer.vue')['default']
+ Drawer: typeof import('./../shared/ui/Drawer.vue')['default']
EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
@@ -35,8 +35,8 @@ declare module 'vue' {
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']
- MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
- Modal: typeof import('./../shared/Modal.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']
@@ -54,8 +54,8 @@ declare module 'vue' {
TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
- ToggleSwitch: typeof import('./../shared/ToggleSwitch.vue')['default']
- Tree: typeof import('./../shared/Tree.vue')['default']
+ ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
+ Tree: typeof import('./../shared/ui/Tree.vue')['default']
VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
}
}
diff --git a/src/app/helpers/images.ts b/src/app/helpers/images.ts
index a32ed3dabf23f16d76570cf923b6b0d41604f32f..df8889732a52ee6392ea610cbc4b8c83df855c19 100644
--- a/src/app/helpers/images.ts
+++ b/src/app/helpers/images.ts
@@ -2,6 +2,12 @@ import type { IEntity } from '@/app/interfaces/environment';
import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
import type { IImage } from '@/app/interfaces/entities';
import { useWebsocketStore } from '@/app/stores/websocket';
+import { useInterfaceStore } from '@/app/stores/interface';
+
+export const setDefaultPageBackground = () => {
+ const interfaceStore = useInterfaceStore();
+ interfaceStore.resetPageBackground();
+};
export const addUrlsToImageEntities = (entities: IEntity[]) => {
const filesWebsocketStore = useFilesWebsocketStore();
@@ -50,3 +56,74 @@ export const cropImage = async (newUrl: string, entity: IImage) => {
};
websocketStore.sendData(data);
};
+
+export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
+ const elementsLabelsToRemove = [];
+ const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+ const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+ if (initialImageWidth <= 400 || initialImageHeight <= 400) {
+ elementsLabelsToRemove.push('x0.25');
+ if (
+ initialImageWidth <= 200 ||
+ initialImageHeight <= 200 ||
+ (initialImageWidth >= 1600 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x0.5');
+ if (
+ initialImageWidth <= 95 ||
+ initialImageHeight <= 95 ||
+ (initialImageWidth >= 1066 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x0.75');
+ }
+ }
+ }
+ if (
+ (initialImageWidth >= 800 && entity.text_position) ||
+ entity.image_width < initialImageWidth
+ ) {
+ elementsLabelsToRemove.push('x1');
+ }
+ return elementsLabelsToRemove;
+};
+
+export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
+ const elementsLabelsToRemove = [];
+ const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+ const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+ if (
+ (initialImageWidth >= 800 && entity.text_position) ||
+ entity.image_width > initialImageWidth
+ ) {
+ elementsLabelsToRemove.push('x1');
+ }
+ if (
+ initialImageWidth >= 960 ||
+ initialImageHeight >= 560 ||
+ (initialImageWidth >= 640 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x1.25');
+ if (
+ initialImageWidth >= 800 ||
+ initialImageHeight >= 467 ||
+ (initialImageWidth >= 533 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x1.5');
+ if (
+ initialImageWidth >= 685 ||
+ initialImageHeight >= 400 ||
+ (initialImageWidth >= 457 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x1.75');
+ if (
+ initialImageWidth >= 600 ||
+ initialImageHeight >= 350 ||
+ (initialImageWidth >= 400 && entity.text_position)
+ ) {
+ elementsLabelsToRemove.push('x2');
+ }
+ }
+ }
+ }
+ return elementsLabelsToRemove;
+};
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index d007a1ec7f57f99c62e4c77562cf2d652ef5675d..052bb4bf764efb66f579309bab463ae091a21afe 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -1,16 +1,11 @@
import { useInterfaceStore } from '@/app/stores/interface';
import { useDataStore } from '@/app/stores/data';
import { useWebsocketStore } from '@/app/stores/websocket';
-import type { IEntity } from '@/app/interfaces/environment';
+import type { IEntity, TTheme } from '@/app/interfaces/environment';
import { checkIsImage } from '@/app/helpers/images';
import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
-import type { IImage } from '@/app/interfaces/entities';
import cookies from '@/app/plugins/Cookie';
-export const setDefaultPageBackground = () => {
- const interfaceStore = useInterfaceStore();
- interfaceStore.resetPageBackground();
-};
export const fetchForEntities = (page_uuid: string) => {
const dataStore = useDataStore();
const interfaceStore = useInterfaceStore();
@@ -86,73 +81,41 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
websocketStore.sendData(data);
};
-export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
- const elementsLabelsToRemove = [];
- const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
- const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
- if (initialImageWidth <= 400 || initialImageHeight <= 400) {
- elementsLabelsToRemove.push('x0.25');
- if (
- initialImageWidth <= 200 ||
- initialImageHeight <= 200 ||
- (initialImageWidth >= 1600 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x0.5');
- if (
- initialImageWidth <= 95 ||
- initialImageHeight <= 95 ||
- (initialImageWidth >= 1066 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x0.75');
- }
- }
- }
- if (
- (initialImageWidth >= 800 && entity.text_position) ||
- entity.image_width < initialImageWidth
- ) {
- elementsLabelsToRemove.push('x1');
- }
- return elementsLabelsToRemove;
-};
-
-export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
- const elementsLabelsToRemove = [];
- const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
- const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
- if (
- (initialImageWidth >= 800 && entity.text_position) ||
- entity.image_width > initialImageWidth
- ) {
- elementsLabelsToRemove.push('x1');
- }
- if (
- initialImageWidth >= 960 ||
- initialImageHeight >= 560 ||
- (initialImageWidth >= 640 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x1.25');
- if (
- initialImageWidth >= 800 ||
- initialImageHeight >= 467 ||
- (initialImageWidth >= 533 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x1.5');
- if (
- initialImageWidth >= 685 ||
- initialImageHeight >= 400 ||
- (initialImageWidth >= 457 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x1.75');
- if (
- initialImageWidth >= 600 ||
- initialImageHeight >= 350 ||
- (initialImageWidth >= 400 && entity.text_position)
- ) {
- elementsLabelsToRemove.push('x2');
- }
- }
- }
+export const convertThemeToColorWhiteDefault = (theme: string) => {
+ if (!theme) return '#0ea5e9';
+ switch (theme) {
+ case 'white':
+ return '#ffffff';
+ case 'slate':
+ return '#64748b';
+ case 'blue':
+ return '#3b82f6';
+ case 'sky':
+ return '#0ea5e9';
+ case 'teal':
+ return '#14b8a6';
+ case 'lime':
+ return '#84cc16';
+ case 'green':
+ return '#22c55e';
+ case 'yellow':
+ return '#eab308';
+ case 'orange':
+ return '#f97316';
+ case 'pink':
+ return '#ec4899';
+ case 'fuchsia':
+ return '#d946ef';
+ case 'purple':
+ return '#a855f7';
+ case 'indigo':
+ return '#6366f1';
+ case 'rose':
+ return '#f43f5e';
+ case 'red':
+ return '#ef4444';
+ case 'black':
+ return '#000000';
}
- return elementsLabelsToRemove;
+ return '#ffffff';
};
diff --git a/src/modules/MenuHeader.vue b/src/components/MenuHeader.vue
similarity index 100%
rename from src/modules/MenuHeader.vue
rename to src/components/MenuHeader.vue
diff --git a/src/components/entities/image/ImageSizeMenu.vue b/src/components/entities/image/ImageSizeMenu.vue
index 7a42aef6c64da638afa95ee51d1c0403898d2f15..e6a085833247560b99835549cee88f4fde4c87bf 100644
--- a/src/components/entities/image/ImageSizeMenu.vue
+++ b/src/components/entities/image/ImageSizeMenu.vue
@@ -3,7 +3,7 @@ import type { IImage } from '@/app/interfaces/entities';
import {
getImageSpeedDialSizeBiggerLabelsToRemove,
getImageSpeedDialSizeSmallerLabelsToRemove
-} from '@/app/helpers';
+} from '@/app/helpers/images';
interface Props {
entityData: IImage;
diff --git a/src/components/entities/settings/TextMenu.vue b/src/components/entities/settings/TextMenu.vue
index 1b054d4aa0cb3096c5432d451c7b3dcc058a129f..aa6e41c7fa647639ebd2418ce1c5cc631bd0fe95 100644
--- a/src/components/entities/settings/TextMenu.vue
+++ b/src/components/entities/settings/TextMenu.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { deleteEntity, editEntity } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
import type { IParagraph } from '@/app/interfaces/entities';
import { useVModel } from '@vueuse/core';
import type { TTheme } from '@/app/interfaces/environment';
@@ -39,13 +39,13 @@ const editParagraphWidth = (widthMode: 'full' | 'half') => {
entityData.value.paragraph_size = widthMode;
editEntity({ ...entityData.value, paragraph_size: widthMode });
};
-const themeColor: TTheme = cookies.get('favorite_color');
+const themeColor = convertThemeToColorWhiteDefault(cookies.get('favorite_color'));
</script>
<template>
<div
:style="`background-color: ${themeColor}`"
- class="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="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"
@click.prevent="isModal = true"
>
<SettingsIcon color="white" size="25" />
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
index dd58ce5a0b58ad6788ab05a7b37a3428be7a134b..00bd61cae798b2e20c31c11138d378c297b71106 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/BaseSidebarMenu.vue
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { useDataStore } from '@/app/stores/data';
-import Tree from '@/shared/Tree.vue';
import { useAuthorizationStore } from '@/app/stores/authorization';
import HomeIcon from '@/shared/icons/HomeIcon.vue';
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
index 7b5a0bfb590ec842437e97562a35b2320903ee7a..b0e49566f70b0d993e4ece76e2b179d4e7809d52 100644
--- a/src/modules/PageHeader.vue
+++ b/src/modules/PageHeader.vue
@@ -2,6 +2,7 @@
import { useVModel } from '@vueuse/core';
import cookies from '@/app/plugins/Cookie';
import type { TTheme } from '@/app/interfaces/environment';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
interface Props {
title: string;
@@ -10,7 +11,7 @@ interface Props {
const props = defineProps<Props>();
const emit = defineEmits(['update:isEditMode']);
const isEditMode = useVModel(props, 'isEditMode', emit);
-const themeColor: TTheme = cookies.get('favorite_color');
+const themeColor = cookies.get('favorite_color');
</script>
<template>
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index 8f155941f7485f6b1a81669423265f1eaafc45a1..5731130321e2741315b27ea2bd66bc351f77b561 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -5,8 +5,9 @@ import { useAuthorizationStore } from '@/app/stores/authorization';
import { useWebsocketStore } from '@/app/stores/websocket';
import type { IEntity } from '@/app/interfaces/environment';
import type { IImageMainInfo } from '@/app/interfaces';
-import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
+import { createEntity, fetchForEntities } from '@/app/helpers';
import cookies from '@/app/plugins/Cookie';
+import { setDefaultPageBackground } from '@/app/helpers/images';
const dataStore = useDataStore();
const interfaceStore = useInterfaceStore();
diff --git a/src/shared/Button.vue b/src/shared/ui/Button.vue
similarity index 73%
rename from src/shared/Button.vue
rename to src/shared/ui/Button.vue
index 904c8fb648bd1a8aad46ad9ee6e01afdb934a529..59a831a24ce852b8ec1dbaf79615f4d835571c98 100644
--- a/src/shared/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -1,11 +1,11 @@
<script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
interface Props {
- label?: string
- iconPos?: 'left' | 'top' | 'right' | 'bottom'
- textStyle?: 'bold' | 'italic'
- border?: 'white' | 'black'
+ label?: string;
+ iconPos?: 'left' | 'top' | 'right' | 'bottom';
+ textStyle?: 'bold' | 'italic';
+ border?: 'white' | 'black';
theme?:
| 'white'
| 'slate'
@@ -22,52 +22,52 @@ interface Props {
| 'indigo'
| 'rose'
| 'red'
- | 'black'
+ | 'black';
}
-const props = defineProps<Props>()
+const props = defineProps<Props>();
const colorTheme = computed(() => {
- if (!props?.theme) return '#0ea5e9'
+ if (!props?.theme) return '#0ea5e9';
switch (props?.theme) {
case 'white':
- return '#ffffff'
+ return '#ffffff';
case 'slate':
- return '#64748b'
+ return '#64748b';
case 'blue':
- return '#3b82f6'
+ return '#3b82f6';
case 'sky':
- return '#0ea5e9'
+ return '#0ea5e9';
case 'teal':
- return '#14b8a6'
+ return '#14b8a6';
case 'lime':
- return '#84cc16'
+ return '#84cc16';
case 'green':
- return '#22c55e'
+ return '#22c55e';
case 'yellow':
- return '#eab308'
+ return '#eab308';
case 'orange':
- return '#f97316'
+ return '#f97316';
case 'pink':
- return '#ec4899'
+ return '#ec4899';
case 'fuchsia':
- return '#d946ef'
+ return '#d946ef';
case 'purple':
- return '#a855f7'
+ return '#a855f7';
case 'indigo':
- return '#6366f1'
+ return '#6366f1';
case 'rose':
- return '#f43f5e'
+ return '#f43f5e';
case 'red':
- return '#ef4444'
+ return '#ef4444';
case 'black':
- return '#000000'
+ return '#000000';
}
- return '#ffffff'
-})
+ return '#ffffff';
+});
const textColor = computed(() => {
- if (!props.theme) return '#ffffff'
- if (props.theme === 'white') return '#000000'
- return '#ffffff'
-})
+ if (!props.theme) return '#ffffff';
+ if (props.theme === 'white') return '#000000';
+ return '#ffffff';
+});
</script>
<template>
diff --git a/src/shared/Divider.vue b/src/shared/ui/Divider.vue
similarity index 100%
rename from src/shared/Divider.vue
rename to src/shared/ui/Divider.vue
diff --git a/src/shared/Drawer.vue b/src/shared/ui/Drawer.vue
similarity index 100%
rename from src/shared/Drawer.vue
rename to src/shared/ui/Drawer.vue
diff --git a/src/shared/Modal.vue b/src/shared/ui/Modal.vue
similarity index 100%
rename from src/shared/Modal.vue
rename to src/shared/ui/Modal.vue
diff --git a/src/shared/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
similarity index 100%
rename from src/shared/ToggleSwitch.vue
rename to src/shared/ui/ToggleSwitch.vue
diff --git a/src/shared/Tree.vue b/src/shared/ui/Tree.vue
similarity index 100%
rename from src/shared/Tree.vue
rename to src/shared/ui/Tree.vue