Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-24 15:49:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5732] style: update work item detail properties UI (#8357)

Browse Source
This commit is contained in:
Aaryan Khandelwal
2025-12-17 17:52:54 +05:30
committed by GitHub
parent 61db42bcb7
commit dbda7504b2
10 changed files with 170 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/core/components/common/layout/sidebar/property-list-item.tsx
View File

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
import { cn } from "@plane/utils";
type TSidebarPropertyListItemProps = {
icon: React.FC<{ className?: string }>;
icon: React.FC<{ className?: string }> | React.ReactNode;
label: string;
children: ReactNode;
appendElement?: ReactNode;
@@ -14,8 +14,8 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
return (
<div className="flex items-center gap-2">
<div className="flex shrink-0 items-center gap-1 w-30 text-body-xs-regular text-tertiary h-7.5">
<Icon className="h-4 w-4 shrink-0" />
<div className="flex shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
{typeof Icon === "function" ? <Icon className="size-4 shrink-0" /> : Icon}
<span>{label}</span>
{appendElement}
</div>

7
apps/web/core/components/dropdowns/priority.tsx
View File

@@ -1,6 +1,5 @@
import type { ReactNode } from "react";
import { Fragment, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Check, Search, SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
@@ -341,10 +340,6 @@ export function PriorityDropdown(props: Props) {
],
});
// next-themes
// TODO: remove this after new theming implementation
const { resolvedTheme } = useTheme();
const options = ISSUE_PRIORITIES.map((priority) => ({
value: priority.key,
query: priority.key,

4
apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
View File

@@ -35,7 +35,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
key={labelId}
type="button"
className={cn(
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
"h-full w-min flex items-center gap-1.5 rounded-sm px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer": !disabled,
}
@@ -43,7 +43,7 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
onClick={handleLabel}
disabled={disabled}
>
<LabelFilledIcon className="size-4" color={label.color ?? "#000000"} />
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
<div className="flex-shrink-0 text-body-xs-regular">{label.name}</div>
{!disabled && (
<div className="flex-shrink-0">

2
apps/web/core/components/issues/issue-detail/label/root.tsx
View File

@@ -92,7 +92,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
);
return (
<div className="relative flex flex-wrap items-center gap-1 px-2">
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full">
<LabelList
workspaceSlug={workspaceSlug}
projectId={projectId}

249
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View File

@@ -6,7 +6,6 @@ import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelFilledIcon, LabelPropertyIcon } from "@plane/propel/icons";
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
// helpers
@@ -86,15 +85,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
const issueLabels = values ?? [];
const label = (
<button
type="button"
className="h-full w-full flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary"
>
<div className="flex-shrink-0">
<LabelFilledIcon className="size-3.5" />
</div>
<div className="flex-shrink-0">{t("label.select")}</div>
</button>
<span className="size-full flex items-center rounded-sm px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary">
{t("label.select")}
</span>
);
const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -121,101 +114,149 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
if (!issueId || !values) return <></>;
return (
<>
<Combobox
as="div"
className={`w-auto max-w-full flex-shrink-0 text-left`}
value={issueLabels}
onChange={(value) => onSelect(value)}
multiple
>
<Combobox.Button as={Fragment}>
<button
ref={setReferenceElement}
type="button"
className="cursor-pointer"
onClick={() => !projectLabels && fetchLabels()}
>
{label}
</button>
</Combobox.Button>
<Combobox.Options className="fixed z-10">
<div
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="px-2">
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-tertiary" />
<Combobox.Input
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t("common.search.label")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
tabIndex={baseTabIndex}
/>
</div>
</div>
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
{isLoading ? (
<p className="text-center text-secondary">{t("common.loading")}</p>
) : filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ selected }) =>
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
selected ? "text-primary" : "text-secondary"
}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && (
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
</div>
)}
</>
)}
</Combobox.Option>
))
) : submitting ? (
<Loader className="spin h-3.5 w-3.5" />
) : canCreateLabel ? (
<Combobox.Option
value={query}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!query.length) return;
handleAddLabel(query);
}}
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
>
{query.length ? (
<>
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
labels
</>
) : (
t("label.create.type")
)}
</Combobox.Option>
) : (
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
)}
<Combobox
as="div"
className="size-full flex-shrink-0 text-left"
value={issueLabels}
onChange={(value) => onSelect(value)}
multiple
>
<Combobox.Button as={Fragment}>
<button
ref={setReferenceElement}
type="button"
className="cursor-pointer size-full"
onClick={() => !projectLabels && fetchLabels()}
>
{label}
</button>
</Combobox.Button>
<Combobox.Options className="fixed z-10">
<div
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="px-2">
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-tertiary" />
<Combobox.Input
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t("common.search.label")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
tabIndex={baseTabIndex}
/>
</div>
</div>
</Combobox.Options>
</Combobox>
</>
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
{isLoading ? (
<p className="text-center text-secondary">{t("common.loading")}</p>
) : filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ selected }) =>
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
selected ? "text-primary" : "text-secondary"
}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && (
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
</div>
)}
</>
)}
</Combobox.Option>
))
) : submitting ? (
<Loader className="spin h-3.5 w-3.5" />
) : canCreateLabel ? (
<Combobox.Option
value={query}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!query.length) return;
handleAddLabel(query);
}}
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
>
{query.length ? (
<>
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
labels
</>
) : (
t("label.create.type")
)}
</Combobox.Option>
) : (
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
)}
</div>
</div>
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
{isLoading ? (
<p className="text-center text-secondary">{t("common.loading")}</p>
) : filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ selected }) =>
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
selected ? "text-primary" : "text-secondary"
}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && (
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
</div>
)}
</>
)}
</Combobox.Option>
))
) : submitting ? (
<Loader className="spin h-3.5 w-3.5" />
) : canCreateLabel ? (
<Combobox.Option
value={query}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (!query.length) return;
handleAddLabel(query);
}}
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
>
{query.length ? (
<>
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
</>
) : (
t("label.create.type")
)}
</Combobox.Option>
) : (
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
)}
</div>
</Combobox.Options>
</Combobox>
);
});

4
apps/web/core/components/issues/issue-detail/parent-select.tsx
View File

@@ -75,8 +75,8 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded-sm outline-none",
{
"cursor-not-allowed": disabled,
"hover:bg-layer-1": !disabled,
"bg-layer-1": isParentIssueModalOpen,
"hover:bg-layer-transparent-hover": !disabled,
"bg-layer-transparent-selected": isParentIssueModalOpen,
},
className
)}

4
apps/web/core/components/issues/issue-detail/root.tsx
View File

@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
/>
) : (
<div className="flex h-full w-full overflow-hidden">
<div className="max-w-2/3 h-full w-full space-y-6 overflow-y-auto px-9 py-5">
<div className="h-full w-full space-y-6 overflow-y-auto px-9 py-5">
<IssueMainContent
workspaceSlug={workspaceSlug}
projectId={projectId}
@@ -312,7 +312,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
/>
</div>
<div
className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/4 lg:min-w-80 xl:min-w-96"
style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
>
<IssueDetailsSidebar

15
apps/web/core/components/issues/issue-detail/sidebar.tsx
View File

@@ -1,4 +1,3 @@
import React from "react";
import { observer } from "mobx-react";
// i18n
import { useTranslation } from "@plane/i18n";
@@ -81,8 +80,8 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
<>
<div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
<div className="h-full w-full overflow-y-auto px-6">
<h5 className="mt-6 text-body-xs-medium">{t("common.properties")}</h5>
<div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
<h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
<div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
<SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
<StateDropdown
value={issue?.state_id}
@@ -121,10 +120,10 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
value={issue?.priority}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
disabled={!isEditable}
buttonVariant="border-with-text"
className="w-full grow rounded-lg"
buttonContainerClassName="w-full text-left px-2 h-7.5"
buttonClassName="w-min h-6 whitespace-nowrap"
buttonVariant="transparent-with-text"
className="w-full h-7.5 grow rounded-sm"
buttonContainerClassName="size-full text-left"
buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
/>
</SidebarPropertyListItem>
@@ -236,7 +235,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
<SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
<IssueParentSelectRoot
className="h-full w-full grow"
className="w-full h-7.5 grow"
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}

13
apps/web/core/components/issues/peek-overview/properties.tsx
View File

@@ -1,4 +1,3 @@
import type { FC } from "react";
import { observer } from "mobx-react";
// i18n
import { useTranslation } from "@plane/i18n";
@@ -115,10 +114,10 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
value={issue?.priority}
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
disabled={disabled}
buttonVariant="border-with-text"
className="w-full grow group rounded-lg px-2"
buttonContainerClassName="w-full text-left"
buttonClassName="w-min h-auto whitespace-nowrap"
buttonVariant="transparent-with-text"
className="w-full h-7.5 grow rounded-sm"
buttonContainerClassName="size-full text-left"
buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
/>
</SidebarPropertyListItem>
@@ -155,7 +154,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
</SidebarPropertyListItem>
<SidebarPropertyListItem icon={DueDatePropertyIcon} label={t("common.order_by.due_date")}>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full">
<DateDropdown
value={issue.target_date}
onChange={(val) =>
@@ -231,7 +230,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
<SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
<IssueParentSelectRoot
className="w-full grow h-full"
className="w-full h-7.5 grow"
disabled={disabled}
issueId={issueId}
issueOperations={issueOperations}

2
packages/i18n/src/locales/en/translations.ts
View File

@@ -980,7 +980,7 @@ export default {
delete: "Delete attachment",
},
label: {
select: "Select label",
select: "Add labels",
create: {
success: "Label created successfully",
failed: "Label creation failed",