Skip to content

Commit cb63240

Browse files
rameshkumarchandrasriramveeraghanta
rameshkumarchandra
and
sriramveeraghanta
authored
[WEB-713] style: remove tooltips in mobile responsiveness (#3948)
Co-authored-by: sriram veeraghanta <[email protected]>
1 parent b930d98 commit cb63240

File tree

70 files changed

+327
-147
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+327
-147
lines changed

‎packages/ui/src/tooltip/tooltip.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ interface ITooltipProps {
2929
className?: string;
3030
openDelay?: number;
3131
closeDelay?: number;
32+
isMobile?: boolean;
3233
}
3334

3435
export const Tooltip: React.FC<ITooltipProps> = ({
@@ -40,14 +41,15 @@ export const Tooltip: React.FC<ITooltipProps> = ({
4041
className = "",
4142
openDelay = 200,
4243
closeDelay,
44+
isMobile = false,
4345
}) => (
4446
<Tooltip2
4547
disabled={disabled}
4648
hoverOpenDelay={openDelay}
4749
hoverCloseDelay={closeDelay}
4850
content={
4951
<div
50-
className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
52+
className={`relative ${isMobile ? "hidden" : "block"} z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
5153
>
5254
{tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
5355
{tooltipContent}

‎web/components/api-token/modal/generated-token-details.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { renderFormattedDate } from "helpers/date-time.helper";
66
import { copyTextToClipboard } from "helpers/string.helper";
77
// types
88
import { IApiToken } from "@plane/types";
9+
// hooks
10+
import { usePlatformOS } from "hooks/use-platform-os";
911

1012
type Props = {
1113
handleClose: () => void;
@@ -14,7 +16,7 @@ type Props = {
1416

1517
export const GeneratedTokenDetails: React.FC<Props> = (props) => {
1618
const { handleClose, tokenDetails } = props;
17-
19+
const { isMobile } = usePlatformOS();
1820
const copyApiToken = (token: string) => {
1921
copyTextToClipboard(token).then(() =>
2022
setToast({
@@ -40,7 +42,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
4042
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"
4143
>
4244
{tokenDetails.token}
43-
<Tooltip tooltipContent="Copy secret key">
45+
<Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
4446
<Copy className="h-4 w-4 text-custom-text-400" />
4547
</Tooltip>
4648
</button>

‎web/components/api-token/token-list-item.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { XCircle } from "lucide-react";
33
// components
44
import { Tooltip } from "@plane/ui";
55
import { DeleteApiTokenModal } from "components/api-token";
6+
import { usePlatformOS } from "hooks/use-platform-os";
67
// ui
78
// helpers
89
import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
@@ -17,12 +18,14 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
1718
const { token } = props;
1819
// states
1920
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
21+
// hooks
22+
const { isMobile } = usePlatformOS();
2023

2124
return (
2225
<>
2326
<DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
2427
<div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
25-
<Tooltip tooltipContent="Delete token">
28+
<Tooltip tooltipContent="Delete token" isMobile={isMobile}>
2629
<button
2730
onClick={() => setDeleteModalOpen(true)}
2831
className="absolute right-4 hidden place-items-center group-hover:grid"
@@ -33,9 +36,8 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
3336
<div className="flex w-4/5 items-center">
3437
<h5 className="truncate text-sm font-medium">{token.label}</h5>
3538
<span
36-
className={`${
37-
token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
38-
} ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
39+
className={`${token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
40+
} ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
3941
>
4042
{token.is_active ? "Active" : "Expired"}
4143
</span>

‎web/components/command-palette/command-modal.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,11 @@ import {
2020
} from "components/command-palette";
2121
import { ISSUE_DETAILS } from "constants/fetch-keys";
2222
import { useApplication, useEventTracker, useProject } from "hooks/store";
23+
import { usePlatformOS } from "hooks/use-platform-os";
2324
// services
2425
import useDebounce from "hooks/use-debounce";
2526
import { IssueService } from "services/issue";
2627
import { WorkspaceService } from "services/workspace.service";
27-
// hooks
28-
// components
2928
// types
3029
import { IWorkspaceSearchResults } from "@plane/types";
3130
// fetch-keys
@@ -37,6 +36,7 @@ const issueService = new IssueService();
3736
export const CommandModal: React.FC = observer(() => {
3837
// hooks
3938
const { getProjectById } = useProject();
39+
const { isMobile } = usePlatformOS();
4040
// states
4141
const [placeholder, setPlaceholder] = useState("Type a command or search...");
4242
const [resultsCount, setResultsCount] = useState(0);
@@ -197,7 +197,7 @@ export const CommandModal: React.FC = observer(() => {
197197
</div>
198198
)}
199199
{projectId && (
200-
<Tooltip tooltipContent="Toggle workspace level search">
200+
<Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
201201
<div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
202202
<button
203203
type="button"

‎web/components/common/breadcrumb-link.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from "next/link";
22
import { Tooltip } from "@plane/ui";
3+
import { usePlatformOS } from "hooks/use-platform-os";
34

45
type Props = {
56
label?: string;
@@ -9,8 +10,9 @@ type Props = {
910

1011
export const BreadcrumbLink: React.FC<Props> = (props) => {
1112
const { href, label, icon } = props;
13+
const { isMobile } = usePlatformOS();
1214
return (
13-
<Tooltip tooltipContent={label} position="bottom">
15+
<Tooltip tooltipContent={label} position="bottom" isMobile={isMobile}>
1416
<li className="flex items-center space-x-2" tabIndex={-1}>
1517
<div className="flex flex-wrap items-center gap-2.5">
1618
{href ? (

‎web/components/core/activity.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect } from "react";
22
import { observer } from "mobx-react-lite";
33
import { useRouter } from "next/router";
4+
import { usePlatformOS } from "hooks/use-platform-os";
45
// store hooks
56
// icons
67
import {
@@ -29,9 +30,13 @@ import { IIssueActivity } from "@plane/types";
2930
export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
3031
const router = useRouter();
3132
const { workspaceSlug } = router.query;
33+
const { isMobile } = usePlatformOS();
3234

3335
return (
34-
<Tooltip tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
36+
<Tooltip
37+
tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
38+
isMobile={isMobile}
39+
>
3540
{activity?.issue_detail ? (
3641
<a
3742
aria-disabled={activity.issue === null}

‎web/components/core/modals/existing-issues-list-modal.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Rocket, Search, X } from "lucide-react";
55
import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
66

77
import useDebounce from "hooks/use-debounce";
8-
8+
import { usePlatformOS } from "hooks/use-platform-os";
99
import { ProjectService } from "services/project";
1010
// ui
1111
// types
@@ -40,7 +40,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
4040
const [isSearching, setIsSearching] = useState(false);
4141
const [isSubmitting, setIsSubmitting] = useState(false);
4242
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
43-
43+
const { isMobile } = usePlatformOS();
4444
const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
4545

4646
const handleClose = () => {
@@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
154154
</div>
155155
)}
156156
{workspaceLevelToggle && (
157-
<Tooltip tooltipContent="Toggle workspace level search">
157+
<Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
158158
<div
159159
className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
160160
isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"

‎web/components/core/sidebar/links-list.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
77
import { calculateTimeAgo } from "helpers/date-time.helper";
88
// hooks
99
import { useMember } from "hooks/store";
10+
import { usePlatformOS } from "hooks/use-platform-os";
1011
// types
1112
import { ILinkDetails, UserAuth } from "@plane/types";
1213

@@ -19,7 +20,7 @@ type Props = {
1920

2021
export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, handleEditLink, userAuth }) => {
2122
const { getUserDetails } = useMember();
22-
23+
const { isMobile } = usePlatformOS();
2324
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
2425

2526
const copyToClipboard = (text: string) => {
@@ -42,7 +43,7 @@ export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, h
4243
<span className="py-1">
4344
<LinkIcon className="h-3 w-3 flex-shrink-0" />
4445
</span>
45-
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url}>
46+
<Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
4647
<span
4748
className="cursor-pointer truncate text-xs"
4849
onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}

‎web/components/cycles/active-cycle/root.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Link from "next/link";
44
import useSWR from "swr";
55
// hooks
66
import { useCycle, useCycleFilter, useIssues, useMember, useProject } from "hooks/store";
7+
import { usePlatformOS } from "hooks/use-platform-os";
78
// ui
89
import { SingleProgressStats } from "components/core";
910
import {
@@ -46,6 +47,8 @@ interface IActiveCycleDetails {
4647
export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
4748
// props
4849
const { workspaceSlug, projectId } = props;
50+
// hooks
51+
const { isMobile } = usePlatformOS();
4952
// store hooks
5053
const {
5154
issues: { fetchActiveCycleIssues },
@@ -197,7 +200,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
197200
<span className="h-5 w-5">
198201
<CycleGroupIcon cycleGroup={cycleStatus} className="h-4 w-4" />
199202
</span>
200-
<Tooltip tooltipContent={activeCycle.name} position="top-left">
203+
<Tooltip tooltipContent={activeCycle.name} position="top-left" isMobile={isMobile}>
201204
<h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
202205
</Tooltip>
203206
</span>
@@ -325,14 +328,15 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
325328
<PriorityIcon priority={issue.priority} withContainer size={12} />
326329

327330
<Tooltip
331+
isMobile={isMobile}
328332
tooltipHeading="Issue ID"
329333
tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
330334
>
331335
<span className="flex-shrink-0 text-xs text-custom-text-200">
332336
{currentProjectDetails?.identifier}-{issue.sequence_id}
333337
</span>
334338
</Tooltip>
335-
<Tooltip position="top-left" tooltipContent={issue.name}>
339+
<Tooltip position="top-left" tooltipContent={issue.name} isMobile={isMobile}>
336340
<span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
337341
</Tooltip>
338342
</div>
@@ -345,7 +349,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
345349
buttonVariant="background-with-text"
346350
/>
347351
{issue.target_date && (
348-
<Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
352+
<Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)} isMobile={isMobile}>
349353
<div className="flex h-full cursor-not-allowed items-center gap-1.5 rounded bg-custom-background-80 px-2 py-0.5 text-xs">
350354
<CalendarCheck className="h-3 w-3 flex-shrink-0" />
351355
<span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>

‎web/components/cycles/board/cycles-board-card.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
33
import Link from "next/link";
44
import { useRouter } from "next/router";
55
// hooks
6+
import { usePlatformOS } from "hooks/use-platform-os";
67
// components
78
import { Info, Star } from "lucide-react";
89
import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
@@ -38,6 +39,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
3839
const { getUserDetails } = useMember();
3940
// computed
4041
const cycleDetails = getCycleById(cycleId);
42+
// hooks
43+
const { isMobile } = usePlatformOS();
4144

4245
if (!cycleDetails) return null;
4346

@@ -145,7 +148,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
145148
<span className="flex-shrink-0">
146149
<CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />
147150
</span>
148-
<Tooltip tooltipContent={cycleDetails.name} position="top">
151+
<Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
149152
<span className="truncate text-base font-medium">{cycleDetails.name}</span>
150153
</Tooltip>
151154
</div>
@@ -176,7 +179,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
176179
<span className="text-xs text-custom-text-300">{issueCount}</span>
177180
</div>
178181
{cycleDetails.assignee_ids.length > 0 && (
179-
<Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`}>
182+
<Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`} isMobile={isMobile}>
180183
<div className="flex cursor-default items-center gap-1">
181184
<AvatarGroup showTooltip={false}>
182185
{cycleDetails.assignee_ids.map((assigne_id) => {
@@ -190,6 +193,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
190193
</div>
191194

192195
<Tooltip
196+
isMobile={isMobile}
193197
tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
194198
position="top-left"
195199
>

‎web/components/cycles/cycles-view-header.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ListFilter, Search, X } from "lucide-react";
55
// hooks
66
import { useCycleFilter } from "hooks/store";
77
import useOutsideClickDetector from "hooks/use-outside-click-detector";
8+
import { usePlatformOS } from "hooks/use-platform-os";
89
// components
910
import { CycleFiltersSelection } from "components/cycles";
1011
import { FiltersDropdown } from "components/issues";
@@ -36,6 +37,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
3637
updateFilters,
3738
updateSearchQuery,
3839
} = useCycleFilter();
40+
const { isMobile } = usePlatformOS();
3941
// outside click detector hook
4042
useOutsideClickDetector(inputRef, () => {
4143
if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@@ -134,7 +136,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
134136
</FiltersDropdown>
135137
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
136138
{CYCLE_VIEW_LAYOUTS.map((layout) => (
137-
<Tooltip key={layout.key} tooltipContent={layout.title}>
139+
<Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
138140
<button
139141
type="button"
140142
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${

‎web/components/cycles/gantt-chart/blocks.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Link from "next/link";
22
import { observer } from "mobx-react";
33
import { useRouter } from "next/router";
44
// hooks
5+
import { usePlatformOS } from "hooks/use-platform-os";
56
// ui
67
import { Tooltip, ContrastIcon } from "@plane/ui";
78
// helpers
@@ -23,7 +24,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
2324
const { getCycleById } = useCycle();
2425
// derived values
2526
const cycleDetails = getCycleById(cycleId);
26-
27+
const { isMobile } = usePlatformOS();
2728
const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
2829

2930
return (
@@ -45,6 +46,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
4546
>
4647
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
4748
<Tooltip
49+
isMobile={isMobile}
4850
tooltipContent={
4951
<div className="space-y-1">
5052
<h5>{cycleDetails?.name}</h5>

‎web/components/cycles/list/cycles-list-item.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
33
import Link from "next/link";
44
import { useRouter } from "next/router";
55
// hooks
6+
import { usePlatformOS } from "hooks/use-platform-os";
67
import { Check, Info, Star, User2 } from "lucide-react";
78
import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
89
import { CycleQuickActions } from "components/cycles";
@@ -33,6 +34,8 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
3334
const { cycleId, workspaceSlug, projectId } = props;
3435
// router
3536
const router = useRouter();
37+
// hooks
38+
const { isMobile } = usePlatformOS();
3639
// store hooks
3740
const { captureEvent } = useEventTracker();
3841
const {
@@ -164,7 +167,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
164167

165168
<div className="relative flex items-center gap-2.5 overflow-hidden">
166169
<CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
167-
<Tooltip tooltipContent={cycleDetails.name} position="top">
170+
<Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
168171
<span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
169172
{cycleDetails.name}
170173
</span>
@@ -196,7 +199,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
196199
</div>
197200

198201
<div className="relative flex flex-shrink-0 items-center gap-3">
199-
<Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`}>
202+
<Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
200203
<div className="flex w-10 cursor-default items-center justify-center">
201204
{cycleDetails.assignee_ids?.length > 0 ? (
202205
<AvatarGroup showTooltip={false}>

0 commit comments

Comments
 (0)