From cb632408f9e4806d27edbd28b1761661b4dd8a3e Mon Sep 17 00:00:00 2001 From: Ramesh Kumar Chandra <31303617+rameshkumarchandra@users.noreply.github.com> Date: Tue, 12 Mar 2024 20:39:36 +0530 Subject: [PATCH] [WEB-713] style: remove tooltips in mobile responsiveness (#3948) Co-authored-by: sriram veeraghanta --- packages/ui/src/tooltip/tooltip.tsx | 4 +++- .../modal/generated-token-details.tsx | 6 ++++-- web/components/api-token/token-list-item.tsx | 10 ++++++---- .../command-palette/command-modal.tsx | 6 +++--- web/components/common/breadcrumb-link.tsx | 4 +++- web/components/core/activity.tsx | 7 ++++++- .../core/modals/existing-issues-list-modal.tsx | 6 +++--- web/components/core/sidebar/links-list.tsx | 5 +++-- web/components/cycles/active-cycle/root.tsx | 10 +++++++--- .../cycles/board/cycles-board-card.tsx | 8 ++++++-- web/components/cycles/cycles-view-header.tsx | 4 +++- web/components/cycles/gantt-chart/blocks.tsx | 4 +++- .../cycles/list/cycles-list-item.tsx | 7 +++++-- web/components/dropdowns/buttons.tsx | 14 +++++++------- web/components/dropdowns/module/index.tsx | 6 ++++-- web/components/dropdowns/priority.tsx | 13 ++++++++++--- .../gantt-chart/helpers/add-block.tsx | 6 +++++- web/components/headers/cycle-issues.tsx | 6 +++++- web/components/headers/global-issues.tsx | 4 +++- web/components/headers/module-issues.tsx | 4 ++++ web/components/headers/modules-list.tsx | 11 +++++++---- .../headers/project-archived-issues.tsx | 6 ++++-- .../headers/project-draft-issues.tsx | 4 +++- web/components/headers/project-issues.tsx | 4 +++- .../inbox/sidebar/inbox-list-item.tsx | 7 ++++--- web/components/instance/sidebar-dropdown.tsx | 5 +++-- web/components/instance/sidebar-menu.tsx | 4 +++- .../integration/single-integration-card.tsx | 5 ++++- .../issues/attachment/attachment-detail.tsx | 6 ++++-- .../actions/helpers/activity-block.tsx | 4 +++- .../activity/actions/helpers/issue-link.tsx | 5 +++-- .../issues/issue-detail/links/link-detail.tsx | 5 +++-- .../issues/issue-detail/parent-select.tsx | 7 ++++--- .../issues/issue-detail/relation-select.tsx | 7 ++++--- web/components/issues/issue-detail/sidebar.tsx | 8 +++++--- .../issue-layouts/calendar/issue-blocks.tsx | 4 +++- .../filters/header/layout-selection.tsx | 6 ++++-- .../issues/issue-layouts/gantt/blocks.tsx | 6 +++++- .../issues/issue-layouts/kanban/block.tsx | 6 ++++-- .../issues/issue-layouts/list/block.tsx | 9 +++++---- .../properties/all-properties.tsx | 8 +++++--- .../issues/issue-layouts/properties/labels.tsx | 18 +++++++++++++----- .../issue-layouts/spreadsheet/issue-row.tsx | 4 +++- web/components/issues/label.tsx | 15 ++++++++------- .../issues/parent-issues-list-modal.tsx | 5 +++-- web/components/issues/peek-overview/header.tsx | 13 +++++++------ .../issues/sub-issues/issue-list-item.tsx | 5 +++-- web/components/modules/gantt-chart/blocks.tsx | 4 ++++ web/components/modules/module-card-item.tsx | 8 +++++--- web/components/modules/module-list-item.tsx | 7 ++++--- .../notifications/notification-card.tsx | 7 ++++--- .../notifications/notification-header.tsx | 9 ++++++--- .../notifications/notification-popover.tsx | 5 ++++- web/components/pages/page-form.tsx | 5 +++-- web/components/pages/pages-list/list-item.tsx | 13 +++++++++++-- web/components/profile/sidebar.tsx | 5 +++-- web/components/project/card.tsx | 6 ++++++ web/components/project/create-project-form.tsx | 4 +++- web/components/project/member-list-item.tsx | 5 +++-- web/components/project/sidebar-list-item.tsx | 12 +++++++++++- .../states/create-update-state-inline.tsx | 4 +++- .../states/project-setting-state-list-item.tsx | 6 ++++-- web/components/ui/labels-list.tsx | 5 ++++- web/components/web-hooks/form/secret-key.tsx | 6 ++++-- web/components/workspace/help-section.tsx | 8 +++++--- .../settings/invitations-list-item.tsx | 4 +++- .../workspace/settings/members-list-item.tsx | 3 +++ web/components/workspace/sidebar-menu.tsx | 8 +++++--- web/hooks/use-platform-os.tsx | 12 ++++++++++++ .../settings-layout/profile/sidebar.tsx | 7 ++++--- 70 files changed, 327 insertions(+), 147 deletions(-) create mode 100644 web/hooks/use-platform-os.tsx diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx index 65d014efe..92bab8d04 100644 --- a/packages/ui/src/tooltip/tooltip.tsx +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -29,6 +29,7 @@ interface ITooltipProps { className?: string; openDelay?: number; closeDelay?: number; + isMobile?: boolean; } export const Tooltip: React.FC = ({ @@ -40,6 +41,7 @@ export const Tooltip: React.FC = ({ className = "", openDelay = 200, closeDelay, + isMobile = false, }) => ( = ({ hoverCloseDelay={closeDelay} content={
{tooltipHeading &&
{tooltipHeading}
} {tooltipContent} diff --git a/web/components/api-token/modal/generated-token-details.tsx b/web/components/api-token/modal/generated-token-details.tsx index fcae6b249..d21caf36c 100644 --- a/web/components/api-token/modal/generated-token-details.tsx +++ b/web/components/api-token/modal/generated-token-details.tsx @@ -6,6 +6,8 @@ import { renderFormattedDate } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // types import { IApiToken } from "@plane/types"; +// hooks +import { usePlatformOS } from "hooks/use-platform-os"; type Props = { handleClose: () => void; @@ -14,7 +16,7 @@ type Props = { export const GeneratedTokenDetails: React.FC = (props) => { const { handleClose, tokenDetails } = props; - + const { isMobile } = usePlatformOS(); const copyApiToken = (token: string) => { copyTextToClipboard(token).then(() => setToast({ @@ -40,7 +42,7 @@ export const GeneratedTokenDetails: React.FC = (props) => { className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none" > {tokenDetails.token} - + diff --git a/web/components/api-token/token-list-item.tsx b/web/components/api-token/token-list-item.tsx index 88af9a0a2..3dd381d53 100644 --- a/web/components/api-token/token-list-item.tsx +++ b/web/components/api-token/token-list-item.tsx @@ -3,6 +3,7 @@ import { XCircle } from "lucide-react"; // components import { Tooltip } from "@plane/ui"; import { DeleteApiTokenModal } from "components/api-token"; +import { usePlatformOS } from "hooks/use-platform-os"; // ui // helpers import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper"; @@ -17,12 +18,14 @@ export const ApiTokenListItem: React.FC = (props) => { const { token } = props; // states const [deleteModalOpen, setDeleteModalOpen] = useState(false); + // hooks + const { isMobile } = usePlatformOS(); return ( <> setDeleteModalOpen(false)} tokenId={token.id} />
- +
{cycleDetails.assignee_ids.length > 0 && ( - +
{cycleDetails.assignee_ids.map((assigne_id) => { @@ -190,6 +193,7 @@ export const CyclesBoardCard: FC = observer((props) => {
diff --git a/web/components/cycles/cycles-view-header.tsx b/web/components/cycles/cycles-view-header.tsx index 0223fe8c3..f7ff3567c 100644 --- a/web/components/cycles/cycles-view-header.tsx +++ b/web/components/cycles/cycles-view-header.tsx @@ -5,6 +5,7 @@ import { ListFilter, Search, X } from "lucide-react"; // hooks import { useCycleFilter } from "hooks/store"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; +import { usePlatformOS } from "hooks/use-platform-os"; // components import { CycleFiltersSelection } from "components/cycles"; import { FiltersDropdown } from "components/issues"; @@ -36,6 +37,7 @@ export const CyclesViewHeader: React.FC = observer((props) => { updateFilters, updateSearchQuery, } = useCycleFilter(); + const { isMobile } = usePlatformOS(); // outside click detector hook useOutsideClickDetector(inputRef, () => { if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false); @@ -134,7 +136,7 @@ export const CyclesViewHeader: React.FC = observer((props) => {
{CYCLE_VIEW_LAYOUTS.map((layout) => ( - +
- + - +
{renderFormattedDate(issue.created_at ?? "")} diff --git a/web/components/instance/sidebar-dropdown.tsx b/web/components/instance/sidebar-dropdown.tsx index 63ee1f2d1..a5a268af4 100644 --- a/web/components/instance/sidebar-dropdown.tsx +++ b/web/components/instance/sidebar-dropdown.tsx @@ -9,6 +9,7 @@ import { Menu, Transition } from "@headlessui/react"; // icons import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; import { Avatar, Tooltip, TOAST_TYPE, setToast } from "@plane/ui"; import { useApplication, useUser } from "hooks/store"; // ui @@ -34,7 +35,7 @@ export const InstanceSidebarDropdown = observer(() => { const { signOut, currentUser, currentUserSettings } = useUser(); // hooks const { setTheme } = useTheme(); - + const { isMobile } = usePlatformOS(); // redirect url for normal mode const redirectWorkspaceSlug = workspaceSlug || @@ -73,7 +74,7 @@ export const InstanceSidebarDropdown = observer(() => { {!sidebarCollapsed && (

Instance admin

- +
diff --git a/web/components/instance/sidebar-menu.tsx b/web/components/instance/sidebar-menu.tsx index 782cc90d9..e6719895f 100644 --- a/web/components/instance/sidebar-menu.tsx +++ b/web/components/instance/sidebar-menu.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; import { Tooltip } from "@plane/ui"; import { useApplication } from "hooks/store"; // ui @@ -46,6 +47,7 @@ export const InstanceAdminSidebarMenu = () => { } = useApplication(); // router const router = useRouter(); + const { isMobile } = usePlatformOS(); return (
@@ -55,7 +57,7 @@ export const InstanceAdminSidebarMenu = () => { return (
- +
= observer(({ integration }) } = useUser(); const isUserAdmin = currentWorkspaceRole === 20; - + const { isMobile } = usePlatformOS(); const { startAuth, isConnecting: isInstalling } = useIntegrationPopup({ provider: integration.provider, github_app_name: envConfig?.github_app_name || "", @@ -129,6 +130,7 @@ export const SingleIntegrationCard: React.FC = observer(({ integration }) {workspaceIntegrations ? ( isInstalled ? ( @@ -147,6 +149,7 @@ export const SingleIntegrationCard: React.FC = observer(({ integration }) ) : ( diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx index 8ff2b9305..c1be0f355 100644 --- a/web/components/issues/attachment/attachment-detail.tsx +++ b/web/components/issues/attachment/attachment-detail.tsx @@ -2,6 +2,7 @@ import { FC, useState } from "react"; import Link from "next/link"; import { AlertCircle, X } from "lucide-react"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; // ui import { Tooltip } from "@plane/ui"; // components @@ -34,7 +35,7 @@ export const IssueAttachmentsDetail: FC = (props) => { } = useIssueDetail(); // states const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false); - + const { isMobile } = usePlatformOS(); const attachment = attachmentId && getAttachmentById(attachmentId); if (!attachment) return <>; @@ -56,10 +57,11 @@ export const IssueAttachmentsDetail: FC = (props) => {
{getFileIcon(getFileExtension(attachment.asset))}
- + {truncateText(`${getFileName(attachment.attributes.name)}`, 10)} = (pr } = useIssueDetail(); const activity = getActivityById(activityId); - + const { isMobile } = usePlatformOS(); if (!activity) return <>; return (
= (pr {children} {calculateTimeAgo(activity.created_at)} diff --git a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx index 49f813ec6..c622079e2 100644 --- a/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx +++ b/web/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx @@ -2,6 +2,7 @@ import { FC } from "react"; // hooks import { Tooltip } from "@plane/ui"; import { useIssueDetail } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // ui type TIssueLink = { @@ -14,12 +15,12 @@ export const IssueLink: FC = (props) => { const { activity: { getActivityById }, } = useIssueDetail(); - + const { isMobile } = usePlatformOS(); const activity = getActivityById(activityId); if (!activity) return <>; return ( - + = (props) => { toggleIssueLinkModalStore(modalToggle); setIsIssueLinkModalOpen(modalToggle); }; - + const { isMobile } = usePlatformOS(); const linkDetail = getLinkById(linkId); if (!linkDetail) return <>; @@ -64,7 +65,7 @@ export const IssueLinkDetail: FC = (props) => { - + {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url} diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx index 0b6501027..60cb06664 100644 --- a/web/components/issues/issue-detail/parent-select.tsx +++ b/web/components/issues/issue-detail/parent-select.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite"; import Link from "next/link"; import { Pencil, X } from "lucide-react"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; // components import { Tooltip } from "@plane/ui"; import { ParentIssuesListModal } from "components/issues"; @@ -35,7 +36,7 @@ export const IssueParentSelect: React.FC = observer((props) const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined; const parentIssueProjectDetails = parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined; - + const { isMobile } = usePlatformOS(); const handleParentIssue = async (_issueId: string | null = null) => { try { await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId }); @@ -73,7 +74,7 @@ export const IssueParentSelect: React.FC = observer((props) > {issue.parent_id && parentIssue ? (
- + = observer((props) {!disabled && ( - + { e.preventDefault(); diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx index 0fd0902c6..d609d1ddd 100644 --- a/web/components/issues/issue-detail/relation-select.tsx +++ b/web/components/issues/issue-detail/relation-select.tsx @@ -7,6 +7,7 @@ import { RelatedIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui"; import { ExistingIssuesListModal } from "components/core"; import { cn } from "helpers/common.helper"; import { useIssueDetail, useIssues, useProject } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // components // ui // helpers @@ -59,7 +60,7 @@ export const IssueRelationSelect: React.FC = observer((pro toggleRelationModal, } = useIssueDetail(); const { issueMap } = useIssues(); - + const { isMobile } = usePlatformOS(); const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey); const onSubmit = async (data: ISearchIssueResponse[]) => { @@ -124,7 +125,7 @@ export const IssueRelationSelect: React.FC = observer((pro key={relationIssueId} className={`group flex items-center gap-1 rounded px-1.5 pb-1 pt-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`} > - + = observer((pro {!disabled && ( - + { e.preventDefault(); diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx index 7f1a7a0d1..7eac649b3 100644 --- a/web/components/issues/issue-detail/sidebar.tsx +++ b/web/components/issues/issue-detail/sidebar.tsx @@ -15,6 +15,7 @@ import { CalendarCheck2, } from "lucide-react"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; // components import { ArchiveIcon, @@ -78,7 +79,7 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { issue: { getIssueById }, } = useIssueDetail(); const { getStateById } = useProjectState(); - + const { isMobile } = usePlatformOS(); const issue = getIssueById(issueId); if (!issue) return <>; @@ -138,7 +139,7 @@ export const IssueDetailsSidebar: React.FC = observer((props) => { )}
- +
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx index a69ead577..2b8df8edf 100644 --- a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx +++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx @@ -5,7 +5,8 @@ import { Tooltip } from "@plane/ui"; // types import { ISSUE_LAYOUTS } from "constants/issue"; import { TIssueLayouts } from "@plane/types"; -// constants +// hooks +import { usePlatformOS } from "hooks/use-platform-os"; type Props = { layouts: TIssueLayouts[]; @@ -15,11 +16,12 @@ type Props = { export const LayoutSelection: React.FC = (props) => { const { layouts, onChange, selectedLayout } = props; + const { isMobile } = usePlatformOS(); return (
{ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => ( - + {isArchivingAllowed && ( )} {!disabled && ( - + diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx index 5d7d19730..170bf622f 100644 --- a/web/components/issues/sub-issues/issue-list-item.tsx +++ b/web/components/issues/sub-issues/issue-list-item.tsx @@ -4,6 +4,7 @@ import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } // components import { ControlLink, CustomMenu, Tooltip } from "@plane/ui"; import { useIssueDetail, useProject, useProjectState } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; import { TIssue } from "@plane/types"; import { IssueList } from "./issues-list"; import { IssueProperty } from "./properties"; @@ -46,7 +47,7 @@ export const IssueListItem: React.FC = observer((props) => { } = useIssueDetail(); const project = useProject(); const { getProjectStates } = useProjectState(); - + const { isMobile } = usePlatformOS(); const issue = getIssueById(issueId); const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined; const currentIssueStateDetail = @@ -117,7 +118,7 @@ export const IssueListItem: React.FC = observer((props) => { onClick={() => handleIssuePeekOverview(issue)} className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100" > - + {issue.name} diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx index 42f22082b..60af5d048 100644 --- a/web/components/modules/gantt-chart/blocks.tsx +++ b/web/components/modules/gantt-chart/blocks.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; // hooks +import { usePlatformOS } from "hooks/use-platform-os"; // ui import { Tooltip, ModuleStatusIcon } from "@plane/ui"; // helpers @@ -25,6 +26,8 @@ export const ModuleGanttBlock: React.FC = observer((props) => { const { getModuleById } = useModule(); // derived values const moduleDetails = getModuleById(moduleId); + // hooks + const { isMobile } = usePlatformOS(); return (
= observer((props) => { >
{moduleDetails?.name}
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx index 4873e009c..8ef3fe024 100644 --- a/web/components/modules/module-card-item.tsx +++ b/web/components/modules/module-card-item.tsx @@ -12,6 +12,7 @@ import { EUserProjectRoles } from "constants/project"; import { renderFormattedDate } from "helpers/date-time.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; import { useEventTracker, useMember, useModule, useUser } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // components // ui // helpers @@ -39,7 +40,7 @@ export const ModuleCardItem: React.FC = observer((props) => { // derived values const moduleDetails = getModuleById(moduleId); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; - + const { isMobile } = usePlatformOS(); const handleAddToFavorites = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); @@ -179,7 +180,7 @@ export const ModuleCardItem: React.FC = observer((props) => {
- + {moduleDetails.name}
@@ -208,7 +209,7 @@ export const ModuleCardItem: React.FC = observer((props) => { {issueCount ?? "0 Issue"}
{moduleDetails.member_ids?.length > 0 && ( - +
{moduleDetails.member_ids.map((member_id) => { @@ -222,6 +223,7 @@ export const ModuleCardItem: React.FC = observer((props) => {
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx index 7fe25b918..0b28712b0 100644 --- a/web/components/modules/module-list-item.tsx +++ b/web/components/modules/module-list-item.tsx @@ -21,6 +21,7 @@ import { EUserProjectRoles } from "constants/project"; import { renderFormattedDate } from "helpers/date-time.helper"; import { copyUrlToClipboard } from "helpers/string.helper"; import { useModule, useUser, useEventTracker, useMember } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // components // ui // helpers @@ -48,7 +49,7 @@ export const ModuleListItem: React.FC = observer((props) => { // derived values const moduleDetails = getModuleById(moduleId); const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; - + const { isMobile } = usePlatformOS(); const handleAddToFavorites = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); @@ -194,7 +195,7 @@ export const ModuleListItem: React.FC = observer((props) => { )} - + {moduleDetails.name}
@@ -227,7 +228,7 @@ export const ModuleListItem: React.FC = observer((props) => {
- +
{moduleDetails.member_ids.length > 0 ? ( diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 0e4904a7e..5535b4160 100644 --- a/web/components/notifications/notification-card.tsx +++ b/web/components/notifications/notification-card.tsx @@ -15,6 +15,7 @@ import { calculateTimeAgo, renderFormattedTime, renderFormattedDate } from "help import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper"; // hooks import { useEventTracker } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // type import type { IUserNotification, NotificationType } from "@plane/types"; @@ -44,7 +45,7 @@ export const NotificationCard: React.FC = (props) => { } = props; // store hooks const { captureEvent } = useEventTracker(); - + const { isMobile } = usePlatformOS(); const router = useRouter(); const { workspaceSlug } = router.query; // states @@ -358,7 +359,7 @@ export const NotificationCard: React.FC = (props) => { }, }, ].map((item) => ( - + ))} - + = (props) => } = props; // store hooks const { captureEvent } = useEventTracker(); + // hooks + const { isMobile } = usePlatformOS(); const notificationTabs: Array<{ label: string; @@ -84,7 +87,7 @@ export const NotificationHeader: React.FC = (props) =>
- + - + diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx index d7aa1b07d..c3e508688 100644 --- a/web/components/notifications/notification-popover.tsx +++ b/web/components/notifications/notification-popover.tsx @@ -11,6 +11,7 @@ import { getNumberCount } from "helpers/string.helper"; import { useApplication } from "hooks/store"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; import useUserNotification from "hooks/use-user-notifications"; +import { usePlatformOS } from "hooks/use-platform-os"; // components // images import emptyNotification from "public/empty-state/notification.svg"; @@ -23,6 +24,8 @@ export const NotificationPopover = observer(() => { const { theme: themeStore } = useApplication(); // refs const notificationPopoverRef = React.useRef(null); + // hooks + const { isMobile } = usePlatformOS(); const { notifications, @@ -67,7 +70,7 @@ export const NotificationPopover = observer(() => { /> <> - +
{project.assigned_issues > 0 && ( - +
= observer((props) => { const { workspaceSlug } = router.query; // store hooks const { addProjectToFavorites, removeProjectFromFavorites } = useProject(); + // hooks + const { isMobile } = usePlatformOS(); + project.member_role; // derived values const projectMembersIds = project.members?.map((member) => member.member_id); // auth @@ -171,6 +176,7 @@ export const ProjectCard: React.FC = observer((props) => {

0 ? `${project.members.length} Members` : "No Member" diff --git a/web/components/project/create-project-form.tsx b/web/components/project/create-project-form.tsx index 509cf310c..694bd8185 100644 --- a/web/components/project/create-project-form.tsx +++ b/web/components/project/create-project-form.tsx @@ -27,6 +27,7 @@ import { cn } from "helpers/common.helper"; import { projectIdentifierSanitizer } from "helpers/project.helper"; // hooks import { useEventTracker, useProject } from "hooks/store"; +import { usePlatformOS } from "hooks/use-platform-os"; // types import { IProject } from "@plane/types"; @@ -71,7 +72,7 @@ export const CreateProjectForm: FC = observer((props) => { defaultValues, reValidateMode: "onChange", }); - + const { isMobile } = usePlatformOS(); const handleAddToFavorites = (projectId: string) => { if (!workspaceSlug) return; @@ -283,6 +284,7 @@ export const CreateProjectForm: FC = observer((props) => { )} /> = observer((props) => { project: { removeMemberFromProject, getProjectMemberDetails, updateMember }, } = useMember(); const { captureEvent } = useEventTracker(); - + const { isMobile } = usePlatformOS(); // derived values const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN; const userDetails = getProjectMemberDetails(userId); @@ -171,7 +172,7 @@ export const ProjectMemberListItem: React.FC = observer((props) => { })} {(isAdmin || userDetails.member?.id === currentUser?.id) && ( - + )} - + = observer((props) => { = observer((props) => { // store hooks const { captureProjectStateEvent, setTrackElement } = useEventTracker(); const { createState, updateState } = useProjectState(); + const { isMobile } = usePlatformOS(); // form info const { handleSubmit, @@ -239,7 +241,7 @@ export const CreateUpdateStateInline: React.FC = observer((props) => { name="group" control={control} render={({ field: { value, onChange } }) => ( - +
= observer((props) => { // store hooks const { setTrackElement } = useEventTracker(); const { markStateAsDefault, moveStatePosition } = useProjectState(); + const { isMobile } = usePlatformOS(); // derived values const groupStates = statesList.filter((s) => s.group === state.group); const groupLength = groupStates.length; @@ -109,11 +111,11 @@ export const StatesListItem: React.FC = observer((props) => { disabled={state.default || groupLength === 1} > {state.default ? ( - + ) : groupLength === 1 ? ( - + ) : ( diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx index fddea8478..8ebc19158 100644 --- a/web/components/ui/labels-list.tsx +++ b/web/components/ui/labels-list.tsx @@ -3,6 +3,8 @@ import { FC } from "react"; import { Tooltip } from "@plane/ui"; // types import { IIssueLabel } from "@plane/types"; +// hooks +import { usePlatformOS } from "hooks/use-platform-os"; type IssueLabelsListProps = { labels?: (IIssueLabel | undefined)[]; @@ -12,11 +14,12 @@ type IssueLabelsListProps = { export const IssueLabelsList: FC = (props) => { const { labels } = props; + const { isMobile } = usePlatformOS(); return ( <> {labels && ( <> - l?.name).join(", ")}> + l?.name).join(", ")} isMobile={isMobile}>
{`${labels.length} Labels`} diff --git a/web/components/web-hooks/form/secret-key.tsx b/web/components/web-hooks/form/secret-key.tsx index 11129fb07..0e98bc3ff 100644 --- a/web/components/web-hooks/form/secret-key.tsx +++ b/web/components/web-hooks/form/secret-key.tsx @@ -14,6 +14,8 @@ import { useWebhook, useWorkspace } from "hooks/store"; import { IWebhook } from "@plane/types"; // utils import { getCurrentHookAsCSV } from "../utils"; +// hooks +import { usePlatformOS } from "hooks/use-platform-os"; type Props = { data: Partial; @@ -30,7 +32,7 @@ export const WebhookSecretKey: FC = observer((props) => { // store hooks const { currentWorkspace } = useWorkspace(); const { currentWebhook, regenerateSecretKey, webhookSecretKey } = useWebhook(); - + const { isMobile } = usePlatformOS(); const handleCopySecretKey = () => { if (!webhookSecretKey) return; @@ -108,7 +110,7 @@ export const WebhookSecretKey: FC = observer((props) => { {webhookSecretKey && (
{SECRET_KEY_OPTIONS.map((option) => ( - + diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx index 210bbbd3a..2e113414d 100644 --- a/web/components/workspace/help-section.tsx +++ b/web/components/workspace/help-section.tsx @@ -10,6 +10,7 @@ import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui"; // hooks import { useApplication } from "hooks/store"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; +import { usePlatformOS } from "hooks/use-platform-os"; // assets import packageJson from "package.json"; @@ -41,6 +42,7 @@ export const WorkspaceHelpSection: React.FC = observe theme: { sidebarCollapsed, toggleSidebar }, commandPalette: { toggleShortcutModal }, } = useApplication(); + const { isMobile } = usePlatformOS(); // states const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false); // refs @@ -69,7 +71,7 @@ export const WorkspaceHelpSection: React.FC = observe
)}
- + - + - +