github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: issue sidebar module , cycle and label dropdown fix (#650)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-31 16:04:36 +05:30 committed by GitHub
parent e3005b7776
commit e5507651c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,8 @@ import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service"; import cyclesService from "services/cycles.service";
// ui // ui
import { Spinner, CustomSelect, Tooltip } from "components/ui"; import { Spinner, CustomSelect, Tooltip } from "components/ui";
// helper
import { truncateText } from "helpers/string.helper";
// icons // icons
import { CyclesIcon } from "components/icons"; import { CyclesIcon } from "components/icons";
// types // types
@ -65,13 +67,15 @@ 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={
<span <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}>
className={`w-full max-w-[125px] truncate text-left sm:block ${ <span
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"} >
</span> {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "None"}
</span>
</Tooltip>
} }
value={issueCycle?.cycle_detail.id} value={issueCycle?.cycle_detail.id}
onChange={(value: any) => { onChange={(value: any) => {
@ -81,6 +85,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
}} }}
width="w-full" width="w-full"
position="right" position="right"
maxHeight="rg"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{incompleteCycles ? ( {incompleteCycles ? (
@ -89,7 +94,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
{incompleteCycles.map((option) => ( {incompleteCycles.map((option) => (
<CustomSelect.Option key={option.id} value={option.id}> <CustomSelect.Option key={option.id} value={option.id}>
<Tooltip position="left-bottom" tooltipContent={option.name}> <Tooltip position="left-bottom" tooltipContent={option.name}>
<span className="w-full max-w-[125px] truncate ">{option.name}</span> <span className="w-full truncate ">{truncateText(option.name, 15)}</span>
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}

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

@ -8,6 +8,8 @@ import useSWR, { mutate } from "swr";
import modulesService from "services/modules.service"; import modulesService from "services/modules.service";
// ui // ui
import { Spinner, CustomSelect, Tooltip } from "components/ui"; import { Spinner, CustomSelect, Tooltip } from "components/ui";
// helper
import { truncateText } from "helpers/string.helper";
// icons // icons
import { RectangleGroupIcon } from "@heroicons/react/24/outline"; import { RectangleGroupIcon } from "@heroicons/react/24/outline";
// types // types
@ -64,13 +66,15 @@ 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="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}>
<span <span
className={`w-full max-w-[125px] truncate text-left sm:block ${ className={`w-full max-w-[125px] truncate text-left sm:block ${
issueModule ? "" : "text-gray-900" issueModule ? "" : "text-gray-900"
}`} }`}
> >
{modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"} {truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}
</span> </span>
</Tooltip>
} }
value={issueModule?.module_detail?.id} value={issueModule?.module_detail?.id}
onChange={(value: any) => { onChange={(value: any) => {
@ -80,6 +84,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
}} }}
width="w-full" width="w-full"
position="right" position="right"
maxHeight="rg"
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{modules ? ( {modules ? (
@ -88,7 +93,7 @@ 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}>
<Tooltip position="left-bottom" tooltipContent={option.name}> <Tooltip position="left-bottom" tooltipContent={option.name}>
<span className="w-full max-w-[125px] truncate">{option.name}</span> <span className="w-full max-w-[125px] truncate">{truncateText(option.name, 15)}</span>
</Tooltip> </Tooltip>
</CustomSelect.Option> </CustomSelect.Option>
))} ))}

2
apps/app/components/issues/sidebar.tsx
View File

@ -598,7 +598,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
</form> </form>
)} )}
</div> </div>
<div className="py-1 text-xs"> <div className="min-h-[116px] py-1 text-xs">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<h4>Links</h4> <h4>Links</h4>
{!isNotAllowed && ( {!isNotAllowed && (