From 2dd967a986e309735e26f5918eb38dc96e584f0b 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, 19 Sep 2024 17:29:08 +0500 Subject: [PATCH] refactor paragraph settings --- src/app/components.d.ts | 1 + .../entities/settings/ParagraphSettings.vue | 91 ++++-------------- .../settings/lists/ParagraphSettingsList.vue | 93 +++++++++++++++++++ src/output.css | 18 ++-- src/pages/[uuid]/SheetPage.vue | 2 +- src/shared/ui/Slider.vue | 3 - 6 files changed, 122 insertions(+), 86 deletions(-) create mode 100644 src/components/entities/settings/lists/ParagraphSettingsList.vue diff --git a/src/app/components.d.ts b/src/app/components.d.ts index 1ab8f72..2210e21 100644 --- a/src/app/components.d.ts +++ b/src/app/components.d.ts @@ -48,6 +48,7 @@ declare module 'vue' { ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default'] ParagraphItem: typeof import('./../modules/entities/ParagraphItem.vue')['default'] ParagraphSettings: typeof import('./../components/entities/settings/ParagraphSettings.vue')['default'] + ParagraphSettingsList: typeof import('./../components/entities/settings/lists/ParagraphSettingsList.vue')['default'] PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/src/components/entities/settings/ParagraphSettings.vue b/src/components/entities/settings/ParagraphSettings.vue index 0849e8d..d9f1dd1 100644 --- a/src/components/entities/settings/ParagraphSettings.vue +++ b/src/components/entities/settings/ParagraphSettings.vue @@ -89,82 +89,29 @@ const saveChanges = () => {
-
    -
  • -
    -

    Title

    -
    - Off - - On -
    -
    -
    - -
    -

    Title position

    - -
    -     -
    -
    • -
  • -
    -

    Paragraph width

    -
    - Half - - Full -
    -
    -
    - -
    -

    Paragraph position

    - -
    -     -
    -
    • -
+
-

- {{ newEntityData.title ?? 'Title' }} -

+
+
+

+ {{ newEntityData.title ?? 'Title' }} +

+
+
+import type { TTheme } from '@/app/interfaces/environment'; +import { useVModels } from '@vueuse/core'; +import type { IParagraph } from '@/app/interfaces/entities'; + +interface Props { + newEntityData: IParagraph; + isTitle: boolean; + isEntityWidthFull: boolean; + themeColor: TTheme; + entityPositionOptions: { + label: string; + value: number; + }[]; + entityTitlePositionOptions: { + label: string; + value: number; + }[]; +} +const props = defineProps(); +const emit = defineEmits(['update:newEntityData', 'update:isTitle', 'update:isEntityWidthFull']); +const { newEntityData, isTitle, isEntityWidthFull } = useVModels(props, emit); + + + + + diff --git a/src/output.css b/src/output.css index 39cceae..f527fbd 100644 --- a/src/output.css +++ b/src/output.css @@ -841,6 +841,10 @@ video { width: 0.5rem; } +.w-2\/3 { + width: 66.666667%; +} + .w-20 { width: 5rem; } @@ -899,16 +903,6 @@ video { 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-24 { - --tw-translate-y: 6rem; - 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)); } @@ -1003,6 +997,10 @@ video { text-overflow: ellipsis; } +.whitespace-nowrap { + white-space: nowrap; +} + .text-nowrap { text-wrap: nowrap; } diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue index c1b6d0b..79cf562 100644 --- a/src/pages/[uuid]/SheetPage.vue +++ b/src/pages/[uuid]/SheetPage.vue @@ -34,7 +34,7 @@ const backgroundImageInfo = ref({ onMounted(() => { const onKeydown = (event) => { if (event.key === 'Alt') isEditMode.value = !isEditMode.value; - if (event.key === 'Control') isMenuVisible.value = !isMenuVisible.value; + if (event.key === 'Escape') isMenuVisible.value = !isMenuVisible.value; }; document.addEventListener('keydown', onKeydown); const getPageBackgroundData = { diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue index 2d1f469..59fff7f 100644 --- a/src/shared/ui/Slider.vue +++ b/src/shared/ui/Slider.vue @@ -30,11 +30,8 @@ const optionValue = ref( watch([optionValue], () => { if (props.options) { value.value = props.options!.find((option) => option.value == optionValue.value)!.label; - console.log('optionValue.value', optionValue.value); } else value.value = optionValue.value; }); -console.log('optionValue.value', optionValue.value); -console.log('value.value', value.value); const sliderButtonSize = computed(() => { if (!props.size) return '40px'; switch (props.size) { -- GitLab