refactor paragraph settings (2dd967a9) · Commits · Дмитрий Малюгин / NoteDiary

src/app/components.d.ts

+1 −0

Original line number	Diff line number	Diff line
		@@ -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']

src/components/entities/settings/ParagraphSettings.vue

+19 −72

Original line number	Diff line number	Diff line
		@@ -89,82 +89,29 @@ const saveChanges = () => {
		<Modal v-model:isVisible="isModal" theme="black" width="70%"
		><template #header><h3 class="w-max mx-auto">Edit paragraph</h3></template>
		<div class="p-10 flex gap-16 items-center">
		<ul class="flex gap-8 h-full" style="min-width: 35%">
		<li class="flex flex-col items-center gap-4" style="min-width: 150px">
		<div>
		<p class="py-2 text-center">Title</p>
		<div class="flex items-center">
		Off
		<ToggleSwitch v-model:isActive="isTitle" class="mx-2" :theme="themeColor" />
		On
		</div>
		</div>
		<div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
		<Transition name="fading">
		<div v-show="isTitle" class="flex flex-col items-center">
		<p class="py-2 text-center">Title position</p>
		<Slider
		v-model:value="newEntityData.entity_title_position"
		:theme="themeColor"
		width="150"
		size="small"
		isSmooth="true"
		backgroundColor="white"
		min="0"
		max="2"
		step="1"
		:options="entityTitlePositionOptions"
		<ParagraphSettingsList
		v-model:newEntityData="newEntityData"
		v-model:isTitle="isTitle"
		v-model:isEntityWidthFull="isEntityWidthFull"
		:themeColor="themeColor"
		:entityPositionOptions="entityPositionOptions"
		:entityTitlePositionOptions="entityTitlePositionOptions"
		/>
		</div>
		</Transition>
		</div>
		</li>
		<li class="flex flex-col items-center gap-4" style="min-width: 150px">
		<div>
		<p class="py-2 text-center">Paragraph width</p>
		<div class="flex items-center">
		Half
		<ToggleSwitch
		v-model:isActive="isEntityWidthFull"
		class="mx-2"
		:theme="themeColor"
		:negativeTheme="themeColor"
		/>
		Full
		</div>
		</div>
		<div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
		<Transition name="fading">
		<div v-show="!isEntityWidthFull" class="flex flex-col items-center">
		<p class="py-2">Paragraph position</p>
		<Slider
		v-model:value="newEntityData.entity_position"
		:theme="themeColor"
		width="150"
		size="small"
		isSmooth="true"
		backgroundColor="white"
		min="0"
		max="2"
		step="1"
		:options="entityPositionOptions"
		/>
		</div>
		</Transition>
		</div>
		</li>
		</ul>
		<section
		:style="`border-color: var(--${themeColor}-200); height: 320px`"
		class="grow flex flex-col gap-4 p-4 min-h-full border-2 border-slate-100 border-dashed rounded-2xl"
		>
		<h3
		<div :style="`justify-content: ${newEntityData.entity_position};`" class="flex">
		<div
		v-show="isTitle"
		:style="`border-color: var(--${themeColor}-800); text-align: ${newEntityData.entity_title_position}`"
		class="text-2xl font-bold text-center px-2 py-4 border-2 border-dashed rounded-2xl"
		:style="`border-color: var(--${themeColor}-800); justify-content: ${newEntityData.entity_title_position}; width: ${isEntityWidthFull ? '100%' : '50%'}`"
		class="flex text-2xl font-bold text-center px-2 py-4 border-2 border-dashed rounded-2xl"
		>
		<h3 class="w-2/3 overflow-ellipsis overflow-hidden whitespace-nowrap">
		{{ newEntityData.title ?? 'Title' }}
		</h3>
		</div>
		</div>
		<div :style="`justify-content: ${newEntityData.entity_position}`" class="grow flex">
		<div
		:style="`border-color: var(--${themeColor}-400); width: ${isEntityWidthFull ? '100%' : '50%'};`"

src/components/entities/settings/lists/ParagraphSettingsList.vue

0 → 100644

+93 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		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<Props>();
		const emit = defineEmits(['update:newEntityData', 'update:isTitle', 'update:isEntityWidthFull']);
		const { newEntityData, isTitle, isEntityWidthFull } = useVModels(props, emit);
		</script>

		<template>
		<ul class="flex gap-8 h-full" style="min-width: 35%">
		<li class="flex flex-col items-center gap-4" style="min-width: 150px">
		<div>
		<p class="py-2 text-center">Title</p>
		<div class="flex items-center">
		Off
		<ToggleSwitch v-model:isActive="isTitle" class="mx-2" :theme="themeColor" />
		On
		</div>
		</div>
		<div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
		<Transition name="fading">
		<div v-show="isTitle" class="flex flex-col items-center">
		<p class="py-2 text-center">Title position</p>
		<Slider
		v-model:value="newEntityData.entity_title_position"
		:theme="themeColor"
		width="150"
		size="small"
		isSmooth="true"
		backgroundColor="white"
		min="0"
		max="2"
		step="1"
		:options="entityTitlePositionOptions"
		/>
		</div>
		</Transition>
		</div>
		</li>
		<li class="flex flex-col items-center gap-4" style="min-width: 150px">
		<div>
		<p class="py-2 text-center">Paragraph width</p>
		<div class="flex items-center">
		Half
		<ToggleSwitch
		v-model:isActive="isEntityWidthFull"
		class="mx-2"
		:theme="themeColor"
		:negativeTheme="themeColor"
		/>
		Full
		</div>
		</div>
		<div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
		<Transition name="fading">
		<div v-show="!isEntityWidthFull" class="flex flex-col items-center">
		<p class="py-2">Paragraph position</p>
		<Slider
		v-model:value="newEntityData.entity_position"
		:theme="themeColor"
		width="150"
		size="small"
		isSmooth="true"
		backgroundColor="white"
		min="0"
		max="2"
		step="1"
		:options="entityPositionOptions"
		/>
		</div>
		</Transition>
		</div>
		</li>
		</ul>
		</template>

		<style scoped></style>

src/output.css

+8 −10

Original line number	Diff line number	Diff line
		@@ -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;
		}

src/pages/[uuid]/SheetPage.vue

+1 −1

Original line number	Diff line number	Diff line
		@@ -34,7 +34,7 @@ const backgroundImageInfo = ref<IImageMainInfo>({
		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 = {