mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: add tooltip to admin sidebar help-section.
This commit is contained in:
parent
95679bc27f
commit
385038fb22
@ -4,7 +4,7 @@ import { FC, useState, useRef } from "react";
|
|||||||
import { Transition } from "@headlessui/react";
|
import { Transition } from "@headlessui/react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
|
import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
|
||||||
import { DiscordIcon, GithubIcon } from "@plane/ui";
|
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
|
||||||
// hooks
|
// hooks
|
||||||
import { useTheme } from "@/hooks";
|
import { useTheme } from "@/hooks";
|
||||||
// assets
|
// assets
|
||||||
@ -45,39 +45,37 @@ export const HelpSection: FC = () => {
|
|||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
|
<div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
|
||||||
<a
|
<Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
|
||||||
href={redirectionLink}
|
<a
|
||||||
className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
|
href={redirectionLink}
|
||||||
>
|
className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
|
||||||
<ExternalLink size={14} />
|
>
|
||||||
{!isSidebarCollapsed && "Redirect to plane"}
|
<ExternalLink size={14} />
|
||||||
</a>
|
{!isSidebarCollapsed && "Redirect to plane"}
|
||||||
|
</a>
|
||||||
<button
|
</Tooltip>
|
||||||
type="button"
|
<Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
|
||||||
className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
|
<button
|
||||||
isSidebarCollapsed ? "w-full" : ""
|
type="button"
|
||||||
}`}
|
className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
|
||||||
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
|
isSidebarCollapsed ? "w-full" : ""
|
||||||
>
|
}`}
|
||||||
<HelpCircle className="h-3.5 w-3.5" />
|
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
|
||||||
</button>
|
>
|
||||||
<button
|
<HelpCircle className="h-3.5 w-3.5" />
|
||||||
type="button"
|
</button>
|
||||||
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
|
</Tooltip>
|
||||||
onClick={() => toggleSidebar(!isSidebarCollapsed)}
|
<Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
|
||||||
>
|
<button
|
||||||
<MoveLeft className="h-3.5 w-3.5" />
|
type="button"
|
||||||
</button>
|
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
|
||||||
<button
|
isSidebarCollapsed ? "w-full" : ""
|
||||||
type="button"
|
}`}
|
||||||
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
|
onClick={() => toggleSidebar(!isSidebarCollapsed)}
|
||||||
isSidebarCollapsed ? "w-full" : ""
|
>
|
||||||
}`}
|
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
|
||||||
onClick={() => toggleSidebar(!isSidebarCollapsed)}
|
</button>
|
||||||
>
|
</Tooltip>
|
||||||
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
Loading…
Reference in New Issue
Block a user