Skip to content

Commit

Permalink
fix: added image popover for settings cover (#737)
Browse files Browse the repository at this point in the history 
* fix: added popover for profile cover

* fix:removed comments
  • Loading branch information
@kunalv17
kunalv17 authored Apr 7, 2023
1 parent 35f9876 commit a68d94c
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 84 deletions.
12 changes: 4 additions & 8 deletions apps/app/components/core/image-picker-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
return (
<Popover className="relative z-[2]" ref={ref}>
<Popover.Button
className="rounded-md border border-gray-500 bg-white px-2 py-1 text-xs text-gray-700"
className="rounded border border-gray-500 bg-white px-2 py-1 text-xs text-gray-700"
onClick={() => setIsOpen((prev) => !prev)}
>
{label}
Expand Down Expand Up @@ -92,11 +92,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
</Tab.List>
<Tab.Panels className="h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
<Tab.Panel className="h-full w-full space-y-4">
<form
onSubmit={(e) => {
e.preventDefault();
setSearchParams(formData.search);
}}
<div
className="flex gap-x-2 pt-7"
>
<Input
Expand All @@ -107,10 +103,10 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
onChange={(e) => setFormData({ ...formData, search: e.target.value })}
placeholder="Search for images"
/>
<PrimaryButton type="submit" className="bg-indigo-600" size="sm">
<PrimaryButton type="button" onClick={()=>setSearchParams(formData.search)} className="bg-indigo-600" size="sm">
Search
</PrimaryButton>
</form>
</div>
{images ? (
<div className="grid grid-cols-4 gap-4">
{images.map((image) => (
Expand Down
106 changes: 52 additions & 54 deletions apps/app/components/emoji-icon-picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const EmojiIconPicker: React.FC<Props> = ({
setOpenColorPicker(false);
}}
className={`-my-1 w-1/2 border-b pb-2 text-center text-sm font-medium outline-none transition-colors ${
selected ? "border-theme" : "border-transparent"
selected ? "border-theme text-theme" : "border-transparent text-gray-500"
}`}
>
{tab.title}
Expand All @@ -95,12 +95,12 @@ const EmojiIconPicker: React.FC<Props> = ({
<Tab.Panel>
{recentEmojis.length > 0 && (
<div className="py-2">
{/* <h3 className="mb-2">Recent Emojis</h3> */}
<div className="grid grid-cols-10">
<h3 className="mb-2 ml-1 text-xs text-gray-400">Recent</h3>
<div className="grid grid-cols-8 gap-2">
{recentEmojis.map((emoji) => (
<button
type="button"
className="h-4 w-4 select-none text-sm hover:bg-hover-gray flex items-center justify-between"
className="h-4 w-4 select-none text-base hover:bg-hover-gray flex items-center justify-between"
key={emoji}
onClick={() => {
onChange(emoji);
Expand All @@ -115,12 +115,11 @@ const EmojiIconPicker: React.FC<Props> = ({
)}
<hr className="w-full h-[1px] mb-2" />
<div>
{/* <h3 className="mb-1">All Emojis</h3> */}
<div className="grid grid-cols-10 gap-y-1">
<div className="grid grid-cols-8 gap-x-2 gap-y-3">
{emojis.map((emoji) => (
<button
type="button"
className="h-4 w-4 mb-1 select-none text-sm hover:bg-hover-gray flex items-center"
className="h-4 w-4 ml-1 select-none text-base hover:bg-hover-gray flex justify-center items-center"
key={emoji}
onClick={() => {
onChange(emoji);
Expand All @@ -135,54 +134,53 @@ const EmojiIconPicker: React.FC<Props> = ({
</div>
</Tab.Panel>
<div className="py-2">
<div className="relative">
<div className="pb-2 flex items-center justify-between">
{[
"#D687FF",
"#F7AE59",
"#FF6B00",
"#8CC1FF",
"#FCBE1D",
"#18904F",
"#ADF672",
"#05C3FF",
"#000000",
].map((curCol) => (
<span
className="w-4 h-4 rounded-full cursor-pointer"
style={{ backgroundColor: curCol }}
onClick={() => setActiveColor(curCol)}
/>
))}
<button
type="button"
onClick={() => setOpenColorPicker((prev) => !prev)}
className="flex items-center gap-1"
>
<span
className="w-4 h-4 rounded-full conical-gradient"
style={{ backgroundColor: activeColor }}
<Tab.Panel className="flex h-full w-full flex-col justify-center">
<div className="relative">
<div className="pb-2 px-1 flex items-center justify-between">
{[
"#FF6B00",
"#8CC1FF",
"#FCBE1D",
"#18904F",
"#ADF672",
"#05C3FF",
"#000000",
].map((curCol) => (
<span
className="w-4 h-4 rounded-full cursor-pointer"
style={{ backgroundColor: curCol }}
onClick={() => setActiveColor(curCol)}
/>
))}
<button
type="button"
onClick={() => setOpenColorPicker((prev) => !prev)}
className="flex items-center gap-1"
>
<span
className="w-4 h-4 rounded-full conical-gradient"
style={{ backgroundColor: activeColor }}
/>
</button>
</div>
<div>
<TwitterPicker
className={`m-2 !absolute top-4 left-4 z-10 ${
openColorPicker ? "block" : "hidden"
}`}
color={activeColor}
onChange={(color) => {
setActiveColor(color.hex);
if (onIconColorChange) onIconColorChange(color.hex);
}}
triangle="hide"
width="205px"
/>
</button>
</div>
<div>
<TwitterPicker
className={`m-2 !absolute top-4 left-4 z-10 ${
openColorPicker ? "block" : "hidden"
}`}
color={activeColor}
onChange={(color) => {
setActiveColor(color.hex);
if (onIconColorChange) onIconColorChange(color.hex);
}}
triangle="hide"
width="205px"
/>
</div>
</div>
</div>
<hr className="w-full h-[1px] mb-1" />
<Tab.Panel className="flex h-full w-full flex-col justify-center">
<div className="grid grid-cols-10 mt-1 ml-1 gap-1">
<hr className="w-full h-[1px] mb-1" />

<div className="grid grid-cols-8 mt-1 ml-1 gap-x-2 gap-y-3">
{icons.material_rounded.map((icon) => (
<button
type="button"
Expand All @@ -195,7 +193,7 @@ const EmojiIconPicker: React.FC<Props> = ({
>
<span
style={{ color: activeColor }}
className="material-symbols-rounded text-base"
className="material-symbols-rounded text-lg"
>
{icon.name}
</span>
Expand Down
33 changes: 11 additions & 22 deletions apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import AppLayout from "layouts/app-layout";
import projectService from "services/project.service";
// components
import { DeleteProjectModal } from "components/project";
import { ImageUploadModal } from "components/core";
import { ImagePickerPopover } from "components/core";
import EmojiIconPicker from "components/emoji-icon-picker";
// hooks
import useToast from "hooks/use-toast";
Expand Down Expand Up @@ -157,17 +157,6 @@ const GeneralSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
router.push(`/${workspaceSlug}/projects`);
}}
/>
<ImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
onSuccess={(imageUrl) => {
setIsImageUploading(true);
setValue("cover_image", imageUrl);
setIsImageUploadModalOpen(false);
handleSubmit(onSubmit)().then(() => setIsImageUploading(false));
}}
value={watch("cover_image")}
/>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-8 sm:space-y-12">
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
Expand Down Expand Up @@ -241,23 +230,23 @@ const GeneralSettings: NextPage<UserAuth> = ({ isMember, isOwner, isViewer, isGu
</div>
<div className="col-span-12 sm:col-span-6">
{watch("cover_image") ? (
<div className="w-32 h-32 rounded border p-1">
<div className="w-full h-32 rounded border p-1">
<div className="w-full h-full relative rounded">
<Image
src={watch("cover_image")!}
alt={projectDetails?.name ?? "Cover image"}
objectFit="cover"
layout="fill"
className="rounded"
/>
<div className="absolute bottom-1 w-full flex justify-center">
<button
type="button"
disabled={isImageUploading}
onClick={() => setIsImageUploadModalOpen(true)}
className="bg-white rounded text-sm border-2 border-gray-300 text-gray-400 p-1 py-0.5"
>
{isImageUploading ? "Uploading..." : "Change Cover"}
</button>
<div className="absolute bottom-0 w-full flex justify-end">
<ImagePickerPopover
label={"Change cover"}
onChange={(imageUrl) => {
setValue("cover_image", imageUrl);
}}
value={watch("cover_image")}
/>
</div>
</div>
</div>
Expand Down

1 comment on commit a68d94c

@vercel
Copy link

@vercel vercel bot commented on a68d94c Apr 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-caravel.vercel.app
plane-dev.vercel.app
plane-dev-git-develop-caravel.vercel.app

Please sign in to comment.