From 2fb510723cba4a1ed8521678c251647acfc74efe Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Fri, 13 Aug 2021 13:29:48 +0530 Subject: [PATCH 1/4] radix-ui-slider added --- components/ImageUploader.tsx | 14 ++++++++++++ components/Slider.tsx | 24 +++++++++++++++++++++ package.json | 1 + styles/globals.css | 20 +++++++++++++++++ yarn.lock | 42 ++++++++++++++++++++++++++++++++++++ 5 files changed, 101 insertions(+) create mode 100644 components/Slider.tsx diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx index 4f669670..d3a558eb 100644 --- a/components/ImageUploader.tsx +++ b/components/ImageUploader.tsx @@ -1,5 +1,6 @@ import Cropper from "react-easy-crop"; import { useState, useCallback, useRef } from "react"; +import Slider from "./Slider"; export default function ImageUploader({target, id, buttonMsg, handleAvatarChange, imageRef}){ const imageFileRef = useRef(); @@ -47,6 +48,11 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange setImageLoaded(true); } + const zoomSliderHandler = (e) => { + console.log(e.target); + // setZoom(e.target.value); + } + const createImage = (url) => new Promise((resolve, reject) => { const image = new Image(); @@ -183,6 +189,14 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange onZoomChange={setZoom} /> + } diff --git a/components/Slider.tsx b/components/Slider.tsx new file mode 100644 index 00000000..8d78b136 --- /dev/null +++ b/components/Slider.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +// import { styled } from '@stitches/react'; +// import { violet, blackA } from '@radix-ui/colors'; +import * as SliderPrimitive from '@radix-ui/react-slider'; + +const Slider = ({value, min, max, step, label, changeHandler}) => ( + + + + + + +); + +export default Slider; + diff --git a/package.json b/package.json index 36ce1b9a..ef8425ff 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@prisma/client": "^2.23.0", "@radix-ui/react-collapsible": "^0.0.16", "@radix-ui/react-dialog": "^0.0.19", + "@radix-ui/react-slider": "^0.0.17", "@radix-ui/react-slot": "^0.0.12", "@radix-ui/react-switch": "^0.0.15", "@radix-ui/react-tooltip": "^0.0.21", diff --git a/styles/globals.css b/styles/globals.css index 91c8396d..96c9ac1a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -79,6 +79,26 @@ .btn-wide.btn-white { @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500; } + /* slider */ + .slider { + @apply relative flex items-center w-40 h-4 select-none + } + .slider > .slider-track { + @apply relative flex-grow h-1 bg-neutral-400 rounded-md; + } + .slider .slider-range { + @apply absolute h-full bg-neutral-700 rounded-full + } + .slider .slider-thumb { + @apply block w-3 h-3 bg-neutral-700 rounded-full shadow-sm cursor-pointer transition-all; + } + .slider .slider-thumb:hover { + @apply bg-neutral-600; + } + .slider .slider-thumb:focus { + box-shadow: 0 0 0 4px rgba(0,0,0,0.2); + } + } /* !important to style multi-email input */ diff --git a/yarn.lock b/yarn.lock index b0a7d820..cd0b23bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,6 +753,13 @@ resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-2.26.0-23.9b816b3aa13cc270074f172f30d6eda8a8ce867d.tgz#cfdacfad3acc0f3bf1d7710aa8f3852fd85ac6d9" integrity sha512-a0jIhLvw9rFh6nZTr5Y3uzP28I2xNDu3pqxANvwMNnmIoYr1wYEcO1pMXn/36BGXldDdAWMmAbhfloHA3IB8DA== +"@radix-ui/number@0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-0.0.6.tgz#b99c5397592d4714f2addaac86879e3ed5136acd" + integrity sha512-4ezhe9dWl3mSrZ6EaYQE+OhOOT1+KW73FTbpaQmg8rD7RgArnmbSW7gLdWw9X9zq4zv+FGqcTqErxctiG3ZzRA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/popper@0.0.10": version "0.0.10" resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.0.10.tgz#9f707d9cec8762423f81acaf8e650e40a554cb73" @@ -793,6 +800,15 @@ "@radix-ui/react-use-controllable-state" "0.0.6" "@radix-ui/react-use-layout-effect" "0.0.5" +"@radix-ui/react-collection@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.0.15.tgz#1b2ef5d5c0361ad28fd168917e567e4d0f845c43" + integrity sha512-h82YPqKxIfrXpd8WJCdfgl1c8u2kj+Mr9syNwjcYcXv6DulkT8op771q0ry3+CcL/4cOOyR4ULdfuvMODTsUeg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-slot" "0.0.12" + "@radix-ui/react-compose-refs@0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.0.5.tgz#0f71f0de1dec341f30cebd420b6bc3d12a3037dd" @@ -957,6 +973,25 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-polymorphic" "0.0.13" +"@radix-ui/react-slider@^0.0.17": + version "0.0.17" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-0.0.17.tgz#14cc1bb89ff189fb082bc9efda8fe6161e491d6e" + integrity sha512-bYu+SuHnQnPCx7oOsMIujPPqgRi83PF7rVQ6/bRaLUjbJutHB8Arye8KhcvW/OUcqMqWllt0Jwp5aV6akM+ukA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/number" "0.0.6" + "@radix-ui/primitive" "0.0.5" + "@radix-ui/react-collection" "0.0.15" + "@radix-ui/react-compose-refs" "0.0.5" + "@radix-ui/react-context" "0.0.5" + "@radix-ui/react-polymorphic" "0.0.13" + "@radix-ui/react-primitive" "0.0.15" + "@radix-ui/react-use-controllable-state" "0.0.6" + "@radix-ui/react-use-direction" "0.0.1" + "@radix-ui/react-use-layout-effect" "0.0.5" + "@radix-ui/react-use-previous" "0.0.5" + "@radix-ui/react-use-size" "0.0.6" + "@radix-ui/react-slot@0.0.12", "@radix-ui/react-slot@^0.0.12": version "0.0.12" resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.0.12.tgz#c4d8a75fffca561aeeca2ed9603384d86757f60a" @@ -1027,6 +1062,13 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.0.5" +"@radix-ui/react-use-direction@0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.0.1.tgz#9ac72eb6d9902ed505c8a34048981d94f9433e14" + integrity sha512-sU+tkP09uEI1m+YJAR1ZAZLVFY1h/JD+jLSSQt5Wo3b9SYrJA889i2hH1P3DNRyWbbbisweiEQdK3MWILhFCig== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-escape-keydown@0.0.6": version "0.0.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.0.6.tgz#1ad1c81b99961b7dbe376ef54151ebc8bef627a0" From c3959e3cd47945ca7a54eb4af745d955f45d5455 Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Fri, 13 Aug 2021 15:04:20 +0530 Subject: [PATCH 2/4] added design elements to the slider --- components/ImageUploader.tsx | 19 ++++++++++--------- components/Slider.tsx | 8 ++++---- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx index d3a558eb..db99ef7e 100644 --- a/components/ImageUploader.tsx +++ b/components/ImageUploader.tsx @@ -48,9 +48,10 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange setImageLoaded(true); } - const zoomSliderHandler = (e) => { - console.log(e.target); - // setZoom(e.target.value); + const handleZoomSliderChange = ([value]) => { + console.log(value); + value < 1 ? setZoom(1) : setZoom(value); + // setZoom(e[0]); } const createImage = (url) => @@ -190,12 +191,12 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange /> } diff --git a/components/Slider.tsx b/components/Slider.tsx index 8d78b136..e3d61b0f 100644 --- a/components/Slider.tsx +++ b/components/Slider.tsx @@ -6,12 +6,12 @@ import * as SliderPrimitive from '@radix-ui/react-slider'; const Slider = ({value, min, max, step, label, changeHandler}) => ( From 81c16fea2399bcde1559418f320d7f4dbb59470b Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz Date: Fri, 13 Aug 2021 18:37:26 +0530 Subject: [PATCH 3/4] fixed min-value-setter issue --- components/ImageUploader.tsx | 11 +++++------ components/Slider.tsx | 3 ++- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx index db99ef7e..aa81a8f1 100644 --- a/components/ImageUploader.tsx +++ b/components/ImageUploader.tsx @@ -49,7 +49,6 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange } const handleZoomSliderChange = ([value]) => { - console.log(value); value < 1 ? setZoom(1) : setZoom(value); // setZoom(e[0]); } @@ -192,15 +191,15 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange } - + diff --git a/components/Slider.tsx b/components/Slider.tsx index e3d61b0f..cfad47c8 100644 --- a/components/Slider.tsx +++ b/components/Slider.tsx @@ -5,8 +5,9 @@ import * as SliderPrimitive from '@radix-ui/react-slider'; const Slider = ({value, min, max, step, label, changeHandler}) => ( Date: Sun, 15 Aug 2021 17:05:30 +0530 Subject: [PATCH 4/4] Cleaned up code and removed debug remnants --- components/ImageUploader.tsx | 1 - components/Slider.tsx | 3 --- styles/globals.css | 8 ++++++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx index aa81a8f1..d348e1b6 100644 --- a/components/ImageUploader.tsx +++ b/components/ImageUploader.tsx @@ -50,7 +50,6 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange const handleZoomSliderChange = ([value]) => { value < 1 ? setZoom(1) : setZoom(value); - // setZoom(e[0]); } const createImage = (url) => diff --git a/components/Slider.tsx b/components/Slider.tsx index cfad47c8..4e359a4b 100644 --- a/components/Slider.tsx +++ b/components/Slider.tsx @@ -1,12 +1,9 @@ import React from 'react'; -// import { styled } from '@stitches/react'; -// import { violet, blackA } from '@radix-ui/colors'; import * as SliderPrimitive from '@radix-ui/react-slider'; const Slider = ({value, min, max, step, label, changeHandler}) => ( .slider-track { @apply relative flex-grow h-1 bg-neutral-400 rounded-md; } + .slider .slider-range { @apply absolute h-full bg-neutral-700 rounded-full } + .slider .slider-thumb { @apply block w-3 h-3 bg-neutral-700 rounded-full shadow-sm cursor-pointer transition-all; - } + } + .slider .slider-thumb:hover { @apply bg-neutral-600; } + .slider .slider-thumb:focus { box-shadow: 0 0 0 4px rgba(0,0,0,0.2); } - } /* !important to style multi-email input */