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

fix: bug fixes & ui improvements. (#2772)

Browse source 
* fix: create project modal member select

* fix: overflow in workspace activity

* fix: memeber selected state
This commit is contained in:
Lakhan Baheti 2023-11-20 16:36:50 +05:30 • committed by sriram veeraghanta
parent 8e9f9cf6df
commit 3ea926a908
4 changed files with 40 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/components/workspace/member-select.tsx
View file

@ -11,7 +11,7 @@ import { IWorkspaceMember } from "types";
export interface IWorkspaceMemberSelect {
value: IWorkspaceMember | undefined;
onChange: (value: IWorkspaceMember) => void;
onChange: (value: string) => void;
options: IWorkspaceMember[];
placeholder?: string;
disabled?: boolean;
@ -48,7 +48,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
: options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
const label = (
<div className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
<div className="flex items-center justify-between gap-2 w-full text-xs text-custom-text-300 px-2.5 py-1.5 rounded border-[0.5px] border-custom-border-300">
{value ? (
<>
<Avatar name={value?.member.display_name} src={value?.member.avatar} />
@ -64,7 +64,13 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
);
return (
<Listbox as="div" className={`flex-shrink-0 text-left`} value={value} onChange={onChange} disabled={disabled}>
<Listbox
as="div"
className={`flex-shrink-0 text-left`}
value={value?.member.id}
onChange={onChange}
disabled={disabled}
>
<Listbox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
@ -99,20 +105,20 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
{filteredOptions.map((workspaceMember: IWorkspaceMember) => (
<Listbox.Option
key={workspaceMember.id}
value={workspaceMember}
value={workspaceMember.member.id}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
{() => (
<>
<div className="flex items-center gap-2">
<Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
{workspaceMember.member.display_name}
</div>
{selected && <Check className="h-3.5 w-3.5" />}
{value && value.member.id === workspaceMember.member.id && <Check className="h-3.5 w-3.5" />}
</>
)}
</Listbox.Option>