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

feat: sidebar select option truncate (#334)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-02-23 19:54:28 +05:30 committed by GitHub
parent 946dddb6b2
commit 443c187cde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
apps/app/components/issues/sidebar-select/cycle.tsx
View File

@ -8,7 +8,7 @@ import useSWR, { mutate } from "swr";
import issuesService from "services/issues.service"; import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service"; import cyclesService from "services/cycles.service";
// ui // ui
import { Spinner, CustomSelect } from "components/ui"; import { Spinner, CustomSelect, Tooltip } from "components/ui";
// icons // icons
import { CyclesIcon } from "components/icons"; import { CyclesIcon } from "components/icons";
// types // types
@ -65,11 +65,19 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip
position="top-right"
tooltipHeading="Cycle"
tooltipContent={issueCycle ? issueCycle.cycle_detail.name : "None"}
>
<span <span
className={`hidden truncate text-left sm:block ${issueCycle ? "" : "text-gray-900"}`} className={` w-full max-w-[125px] truncate text-left sm:block ${
issueCycle ? "" : "text-gray-900"
}`}
> >
{issueCycle ? issueCycle.cycle_detail.name : "None"} {issueCycle ? issueCycle.cycle_detail.name : "None"}
</span> </span>
</Tooltip>
} }
value={issueCycle?.cycle_detail.id} value={issueCycle?.cycle_detail.id}
onChange={(value: any) => { onChange={(value: any) => {
@ -84,11 +92,15 @@ export const SidebarCycleSelect: React.FC<Props> = ({
<> <>
{cycles.map((option) => ( {cycles.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}> <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>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <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> </CustomSelect.Option>
</> </>
) : ( ) : (

20
apps/app/components/issues/sidebar-select/module.tsx
View File

@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
// services // services
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// ui // ui
import { Spinner, CustomSelect } from "components/ui"; import { Spinner, CustomSelect, Tooltip } from "components/ui";
// icons // icons
import { RectangleGroupIcon } from "@heroicons/react/24/outline"; import { RectangleGroupIcon } from "@heroicons/react/24/outline";
// types // types
@ -64,11 +64,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<div className="space-y-1 sm:basis-1/2"> <div className="space-y-1 sm:basis-1/2">
<CustomSelect <CustomSelect
label={ label={
<Tooltip
position="top-right"
tooltipHeading="Module"
tooltipContent={modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
>
<span <span
className={`hidden truncate text-left sm:block ${issueModule ? "" : "text-gray-900"}`} className={`w-full max-w-[125px] truncate text-left sm:block ${
issueModule ? "" : "text-gray-900"
}`}
> >
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"} {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
</span> </span>
</Tooltip>
} }
value={issueModule?.module_detail?.id} value={issueModule?.module_detail?.id}
onChange={(value: any) => { onChange={(value: any) => {
@ -83,11 +91,15 @@ export const SidebarModuleSelect: React.FC<Props> = ({
<> <>
{modules.map((option) => ( {modules.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}> <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>
))} ))}
<CustomSelect.Option value={null} className="capitalize"> <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> </CustomSelect.Option>
</> </>
) : ( ) : (