finished with migrate to own UI-library (part of them) and refactor (c049cc44) · Commits · Дмитрий Малюгин / NoteDiary

src/app/assets/main.css

+17 −0

Original line number	Diff line number	Diff line
		@@ -266,3 +266,20 @@ input[type=file]::-webkit-file-upload-button {
		::-webkit-scrollbar-thumb:hover {
		background: #0033ff;
		}
		.bounce-enter-active {
		animation: bounce-in 0.5s;
		}
		.bounce-leave-active {
		animation: bounce-in 0.5s reverse;
		}
		@keyframes bounce-in {
		0% {
		transform: scale(0);
		}
		50% {
		transform: scale(1.25);
		}
		100% {
		transform: scale(1);
		}
		}

src/app/components.d.ts

+12 −2

Original line number	Diff line number	Diff line
		@@ -27,34 +27,44 @@ declare module 'vue' {
		EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
		EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
		ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
		HamburgerMenu: typeof import('./../shared/icons/HamburgerMenu.vue')['default']
		HamburgerIcon: typeof import('./../shared/icons/HamburgerIcon.vue')['default']
		HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
		HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
		ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
		ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
		ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
		ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
		ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
		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']
		MenuDial: typeof import('./../shared/ui/MenuDial.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']
		PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
		ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
		PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
		RouterLink: typeof import('vue-router')['RouterLink']
		RouterView: typeof import('vue-router')['RouterView']
		SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
		SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
		SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
		SidebarMenuHeader: typeof import('./../modules/SidebarMenuHeader.vue')['default']
		SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
		SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
		SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
		TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
		TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
		TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
		TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
		TextMenu: typeof import('./../components/entities/settings/TextMenu.vue')['default']
		TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
		TextSettings: typeof import('./../components/entities/settings/TextSettings.vue')['default']
		TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
		ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
		TrashIcon: typeof import('./../shared/icons/TrashIcon.vue')['default']
		Tree: typeof import('./../shared/ui/Tree.vue')['default']
		VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
		}

src/app/helpers/index.ts

+2 −2

Original line number	Diff line number	Diff line
		@@ -81,8 +81,8 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' \| 'down'
		websocketStore.sendData(data);
		};

		export const convertThemeToColorWhiteDefault = (theme: string) => {
		if (!theme) return '#0ea5e9';
		export const convertThemeToColorWhiteDefault = (theme: string \| undefined) => {
		if (!theme) return '#ffffff';
		switch (theme) {
		case 'white':
		return '#ffffff';

src/components/CreateEntityMenu.vue

+29 −37

Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ import { useFileDialog, useWindowSize } from '@vueuse/core';
		import { useAuthorizationStore } from '@/app/stores/authorization';
		import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
		import { useDataStore } from '@/app/stores/data';
		import cookies from '@/app/plugins/Cookie';

		const emit = defineEmits(['createEntity']);

		@@ -12,6 +13,9 @@ const { open: uploadFile, onChange } = useFileDialog({
		});
		const authorizationStore = useAuthorizationStore();
		const dataStore = useDataStore();

		const themeColor: string = cookies.get('favorite_color');
		const isMenu = ref(false);
		const userNickName = computed(() => authorizationStore.userNickName);
		const entitiesCount = computed(() => dataStore.entities.length);

		@@ -58,8 +62,9 @@ onChange((files) => {
		const speedDialItems = ref([
		{
		label: 'Divider',
		icon: 'pi pi-pause',
		command: () => {
		textStyle: 'bold',
		theme: 'blue',
		onClick: () => {
		emit('createEntity', {
		entity_type: 'divider',
		entity_order: entitiesCount.value + 1,
		@@ -70,8 +75,9 @@ const speedDialItems = ref([
		},
		{
		label: 'Paragraph',
		icon: 'pi pi-pencil',
		command: () => {
		textStyle: 'bold',
		theme: 'green',
		onClick: () => {
		emit('createEntity', {
		entity_type: 'paragraph',
		entity_order: entitiesCount.value + 1,
		@@ -84,13 +90,15 @@ const speedDialItems = ref([
		},
		{
		label: 'Image',
		icon: 'pi pi-image',
		command: () => uploadFile()
		textStyle: 'bold',
		theme: 'orange',
		onClick: () => uploadFile()
		},
		{
		label: 'Table',
		icon: 'pi pi-table',
		command: () => {
		textStyle: 'bold',
		theme: 'red',
		onClick: () => {
		emit('createEntity', {
		entity_type: 'table',
		entity_order: entitiesCount.value + 1,
		@@ -115,36 +123,20 @@ const speedDialItems = ref([
		</script>

		<template>
		<SpeedDial
		:model="speedDialItems"
		direction="right"
		:button-props="{ severity: 'primary', rounded: true }"
		style="position: absolute; left: 5%; top: 0"
		>
		<template #item="{ item, toggleCallback }">
		<div
		class="flex flex-col items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer"
		@click="toggleCallback"
		>
		<span v-show="item.label !== 'Divider'" :class="item.icon" />
		<svg
		v-show="item.label === 'Divider'"
		fill="#fff"
		width="20px"
		height="20px"
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
		>
		<path
		d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
		/>
		</svg>
		<span>
		{{ item.label }}
		</span>
		</div>
		<MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="extraLarge" :theme="themeColor">
		<template #1IconAfter>
		<HorizontalLineIcon color="white" size="25" />
		</template>
		<template #2IconAfter>
		<ParagraphIcon color="white" size="25" />
		</template>
		<template #3IconAfter>
		<ImageIcon color="white" size="25" />
		</template>
		<template #4IconAfter>
		<TableIcon color="white" size="30" />
		</template>
		</SpeedDial>
		</MenuDial>
		</template>

		<style scoped></style>

src/components/PageMenuButton.vue

+3 −3

Original line number	Diff line number	Diff line
		@@ -5,11 +5,11 @@ const emit = defineEmits(['openMenu']);
		<template>
		<div class="fixed top-0 left-0 z-50">
		<button
		class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md"
		class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md flex flex-col items-center justify-center gap-1.5"
		@click.prevent="emit('openMenu')"
		>
		Menu
		<HamburgerMenu color="white" size="40" />
		<span>Menu</span>
		<HamburgerIcon color="white" size="30" />
		</button>
		</div>
		</template>