From 44e46d9d27d43d3bc3330ae55dccacb18bc04d37 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Mon, 2 Sep 2024 16:40:32 +0300 Subject: [PATCH] btns --- front/components.d.ts | 5 +++ front/package-lock.json | 10 +++++ front/package.json | 1 + front/src/assets/sidebar.scss | 60 ++++++++++++++++++++++++++-- front/src/components/Promo/index.vue | 54 ++++++++++++++++++------- 5 files changed, 113 insertions(+), 17 deletions(-) diff --git a/front/components.d.ts b/front/components.d.ts index 351e96f..0c227c8 100644 --- a/front/components.d.ts +++ b/front/components.d.ts @@ -33,6 +33,11 @@ declare module 'vue' { IMdiShop: typeof import('~icons/mdi/shop')['default'] IMdiVideo3d: typeof import('~icons/mdi/video3d')['default'] Item: typeof import('./src/components/Floorplan/item.vue')['default'] + IUilAngleLeft: typeof import('~icons/uil/angle-left')['default'] + IUilAngleLeftB: typeof import('~icons/uil/angle-left-b')['default'] + IUilAngleRightB: typeof import('~icons/uil/angle-right-b')['default'] + IUilCompressArrows: typeof import('~icons/uil/compress-arrows')['default'] + IUilTimes: typeof import('~icons/uil/times')['default'] Load: typeof import('./src/components/load.vue')['default'] Load_models: typeof import('./src/components/Promo/load_models.vue')['default'] Main: typeof import('./src/components/Main/index.vue')['default'] diff --git a/front/package-lock.json b/front/package-lock.json index 06179b1..5497479 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -11,6 +11,7 @@ "@fireworks-js/vue": "^2.10.7", "@iconify-json/icon-park": "^1.1.14", "@iconify-json/icon-park-solid": "^1.1.15", + "@iconify-json/uil": "^1.2.0", "@iconify/vue": "^4.1.2", "@monogrid/gainmap-js": "^3.0.5", "@tresjs/cientos": "^3.9.0", @@ -464,6 +465,15 @@ "@iconify/types": "*" } }, + "node_modules/@iconify-json/uil": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@iconify-json/uil/-/uil-1.2.0.tgz", + "integrity": "sha512-DFhJYbp/H2BGQ2oBS0DmqhvgkdUXpBTgCErhqwLEeRhkt8+MuTKlivpQf/gPgD5/6wHH37gPX4BhlqU4eH372w==", + "license": "Apache-2.0", + "dependencies": { + "@iconify/types": "*" + } + }, "node_modules/@iconify/types": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", diff --git a/front/package.json b/front/package.json index 9e8dd60..8586b2f 100644 --- a/front/package.json +++ b/front/package.json @@ -13,6 +13,7 @@ "@fireworks-js/vue": "^2.10.7", "@iconify-json/icon-park": "^1.1.14", "@iconify-json/icon-park-solid": "^1.1.15", + "@iconify-json/uil": "^1.2.0", "@iconify/vue": "^4.1.2", "@monogrid/gainmap-js": "^3.0.5", "@tresjs/cientos": "^3.9.0", diff --git a/front/src/assets/sidebar.scss b/front/src/assets/sidebar.scss index 9009af4..d4b3a67 100644 --- a/front/src/assets/sidebar.scss +++ b/front/src/assets/sidebar.scss @@ -32,6 +32,57 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25); } } +.itemnav { + position: absolute; + top: calc(100vh - 15rem); + left: 50%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + // flex-wrap: wrap; + column-gap: 1rem; + max-width: 8rem; + align-items: center; + justify-content: center; + + >* { + line-height: 1; + font-size: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + + border-radius: 50%; + background-color: $bg; + color: var(--primary-color); + + width: 2.5rem; + height: 2.5rem; + filter: drop-shadow($boxShadow); + + &.invisible { + visibility: hidden; + pointer-events: none; + } + + > a { + line-height: 1; + color: inherit; + } + } + + &-close { + grid-column-start: 2; + grid-column-end: 4; + margin: 1rem 0.75rem; + } + + &-deep { + width: 4rem; + height: 4rem; + } +} + .sidebar { position: fixed; width: 30vw; @@ -85,13 +136,13 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25); font-weight: 700; font-size: 1.25rem; } - + p { &:not(:last-child) { margin-bottom: 1rem; } } - + &-title { display: flex; align-items: center; @@ -99,7 +150,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25); gap: 0.75rem; color: var(--primary-color); cursor: pointer; - + svg { flex-shrink: 0; } @@ -145,10 +196,13 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25); input[type=checkbox] { order: 10 } + label { flex-grow: 1; } + $r: 0.5rem; + &:before, &::after { content: ''; diff --git a/front/src/components/Promo/index.vue b/front/src/components/Promo/index.vue index adc35da..8f20f09 100644 --- a/front/src/components/Promo/index.vue +++ b/front/src/components/Promo/index.vue @@ -16,6 +16,7 @@ import { useLoading } from '../../stores/loading'; import { useRawData } from '../../stores/raw_data'; import { Pixelation, EffectComposer } from '@tresjs/post-processing' +import { useClickable } from '../../stores/clickable'; const minPan = ref(new Vector3(-2, -2, -2)) const maxPan = ref(new Vector3(2, 2, 2)) @@ -46,6 +47,7 @@ const controlsState = reactive({ const raw_dataStore = useRawData() const route = useRoute() +const clickable = useClickable() watch(() => route.params.target, sidebar.close) const sidebarFunc = () => { @@ -56,15 +58,22 @@ const sidebarFunc = () => { } } -const bloomParams = reactive({ - luminanceThreshold: 0.1, - luminanceSmoothing: 0.3, - mipmapBlur: true, - intensity: 0.4, - radius: 0.5, - disableRender: true, - // blendFunction: BlendFunction.ADD, -}) +const prevClickableId = () => { + const item = clickable.list.findIndex(el => el.id == sidebar.id_clickable) + if (item == 0) { + return clickable.list[clickable.list.length - 1].id + } else { + return clickable.list[item - 1].id + } +} +const nextClickableId = () => { + const item = clickable.list.findIndex(el => el.id == sidebar.id_clickable) + if (item == (clickable.list.length - 1)) { + return clickable.list[0].id + } else { + return clickable.list[item + 1].id + } +}