From ab450632ca86405f9e09d8beb8115a1cba443df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Mon, 16 Sep 2024 12:05:42 +0500
Subject: [PATCH] refactor
---
src/app/components.d.ts | 14 +--
src/app/helpers/images.ts | 77 ++++++++++++
src/app/helpers/index.ts | 111 ++++++------------
src/{modules => components}/MenuHeader.vue | 0
.../entities/image/ImageSizeMenu.vue | 2 +-
src/components/entities/settings/TextMenu.vue | 6 +-
src/modules/BaseSidebarMenu.vue | 1 -
src/modules/PageHeader.vue | 3 +-
src/pages/[uuid]/SheetPage.vue | 3 +-
src/shared/{ => ui}/Button.vue | 60 +++++-----
src/shared/{ => ui}/Divider.vue | 0
src/shared/{ => ui}/Drawer.vue | 0
src/shared/{ => ui}/Modal.vue | 0
src/shared/{ => ui}/ToggleSwitch.vue | 0
src/shared/{ => ui}/Tree.vue | 0
15 files changed, 159 insertions(+), 118 deletions(-)
rename src/{modules => components}/MenuHeader.vue (100%)
rename src/shared/{ => ui}/Button.vue (73%)
rename src/shared/{ => ui}/Divider.vue (100%)
rename src/shared/{ => ui}/Drawer.vue (100%)
rename src/shared/{ => ui}/Modal.vue (100%)
rename src/shared/{ => ui}/ToggleSwitch.vue (100%)
rename src/shared/{ => ui}/Tree.vue (100%)
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 9d8258e..9a7732f 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 a32ed3d..df88897 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 d007a1e..052bb4b 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 7a42aef..e6a0858 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 1b054d4..aa6e41c 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 dd58ce5..00bd61c 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 7b5a0bf..b0e4956 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 8f15594..5731130 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 904c8fb..59a831a 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
--
GitLab