Skip to content

Commit 9ca5afe

Browse files
red-panda3red-panda3
authored
Update MediaView.tsx
1 parent 14b5075 commit 9ca5afe

File tree

1 file changed

+149
-149
lines changed

1 file changed

+149
-149
lines changed

‎frontend/src/components/Media/MediaView.tsx

+149-149
Original file line numberDiff line numberDiff line change
@@ -682,154 +682,154 @@ const MediaView: React.FC<MediaViewProps> = ({
682682
</div>
683683
{isEditing && (
684684
<>
685-
<div className="flex flex-wrap gap-2">
686-
<button
687-
onClick={handleEditComplete}
688-
className="rounded-md bg-emerald-500/70 p-2 text-white transition-all duration-200 hover:bg-emerald-600 hover:shadow-md"
689-
aria-label="Confirm Edit"
690-
>
691-
<Check className="h-5 w-5" />
692-
</button>
693-
<button
694-
onClick={resetEditing}
695-
className="rounded-md bg-rose-500/70 p-2 text-white transition-all duration-200 hover:bg-rose-600 hover:shadow-md"
696-
aria-label="Cancel Edit"
697-
>
698-
<X className="h-5 w-5" />
699-
</button>
700-
<select
701-
onChange={(e) => setFilter(e.target.value)}
702-
className="rounded-md bg-white/10 px-2 py-2 text-sm text-white transition-all duration-200 hover:bg-white/20"
703-
>
704-
<option value="">No Filter</option>
705-
<option value="grayscale(100%)">Grayscale</option>
706-
<option value="sepia(100%)">Sepia</option>
707-
<option value="invert(100%)">Invert</option>
708-
<option value="saturate(200%)">Saturate</option>
709-
</select>
710-
<button
711-
onClick={toggleAdjustMenu}
712-
className="rounded-md bg-white/10 p-2 text-white transition-all duration-200 hover:bg-white/20 hover:shadow-md"
713-
aria-label="Adjust"
714-
>
715-
<Sliders className="h-5 w-5" />
716-
</button>
717-
<button
718-
onClick={() => setonaspect(!onaspect)}
719-
className="rounded-md bg-white/20 p-2 text-white transition-colors duration-200 hover:bg-white/40"
720-
aria-label="Adjust"
721-
>
722-
<Crops/>
723-
</button>
724-
{showAdjustMenu && (
725-
<div className="absolute bottom-full right-5 mb-2 grid w-64 grid-cols-2 gap-2 rounded-md border-2 bg-white/10 p-4 backdrop-blur-md hover:border-white lg:grid-cols-1">
726-
<div className="mb-1">
727-
<label className="block text-sm font-medium text-white">
728-
Brightness
729-
</label>
730-
<input
731-
type="range"
732-
min="-100"
733-
max="100"
734-
value={brightness}
735-
onChange={(e) => setBrightness(Number(e.target.value))}
736-
className="h-1 w-full cursor-pointer accent-blue-500"
737-
/>
738-
</div>
739-
<div className="mb-1">
740-
<label className="block text-sm font-medium text-white">
741-
Contrast
742-
</label>
743-
<input
744-
type="range"
745-
min="-100"
746-
max="100"
747-
value={contrast}
748-
onChange={(e) => setContrast(Number(e.target.value))}
749-
className="h-1 w-full cursor-pointer accent-blue-500"
750-
/>
751-
</div>
752-
<div className="mb-1">
753-
<label className="block text-sm font-medium text-white">
754-
Vibrance
755-
</label>
756-
<input
757-
type="range"
758-
min="-100"
759-
max="100"
760-
value={vibrance}
761-
onChange={(e) => setVibrance(Number(e.target.value))}
762-
className="h-1 w-full cursor-pointer accent-blue-500"
763-
/>
764-
</div>
765-
<div className="mb-1">
766-
<label className="block text-sm font-medium text-white">
767-
Exposure
768-
</label>
769-
<input
770-
type="range"
771-
min="-100"
772-
max="100"
773-
value={exposure}
774-
onChange={(e) => setExposure(Number(e.target.value))}
775-
className="h-1 w-full cursor-pointer accent-blue-500"
776-
/>
777-
</div>
778-
<div className="mb-1">
779-
<label className="block text-sm font-medium text-white">
780-
Temperature
781-
</label>
782-
<input
783-
type="range"
784-
min="-100"
785-
max="100"
786-
value={temperature}
787-
onChange={(e) => setTemperature(Number(e.target.value))}
788-
className="h-1 w-full cursor-pointer accent-blue-500"
789-
/>
790-
</div>
791-
<div className="mb-1">
792-
<label className="block text-sm font-medium text-white">
793-
Sharpness
794-
</label>
795-
<input
796-
type="range"
797-
min="0"
798-
max="100"
799-
value={sharpness}
800-
onChange={(e) => setSharpness(Number(e.target.value))}
801-
className="h-1 w-full cursor-pointer accent-blue-500"
802-
/>
803-
</div>
804-
<div className="mb-1">
805-
<label className="block text-sm font-medium text-white">
806-
Vignette
807-
</label>
808-
<input
809-
type="range"
810-
min="0"
811-
max="100"
812-
value={vignette}
813-
onChange={(e) => setVignette(Number(e.target.value))}
814-
className="h-1 w-full cursor-pointer accent-blue-500"
815-
/>
816-
</div>
817-
<div className="mb-1">
818-
<label className="block text-sm font-medium text-white">
819-
Highlights
820-
</label>
821-
<input
822-
type="range"
823-
min="-100"
824-
max="100"
825-
value={highlights}
826-
onChange={(e) => setHighlights(Number(e.target.value))}
827-
className="h-1 w-full cursor-pointer accent-blue-500"
828-
/>
685+
<div className="flex flex-wrap gap-2">
686+
<button
687+
onClick={handleEditComplete}
688+
className="rounded-md bg-emerald-500/70 p-2 text-white transition-all duration-200 hover:bg-emerald-600 hover:shadow-md"
689+
aria-label="Confirm Edit"
690+
>
691+
<Check className="h-5 w-5" />
692+
</button>
693+
<button
694+
onClick={resetEditing}
695+
className="rounded-md bg-rose-500/70 p-2 text-white transition-all duration-200 hover:bg-rose-600 hover:shadow-md"
696+
aria-label="Cancel Edit"
697+
>
698+
<X className="h-5 w-5" />
699+
</button>
700+
<select
701+
onChange={(e) => setFilter(e.target.value)}
702+
className="rounded-md bg-white/10 px-2 py-2 text-sm text-white transition-all duration-200 hover:bg-white/20"
703+
>
704+
<option value="">No Filter</option>
705+
<option value="grayscale(100%)">Grayscale</option>
706+
<option value="sepia(100%)">Sepia</option>
707+
<option value="invert(100%)">Invert</option>
708+
<option value="saturate(200%)">Saturate</option>
709+
</select>
710+
<button
711+
onClick={toggleAdjustMenu}
712+
className="rounded-md bg-white/10 p-2 text-white transition-all duration-200 hover:bg-white/20 hover:shadow-md"
713+
aria-label="Adjust"
714+
>
715+
<Sliders className="h-5 w-5" />
716+
</button>
717+
<button
718+
onClick={() => setonaspect(!onaspect)}
719+
className="rounded-md bg-white/20 p-2 text-white transition-colors duration-200 hover:bg-white/40"
720+
aria-label="Adjust"
721+
>
722+
<Crops />
723+
</button>
724+
{showAdjustMenu && (
725+
<div className="absolute bottom-full right-5 mb-2 grid w-64 grid-cols-2 gap-2 rounded-md border-2 bg-white/10 p-4 backdrop-blur-md hover:border-white lg:grid-cols-1">
726+
<div className="mb-1">
727+
<label className="block text-sm font-medium text-white">
728+
Brightness
729+
</label>
730+
<input
731+
type="range"
732+
min="-100"
733+
max="100"
734+
value={brightness}
735+
onChange={(e) => setBrightness(Number(e.target.value))}
736+
className="h-1 w-full cursor-pointer accent-blue-500"
737+
/>
738+
</div>
739+
<div className="mb-1">
740+
<label className="block text-sm font-medium text-white">
741+
Contrast
742+
</label>
743+
<input
744+
type="range"
745+
min="-100"
746+
max="100"
747+
value={contrast}
748+
onChange={(e) => setContrast(Number(e.target.value))}
749+
className="h-1 w-full cursor-pointer accent-blue-500"
750+
/>
751+
</div>
752+
<div className="mb-1">
753+
<label className="block text-sm font-medium text-white">
754+
Vibrance
755+
</label>
756+
<input
757+
type="range"
758+
min="-100"
759+
max="100"
760+
value={vibrance}
761+
onChange={(e) => setVibrance(Number(e.target.value))}
762+
className="h-1 w-full cursor-pointer accent-blue-500"
763+
/>
764+
</div>
765+
<div className="mb-1">
766+
<label className="block text-sm font-medium text-white">
767+
Exposure
768+
</label>
769+
<input
770+
type="range"
771+
min="-100"
772+
max="100"
773+
value={exposure}
774+
onChange={(e) => setExposure(Number(e.target.value))}
775+
className="h-1 w-full cursor-pointer accent-blue-500"
776+
/>
777+
</div>
778+
<div className="mb-1">
779+
<label className="block text-sm font-medium text-white">
780+
Temperature
781+
</label>
782+
<input
783+
type="range"
784+
min="-100"
785+
max="100"
786+
value={temperature}
787+
onChange={(e) => setTemperature(Number(e.target.value))}
788+
className="h-1 w-full cursor-pointer accent-blue-500"
789+
/>
790+
</div>
791+
<div className="mb-1">
792+
<label className="block text-sm font-medium text-white">
793+
Sharpness
794+
</label>
795+
<input
796+
type="range"
797+
min="0"
798+
max="100"
799+
value={sharpness}
800+
onChange={(e) => setSharpness(Number(e.target.value))}
801+
className="h-1 w-full cursor-pointer accent-blue-500"
802+
/>
803+
</div>
804+
<div className="mb-1">
805+
<label className="block text-sm font-medium text-white">
806+
Vignette
807+
</label>
808+
<input
809+
type="range"
810+
min="0"
811+
max="100"
812+
value={vignette}
813+
onChange={(e) => setVignette(Number(e.target.value))}
814+
className="h-1 w-full cursor-pointer accent-blue-500"
815+
/>
816+
</div>
817+
<div className="mb-1">
818+
<label className="block text-sm font-medium text-white">
819+
Highlights
820+
</label>
821+
<input
822+
type="range"
823+
min="-100"
824+
max="100"
825+
value={highlights}
826+
onChange={(e) => setHighlights(Number(e.target.value))}
827+
className="h-1 w-full cursor-pointer accent-blue-500"
828+
/>
829+
</div>
829830
</div>
830-
</div>
831-
)}
832-
{onaspect && (
831+
)}
832+
{onaspect && (
833833
<div className="absolute bottom-full mb-2 w-32 rounded-md bg-white/20 backdrop-blur-md sm:right-1">
834834
<div className="mb-1 mt-1 flex flex-col justify-center gap-1">
835835
<div
@@ -864,7 +864,7 @@ const MediaView: React.FC<MediaViewProps> = ({
864864
</div>
865865
</div>
866866
</div>
867-
)}
867+
)}
868868
</div>
869869
</>
870870
)}
@@ -873,7 +873,7 @@ const MediaView: React.FC<MediaViewProps> = ({
873873

874874
{/* Adjust menu popup with improved styling */}
875875
{showAdjustMenu && (
876-
<button
876+
<button
877877
onClick={toggleAdjustMenu}
878878
className="mt-2 w-full rounded-md bg-white/20 py-1.5 text-xs font-medium text-white transition-all hover:bg-white/30"
879879
>

0 commit comments

Comments
 (0)