UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: приведение delete-модалок к black-glass канону
This commit is contained in:
DCCONSTRUCTIONS
parent
cbd40791e4
commit
6cb0545957
|
|
@ -49,8 +49,8 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
|
|||
if (cycleId || peekCycle) router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success!",
|
||||
message: "Cycle deleted successfully.",
|
||||
title: t("common.success"),
|
||||
message: t("entity.delete.success", { entity: t("common.cycle").toLowerCase() }),
|
||||
});
|
||||
})
|
||||
.catch((errors) => {
|
||||
|
|
@ -68,8 +68,8 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
|
|||
} catch {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Warning!",
|
||||
message: "Something went wrong please try again later.",
|
||||
title: t("common.warning"),
|
||||
message: t("common.something_went_wrong"),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -82,14 +82,11 @@ export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycle
|
|||
handleSubmit={formSubmit}
|
||||
isSubmitting={loader}
|
||||
isOpen={isOpen}
|
||||
title="Delete cycle"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete cycle{' "'}
|
||||
<span className="font-medium break-words text-primary">{cycle?.name}</span>
|
||||
{'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("entity.delete.label", { entity: t("common.cycle") })}
|
||||
content={t("entity.delete.confirmation", {
|
||||
entity: t("common.cycle").toLowerCase(),
|
||||
identifier: cycle?.name ? `"${cycle.name}"` : "",
|
||||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// ui
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
|
||||
import { AlertModalCore } from "@plane/ui";
|
||||
// hooks
|
||||
import { useProjectEstimates } from "@/hooks/store/estimates";
|
||||
import { useEstimate } from "@/hooks/store/estimates/use-estimate";
|
||||
|
|
@ -26,6 +26,7 @@ type TDeleteEstimateModal = {
|
|||
export const DeleteEstimateModal = observer(function DeleteEstimateModal(props: TDeleteEstimateModal) {
|
||||
// props
|
||||
const { workspaceSlug, projectId, estimateId, isOpen, handleClose } = props;
|
||||
const { t } = useTranslation();
|
||||
// hooks
|
||||
const { areEstimateEnabledByProjectId, deleteEstimate } = useProjectEstimates();
|
||||
const { asJson: estimate } = useEstimate(estimateId);
|
||||
|
|
@ -44,46 +45,32 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
|
|||
setButtonLoader(false);
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Estimate deleted",
|
||||
message: "Estimate has been removed from your project.",
|
||||
title: t("project_settings.estimates.delete_modal.success_title"),
|
||||
message: t("project_settings.estimates.delete_modal.success_message"),
|
||||
});
|
||||
handleClose();
|
||||
} catch (_error) {
|
||||
setButtonLoader(false);
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Estimate creation failed",
|
||||
message: "We were unable to delete the estimate, please try again.",
|
||||
title: t("project_settings.estimates.delete_modal.error_title"),
|
||||
message: t("project_settings.estimates.delete_modal.error_message"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
|
||||
<div className="relative space-y-6 py-5">
|
||||
{/* heading */}
|
||||
<div className="relative flex items-center justify-between gap-2 px-5">
|
||||
<div className="text-18 font-medium text-primary">Delete Estimate System</div>
|
||||
</div>
|
||||
|
||||
{/* estimate steps */}
|
||||
<div className="px-5">
|
||||
<div className="text-14 text-secondary">
|
||||
Deleting the estimate <span className="font-bold text-primary">{estimate?.name}</span>
|
||||
system will remove it from all work items permanently. This action cannot be undone. If you add
|
||||
estimates again, you will need to update all the work items.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
|
||||
<Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
|
||||
{buttonLoader ? "Deleting" : "Delete Estimate"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalCore>
|
||||
<AlertModalCore
|
||||
handleClose={handleClose}
|
||||
handleSubmit={handleDeleteEstimate}
|
||||
isSubmitting={buttonLoader}
|
||||
isOpen={isOpen}
|
||||
title={t("project_settings.estimates.delete_modal.title")}
|
||||
content={t("project_settings.estimates.delete_modal.description", { value: estimate?.name ?? "" })}
|
||||
primaryButtonText={{
|
||||
loading: t("project_settings.estimates.delete_modal.loading"),
|
||||
default: t("project_settings.estimates.delete_modal.submit"),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -47,16 +47,9 @@ export function DeclineIssueModal(props: Props) {
|
|||
isSubmitting={isDeclining}
|
||||
isOpen={isOpen}
|
||||
title={t("inbox_issue.modals.decline.title")}
|
||||
// TODO: Need to translate the confirmation message
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to decline work item{" "}
|
||||
<span className="font-medium break-words text-primary">
|
||||
{projectDetails?.identifier}-{data?.sequence_id}
|
||||
</span>
|
||||
{""}? This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
content={t("inbox_issue.modals.decline.content", {
|
||||
value: `${projectDetails?.identifier}-${data?.sequence_id}`,
|
||||
})}
|
||||
primaryButtonText={{
|
||||
loading: t("declining"),
|
||||
default: t("decline"),
|
||||
|
|
|
|||
|
|
@ -63,14 +63,7 @@ export const IssueAttachmentDeleteModal = observer(function IssueAttachmentDelet
|
|||
isSubmitting={loader}
|
||||
isOpen={isOpen}
|
||||
title={t("attachment.delete")}
|
||||
content={
|
||||
<>
|
||||
{/* TODO: Translate here */}
|
||||
Are you sure you want to delete attachment-{" "}
|
||||
<span className="font-bold">{getFileName(attachment.attributes.name)}</span>? This attachment will be
|
||||
permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
content={t("attachment.delete_confirmation", { value: getFileName(attachment.attributes.name) })}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
// types
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import type { IIssueLabel } from "@plane/types";
|
||||
// ui
|
||||
|
|
@ -23,6 +24,7 @@ type Props = {
|
|||
|
||||
export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props) {
|
||||
const { isOpen, onClose, data } = props;
|
||||
const { t } = useTranslation();
|
||||
// router
|
||||
const { workspaceSlug, projectId } = useParams();
|
||||
// store hooks
|
||||
|
|
@ -46,10 +48,10 @@ export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props)
|
|||
})
|
||||
.catch((err) => {
|
||||
setIsDeleteLoading(false);
|
||||
const error = err?.error || "Label could not be deleted. Please try again.";
|
||||
const error = err?.error || t("label.delete_error");
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
title: t("common.error.label"),
|
||||
message: error,
|
||||
});
|
||||
});
|
||||
|
|
@ -61,13 +63,8 @@ export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props)
|
|||
handleSubmit={handleDeletion}
|
||||
isSubmitting={isDeleteLoading}
|
||||
isOpen={isOpen}
|
||||
title="Delete Label"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete <span className="font-medium text-primary">{data?.name}</span>? This will
|
||||
remove the label from all the work item and from any views where the label is being filtered upon.
|
||||
</>
|
||||
}
|
||||
title={t("entity.delete.label", { entity: t("common.label") })}
|
||||
content={t("label.delete_confirmation", { value: data?.name ?? "" })}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
|
|||
handleClose();
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success!",
|
||||
message: "Module deleted successfully.",
|
||||
title: t("common.success"),
|
||||
message: t("entity.delete.success", { entity: t("common.module").toLowerCase() }),
|
||||
});
|
||||
})
|
||||
.catch((errors) => {
|
||||
|
|
@ -76,14 +76,11 @@ export const DeleteModuleModal = observer(function DeleteModuleModal(props: Prop
|
|||
handleSubmit={handleDeletion}
|
||||
isSubmitting={isDeleteLoading}
|
||||
isOpen={isOpen}
|
||||
title="Delete module"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete module-{" "}
|
||||
<span className="font-medium break-all text-primary">{data?.name}</span>? All of the data related to the
|
||||
module will be permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("entity.delete.label", { entity: t("common.module") })}
|
||||
content={t("entity.delete.confirmation", {
|
||||
entity: t("common.module").toLowerCase(),
|
||||
identifier: data?.name ? `"${data.name}"` : "",
|
||||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
// ui
|
||||
import { useParams } from "next/navigation";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { AlertModalCore } from "@plane/ui";
|
||||
import { getPageName } from "@plane/utils";
|
||||
|
|
@ -28,6 +29,7 @@ type TConfirmPageDeletionProps = {
|
|||
|
||||
export const DeletePageModal = observer(function DeletePageModal(props: TConfirmPageDeletionProps) {
|
||||
const { isOpen, onClose, page, storeType } = props;
|
||||
const { t } = useTranslation();
|
||||
// states
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
// store hooks
|
||||
|
|
@ -52,8 +54,8 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
|
|||
handleClose();
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success!",
|
||||
message: "Page deleted successfully.",
|
||||
title: t("project_page.delete_modal.success_title"),
|
||||
message: t("project_page.delete_modal.success_message"),
|
||||
});
|
||||
|
||||
if (routePageId) {
|
||||
|
|
@ -63,8 +65,8 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
|
|||
.catch(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Page could not be deleted. Please try again.",
|
||||
title: t("project_page.delete_modal.error_title"),
|
||||
message: t("project_page.delete_modal.error_message"),
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -79,14 +81,8 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
|
|||
handleSubmit={handleDelete}
|
||||
isSubmitting={isDeleting}
|
||||
isOpen={isOpen}
|
||||
title="Delete page"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete page-{" "}
|
||||
<span className="font-medium break-words break-all text-primary">{getPageName(name)}</span> ? The Page will be
|
||||
deleted permanently. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("project_page.delete_modal.title")}
|
||||
content={t("project_page.delete_modal.content", { value: getPageName(name) })}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Loader } from "lucide-react";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
// plane imports
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
|
|
@ -26,6 +27,7 @@ type TStateDelete = {
|
|||
|
||||
export const StateDelete = observer(function StateDelete(props: TStateDelete) {
|
||||
const { totalStates, state, deleteStateCallback } = props;
|
||||
const { t } = useTranslation();
|
||||
// hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
// states
|
||||
|
|
@ -47,15 +49,14 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
|
|||
if (errorStatus.status === 400) {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message:
|
||||
"This state contains some work items within it, please move them to some other state to delete this state.",
|
||||
title: t("common.error.label"),
|
||||
message: t("project_settings.states.delete.blocked"),
|
||||
});
|
||||
} else {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "State could not be deleted. Please try again.",
|
||||
title: t("common.error.label"),
|
||||
message: t("project_settings.states.delete.error"),
|
||||
});
|
||||
}
|
||||
setIsDelete(false);
|
||||
|
|
@ -69,13 +70,11 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
|
|||
handleSubmit={handleDeleteState}
|
||||
isSubmitting={isDelete}
|
||||
isOpen={isDeleteModal}
|
||||
title="Delete State"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete state- <span className="font-medium text-primary">{state?.name}</span>? All
|
||||
of the data related to the state will be permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("entity.delete.label", { entity: t("common.state") })}
|
||||
content={t("entity.delete.confirmation", {
|
||||
entity: t("common.state").toLowerCase(),
|
||||
identifier: state?.name ? `"${state.name}"` : "",
|
||||
})}
|
||||
/>
|
||||
|
||||
<button
|
||||
|
|
@ -89,7 +88,11 @@ export const StateDelete = observer(function StateDelete(props: TStateDelete) {
|
|||
>
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
state.default ? "Cannot delete the default state." : totalStates === 1 ? `Cannot have an empty group.` : ``
|
||||
state.default
|
||||
? t("project_settings.states.delete.disabled_default")
|
||||
: totalStates === 1
|
||||
? t("project_settings.states.delete.disabled_last")
|
||||
: ""
|
||||
}
|
||||
isMobile={isMobile}
|
||||
disabled={!isDeleteDisabled}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useState } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useParams } from "next/navigation";
|
||||
// Plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import type { IState } from "@plane/types";
|
||||
// ui
|
||||
|
|
@ -23,6 +24,7 @@ type TStateDeleteModal = {
|
|||
|
||||
export const StateDeleteModal = observer(function StateDeleteModal(props: TStateDeleteModal) {
|
||||
const { isOpen, onClose, data } = props;
|
||||
const { t } = useTranslation();
|
||||
// states
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
// router
|
||||
|
|
@ -47,15 +49,14 @@ export const StateDeleteModal = observer(function StateDeleteModal(props: TState
|
|||
if (err.status === 400)
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message:
|
||||
"This state contains some work items within it, please move them to some other state to delete this state.",
|
||||
title: t("common.error.label"),
|
||||
message: t("project_settings.states.delete.blocked"),
|
||||
});
|
||||
else
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "State could not be deleted. Please try again.",
|
||||
title: t("common.error.label"),
|
||||
message: t("project_settings.states.delete.error"),
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -69,13 +70,11 @@ export const StateDeleteModal = observer(function StateDeleteModal(props: TState
|
|||
handleSubmit={handleDeletion}
|
||||
isSubmitting={isDeleteLoading}
|
||||
isOpen={isOpen}
|
||||
title="Delete State"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete state- <span className="font-medium text-primary">{data?.name}</span>? All of
|
||||
the data related to the state will be permanently removed. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("entity.delete.label", { entity: t("common.state") })}
|
||||
content={t("entity.delete.confirmation", {
|
||||
entity: t("common.state").toLowerCase(),
|
||||
identifier: data?.name ? `"${data.name}"` : "",
|
||||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import { useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
// ui
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { AlertModalCore } from "@plane/ui";
|
||||
// hooks
|
||||
|
|
@ -20,6 +21,7 @@ interface IDeleteWebhook {
|
|||
|
||||
export function DeleteWebhookModal(props: IDeleteWebhook) {
|
||||
const { isOpen, onClose } = props;
|
||||
const { t } = useTranslation();
|
||||
// states
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
// router
|
||||
|
|
@ -41,14 +43,14 @@ export function DeleteWebhookModal(props: IDeleteWebhook) {
|
|||
router.replace(`/${workspaceSlug}/settings/webhooks/`);
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Success!",
|
||||
message: "Webhook deleted successfully.",
|
||||
title: t("workspace_settings.settings.webhooks.toasts.removed.title"),
|
||||
message: t("workspace_settings.settings.webhooks.toasts.removed.message"),
|
||||
});
|
||||
} catch (_error) {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Webhook could not be deleted. Please try again.",
|
||||
title: t("workspace_settings.settings.webhooks.toasts.not_removed.title"),
|
||||
message: t("workspace_settings.settings.webhooks.toasts.not_removed.message"),
|
||||
});
|
||||
}
|
||||
setIsDeleting(false);
|
||||
|
|
@ -60,13 +62,8 @@ export function DeleteWebhookModal(props: IDeleteWebhook) {
|
|||
handleSubmit={handleDelete}
|
||||
isSubmitting={isDeleting}
|
||||
isOpen={isOpen}
|
||||
title="Delete webhook"
|
||||
content={
|
||||
<>
|
||||
Are you sure you want to delete this webhook? Future events will not be delivered to this webhook. This action
|
||||
cannot be undone.
|
||||
</>
|
||||
}
|
||||
title={t("workspace_settings.settings.webhooks.delete.title")}
|
||||
content={t("workspace_settings.settings.webhooks.delete.description")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
|
||||
|
||||
|
|
@ -15,13 +16,14 @@ type Props = {
|
|||
|
||||
export function WebhookDeleteSection(props: Props) {
|
||||
const { openDeleteModal } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Disclosure as="div" className="border-t border-subtle">
|
||||
{({ open }) => (
|
||||
<div className="w-full">
|
||||
<Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
|
||||
<span className="text-16 tracking-tight">Danger zone</span>
|
||||
<span className="text-16 tracking-tight">{t("workspace_settings.settings.webhooks.delete.title")}</span>
|
||||
{open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
|
||||
</Disclosure.Button>
|
||||
|
||||
|
|
@ -36,18 +38,16 @@ export function WebhookDeleteSection(props: Props) {
|
|||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-8">
|
||||
<span className="text-13 tracking-tight">
|
||||
Once a webhook is deleted, it cannot be restored. Future events will no longer be delivered to this
|
||||
webhook.
|
||||
</span>
|
||||
<span className="text-13 tracking-tight">{t("workspace_settings.settings.webhooks.delete.description")}</span>
|
||||
<div>
|
||||
<Button
|
||||
variant="error-fill"
|
||||
size="lg"
|
||||
onClick={openDeleteModal}
|
||||
className="nodedc-modal-danger-button"
|
||||
data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DELETE_BUTTON}
|
||||
>
|
||||
Delete webhook
|
||||
{t("workspace_settings.settings.webhooks.delete.title")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -218,9 +218,16 @@
|
|||
}
|
||||
|
||||
.nodedc-glass-modal {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.036) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(6, 6, 8, 0.9) !important;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
-webkit-backdrop-filter: blur(42px);
|
||||
backdrop-filter: blur(42px);
|
||||
box-shadow:
|
||||
0 20px 56px rgba(0, 0, 0, 0.34),
|
||||
0 4px 16px rgba(0, 0, 0, 0.18);
|
||||
0 24px 64px rgba(0, 0, 0, 0.42),
|
||||
0 8px 22px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.nodedc-glass-surface {
|
||||
|
|
@ -268,11 +275,24 @@
|
|||
}
|
||||
|
||||
.nodedc-glass-modal button:focus-visible,
|
||||
.nodedc-glass-modal [role="button"]:focus-visible {
|
||||
.nodedc-glass-modal [role="button"]:focus-visible,
|
||||
.nodedc-glass-modal :focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-alert-icon {
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-alert-icon-danger,
|
||||
.nodedc-modal-alert-icon-primary {
|
||||
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 18%, transparent) !important;
|
||||
color: rgb(var(--nodedc-accent-rgb)) !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-field {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
|
|
@ -485,17 +505,19 @@
|
|||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 1.25rem !important;
|
||||
background: rgb(var(--nodedc-card-active-rgb)) !important;
|
||||
background: rgb(var(--nodedc-accent-rgb)) !important;
|
||||
color: #0b1117 !important;
|
||||
padding-inline: 1.25rem !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-primary-button:hover {
|
||||
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
|
||||
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 82%, white) !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-primary-button,
|
||||
.nodedc-modal-primary-button *,
|
||||
.nodedc-modal-danger-button,
|
||||
.nodedc-modal-danger-button *,
|
||||
.nodedc-settings-primary-button,
|
||||
.nodedc-settings-primary-button *,
|
||||
.nodedc-settings-save-button,
|
||||
|
|
@ -509,9 +531,34 @@
|
|||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 1.25rem !important;
|
||||
background: rgb(var(--nodedc-accent-rgb)) !important;
|
||||
color: #0b1117 !important;
|
||||
padding-inline: 1.25rem !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-danger-button:hover {
|
||||
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 82%, white) !important;
|
||||
}
|
||||
|
||||
.nodedc-glass-modal button.bg-danger-primary,
|
||||
.nodedc-glass-modal button.border-danger-strong {
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
background: rgb(var(--nodedc-accent-rgb)) !important;
|
||||
color: #0b1117 !important;
|
||||
}
|
||||
|
||||
.nodedc-glass-modal button.bg-danger-primary:hover,
|
||||
.nodedc-glass-modal button.border-danger-strong:hover {
|
||||
background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 82%, white) !important;
|
||||
}
|
||||
|
||||
.nodedc-glass-modal button.bg-danger-primary *,
|
||||
.nodedc-glass-modal button.border-danger-strong * {
|
||||
color: #0b1117 !important;
|
||||
}
|
||||
|
||||
.nodedc-modal-chip {
|
||||
min-height: 2.5rem;
|
||||
border: 0 !important;
|
||||
|
|
|
|||
|
|
@ -1138,9 +1138,14 @@ export default {
|
|||
file_size_limit: "File must be of {size}MB or less in size.",
|
||||
drag_and_drop: "Drag and drop anywhere to upload",
|
||||
delete: "Delete attachment",
|
||||
delete_confirmation:
|
||||
"Are you sure you want to delete attachment {value}? This attachment will be permanently removed and this action cannot be undone.",
|
||||
},
|
||||
label: {
|
||||
select: "Add labels",
|
||||
delete_confirmation:
|
||||
'Are you sure you want to delete label "{value}"? It will be removed from all work items and from any views where this label is used.',
|
||||
delete_error: "Label could not be deleted. Please try again.",
|
||||
create: {
|
||||
success: "Label created successfully",
|
||||
failed: "Label creation failed",
|
||||
|
|
@ -1205,7 +1210,7 @@ export default {
|
|||
modals: {
|
||||
decline: {
|
||||
title: "Decline work item",
|
||||
content: "Are you sure you want to decline work item {value}?",
|
||||
content: "Are you sure you want to decline work item {value}? This action cannot be undone.",
|
||||
},
|
||||
delete: {
|
||||
title: "Delete work item",
|
||||
|
|
@ -1691,6 +1696,11 @@ export default {
|
|||
description: "Automate notifications to external services when project events occur.",
|
||||
title: "Webhooks",
|
||||
add_webhook: "Add webhook",
|
||||
delete: {
|
||||
title: "Delete webhook",
|
||||
description:
|
||||
"Are you sure you want to delete this webhook? Future events will no longer be delivered to it. This action cannot be undone.",
|
||||
},
|
||||
modal: {
|
||||
title: "Create webhook",
|
||||
details: "Webhook details",
|
||||
|
|
@ -1886,6 +1896,12 @@ export default {
|
|||
heading: "States",
|
||||
description: "Define and customize workflow states to track the progress of your work items.",
|
||||
describe_this_state_for_your_members: "Describe this state for your members.",
|
||||
delete: {
|
||||
blocked: "This state still contains work items. Move them to another state before deleting it.",
|
||||
error: "State could not be deleted. Please try again.",
|
||||
disabled_default: "Cannot delete the default state.",
|
||||
disabled_last: "Cannot leave the group without states.",
|
||||
},
|
||||
empty_state: {
|
||||
title: "No states available for the {groupKey} group",
|
||||
description: "Please create a new state",
|
||||
|
|
@ -1914,6 +1930,17 @@ export default {
|
|||
label: "Estimates",
|
||||
title: "Enable estimates for my project",
|
||||
enable_description: "They help you in communicating complexity and workload of the team.",
|
||||
delete_modal: {
|
||||
title: "Delete estimate system",
|
||||
description:
|
||||
'Deleting the estimate system "{value}" will permanently remove it from every work item in this project. If you enable estimates again later, you will need to configure work items again.',
|
||||
submit: "Delete estimate system",
|
||||
loading: "Deleting",
|
||||
success_title: "Estimate system deleted",
|
||||
success_message: "The estimate system has been removed from the project.",
|
||||
error_title: "Estimate system delete failed",
|
||||
error_message: "We were unable to delete the estimate system. Please try again.",
|
||||
},
|
||||
list_heading: "Estimate list",
|
||||
archived_heading: "Archived estimates",
|
||||
archived_description: "These are estimates from earlier project versions that are not currently in use. Read more",
|
||||
|
|
@ -2304,6 +2331,14 @@ export default {
|
|||
},
|
||||
},
|
||||
project_page: {
|
||||
delete_modal: {
|
||||
title: "Delete page",
|
||||
content: 'Are you sure you want to delete page "{value}"? The page will be permanently removed and this action cannot be undone.',
|
||||
success_title: "Page deleted",
|
||||
success_message: "Page deleted successfully.",
|
||||
error_title: "Page delete failed",
|
||||
error_message: "Page could not be deleted. Please try again.",
|
||||
},
|
||||
empty_state: {
|
||||
general: {
|
||||
title:
|
||||
|
|
|
|||
|
|
@ -1294,9 +1294,14 @@ export default {
|
|||
file_size_limit: "Максимальный размер файла - {size} МБ",
|
||||
drag_and_drop: "Перетащите файл для загрузки",
|
||||
delete: "Удалить вложение",
|
||||
delete_confirmation:
|
||||
"Вы уверены, что хотите удалить вложение {value}? Вложение будет удалено без возможности восстановления.",
|
||||
},
|
||||
label: {
|
||||
select: "Выбрать метку",
|
||||
delete_confirmation:
|
||||
'Вы уверены, что хотите удалить метку "{value}"? Она будет удалена из всех рабочих элементов и представлений, где используется.',
|
||||
delete_error: "Не удалось удалить метку. Попробуйте снова.",
|
||||
create: {
|
||||
success: "Метка создана",
|
||||
failed: "Ошибка создания метки",
|
||||
|
|
@ -1361,7 +1366,7 @@ export default {
|
|||
modals: {
|
||||
decline: {
|
||||
title: "Отклонить рабочий элемент",
|
||||
content: "Вы уверены, что хотите отклонить рабочий элемент {value}?",
|
||||
content: "Вы уверены, что хотите отклонить рабочий элемент {value}? Это действие нельзя отменить.",
|
||||
},
|
||||
delete: {
|
||||
title: "Удалить рабочий элемент",
|
||||
|
|
@ -1853,6 +1858,11 @@ export default {
|
|||
description: "Автоматизируйте уведомления во внешние сервисы при событиях проекта.",
|
||||
title: "Вебхуки",
|
||||
add_webhook: "Добавить вебхук",
|
||||
delete: {
|
||||
title: "Удалить вебхук",
|
||||
description:
|
||||
"Вы уверены, что хотите удалить этот вебхук? События больше не будут отправляться в этот вебхук. Это действие нельзя отменить.",
|
||||
},
|
||||
modal: {
|
||||
title: "Создать вебхук",
|
||||
details: "Детали вебхука",
|
||||
|
|
@ -2045,6 +2055,12 @@ export default {
|
|||
heading: "Статусы",
|
||||
description: "Определяйте и настраивайте статусы рабочего процесса для отслеживания прогресса рабочих элементов.",
|
||||
describe_this_state_for_your_members: "Опишите этот статус для участников",
|
||||
delete: {
|
||||
blocked: "В этом статусе есть рабочие элементы. Переместите их в другой статус, чтобы удалить текущий.",
|
||||
error: "Не удалось удалить статус. Попробуйте снова.",
|
||||
disabled_default: "Нельзя удалить статус по умолчанию.",
|
||||
disabled_last: "Нельзя оставить группу без статусов.",
|
||||
},
|
||||
empty_state: {
|
||||
title: "Нет статусов для группы {groupKey}",
|
||||
description: "Создайте новый статус",
|
||||
|
|
@ -2073,6 +2089,17 @@ export default {
|
|||
label: "Оценки",
|
||||
title: "Включить оценки для моего проекта",
|
||||
enable_description: "Они помогают вам в общении о сложности и рабочей нагрузке команды.",
|
||||
delete_modal: {
|
||||
title: "Удалить систему оценок",
|
||||
description:
|
||||
'Удаление системы оценок "{value}" безвозвратно уберет её из всех рабочих элементов проекта. Если вы включите оценки снова, рабочие элементы придется настраивать заново.',
|
||||
submit: "Удалить систему оценок",
|
||||
loading: "Удаление",
|
||||
success_title: "Система оценок удалена",
|
||||
success_message: "Система оценок удалена из проекта.",
|
||||
error_title: "Не удалось удалить систему оценок",
|
||||
error_message: "Мы не смогли удалить систему оценок. Попробуйте снова.",
|
||||
},
|
||||
list_heading: "Список оценок",
|
||||
archived_heading: "Архивные оценки",
|
||||
archived_description: "Это оценки из предыдущих версий проекта, которые сейчас не используются. Подробнее о них",
|
||||
|
|
@ -2461,6 +2488,14 @@ export default {
|
|||
},
|
||||
},
|
||||
project_page: {
|
||||
delete_modal: {
|
||||
title: "Удалить страницу",
|
||||
content: 'Вы уверены, что хотите удалить страницу "{value}"? Страница будет удалена без возможности восстановления.',
|
||||
success_title: "Страница удалена",
|
||||
success_message: "Страница успешно удалена.",
|
||||
error_title: "Не удалось удалить страницу",
|
||||
error_message: "Не удалось удалить страницу. Попробуйте снова.",
|
||||
},
|
||||
empty_state: {
|
||||
general: {
|
||||
title: "Создавайте заметки, документы или базу знаний. Используйте Galileo, ИИ-помощник NODE.DC.",
|
||||
|
|
|
|||
|
|
@ -41,9 +41,8 @@ export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog
|
|||
}
|
||||
|
||||
// Constants
|
||||
const OVERLAY_CLASSNAME = cn("fixed inset-0 z-90 bg-backdrop/70 backdrop-blur-sm");
|
||||
const BASE_CLASSNAME =
|
||||
"nodedc-glass-modal relative w-full rounded-[28px] border border-subtle/70 bg-surface-1/78 text-left shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-2xl z-100";
|
||||
const OVERLAY_CLASSNAME = cn("fixed inset-0 z-90 bg-black/60 backdrop-blur-md");
|
||||
const BASE_CLASSNAME = "nodedc-glass-modal relative z-100 w-full rounded-[28px] text-left";
|
||||
|
||||
// Utility functions
|
||||
const getPositionClassNames = (position: DialogPosition) =>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export function ModalPortal({
|
|||
const positionClass = fullScreen ? "" : PORTAL_POSITION_CLASSES[position];
|
||||
|
||||
return cn(
|
||||
"nodedc-glass-modal absolute top-0 h-full rounded-[28px] border border-subtle/70 bg-surface-1/78 shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-2xl transition-transform duration-300 ease-out",
|
||||
"nodedc-glass-modal absolute top-0 h-full rounded-[28px] transition-transform duration-300 ease-out",
|
||||
widthClass,
|
||||
positionClass,
|
||||
contentClassName
|
||||
|
|
@ -101,7 +101,7 @@ export function ModalPortal({
|
|||
>
|
||||
{showOverlay && (
|
||||
<div
|
||||
className={cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-colors duration-300", overlayClassName)}
|
||||
className={cn("absolute inset-0 bg-black/60 backdrop-blur-md transition-colors duration-300", overlayClassName)}
|
||||
onClick={handleOverlayClick}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"@headlessui/react": "^1.7.3",
|
||||
"@plane/constants": "workspace:*",
|
||||
"@plane/hooks": "workspace:*",
|
||||
"@plane/i18n": "workspace:*",
|
||||
"@plane/propel": "workspace:*",
|
||||
"@plane/types": "workspace:*",
|
||||
"@plane/utils": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import type { LucideIcon } from "lucide-react";
|
|||
import { AlertTriangle, Info } from "lucide-react";
|
||||
import React from "react";
|
||||
// components
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import type { TButtonVariant } from "@plane/propel/button";
|
||||
import { Button } from "@plane/propel/button";
|
||||
import { cn } from "../utils";
|
||||
|
|
@ -43,16 +44,17 @@ const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
|
|||
};
|
||||
|
||||
const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
|
||||
danger: "error-fill",
|
||||
danger: "primary",
|
||||
primary: "primary",
|
||||
};
|
||||
|
||||
const VARIANT_CLASSES: Record<TModalVariant, string> = {
|
||||
danger: "bg-danger-subtle text-danger-primary",
|
||||
primary: "bg-accent-primary/20 text-accent-primary",
|
||||
danger: "nodedc-modal-alert-icon nodedc-modal-alert-icon-danger",
|
||||
primary: "nodedc-modal-alert-icon nodedc-modal-alert-icon-primary",
|
||||
};
|
||||
|
||||
export function AlertModalCore(props: Props) {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
content,
|
||||
handleClose,
|
||||
|
|
@ -62,10 +64,10 @@ export function AlertModalCore(props: Props) {
|
|||
isOpen,
|
||||
position = EModalPosition.CENTER,
|
||||
primaryButtonText = {
|
||||
loading: "Deleting",
|
||||
default: "Delete",
|
||||
loading: t("deleting"),
|
||||
default: t("delete"),
|
||||
},
|
||||
secondaryButtonText = "Cancel",
|
||||
secondaryButtonText = t("cancel"),
|
||||
title,
|
||||
variant = "danger",
|
||||
width = EModalWidth.XL,
|
||||
|
|
@ -94,11 +96,11 @@ export function AlertModalCore(props: Props) {
|
|||
</span>
|
||||
)}
|
||||
<div className="text-center sm:text-left">
|
||||
<h3 className="text-18 font-medium text-secondary">{title}</h3>
|
||||
<h3 className="text-18 font-medium text-primary">{title}</h3>
|
||||
<p className="mt-1 text-13 text-secondary">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col-reverse gap-3 border-t border-subtle/70 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<div className="flex flex-col-reverse gap-3 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<Button variant="secondary" onClick={handleClose} className="nodedc-modal-secondary-button min-w-[8.25rem]">
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
|
|
@ -108,8 +110,8 @@ export function AlertModalCore(props: Props) {
|
|||
onClick={handleSubmit}
|
||||
loading={isSubmitting}
|
||||
className={cn("min-w-[8.25rem]", {
|
||||
"nodedc-modal-danger-button": variant === "danger",
|
||||
"nodedc-modal-primary-button": variant === "primary",
|
||||
"nodedc-modal-danger-button": variant === "danger",
|
||||
})}
|
||||
>
|
||||
{isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function ModalCore(props: Props) {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-backdrop/70 backdrop-blur-sm transition-opacity" />
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-30 overflow-y-auto">
|
||||
|
|
@ -57,7 +57,7 @@ export function ModalCore(props: Props) {
|
|||
>
|
||||
<Dialog.Panel
|
||||
className={cn(
|
||||
"nodedc-glass-modal relative w-full transform rounded-[28px] border border-subtle/70 bg-surface-1/78 text-left shadow-[0_16px_48px_rgba(0,0,0,0.34)] backdrop-blur-2xl transition-all",
|
||||
"nodedc-glass-modal relative w-full transform rounded-[28px] text-left transition-all",
|
||||
width,
|
||||
className
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1317,6 +1317,9 @@ importers:
|
|||
'@plane/hooks':
|
||||
specifier: workspace:*
|
||||
version: link:../hooks
|
||||
'@plane/i18n':
|
||||
specifier: workspace:*
|
||||
version: link:../i18n
|
||||
'@plane/propel':
|
||||
specifier: workspace:*
|
||||
version: link:../propel
|
||||
|
|
|
|||
Loading…
Reference in New Issue