Skip to content

Commit

Permalink
feat: sidebar select option truncate (#334)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anmolsinghbhatia
anmolsinghbhatia authored Feb 23, 2023
1 parent 946dddb commit 443c187
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 14 deletions.
26 changes: 19 additions & 7 deletions apps/app/components/issues/sidebar-select/cycle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import useSWR, { mutate } from "swr";
import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service";
// ui
import { Spinner, CustomSelect } from "components/ui";
import { Spinner, CustomSelect, Tooltip } from "components/ui";
// icons
import { CyclesIcon } from "components/icons";
// types
Expand Down Expand Up @@ -65,11 +65,19 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2">
<CustomSelect
label={
<span
className={`hidden truncate text-left sm:block ${issueCycle ? "" : "text-gray-900"}`}
<Tooltip
position="top-right"
tooltipHeading="Cycle"
tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
>
{issueCycle ? issueCycle.cycle_detail.name : "None"}
</span>
<span
className={` w-full max-w-[125px] truncate text-left sm:block ${
issueCycle ? "" : "text-gray-900"
}`}
>
{issueCycle ? issueCycle.cycle_detail.name : "None"}
</span>
</Tooltip>
}
value={issueCycle?.cycle_detail.id}
onChange={(value: any) => {
Expand All @@ -84,11 +92,15 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<>
{cycles.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}>
{option.name}
<Tooltip position="left-bottom" tooltipContent={option.name}>
<span className="w-full max-w-[125px] truncate ">{option.name}</span>
</Tooltip>
</CustomSelect.Option>
))}
<CustomSelect.Option value={null} className="capitalize">
None
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate">None</span>
</Tooltip>
</CustomSelect.Option>
</>
) : (
Expand Down
26 changes: 19 additions & 7 deletions apps/app/components/issues/sidebar-select/module.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
// services
import modulesService from "services/modules.service";
// ui
import { Spinner, CustomSelect } from "components/ui";
import { Spinner, CustomSelect, Tooltip } from "components/ui";
// icons
import { RectangleGroupIcon } from "@heroicons/react/24/outline";
// types
Expand Down Expand Up @@ -64,11 +64,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2">
<CustomSelect
label={
<span
className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`}
<Tooltip
position="top-right"
tooltipHeading="Module"
tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
>
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
</span>
<span
className={`w-full max-w-[125px] truncate text-left sm:block ${
issueModule ? "" : "text-gray-900"
}`}
>
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
</span>
</Tooltip>
}
value={issueModule?.module_detail?.id}
onChange={(value: any) => {
Expand All @@ -83,11 +91,15 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<>
{modules.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}>
{option.name}
<Tooltip position="left-bottom" tooltipContent={option.name}>
<span className="w-full max-w-[125px] truncate">{option.name}</span>
</Tooltip>
</CustomSelect.Option>
))}
<CustomSelect.Option value={null} className="capitalize">
None
<Tooltip position="left-bottom" tooltipContent="None">
<span className="w-full max-w-[125px] truncate"> None </span>
</Tooltip>
</CustomSelect.Option>
</>
) : (
Expand Down

1 comment on commit 443c187

@vercel
Copy link

@vercel vercel bot commented on 443c187 Feb 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./apps/app

plane-dev-git-develop-caravel.vercel.app
plane-dev.vercel.app
plane-dev-caravel.vercel.app

Please sign in to comment.