thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/components/core/activity.tsx
View File

@ -84,7 +84,7 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
return ( return (
<span <span
className="h-1.5 w-1.5 rounded-full" className="h-1.5 w-1.5 rounded-full flex-shrink-0"
style={{ style={{
backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000", backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
}} }}
@ -266,12 +266,12 @@ const activityDetails: {
if (activity.verb === "created") if (activity.verb === "created")
return ( return (
<> <>
added this issue to the cycle{" "} <span className="flex-shrink-0">added this issue to the cycle</span>
<a <a
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -281,12 +281,12 @@ const activityDetails: {
else if (activity.verb === "updated") else if (activity.verb === "updated")
return ( return (
<> <>
set the cycle to{" "} <span className="flex-shrink-0">set the cycle to </span>
<a <a
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -301,7 +301,7 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.old_value}</span> <span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -370,15 +370,15 @@ const activityDetails: {
return ( return (
<> <>
added a new label{" "} added a new label{" "}
<span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<LabelPill labelId={activity.new_identifier ?? ""} /> <LabelPill labelId={activity.new_identifier ?? ""} />
<span className="font-medium text-custom-text-100">{activity.new_value}</span> <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.new_value}</span>
</span> </span>
{showIssue && ( {showIssue && (
<> <span>
{" "} {" "}
to <IssueLink activity={activity} /> to <IssueLink activity={activity} />
</> </span>
)} )}
</> </>
); );
@ -386,15 +386,15 @@ const activityDetails: {
return ( return (
<> <>
removed the label{" "} removed the label{" "}
<span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs"> <span className="flex truncate items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
<LabelPill labelId={activity.old_identifier ?? ""} /> <LabelPill labelId={activity.old_identifier ?? ""} />
<span className="font-medium text-custom-text-100">{activity.old_value}</span> <span className="font-medium flex-shrink truncate text-custom-text-100">{activity.old_value}</span>
</span> </span>
{showIssue && ( {showIssue && (
<> <span>
{" "} {" "}
from <IssueLink activity={activity} /> from <IssueLink activity={activity} />
</> </span>
)} )}
</> </>
); );
@ -482,7 +482,7 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -497,7 +497,7 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.new_value}</span> <span className="truncate">{activity.new_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -512,7 +512,7 @@ const activityDetails: {
href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`} href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline" className="font-medium text-custom-text-100 inline-flex items-center truncate gap-1 hover:underline"
> >
<span className="truncate">{activity.old_value}</span> <span className="truncate">{activity.old_value}</span>
<RocketIcon size={12} color="#6b7280" className="flex-shrink-0" /> <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
@ -525,7 +525,7 @@ const activityDetails: {
name: { name: {
message: (activity, showIssue) => ( message: (activity, showIssue) => (
<> <>
set the name to {activity.new_value} <span className="truncate">set the name to {activity.new_value}</span>
{showIssue && ( {showIssue && (
<> <>
{" "} {" "}

6
web/components/project/create-project-modal.tsx
View File

@ -55,7 +55,7 @@ export interface ICreateProjectForm {
description: string; description: string;
emoji_and_icon: string; emoji_and_icon: string;
network: number; network: number;
project_lead_member: IWorkspaceMember; project_lead_member: string;
project_lead: string; project_lead: string;
cover_image: string; cover_image: string;
icon_prop: any; icon_prop: any;
@ -126,7 +126,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon; if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
else payload.emoji = formData.emoji_and_icon; else payload.emoji = formData.emoji_and_icon;
payload.project_lead = formData.project_lead_member?.member.id; payload.project_lead = formData.project_lead_member;
return projectStore return projectStore
.createProject(workspaceSlug.toString(), payload) .createProject(workspaceSlug.toString(), payload)
@ -380,7 +380,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<WorkspaceMemberSelect <WorkspaceMemberSelect
value={value} value={workspaceMembers?.filter((member: IWorkspaceMember) => member.member.id ===value)[0]}
onChange={onChange} onChange={onChange}
options={workspaceMembers || []} options={workspaceMembers || []}
placeholder="Select Lead" placeholder="Select Lead"

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

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

9
web/pages/[workspaceSlug]/me/profile/activity.tsx
View File

@ -154,7 +154,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
</div> </div>
</div> </div>
<div className="min-w-0 flex-1 py-4 border-b border-custom-border-100"> <div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
<div className="text-sm text-custom-text-200 break-words"> <div className="text-sm text-custom-text-200 break-words flex gap-1">
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? ( {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
<span className="text-gray font-medium">Plane</span> <span className="text-gray font-medium">Plane</span>
) : activityItem.actor_detail.is_bot ? ( ) : activityItem.actor_detail.is_bot ? (
@ -166,7 +166,12 @@ const ProfileActivityPage: NextPageWithLayout = () => {
<a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a> <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
</Link> </Link>
)}{" "} )}{" "}
{message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span> <div className="flex gap-1 truncate">
{message}{" "}
<span className="whitespace-nowrap flex-shrink-0">
{timeAgo(activityItem.created_at)}
</span>
</div>
</div> </div>
</div> </div>
</> </>