From 415b22303c82413847dfba3083855551c34543b5 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?= Date: Wed, 14 Aug 2024 10:30:14 +0500 Subject: [PATCH 1/5] refactor project --- components.d.ts | 9 +- index.html | 2 +- src/{ => app}/App.vue | 0 src/{ => app}/assets/ShelfNote.svg | 0 src/{ => app}/assets/main.css | 0 src/{ => app}/auto-imports.d.ts | 0 src/{ => app}/helpers/index.ts | 8 +- src/{ => app}/interfaces/authorization.ts | 4 +- src/{ => app}/interfaces/entities.ts | 0 src/{ => app}/interfaces/environment.ts | 2 +- src/{ => app}/main.ts | 2 +- src/{ => app}/router/index.ts | 2 +- src/{ => app}/stores/authorization.ts | 2 +- src/{ => app}/stores/data.ts | 2 +- src/{ => app}/stores/interface.ts | 0 src/{ => app}/stores/websocket.ts | 4 +- src/assets/Motion.svg | 203 ------------------ src/components/CreateEntityMenu.vue | 4 +- src/components/EditImageEntityMenu.vue | 189 ---------------- src/components/EditTextEntityMenu.vue | 182 ---------------- src/components/LogoAndLabel.vue | 2 +- src/components/UserInfoHeaderWithSettings.vue | 2 +- .../editEntityMenu/image/MoveMenu.vue | 121 +++++++++++ .../editEntityMenu/image/StateMenu.vue | 91 ++++++++ .../text/MoveMenu.vue | 10 +- .../text/StateMenu.vue | 6 +- src/helpers/autoResize.ts | 0 src/helpers/constants.ts | 0 src/modules/BaseMenu.vue | 2 +- src/modules/EntityItem.vue | 8 +- .../entities/ImageItem.vue | 29 ++- .../entities/TextItem.vue | 14 +- src/output.css | 55 +---- src/pages/HomePage.vue | 12 +- src/shared/Divider.vue | 7 + vite.config.ts | 2 +- 36 files changed, 300 insertions(+), 676 deletions(-) rename src/{ => app}/App.vue (100%) rename src/{ => app}/assets/ShelfNote.svg (100%) rename src/{ => app}/assets/main.css (100%) rename src/{ => app}/auto-imports.d.ts (100%) rename src/{ => app}/helpers/index.ts (87%) rename src/{ => app}/interfaces/authorization.ts (70%) rename src/{ => app}/interfaces/entities.ts (100%) rename src/{ => app}/interfaces/environment.ts (82%) rename src/{ => app}/main.ts (92%) rename src/{ => app}/router/index.ts (84%) rename src/{ => app}/stores/authorization.ts (83%) rename src/{ => app}/stores/data.ts (96%) rename src/{ => app}/stores/interface.ts (100%) rename src/{ => app}/stores/websocket.ts (95%) delete mode 100644 src/assets/Motion.svg delete mode 100644 src/components/EditImageEntityMenu.vue delete mode 100644 src/components/EditTextEntityMenu.vue create mode 100644 src/components/editEntityMenu/image/MoveMenu.vue create mode 100644 src/components/editEntityMenu/image/StateMenu.vue rename src/components/{editEntityMenus => editEntityMenu}/text/MoveMenu.vue (87%) rename src/components/{editEntityMenus => editEntityMenu}/text/StateMenu.vue (95%) delete mode 100644 src/helpers/autoResize.ts delete mode 100644 src/helpers/constants.ts rename src/{components => modules}/entities/ImageItem.vue (83%) rename src/{components => modules}/entities/TextItem.vue (83%) create mode 100644 src/shared/Divider.vue diff --git a/components.d.ts b/components.d.ts index 213ab65..139e2ca 100644 --- a/components.d.ts +++ b/components.d.ts @@ -12,17 +12,16 @@ declare module 'vue' { CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default'] Divider: typeof import('primevue/divider')['default'] Drawer: typeof import('primevue/drawer')['default'] - EditImageEntityMenu: typeof import('./src/components/EditImageEntityMenu.vue')['default'] - ImageItem: typeof import('./src/components/entities/ImageItem.vue')['default'] + ImageItem: typeof import('@/modules/entities/ImageItem.vue')['default'] LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default'] - MoveMenu: typeof import('./src/components/editEntityMenus/text/MoveMenu.vue')['default'] + MoveMenu: typeof import('./src/components/editEntityMenu/image/MoveMenu.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SpeedDial: typeof import('primevue/speeddial')['default'] Splitter: typeof import('primevue/splitter')['default'] SplitterPanel: typeof import('primevue/splitterpanel')['default'] - StateMenu: typeof import('./src/components/editEntityMenus/text/StateMenu.vue')['default'] - TextItem: typeof import('./src/components/entities/TextItem.vue')['default'] + StateMenu: typeof import('./src/components/editEntityMenu/image/StateMenu.vue')['default'] + TextItem: typeof import('@/modules/entities/TextItem.vue')['default'] Tree: typeof import('primevue/tree')['default'] UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default'] } diff --git a/index.html b/index.html index d1c0ae6..7a0abe9 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,6 @@
- + \ No newline at end of file diff --git a/src/App.vue b/src/app/App.vue similarity index 100% rename from src/App.vue rename to src/app/App.vue diff --git a/src/assets/ShelfNote.svg b/src/app/assets/ShelfNote.svg similarity index 100% rename from src/assets/ShelfNote.svg rename to src/app/assets/ShelfNote.svg diff --git a/src/assets/main.css b/src/app/assets/main.css similarity index 100% rename from src/assets/main.css rename to src/app/assets/main.css diff --git a/src/auto-imports.d.ts b/src/app/auto-imports.d.ts similarity index 100% rename from src/auto-imports.d.ts rename to src/app/auto-imports.d.ts diff --git a/src/helpers/index.ts b/src/app/helpers/index.ts similarity index 87% rename from src/helpers/index.ts rename to src/app/helpers/index.ts index 7b5ac9c..675d278 100644 --- a/src/helpers/index.ts +++ b/src/app/helpers/index.ts @@ -1,7 +1,7 @@ -import { useInterfaceStore } from '@/stores/interface'; -import type { IEntity } from '@/interfaces/environment'; -import { useDataStore } from '@/stores/data'; -import { useWebsocketStore } from '@/stores/websocket'; +import { useInterfaceStore } from '@/app/stores/interface'; +import type { IEntity } from '@/app/interfaces/environment'; +import { useDataStore } from '@/app/stores/data'; +import { useWebsocketStore } from '@/app/stores/websocket'; export async function uploadFile($event: Event) { const target = $event.target as HTMLInputElement; diff --git a/src/interfaces/authorization.ts b/src/app/interfaces/authorization.ts similarity index 70% rename from src/interfaces/authorization.ts rename to src/app/interfaces/authorization.ts index f9ae4f5..659cadb 100644 --- a/src/interfaces/authorization.ts +++ b/src/app/interfaces/authorization.ts @@ -1,5 +1,5 @@ -import type { TThemes } from '@/interfaces/environment'; -import type {IImage } from "@/interfaces/entities"; +import type { TThemes } from '@/app/interfaces/environment'; +import type { IImage } from '@/app/interfaces/entities'; export interface IUserData { user_uuid: string; diff --git a/src/interfaces/entities.ts b/src/app/interfaces/entities.ts similarity index 100% rename from src/interfaces/entities.ts rename to src/app/interfaces/entities.ts diff --git a/src/interfaces/environment.ts b/src/app/interfaces/environment.ts similarity index 82% rename from src/interfaces/environment.ts rename to src/app/interfaces/environment.ts index 4c9536e..699199e 100644 --- a/src/interfaces/environment.ts +++ b/src/app/interfaces/environment.ts @@ -1,4 +1,4 @@ -import type { IImage, ITable, IText } from '@/interfaces/entities'; +import type { IImage, ITable, IText } from '@/app/interfaces/entities'; export interface ISheet { sheet_uuid: string; diff --git a/src/main.ts b/src/app/main.ts similarity index 92% rename from src/main.ts rename to src/app/main.ts index f0b3ed0..b61cec8 100644 --- a/src/main.ts +++ b/src/app/main.ts @@ -1,4 +1,4 @@ -import './assets/main.css'; +import '@/app/assets/main.css'; import { createApp } from 'vue'; import { createPinia } from 'pinia'; diff --git a/src/router/index.ts b/src/app/router/index.ts similarity index 84% rename from src/router/index.ts rename to src/app/router/index.ts index 9652021..98dcd90 100644 --- a/src/router/index.ts +++ b/src/app/router/index.ts @@ -12,7 +12,7 @@ const router = createRouter({ { path: '/:sheetUuid', name: 'sheet', - component: () => import('../pages/[uuid]/SheetPage.vue') + component: () => import('../../pages/[uuid]/SheetPage.vue') } ] }); diff --git a/src/stores/authorization.ts b/src/app/stores/authorization.ts similarity index 83% rename from src/stores/authorization.ts rename to src/app/stores/authorization.ts index d1ba2d7..846b160 100644 --- a/src/stores/authorization.ts +++ b/src/app/stores/authorization.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia'; -import type { IUserData } from '@/interfaces/authorization'; +import type { IUserData } from '@/app/interfaces/authorization'; export const useAuthorizationStore = defineStore('authorizationStore', () => { const userUuid = ref('e786de50-f33c-4ef9-9dfe-329eed32b023'); diff --git a/src/stores/data.ts b/src/app/stores/data.ts similarity index 96% rename from src/stores/data.ts rename to src/app/stores/data.ts index 27b1f40..bbd53f4 100644 --- a/src/stores/data.ts +++ b/src/app/stores/data.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia'; -import type {IEntity, ISheet} from '@/interfaces/environment'; +import type { IEntity } from '@/app/interfaces/environment'; export const useDataStore = defineStore('dataStore', () => { const sheets = ref([ diff --git a/src/stores/interface.ts b/src/app/stores/interface.ts similarity index 100% rename from src/stores/interface.ts rename to src/app/stores/interface.ts diff --git a/src/stores/websocket.ts b/src/app/stores/websocket.ts similarity index 95% rename from src/stores/websocket.ts rename to src/app/stores/websocket.ts index 26d0dfc..3cff49c 100644 --- a/src/stores/websocket.ts +++ b/src/app/stores/websocket.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; -import { useDataStore } from '@/stores/data'; -import type { IEntity } from '@/interfaces/environment'; +import { useDataStore } from '@/app/stores/data'; +import type { IEntity } from '@/app/interfaces/environment'; export const useWebsocketStore = defineStore('websocketStore', () => { const socket = ref(); diff --git a/src/assets/Motion.svg b/src/assets/Motion.svg deleted file mode 100644 index a51145e..0000000 --- a/src/assets/Motion.svg +++ /dev/null @@ -1,203 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue index 8d679e0..eaf9bad 100644 --- a/src/components/CreateEntityMenu.vue +++ b/src/components/CreateEntityMenu.vue @@ -1,7 +1,6 @@ - - - - diff --git a/src/components/EditTextEntityMenu.vue b/src/components/EditTextEntityMenu.vue deleted file mode 100644 index a02b908..0000000 --- a/src/components/EditTextEntityMenu.vue +++ /dev/null @@ -1,182 +0,0 @@ - - - - - diff --git a/src/components/LogoAndLabel.vue b/src/components/LogoAndLabel.vue index e6b58fa..83c84e2 100644 --- a/src/components/LogoAndLabel.vue +++ b/src/components/LogoAndLabel.vue @@ -2,7 +2,7 @@ diff --git a/src/components/UserInfoHeaderWithSettings.vue b/src/components/UserInfoHeaderWithSettings.vue index 9afc9f5..0264faa 100644 --- a/src/components/UserInfoHeaderWithSettings.vue +++ b/src/components/UserInfoHeaderWithSettings.vue @@ -1,5 +1,5 @@ + + + + diff --git a/src/components/editEntityMenu/image/StateMenu.vue b/src/components/editEntityMenu/image/StateMenu.vue new file mode 100644 index 0000000..a39d07e --- /dev/null +++ b/src/components/editEntityMenu/image/StateMenu.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/components/editEntityMenus/text/MoveMenu.vue b/src/components/editEntityMenu/text/MoveMenu.vue similarity index 87% rename from src/components/editEntityMenus/text/MoveMenu.vue rename to src/components/editEntityMenu/text/MoveMenu.vue index c77d796..7abdbce 100644 --- a/src/components/editEntityMenus/text/MoveMenu.vue +++ b/src/components/editEntityMenu/text/MoveMenu.vue @@ -1,8 +1,8 @@ diff --git a/src/components/entities/TextItem.vue b/src/modules/entities/TextItem.vue similarity index 83% rename from src/components/entities/TextItem.vue rename to src/modules/entities/TextItem.vue index 8c4d4dc..2e936bf 100644 --- a/src/components/entities/TextItem.vue +++ b/src/modules/entities/TextItem.vue @@ -1,10 +1,10 @@ + + + + diff --git a/vite.config.ts b/vite.config.ts index 69321b5..d8cfa76 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -72,7 +72,7 @@ export default defineConfig({ // Filepath to generate corresponding .d.ts file. // Defaults to './auto-imports.d.ts' when `typescript` is installed locally. // Set `false` to disable. - dts: 'src/auto-imports.d.ts', + dts: 'src/app/auto-imports.d.ts', // Array of strings of regexes that contains imports meant to be ignored during // the declaration file generation. You may find this useful when you need to provide -- GitLab From a7314f14f64b638a4e03b596dd372f72e6e9432b 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?= Date: Thu, 15 Aug 2024 20:15:42 +0500 Subject: [PATCH 2/5] refactor image in process (find perfect library for crop image) --- components.d.ts | 9 +- env.d.ts | 1 + package.json | 4 +- src/app/App.vue | 4 +- src/app/interfaces/index.ts | 5 + src/components/CreateEntityMenu.vue | 3 +- .../image/{MoveMenu.vue => MoveImageMenu.vue} | 0 .../{StateMenu.vue => StateImageMenu.vue} | 0 .../text/{MoveMenu.vue => MoveTextMenu.vue} | 0 .../text/{StateMenu.vue => StateTextMenu.vue} | 0 src/modules/BaseModal.vue | 108 +++++++++++ .../{BaseMenu.vue => BaseSidebarMenu.vue} | 0 src/modules/entities/ImageItem.vue | 10 +- src/modules/entities/TextItem.vue | 8 +- src/output.css | 75 +++++++- src/pages/HomePage.vue | 57 +++++- yarn.lock | 177 +++++++++++++++--- 17 files changed, 405 insertions(+), 56 deletions(-) create mode 100644 src/app/interfaces/index.ts rename src/components/editEntityMenu/image/{MoveMenu.vue => MoveImageMenu.vue} (100%) rename src/components/editEntityMenu/image/{StateMenu.vue => StateImageMenu.vue} (100%) rename src/components/editEntityMenu/text/{MoveMenu.vue => MoveTextMenu.vue} (100%) rename src/components/editEntityMenu/text/{StateMenu.vue => StateTextMenu.vue} (100%) create mode 100644 src/modules/BaseModal.vue rename src/modules/{BaseMenu.vue => BaseSidebarMenu.vue} (100%) diff --git a/components.d.ts b/components.d.ts index 139e2ca..2fd7373 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,17 +10,22 @@ declare module 'vue' { Avatar: typeof import('primevue/avatar')['default'] Button: typeof import('primevue/button')['default'] CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default'] + Dialog: typeof import('primevue/dialog')['default'] Divider: typeof import('primevue/divider')['default'] Drawer: typeof import('primevue/drawer')['default'] ImageItem: typeof import('@/modules/entities/ImageItem.vue')['default'] LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default'] - MoveMenu: typeof import('./src/components/editEntityMenu/image/MoveMenu.vue')['default'] + MoveImageMenu: typeof import('./src/components/editEntityMenu/image/MoveImageMenu.vue')['default'] + MoveMenu: typeof import('./src/components/editEntityMenu/text/MoveMenu.vue')['default'] + MoveTextMenu: typeof import('./src/components/editEntityMenu/text/MoveTextMenu.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SpeedDial: typeof import('primevue/speeddial')['default'] Splitter: typeof import('primevue/splitter')['default'] SplitterPanel: typeof import('primevue/splitterpanel')['default'] - StateMenu: typeof import('./src/components/editEntityMenu/image/StateMenu.vue')['default'] + StateImageMenu: typeof import('./src/components/editEntityMenu/image/StateImageMenu.vue')['default'] + StateMenu: typeof import('./src/components/editEntityMenu/text/StateMenu.vue')['default'] + StateTextMenu: typeof import('./src/components/editEntityMenu/text/StateTextMenu.vue')['default'] TextItem: typeof import('@/modules/entities/TextItem.vue')['default'] Tree: typeof import('primevue/tree')['default'] UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default'] diff --git a/env.d.ts b/env.d.ts index 11f02fe..910435b 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,2 @@ /// +// npx tailwindcss -i ./src/input.css -o ./src/output.css --watch diff --git a/package.json b/package.json index 15be684..2001c5d 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ }, "dependencies": { "@primevue/themes": "^4.0.4", - "@vueuse/components": "^10.11.1", "@vueuse/core": "^10.11.0", "@vueuse/integrations": "^10.11.0", + "cropperjs": "^1.6.2", "pinia": "^2.1.7", "primeicons": "^7.0.0", "primevue": "^4.0.4", @@ -24,6 +24,7 @@ "universal-cookie": "^7", "uuid": "^10.0.0", "vue": "^3.4.29", + "vue-advanced-cropper": "^2.8.9", "vue-router": "^4.3.3" }, "devDependencies": { @@ -36,6 +37,7 @@ "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/tsconfig": "^0.5.1", + "cost-of-modules": "^1.0.1", "eslint": "^8.57.0", "eslint-plugin-vue": "^9.23.0", "npm-run-all2": "^6.2.0", diff --git a/src/app/App.vue b/src/app/App.vue index df298a2..c863b2c 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -1,6 +1,6 @@ @@ -18,7 +18,7 @@ const visible = ref(false); diff --git a/src/app/interfaces/index.ts b/src/app/interfaces/index.ts new file mode 100644 index 0000000..4244561 --- /dev/null +++ b/src/app/interfaces/index.ts @@ -0,0 +1,5 @@ +export interface IImageMainInfo { + url: string; + width: number; + height: number; +} diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue index eaf9bad..63759b7 100644 --- a/src/components/CreateEntityMenu.vue +++ b/src/components/CreateEntityMenu.vue @@ -10,7 +10,8 @@ const { reset, onChange } = useFileDialog({ - accept: 'image/*' + accept: 'image/*', + reset: true }); const addImage = (files: FileList) => { diff --git a/src/components/editEntityMenu/image/MoveMenu.vue b/src/components/editEntityMenu/image/MoveImageMenu.vue similarity index 100% rename from src/components/editEntityMenu/image/MoveMenu.vue rename to src/components/editEntityMenu/image/MoveImageMenu.vue diff --git a/src/components/editEntityMenu/image/StateMenu.vue b/src/components/editEntityMenu/image/StateImageMenu.vue similarity index 100% rename from src/components/editEntityMenu/image/StateMenu.vue rename to src/components/editEntityMenu/image/StateImageMenu.vue diff --git a/src/components/editEntityMenu/text/MoveMenu.vue b/src/components/editEntityMenu/text/MoveTextMenu.vue similarity index 100% rename from src/components/editEntityMenu/text/MoveMenu.vue rename to src/components/editEntityMenu/text/MoveTextMenu.vue diff --git a/src/components/editEntityMenu/text/StateMenu.vue b/src/components/editEntityMenu/text/StateTextMenu.vue similarity index 100% rename from src/components/editEntityMenu/text/StateMenu.vue rename to src/components/editEntityMenu/text/StateTextMenu.vue diff --git a/src/modules/BaseModal.vue b/src/modules/BaseModal.vue new file mode 100644 index 0000000..c3038b7 --- /dev/null +++ b/src/modules/BaseModal.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/src/modules/BaseMenu.vue b/src/modules/BaseSidebarMenu.vue similarity index 100% rename from src/modules/BaseMenu.vue rename to src/modules/BaseSidebarMenu.vue diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue index dd8a0ec..12d4ce1 100644 --- a/src/modules/entities/ImageItem.vue +++ b/src/modules/entities/ImageItem.vue @@ -3,8 +3,8 @@ import type { IImage } from '@/app/interfaces/entities'; import { deleteEntity, editEntity } from '@/app/helpers'; import { useDataStore } from '@/app/stores/data'; import { useElementSize } from '@vueuse/core'; -import MoveMenu from '@/components/editEntityMenu/image/MoveMenu.vue'; -import StateMenu from '@/components/editEntityMenu/image/StateMenu.vue'; +import MoveImageMenu from '@/components/editEntityMenu/image/MoveImageMenu.vue'; +import StateImageMenu from '@/components/editEntityMenu/image/StateImageMenu.vue'; interface Props { entityData: IImage; @@ -72,7 +72,7 @@ const homeEntities = computed(() => dataStore.homeEntities); diff --git a/src/output.css b/src/output.css index cc2f81a..b54d046 100644 --- a/src/output.css +++ b/src/output.css @@ -644,6 +644,10 @@ video { top: 0.5rem; } +.z-50 { + z-index: 50; +} + .-m-2 { margin: -0.5rem; } @@ -653,6 +657,11 @@ video { margin-bottom: -0.5rem; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .-mb-2 { margin-bottom: -0.5rem; } @@ -689,6 +698,10 @@ video { margin-right: 0.5rem; } +.mr-4 { + margin-right: 1rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -727,6 +740,11 @@ video { height: 3rem; } +.size-6 { + width: 1.5rem; + height: 1.5rem; +} + .h-\[1px\] { height: 1px; } @@ -767,12 +785,23 @@ video { min-width: 100px; } -.max-w-\[400px\] { - max-width: 400px; +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-full { + --tw-translate-y: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.max-w-\[800px\] { - max-width: 800px; +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-pointer { @@ -841,14 +870,27 @@ video { border-radius: 0.375rem; } +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + .border { border-width: 1px; } +.border-0 { + border-width: 0px; +} + .border-2 { border-width: 2px; } +.border-t-2 { + border-top-width: 2px; +} + .border-solid { border-style: solid; } @@ -858,11 +900,21 @@ video { border-color: rgb(0 0 0 / var(--tw-border-opacity)); } +.border-t-black { + --tw-border-opacity: 1; + border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } +.bg-blue-400 { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity)); +} + .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -888,8 +940,9 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-opacity-70 { - --tw-bg-opacity: 0.7; +.bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); } .bg-opacity-80 { @@ -918,6 +971,11 @@ video { padding-right: 4rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -967,6 +1025,11 @@ video { line-height: 2.5rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .text-xl { font-size: 1.25rem; line-height: 1.75rem; diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue index b1fdd51..85ca5bb 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/HomePage.vue @@ -2,12 +2,15 @@ import { useElementSize } from '@vueuse/core'; import EntityItem from '@/modules/EntityItem.vue'; import CreateEntityMenu from '@/components/CreateEntityMenu.vue'; -import { setDefaultHomeBackground, uploadFile } from '@/app/helpers'; +// import { setDefaultHomeBackground, uploadFile } from '@/app/helpers'; +import { setDefaultHomeBackground } from '@/app/helpers'; import { useInterfaceStore } from '@/app/stores/interface'; import type { IEntity } from '@/app/interfaces/environment'; import { useDataStore } from '@/app/stores/data'; import { useAuthorizationStore } from '@/app/stores/authorization'; import { useWebsocketStore } from '@/app/stores/websocket'; +import BaseModal from '@/modules/BaseModal.vue'; +import type { IImageMainInfo } from '@/app/interfaces'; const backgroundImage = ref(); const { height: backgroundImageHeight } = useElementSize(backgroundImage); @@ -34,12 +37,49 @@ const addEntity = (newEntity: IEntity) => { console.log('data.body?.image_data: ', data.body?.image_data); websocketStore.sendData(data); }; + +const imageInfo = ref({ + url: backgroundUrl.value, + width: 0, + height: 0 +}); +const isModalUploadFile = ref(false); +function openUploadFileModal() { + console.log('openModal'); + isModalUploadFile.value = true; +} +function uploadFile($event: Event) { + const target = $event.target as HTMLInputElement; + console.log('target.files', target.files); + if (target && target.files && target.files[0]) { + let image = new Image(); + const file = target.files[0]; + console.log('file: ', file); + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.addEventListener('load', () => { + image.src = reader.result; + image.onload = function () { + console.log('image width and height: ', image.width, image.height); + imageInfo.value.url = String(reader.result); + imageInfo.value.width = image.width; + imageInfo.value.height = image.height; + console.log('imageInfo.value', imageInfo.value); + openUploadFileModal(); + const interfaceStore = useInterfaceStore(); + // interfaceStore.changeHomeBackgroundUrl(url); + // localStorage.setItem('homeBackgroundUrl', url); + }; + }); + } +} diff --git a/src/output.css b/src/output.css index b54d046..59e1c49 100644 --- a/src/output.css +++ b/src/output.css @@ -644,10 +644,6 @@ video { top: 0.5rem; } -.z-50 { - z-index: 50; -} - .-m-2 { margin: -0.5rem; } @@ -740,11 +736,6 @@ video { height: 3rem; } -.size-6 { - width: 1.5rem; - height: 1.5rem; -} - .h-\[1px\] { height: 1px; } @@ -785,25 +776,11 @@ video { min-width: 100px; } -.-translate-x-1\/2 { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.-translate-y-1\/2 { - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .-translate-y-full { --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .cursor-pointer { cursor: pointer; } @@ -910,11 +887,6 @@ video { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.bg-blue-400 { - --tw-bg-opacity: 1; - background-color: rgb(96 165 250 / var(--tw-bg-opacity)); -} - .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -940,11 +912,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-200 { - --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); -} - .bg-opacity-80 { --tw-bg-opacity: 0.8; } diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue index 85ca5bb..85f18f8 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/HomePage.vue @@ -1,16 +1,15 @@ @@ -96,7 +90,8 @@ function uploadFile($event: Event) { title="Change image" accept="image/*" class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0" - />Change image + /> + Change image