SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: приведение модалки создания рабочего элемента к дизайн-канону

This commit is contained in:
DCCONSTRUCTIONS 2026-04-21 08:14:35 +03:00
parent ba34162eeb
commit c6645bb4fc
3 changed files with 67 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plane-src/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
View File

@ -84,9 +84,10 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
const maxDate = getDate(targetDate);
maxDate?.setDate(maxDate.getDate());
const propertyButtonClassName = "nodedc-work-item-property-button";
return (
<div className="flex flex-wrap items-center gap-2">
<div className="nodedc-work-item-properties-row">
<Controller
control={control}
name="state_id"
@ -100,6 +101,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
}}
projectId={projectId ?? undefined}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("state_id")}
isForWorkItemCreation={!id}
/>
@ -118,6 +120,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
handleFormChange();
}}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("priority")}
/>
</div>
@ -136,7 +139,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
handleFormChange();
}}
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
buttonClassName={propertyButtonClassName}
placeholder={t("assignees")}
multiple
tabIndex={getIndex("assignee_ids")}
@ -156,6 +159,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
handleFormChange();
}}
projectId={projectId ?? undefined}
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("label_ids")}
createLabelEnabled={!!canCreateLabel}
/>
@ -174,6 +178,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
handleFormChange();
}}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
maxDate={maxDate ?? undefined}
placeholder={t("start_date")}
tabIndex={getIndex("start_date")}
@ -193,6 +198,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
handleFormChange();
}}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
minDate={minDate ?? undefined}
placeholder={t("due_date")}
tabIndex={getIndex("target_date")}
@ -215,6 +221,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
placeholder={t("cycle.label", { count: 1 })}
value={value}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("cycle_id")}
/>
</div>
@ -236,6 +243,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
}}
placeholder={t("modules")}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("module_ids")}
multiple
showCount
@ -258,6 +266,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
}}
projectId={projectId}
buttonVariant="border-with-text"
buttonClassName={propertyButtonClassName}
tabIndex={getIndex("estimate_point")}
placeholder={t("estimate")}
/>
@ -271,7 +280,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
customButton={
<button
type="button"
className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
className={`${propertyButtonClassName} flex h-full cursor-pointer items-center justify-between gap-1 whitespace-nowrap`}
>
{selectedParentIssue?.project_id && (
<IssueIdentifier
@ -313,7 +322,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
) : (
<button
type="button"
className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
className={`${propertyButtonClassName} flex h-full cursor-pointer items-center justify-between gap-1 whitespace-nowrap`}
onClick={() => setParentIssueListModalOpen(true)}
>
<ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />

8
plane-src/apps/web/core/components/issues/issue-modal/form.tsx
View File

@ -486,7 +486,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
workspaceSlug={workspaceSlug?.toString()}
/>
</div>
<div className={cn("border-t border-subtle/70 bg-transparent px-6 py-4")}>
<div className="bg-transparent px-6 pt-3 pb-4">
<div className="pb-3">
<IssueDefaultProperties
control={control}
@ -504,12 +504,12 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
</div>
{showActionButtons && (
<div
className="flex items-center justify-end gap-4 border-t border-subtle/70 pt-6 pb-2"
className="nodedc-work-item-actions-row"
tabIndex={getIndex("create_more")}
>
{!data?.id && (
<div
className="inline-flex cursor-pointer items-center gap-1.5"
className="nodedc-work-item-create-more"
onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
onKeyDown={(e) => {
if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
@ -517,7 +517,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
role="button"
>
<ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
<span className="text-caption-sm-regular">{t("create_more")}</span>
<span className="text-caption-sm-regular text-secondary">{t("create_more")}</span>
</div>
)}
<div className="flex items-center gap-2">

50
plane-src/apps/web/styles/globals.css
View File

@ -315,6 +315,56 @@
rgba(255, 255, 255, 0.04);
}
.nodedc-work-item-properties-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.nodedc-work-item-property-button {
min-height: 1.75rem !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1rem !important;
padding-inline: 0.85rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%),
rgba(255, 255, 255, 0.028) !important;
color: var(--text-color-primary) !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.nodedc-work-item-property-button:hover,
.nodedc-work-item-property-button:focus-visible,
.nodedc-work-item-property-button:focus-within {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.018) 100%),
rgba(255, 255, 255, 0.04) !important;
color: var(--text-color-primary) !important;
}
.nodedc-work-item-actions-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.25rem;
}
.nodedc-work-item-create-more {
display: inline-flex;
cursor: pointer;
align-items: center;
gap: 0.5rem;
}
.nodedc-modal-input {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),