thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: adjust tooltip position and spacing in workspace id and title in spreadsheet (#1420)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-06-28 17:27:43 +05:30 committed by GitHub
parent 1a668c19a5
commit 01f465fdfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/core/board-view/single-issue.tsx
View File

@ -368,7 +368,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed}
tooltipPosition="left"
user={user}
selfPositioned
/>
@ -378,7 +377,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed}
tooltipPosition="left"
user={user}
selfPositioned
/>

14
apps/app/components/core/spreadsheet-view/single-issue.tsx
View File

@ -43,6 +43,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
type Props = {
issue: IIssue;
index: number;
expanded: boolean;
handleToggleExpand: (issueId: string) => void;
properties: Properties;
@ -57,6 +58,7 @@ type Props = {
export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue,
index,
expanded,
handleToggleExpand,
properties,
@ -165,6 +167,8 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 68}px`;
const tooltipPosition = index === 0 ? "bottom" : "top";
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
@ -241,16 +245,16 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
)}
</div>
<div className="h-6 w-6 flex justify-center items-center">
{issue.sub_issues_count > 0 && (
<div className="h-6 w-6 flex justify-center items-center">
<button
className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
onClick={() => handleToggleExpand(issue.id)}
>
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
</button>
)}
</div>
)}
</div>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
@ -265,6 +269,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
customButton
user={user}
isNotAllowed={isNotAllowed}
@ -277,6 +282,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
noBorder
user={user}
isNotAllowed={isNotAllowed}
@ -289,6 +295,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
customButton
user={user}
isNotAllowed={isNotAllowed}
@ -301,6 +308,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
customButton
user={user}
isNotAllowed={isNotAllowed}
@ -313,6 +321,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
<ViewDueDateSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
tooltipPosition={tooltipPosition}
noBorder
user={user}
isNotAllowed={isNotAllowed}
@ -325,6 +334,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
user={user}
isNotAllowed={isNotAllowed}
/>

4
apps/app/components/core/spreadsheet-view/spreadsheet-issues.tsx
View File

@ -10,6 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
type Props = {
key: string;
issue: IIssue;
index: number;
expandedIssues: string[];
setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
properties: Properties;
@ -24,6 +25,7 @@ type Props = {
export const SpreadsheetIssues: React.FC<Props> = ({
key,
index,
issue,
expandedIssues,
setExpandedIssues,
@ -57,6 +59,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
<div>
<SingleSpreadsheetIssue
issue={issue}
index={index}
expanded={isExpanded}
handleToggleExpand={handleToggleExpand}
gridTemplateColumns={gridTemplateColumns}
@ -77,6 +80,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
<SpreadsheetIssues
key={subIssue.id}
issue={subIssue}
index={index}
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
gridTemplateColumns={gridTemplateColumns}

1
apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
View File

@ -70,6 +70,7 @@ export const SpreadsheetView: React.FC<Props> = ({
{spreadsheetIssues.map((issue: IIssue, index) => (
<SpreadsheetIssues
key={`${issue.id}_${index}`}
index={index}
issue={issue}
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}

6
apps/app/components/issues/view-select/assignee.tsx
View File

@ -20,8 +20,8 @@ type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
tooltipPosition?: "top" | "bottom";
selfPositioned?: boolean;
tooltipPosition?: "left" | "right";
customButton?: boolean;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
@ -32,7 +32,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
partialUpdateIssue,
position = "left",
selfPositioned = false,
tooltipPosition = "right",
tooltipPosition = "top",
user,
isNotAllowed,
customButton = false,
@ -69,7 +69,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
const assigneeLabel = (
<Tooltip
position={`top-${tooltipPosition}`}
position={tooltipPosition}
tooltipHeading="Assignees"
tooltipContent={
issue.assignee_details.length > 0

8
apps/app/components/issues/view-select/due-date.tsx
View File

@ -12,6 +12,7 @@ import { ICurrentUserResponse, IIssue } from "types";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
tooltipPosition?: "top" | "bottom";
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
@ -20,6 +21,7 @@ type Props = {
export const ViewDueDateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
tooltipPosition = "top",
noBorder = false,
user,
isNotAllowed,
@ -28,7 +30,11 @@ export const ViewDueDateSelect: React.FC<Props> = ({
const { workspaceSlug } = router.query;
return (
<Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
<Tooltip
tooltipHeading="Due Date"
tooltipContent={issue.target_date ?? "N/A"}
position={tooltipPosition}
>
<div
className={`group relative max-w-[6.5rem] ${
issue.target_date === null

4
apps/app/components/issues/view-select/estimate.tsx
View File

@ -17,6 +17,7 @@ type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
tooltipPosition?: "top" | "bottom";
selfPositioned?: boolean;
customButton?: boolean;
user: ICurrentUserResponse | undefined;
@ -27,6 +28,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
position = "left",
tooltipPosition = "top",
selfPositioned = false,
customButton = false,
user,
@ -40,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
const estimateLabels = (
<Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
<Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
<div className="flex items-center gap-1 text-brand-secondary">
<PlayIcon className="h-3.5 w-3.5 -rotate-90" />
{estimateValue ?? "None"}

6
apps/app/components/issues/view-select/label.tsx
View File

@ -22,7 +22,7 @@ type Props = {
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
tooltipPosition?: "left" | "right";
tooltipPosition?: "top" | "bottom";
customButton?: boolean;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
@ -33,7 +33,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
partialUpdateIssue,
position = "left",
selfPositioned = false,
tooltipPosition = "right",
tooltipPosition = "top",
user,
isNotAllowed,
customButton = false,
@ -68,7 +68,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
const labelsLabel = (
<Tooltip
position={`top-${tooltipPosition}`}
position={tooltipPosition}
tooltipHeading="Labels"
tooltipContent={
issue.label_details.length > 0

8
apps/app/components/issues/view-select/priority.tsx
View File

@ -19,6 +19,7 @@ type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
tooltipPosition?: "top" | "bottom";
selfPositioned?: boolean;
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
@ -29,6 +30,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
position = "left",
tooltipPosition = "top",
selfPositioned = false,
noBorder = false,
user,
@ -75,7 +77,11 @@ export const ViewPrioritySelect: React.FC<Props> = ({
: "border-brand-base"
} items-center`}
>
<Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
<Tooltip
tooltipHeading="Priority"
tooltipContent={issue.priority ?? "None"}
position={tooltipPosition}
>
<span className="flex gap-1 items-center text-brand-secondary text-xs">
{getPriorityIcon(
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",

3
apps/app/components/issues/view-select/state.tsx
View File

@ -21,6 +21,7 @@ type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
tooltipPosition?: "top" | "bottom";
selfPositioned?: boolean;
customButton?: boolean;
user: ICurrentUserResponse | undefined;
@ -31,6 +32,7 @@ export const ViewStateSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
position = "left",
tooltipPosition = "top",
selfPositioned = false,
customButton = false,
user,
@ -64,6 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
<Tooltip
tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
position={tooltipPosition}
>
<div className="flex items-center cursor-pointer gap-2 text-brand-secondary">
{selectedOption &&