binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: project label error message added and ui improvement (#4895)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2024-06-20 17:37:51 +05:30 • committed by GitHub
parent 1b1302dfbd
commit 096d9b1541
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 90 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

169
web/core/components/labels/create-update-label-inline.tsx
View file

@ -115,88 +115,95 @@ export const CreateUpdateLabelInline = observer(
}, [labelToUpdate, setValue]); }, [labelToUpdate, setValue]);
return ( return (
<form <>
ref={ref} <form
onSubmit={(e) => { ref={ref}
e.preventDefault(); onSubmit={(e) => {
handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)(); e.preventDefault();
}} handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`} }}
> className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`}
<div className="flex-shrink-0"> >
<Popover className="relative z-10 flex h-full w-full items-center justify-center"> <div className="flex-shrink-0">
{({ open }) => ( <Popover className="relative z-10 flex h-full w-full items-center justify-center">
<> {({ open }) => (
<Popover.Button <>
className={`group inline-flex items-center text-base font-medium focus:outline-none ${ <Popover.Button
open ? "text-custom-text-100" : "text-custom-text-200" className={`group inline-flex items-center text-base font-medium focus:outline-none ${
}`} open ? "text-custom-text-100" : "text-custom-text-200"
> }`}
<span >
className="h-4 w-4 rounded-full" <span
style={{ className="h-4 w-4 rounded-full"
backgroundColor: watch("color"), style={{
}} backgroundColor: watch("color"),
/> }}
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker
colors={LABEL_COLOR_OPTIONS}
color={value}
onChange={(value) => onChange(value.hex)}
/>
)}
/> />
</Popover.Panel> </Popover.Button>
</Transition>
</> <Transition
)} as={React.Fragment}
</Popover> enter="transition ease-out duration-200"
</div> enterFrom="opacity-0 translate-y-1"
<div className="flex flex-1 flex-col justify-center"> enterTo="opacity-100 translate-y-0"
<Controller leave="transition ease-in duration-150"
control={control} leaveFrom="opacity-100 translate-y-0"
name="name" leaveTo="opacity-0 translate-y-1"
rules={{ >
required: "Label title is required", <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
}} <Controller
render={({ field: { value, onChange, ref } }) => ( name="color"
<Input control={control}
id="labelName" render={({ field: { value, onChange } }) => (
name="name" <TwitterPicker
type="text" colors={LABEL_COLOR_OPTIONS}
autoFocus color={value}
value={value} onChange={(value) => onChange(value.hex)}
onChange={onChange} />
ref={ref} )}
hasError={Boolean(errors.name)} />
placeholder="Label title" </Popover.Panel>
className="w-full" </Transition>
/> </>
)} )}
/> </Popover>
</div> </div>
<Button variant="neutral-primary" onClick={() => handleClose()} size="sm"> <div className="flex flex-1 flex-col justify-center">
Cancel <Controller
</Button> control={control}
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}> name="name"
{isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"} rules={{
</Button> required: "Label title is required",
</form> maxLength: {
value: 255,
message: "Label name should not exceed 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="labelName"
name="name"
type="text"
autoFocus
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Label title"
className="w-full"
/>
)}
/>
</div>
<Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
Cancel
</Button>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
{isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
</Button>
</form>
{errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
</>
); );
}) })
); );

2
web/core/components/labels/label-block/label-item-block.tsx
View file

@ -53,7 +53,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
<div <div
ref={actionSectionRef} ref={actionSectionRef}
className={`absolute right-3 flex items-start gap-3.5 px-4 ${ className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
isMenuActive || isLabelGroup isMenuActive || isLabelGroup
? "opacity-100" ? "opacity-100"
: "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100" : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"

2
web/core/components/labels/label-block/label-name.tsx
View file

@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
const { name, color, isGroup } = props; const { name, color, isGroup } = props;
return ( return (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 pr-20">
{isGroup ? ( {isGroup ? (
<Component className="h-3.5 w-3.5" color={color} /> <Component className="h-3.5 w-3.5" color={color} />
) : ( ) : (