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-26 23:28:36 +03:00
parent 86b17b23c9
commit 9e2c2f065a
4 changed files with 78 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plane-src/apps/web/core/components/common/logo-spinner.tsx
View File

@ -15,8 +15,8 @@ export function LogoSpinner() {
const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
return (
<div className="flex items-center justify-center">
<img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
<div className="pointer-events-none flex items-center justify-center opacity-0" aria-hidden="true">
<img src={logoSrc} alt="" className="h-6 w-auto object-contain sm:h-11" />
</div>
);
}

4
plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
View File

@ -49,8 +49,6 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
// handlers
const handleIssueCrudState = (
key: "create" | "existing",
@ -74,7 +72,7 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
const handleAddExisting = () => {
handleIssueCrudState("existing", issueId, null);
toggleSubIssuesModal(issue.id);
toggleSubIssuesModal(issue?.id ?? issueId);
};
// options

44
plane-src/apps/web/core/components/stickies/layout/stickies-list.tsx
View File

@ -12,22 +12,15 @@ import type {
import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import Masonry from "react-masonry-component";
// plane imports
import { EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { PlusIcon } from "@plane/propel/icons";
import { EmptyStateDetailed } from "@plane/propel/empty-state";
import { EUserWorkspaceRoles } from "@plane/types";
// assets
import darkStickiesAsset from "@/app/assets/empty-state/stickies/stickies-dark.webp?url";
import lightStickiesAsset from "@/app/assets/empty-state/stickies/stickies-light.webp?url";
import darkStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-dark.webp?url";
import lightStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-light.webp?url";
// components
import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
// hooks
import { useUserPermissions } from "@/hooks/store/user";
@ -51,8 +44,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
const { workspaceSlug, intersectionElement, columnCount } = props;
// navigation
const pathname = usePathname();
// theme hook
const { resolvedTheme } = useTheme();
// plane hooks
const { t } = useTranslation();
// store hooks
@ -69,8 +60,6 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
[EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
EUserPermissionsLevel.WORKSPACE
);
const stickiesResolvedPath = resolvedTheme === "light" ? lightStickiesAsset : darkStickiesAsset;
const stickiesSearchResolvedPath = resolvedTheme === "light" ? lightStickiesSearchAsset : darkStickiesSearchAsset;
const masonryRef = useRef<any>(null);
const handleLayout = () => {
@ -118,25 +107,36 @@ export const StickiesList = observer(function StickiesList(props: TProps) {
{isStickiesPage ? (
<>
{searchQuery ? (
<SimpleEmptyState
<EmptyStateDetailed
assetKey="search"
assetClassName="nodedc-stickies-empty-asset size-40"
rootClassName="nodedc-stickies-empty-root"
align="center"
title={t("stickies.empty_state.search.title")}
description={t("stickies.empty_state.search.description")}
assetPath={stickiesSearchResolvedPath}
/>
) : (
<DetailedEmptyState
<EmptyStateDetailed
assetKey="dashboard"
assetClassName="nodedc-stickies-empty-asset size-40"
rootClassName="nodedc-stickies-empty-root"
align="center"
title={t("stickies.empty_state.general.title")}
description={t("stickies.empty_state.general.description")}
assetPath={stickiesResolvedPath}
primaryButton={{
prependIcon: <PlusIcon className="size-4" />,
text: t("stickies.empty_state.general.primary_button.text"),
onClick: () => {
customButton={
<button
type="button"
className="nodedc-stickies-empty-primary-button"
onClick={() => {
toggleShowNewSticky(true);
stickyOperations.create();
},
disabled: !hasGuestLevelPermissions,
}}
disabled={!hasGuestLevelPermissions}
>
<PlusIcon className="size-4" />
<span>{t("stickies.empty_state.general.primary_button.text")}</span>
</button>
}
/>
)}
</>

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

@ -1525,6 +1525,56 @@
color: var(--text-color-primary) !important;
}
.nodedc-stickies-empty-root {
padding-bottom: calc(var(--nodedc-bottom-dock-height) + 2rem) !important;
}
.nodedc-stickies-empty-asset {
--illustration-fill-primary: rgba(255, 255, 255, 0.1);
--illustration-fill-secondary: rgba(255, 255, 255, 0.075);
--illustration-fill-tertiary: rgba(var(--nodedc-card-active-rgb), 0.16);
--illustration-fill-quaternary: rgba(var(--nodedc-card-active-rgb), 0.24);
--illustration-stroke-primary: rgba(var(--nodedc-card-active-rgb), 0.46);
--illustration-stroke-secondary: rgba(var(--nodedc-card-active-rgb), 0.62);
--illustration-stroke-tertiary: rgb(var(--nodedc-card-active-rgb));
color: rgb(var(--nodedc-card-active-rgb));
opacity: 0.92;
}
.nodedc-stickies-empty-primary-button {
display: inline-flex;
min-height: 3.05rem;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 0 !important;
outline: none !important;
border-radius: 1.2rem !important;
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
padding: 0 1.45rem !important;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 16px 32px rgba(var(--nodedc-card-active-rgb), 0.14) !important;
transition:
background 160ms ease,
transform 160ms ease,
opacity 160ms ease;
}
.nodedc-stickies-empty-primary-button:hover:not(:disabled) {
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 84%, white) !important;
transform: translateY(-1px);
}
.nodedc-stickies-empty-primary-button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.nodedc-external-sidebar-shell {
border: 0 !important;
background: