Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-14 06:25:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

[WIKI-323] fix: added tooltips for displaying lock and move page (#3015)

Browse Source
This commit is contained in:
M. Palanikannan
2025-04-22 14:17:00 +05:30
committed by GitHub
parent 6566532bec
commit c7fb8fac0c
3 changed files with 31 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
web/ce/components/pages/header/lock-control.tsx
View File

@@ -1,116 +1 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { observer } from "mobx-react";
import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
// plane imports
import { Tooltip } from "@plane/ui";
// hooks
import { usePageOperations } from "@/hooks/use-page-operations";
// store
import { TPageInstance } from "@/store/pages/base-page";
// Define our lock display states, renaming "icon-only" to "neutral"
type LockDisplayState = "neutral" | "locked" | "unlocked";
type Props = {
page: TPageInstance;
};
export const PageLockControl = observer(({ page }: Props) => {
// Initial state: if locked, then "locked", otherwise default to "neutral"
const [displayState, setDisplayState] = useState<LockDisplayState>(page.is_locked ? "locked" : "neutral");
// derived values
const { canCurrentUserLockPage, is_locked } = page;
// Ref for the transition timer
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// Ref to store the previous value of isLocked for detecting transitions
const prevLockedRef = useRef(is_locked);
// page operations
const {
pageOperations: { toggleLock },
} = usePageOperations({
page,
});
// Cleanup any running timer on unmount
useEffect(
() => () => {
if (timerRef.current) clearTimeout(timerRef.current);
},
[]
);
// Update display state when isLocked changes
useEffect(() => {
// Clear any previous timer to avoid overlapping transitions
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
// Transition logic:
// If locked, ensure the display state is "locked"
// If unlocked after being locked, show "unlocked" briefly then revert to "neutral"
if (is_locked) {
setDisplayState("locked");
} else if (prevLockedRef.current === true) {
setDisplayState("unlocked");
timerRef.current = setTimeout(() => {
setDisplayState("neutral");
timerRef.current = null;
}, 600);
} else {
setDisplayState("neutral");
}
// Update the previous locked state
prevLockedRef.current = is_locked;
}, [is_locked]);
if (!canCurrentUserLockPage) return null;
// Render different UI based on the current display state
return (
<>
{displayState === "neutral" && (
<Tooltip tooltipContent="Lock" position="bottom">
<button
type="button"
onClick={() => toggleLock({ recursive: true })}
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
aria-label="Lock"
>
<LockKeyhole className="size-3.5" />
</button>
</Tooltip>
)}
{displayState === "locked" && (
<button
type="button"
onClick={() => toggleLock({ recursive: true })}
className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
aria-label="Locked"
>
<LockKeyhole className="flex-shrink-0 size-3.5 animate-lock-icon" />
<span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
Locked
</span>
</button>
)}
{displayState === "unlocked" && (
<div
className="h-6 flex items-center gap-1 px-2 rounded text-custom-text-200 animate-fade-out"
aria-label="Unlocked"
>
<LockKeyholeOpen className="flex-shrink-0 size-3.5 animate-unlock-icon" />
<span className="text-xs font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-out">
Unlocked
</span>
</div>
)}
</>
);
});
export * from "ee/components/pages/header/lock-control";

22
web/ee/components/pages/header/lock-control.tsx
View File

@@ -108,7 +108,21 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
[toggleLock]
);
if (!canCurrentUserLockPage) return null;
if (is_locked && !canCurrentUserLockPage) {
return (
<Tooltip tooltipContent="You don't have the permission to unlock this page" position="bottom">
<div
className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 cursor-default"
aria-label="Locked"
>
<LockKeyhole className="flex-shrink-0 size-3.5" />
<span className="text-xs font-medium whitespace-nowrap">Locked</span>
</div>
</Tooltip>
);
}
if (!is_locked && !canCurrentUserLockPage) return null;
const actionText = is_locked ? "Unlock" : "Lock";
@@ -119,7 +133,7 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
<Tooltip tooltipContent="Lock page" position="bottom" disabled={showLockOptions}>
<button
type="button"
onClick={handleButtonClick} // Use the main handler
onClick={handleButtonClick}
className={cn(
"flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors",
{
@@ -141,7 +155,9 @@ export const PageLockControl = observer(({ page, storeType }: Props) => {
onMouseLeave={() => setIsHoveringLocked(false)}
className={cn(
"h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors duration-200 ease-in-out",
{ "bg-custom-primary-100/30": isNestedPagesEnabled(workspaceSlug.toString()) && showLockOptions }
{
"bg-custom-primary-100/30": isNestedPagesEnabled(workspaceSlug.toString()) && showLockOptions,
}
)}
aria-label={isHoveringLocked ? "Unlock" : "Locked"}
>

18
web/ee/components/pages/header/move-control.tsx
View File

@@ -4,6 +4,8 @@ import { useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { FolderOutput } from "lucide-react";
// ui components
import { Tooltip } from "@plane/ui";
// core imports
import { TPageMoveControlProps } from "@/ce/components/pages/header/move-control";
// plane web hooks
@@ -29,13 +31,15 @@ export const PageMoveControl = observer((props: TPageMoveControlProps) => {
return (
<>
<MovePageModal isOpen={isMovePageModalOpen} onClose={() => setIsMovePageModalOpen(false)} page={page} />
<button
type="button"
onClick={() => setIsMovePageModalOpen(true)}
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
>
<FolderOutput className="size-3.5" />
</button>
<Tooltip tooltipContent="Move page" position="bottom">
<button
type="button"
onClick={() => setIsMovePageModalOpen(true)}
className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
>
<FolderOutput className="size-3.5" />
</button>
</Tooltip>
</>
);
});