feat: add icons and edit crop-borders in 'Cropper' (566f9c3b) · Commits · Дмитрий Малюгин / UI_storybook

src/App.vue

+8 −0

Original line number	Diff line number	Diff line
		@@ -115,6 +115,10 @@ import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
		import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
		import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
		import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue';
		import CornerLeftBottomIcon from '@icons/Mono/CornerLeftBottomIcon.vue';
		import CornerLeftTopIcon from '@icons/Mono/CornerLeftTopIcon.vue';
		import CornerRightBottomIcon from '@icons/Mono/CornerRightBottomIcon.vue';
		import CornerRightTopIcon from '@icons/Mono/CornerRightTopIcon.vue';

		const gentleIcons = {
		Age18Icon,
		@@ -164,6 +168,10 @@ const gentleIcons = {
		CompassIcon,
		ConstructionWorkerIcon,
		ContactsIcon,
		CornerLeftBottomIcon,
		CornerLeftTopIcon,
		CornerRightBottomIcon,
		CornerRightTopIcon,
		CropIcon,
		CrossIcon,
		CrossCircleIcon,

src/common/constants/icons.ts

+8 −0

Original line number	Diff line number	Diff line
		@@ -111,6 +111,10 @@ import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';
		import SearchIcon from '@icons/Mono/SearchIcon.vue';
		import StarIcon from '@icons/Mono/StarIcon.vue';
		import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
		import CornerLeftBottomIcon from '@icons/Mono/CornerLeftBottomIcon.vue';
		import CornerLeftTopIcon from '@icons/Mono/CornerLeftTopIcon.vue';
		import CornerRightBottomIcon from '@icons/Mono/CornerRightBottomIcon.vue';
		import CornerRightTopIcon from '@icons/Mono/CornerRightTopIcon.vue';

		export const iconsSet: Record<string, Component> = {
		Age18: Age18Icon,
		@@ -156,6 +160,10 @@ export const iconsSet: Record<string, Component> = {
		Compass: CompassIcon,
		ConstructionWorker: ConstructionWorkerIcon,
		Contacts: ContactsIcon,
		CornerLeftBottom: CornerLeftBottomIcon,
		CornerLeftTop: CornerLeftTopIcon,
		CornerRightBottom: CornerRightBottomIcon,
		CornerRightTop: CornerRightTopIcon,
		Crop: CropIcon,
		Cross: CrossIcon,
		CrossCircle: CrossCircleIcon,

src/components/Cropper/Cropper.vue

+24 −8

Original line number	Diff line number	Diff line
		@@ -5,6 +5,9 @@ import Button from '@components/Button/Button.vue';
		import { convertThemeToTextColor } from '@helpers/common';
		import SaveIcon from '@icons/Mono/SaveIcon.vue';
		import CornerLeftTopIcon from '@icons/Mono/CornerLeftTopIcon.vue';
		import CornerRightTopIcon from '@icons/Mono/CornerRightTopIcon.vue';
		import CornerLeftBottomIcon from '@icons/Mono/CornerLeftBottomIcon.vue';
		import CornerRightBottomIcon from '@icons/Mono/CornerRightBottomIcon.vue';

		const props = withDefaults(defineProps<ICropperProps>(), {
		width: 300,
		@@ -28,7 +31,7 @@ watch(
		if (!imageSource.value) return;

		const img = new Image();
		img.src = props.src ?? URL.createObjectURL(props.file);
		img.src = props.src ?? URL.createObjectURL(props.file!);

		img.onload = () => {
		canvas.value.width = width.value ?? 0;
		@@ -52,11 +55,15 @@ watch(
		<div class="canvas-container">
		<canvas ref="canvas" id="cropper-canvas"> </canvas>
		<div class="crop-border left top">
		<CornerLeftTopIcon size="16" />
		<CornerLeftTopIcon color="white" />
		</div>
		<div class="crop-border right top"><CornerRightTopIcon color="white" /></div>
		<div class="crop-border left bottom">
		<CornerLeftBottomIcon color="white" />
		</div>
		<div class="crop-border right bottom">
		<CornerRightBottomIcon color="white" />
		</div>
		<div class="crop-border right top"></div>
		<div class="crop-border left bottom"></div>
		<div class="crop-border right bottom"></div>
		</div>
		<div
		v-show="imageSource"
		@@ -97,9 +104,18 @@ watch(
		.crop-border {
		position: absolute;
		z-index: 50;
		width: 20px;
		height: 20px;
		background-color: gray;
		width: 40px;
		height: 40px;
		border: 2px dashed white;
		opacity: 0.6;
		transition: opacity 0.1s ease;
		cursor: pointer;
		}
		.crop-border:hover {
		opacity: 0.8;
		}
		.crop-border:active {
		opacity: 1;
		}
		.top {
		top: 0;

src/icons/Mono/CornerLeftBottomIcon.vue

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		interface Props {
		color?: string;
		size?: string \| number;
		}
		defineProps<Props>();
		</script>

		<template>
		<svg
		:width="`${size ?? 40}px`"
		:height="`${size ?? 40}px`"
		viewBox="0 0 15 15"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
		>
		<path
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M10.3161 15c-1.6515 0-2.9368 0-3.968-.0843-1.0469-.0855-1.8975-.2616-2.6626-.6515C2.4154 13.6171 1.3829 12.5846.7358 11.3145.3459 10.5494.1698 9.6987.0843 8.6518 0 7.6207 0 6.3354 0 4.6839V4.65 1.438C.01 1.03.23.7.8.7s.78.341.78.769V4.65c0 1.6926.0006 2.9169.0792 3.8798.078.9542.2289 1.5854.493 2.1038.5032.9877 1.3065 1.791 2.2942 2.2942.5184.2641 1.1496.4151 2.1038.493C7.4331 13.4994 8.6574 13.5 10.35 13.5H13.259c.4142 0 .75.3358.75.75s-.3358.75-.973.731H10.35 10.3161Z"
		:fill="color ?? '#000000'"
		/>
		</svg>
		</template>

		<style scoped></style>

src/icons/Mono/CornerRightBottomIcon.vue

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		interface Props {
		color?: string;
		size?: string \| number;
		}
		defineProps<Props>();
		</script>

		<template>
		<svg
		:width="`${size ?? 40}px`"
		:height="`${size ?? 40}px`"
		viewBox="0 0 15 15"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
		>
		<path
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M4.6839 15H4.65 1.753c-.4142 0-.75-.3359-.75-.75s.3358-.75.75-.75h2.905c1.6925 0 2.9168-.0006 3.8797-.0792.9541-.078 1.5854-.2289 2.1038-.4931.9878-.5032 1.791-1.3064 2.2942-2.2942.2642-.5184.4151-1.1497.4931-2.1038.0786-.9629.0792-2.1872.0792-3.8797V1.555c0-.4142.3359-.75.75-.75s.75.3358.75.75v2.4.0339c0 1.6515 0 2.9369-.139 4.6721-.0855 1.0469-.2616 1.8975-.6515 2.6625-.6471 1.2702-1.6796 2.3027-2.9498 2.9498-.765.3899-1.6156.566-2.6625.6515C7.28 14.996 5.82 15.006 4.6839 15Z"
		:fill="color ?? '#000000'"
		/>
		</svg>
		</template>

		<style scoped></style>