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

26
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 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
@ -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) => {
@ -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>
</>
) : (

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

@ -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
@ -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) => {
@ -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>
</>
) : (