chore: format all files in monorepo (#3054)
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
sriram veeraghanta
parent
e5ae139178
commit
5b0066140f
721 changed files with 3739 additions and 4660 deletions
|
|
@ -61,7 +61,7 @@ export const IssueActivitySection: React.FC<Props> = ({
|
|||
<div className="relative pb-1">
|
||||
{activity.length > 1 && index !== activity.length - 1 ? (
|
||||
<span
|
||||
className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
|
||||
className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-custom-background-80"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : null}
|
||||
|
|
@ -82,7 +82,7 @@ export const IssueActivitySection: React.FC<Props> = ({
|
|||
alt={activityItem.actor_detail.display_name}
|
||||
height={24}
|
||||
width={24}
|
||||
className="rounded-full h-full w-full object-cover"
|
||||
className="h-full w-full rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
|
|
@ -98,7 +98,7 @@ export const IssueActivitySection: React.FC<Props> = ({
|
|||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 py-3">
|
||||
<div className="text-xs text-custom-text-200 break-words">
|
||||
<div className="break-words text-xs text-custom-text-200">
|
||||
{activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
|
||||
<span className="text-gray font-medium">Plane</span>
|
||||
) : activityItem.actor_detail.is_bot ? (
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`flex items-center justify-center h-[60px] border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-4 ${
|
||||
isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-200"
|
||||
className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-custom-primary/5 px-4 text-xs text-custom-primary ${
|
||||
isDragActive ? "border-custom-primary bg-custom-primary/10" : "border-custom-border-200"
|
||||
} ${isDragReject ? "bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
|
|
|
|||
|
|
@ -89,12 +89,12 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
|
|||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
Delete Attachment
|
||||
</Dialog.Title>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export const CommentCard: React.FC<Props> = ({
|
|||
</form>
|
||||
<div className={`relative ${isEditing ? "hidden" : ""}`}>
|
||||
{showAccessSpecifier && (
|
||||
<div className="absolute top-2.5 right-2.5 z-[1] text-custom-text-300">
|
||||
<div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
|
||||
{comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export const CommentReaction: FC<Props> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex gap-1.5 items-center mt-2">
|
||||
<div className="mt-2 flex items-center gap-1.5">
|
||||
{!readonly && (
|
||||
<ReactionSelector
|
||||
size="md"
|
||||
|
|
@ -69,7 +69,7 @@ export const CommentReaction: FC<Props> = (props) => {
|
|||
handleReactionClick(reaction);
|
||||
}}
|
||||
key={reaction}
|
||||
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
|
||||
className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
|
||||
commentReactions?.some((r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction)
|
||||
? "bg-custom-primary-100/10"
|
||||
: "bg-custom-background-80"
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
|
|||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
|
|||
setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
|
||||
setLocalTitleValue(issue.name);
|
||||
}
|
||||
}, [issue.id]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [issue.id]); // TODO: verify the exhaustive-deps warning
|
||||
|
||||
const handleDescriptionFormSubmit = useCallback(
|
||||
async (formData: Partial<IIssue>) => {
|
||||
|
|
@ -103,6 +104,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
|
|||
}, [issue, reset]);
|
||||
|
||||
// ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
|
||||
// TODO: Verify the exhaustive-deps warning
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const debouncedFormSave = useCallback(
|
||||
debounce(async () => {
|
||||
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
|
||||
|
|
@ -143,7 +146,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
|
|||
<h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
|
||||
)}
|
||||
{characterLimit && isAllowed && (
|
||||
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
|
||||
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
|
||||
<span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
|
||||
{watch("name").length}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -381,7 +381,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Title"
|
||||
className="resize-none text-xl w-full"
|
||||
className="w-full resize-none text-xl"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -336,7 +336,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
ref={ref}
|
||||
hasError={Boolean(errors.name)}
|
||||
placeholder="Issue Title"
|
||||
className="resize-none text-xl w-full focus:border-blue-400"
|
||||
className="w-full resize-none text-xl focus:border-blue-400"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -344,7 +344,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
|
||||
<div className="relative">
|
||||
<div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex rounded bg-custom-background-80">
|
||||
<div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
|
||||
{issueName && issueName !== "" && (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -546,7 +546,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
customButton={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
|
||||
>
|
||||
<div className="flex items-center gap-1 text-custom-text-200">
|
||||
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
|
||||
|
|
@ -570,7 +570,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-between gap-1 w-min cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
className="flex w-min cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => setParentIssueListModalOpen(true)}
|
||||
>
|
||||
<div className="flex items-center gap-1 text-custom-text-300">
|
||||
|
|
@ -613,7 +613,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
<span className="text-xs">Create more</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
|
|
@ -629,8 +629,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
|
|||
? "Updating Issue..."
|
||||
: "Update Issue"
|
||||
: isSubmitting
|
||||
? "Adding Issue..."
|
||||
: "Add Issue"}
|
||||
? "Adding Issue..."
|
||||
: "Add Issue"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
|
||||
<div className="h-full w-full overflow-hidden bg-custom-background-100 pt-4">
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<CalendarChart
|
||||
issuesFilterStore={issuesFilterStore}
|
||||
|
|
|
|||
|
|
@ -49,19 +49,19 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
|||
|
||||
if (!calendarPayload)
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-full w-full flex flex-col overflow-hidden">
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<CalendarHeader issuesFilterStore={issuesFilterStore} />
|
||||
<CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
{layout === "month" && (
|
||||
<div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
|
||||
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
|
||||
{allWeeksOfActiveMonth &&
|
||||
Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
|
||||
<CalendarWeekDays
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { Droppable } from "@hello-pangea/dnd";
|
||||
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { CalendarIssueBlocks, ICalendarDate, CalendarQuickAddIssueForm } from "components/issues";
|
||||
// helpers
|
||||
|
|
@ -56,10 +53,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="group w-full h-full relative flex flex-col bg-custom-background-90">
|
||||
<div className="group relative flex h-full w-full flex-col bg-custom-background-90">
|
||||
{/* header */}
|
||||
<div
|
||||
className={`text-xs text-right flex-shrink-0 py-1 px-2 ${
|
||||
className={`flex-shrink-0 px-2 py-1 text-right text-xs ${
|
||||
calendarLayout === "month" // if month layout, highlight current month days
|
||||
? date.is_current_month
|
||||
? "font-medium"
|
||||
|
|
@ -76,11 +73,11 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{/* content */}
|
||||
<div className="w-full h-full">
|
||||
<div className="h-full w-full">
|
||||
<Droppable droppableId={renderDateFormat(date.date)} isDropDisabled={false}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`h-full w-full overflow-y-auto select-none ${
|
||||
className={`h-full w-full select-none overflow-y-auto ${
|
||||
snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
|
||||
? "bg-custom-background-90"
|
||||
: "bg-custom-background-100"
|
||||
|
|
@ -90,7 +87,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
|||
>
|
||||
<CalendarIssueBlocks issues={issues} issueIdList={issueIdList} quickActions={quickActions} />
|
||||
{enableQuickIssueCreate && (
|
||||
<div className="py-1 px-2">
|
||||
<div className="px-2 py-1">
|
||||
<CalendarQuickAddIssueForm
|
||||
formKey="target_date"
|
||||
groupId={renderDateFormat(date.date)}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const CalendarMonthsDropdown: React.FC = observer(() => {
|
|||
<button
|
||||
type="button"
|
||||
ref={setReferenceElement}
|
||||
className="outline-none text-xl font-semibold"
|
||||
className="text-xl font-semibold outline-none"
|
||||
disabled={calendarLayout === "week"}
|
||||
>
|
||||
{calendarLayout === "month"
|
||||
|
|
@ -88,7 +88,7 @@ export const CalendarMonthsDropdown: React.FC = observer(() => {
|
|||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
className="bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded w-56 p-3 divide-y divide-custom-border-200"
|
||||
className="w-56 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 pb-3">
|
||||
<button
|
||||
|
|
@ -113,12 +113,12 @@ export const CalendarMonthsDropdown: React.FC = observer(() => {
|
|||
<ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 items-stretch justify-items-stretch pt-3">
|
||||
<div className="grid grid-cols-4 items-stretch justify-items-stretch gap-4 pt-3">
|
||||
{Object.values(MONTHS_LIST).map((month, index) => (
|
||||
<button
|
||||
key={month.shortTitle}
|
||||
type="button"
|
||||
className="text-xs hover:bg-custom-background-80 rounded py-0.5"
|
||||
className="rounded py-0.5 text-xs hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
|
||||
handleDateChange(newDate);
|
||||
|
|
|
|||
|
|
@ -91,13 +91,13 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
|
|||
<button
|
||||
type="button"
|
||||
ref={setReferenceElement}
|
||||
className={`outline-none bg-custom-background-80 text-xs rounded flex items-center gap-1.5 px-2.5 py-1 hover:bg-custom-background-80 ${
|
||||
className={`flex items-center gap-1.5 rounded bg-custom-background-80 px-2.5 py-1 text-xs outline-none hover:bg-custom-background-80 ${
|
||||
open ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium">Options</div>
|
||||
<div
|
||||
className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
|
||||
className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
|
||||
>
|
||||
<ChevronUp width={12} strokeWidth={2} />
|
||||
</div>
|
||||
|
|
@ -117,14 +117,14 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
|
|||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-sm rounded min-w-[12rem] p-1 overflow-hidden"
|
||||
className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 p-1 shadow-custom-shadow-sm"
|
||||
>
|
||||
<div>
|
||||
{Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
|
||||
<button
|
||||
key={layout}
|
||||
type="button"
|
||||
className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
|
||||
className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
|
||||
onClick={() => handleLayoutChange(layoutDetails.key)}
|
||||
>
|
||||
{layoutDetails.title}
|
||||
|
|
@ -133,7 +133,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
|
|||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
|
||||
className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
|
||||
onClick={handleToggleWeekends}
|
||||
>
|
||||
Show weekends
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 px-3 mb-4">
|
||||
<div className="mb-4 flex items-center justify-between gap-2 px-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button type="button" className="grid place-items-center" onClick={handlePrevious}>
|
||||
<ChevronLeft size={16} strokeWidth={2} />
|
||||
|
|
@ -102,7 +102,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
|
|||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
className="px-2.5 py-1 text-xs bg-custom-background-80 rounded font-medium text-custom-text-200 hover:text-custom-text-100"
|
||||
className="rounded bg-custom-background-80 px-2.5 py-1 text-xs font-medium text-custom-text-200 hover:text-custom-text-100"
|
||||
onClick={handleToday}
|
||||
>
|
||||
Today
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
|||
const customActionButton = (
|
||||
<div
|
||||
ref={menuActionRef}
|
||||
className={`w-full cursor-pointer text-custom-sidebar-text-400 rounded p-1 hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
|
||||
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
|
|
@ -60,39 +60,39 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
|
|||
<Draggable key={issue.id} draggableId={issue.id} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="p-1 px-2 relative cursor-pointer"
|
||||
className="relative cursor-pointer p-1 px-2"
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
onClick={() => handleIssuePeekOverview(issue)}
|
||||
>
|
||||
{issue?.tempId !== undefined && (
|
||||
<div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
|
||||
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center justify-between gap-1.5 border-[0.5px] border-custom-border-100 ${
|
||||
className={`group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-custom-border-100 px-1 py-1.5 shadow-custom-shadow-2xs ${
|
||||
snapshot.isDragging
|
||||
? "shadow-custom-shadow-rg bg-custom-background-90"
|
||||
? "bg-custom-background-90 shadow-custom-shadow-rg"
|
||||
: "bg-custom-background-100 hover:bg-custom-background-90"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 h-full">
|
||||
<div className="flex h-full items-center gap-1.5">
|
||||
<span
|
||||
className="h-full w-0.5 rounded flex-shrink-0"
|
||||
className="h-full w-0.5 flex-shrink-0 rounded"
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
<div className="text-xs text-custom-text-300 flex-shrink-0">
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<div className="text-xs truncate">{issue.name}</div>
|
||||
<div className="truncate text-xs">{issue.name}</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={`h-5 w-5 hidden group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
|
||||
className={`hidden h-5 w-5 group-hover/calendar-block:block ${isMenuActive ? "!block" : ""}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const Inputs = (props: any) => {
|
|||
{...register("name", {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-xs font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full rounded-md bg-transparent py-1.5 pr-2 text-xs font-medium leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
@ -151,13 +151,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
|||
{isOpen && (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`transition-all z-20 w-full ${
|
||||
isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
|
||||
className={`z-20 w-full transition-all ${
|
||||
isOpen ? "scale-100 opacity-100" : "pointer-events-none scale-95 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
|
||||
className="z-50 flex w-full items-center gap-x-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-2 shadow-custom-shadow-2xs transition-opacity"
|
||||
>
|
||||
<Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetails={projectDetail} />
|
||||
</form>
|
||||
|
|
@ -165,10 +165,10 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
|
||||
{!isOpen && (
|
||||
<div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
|
||||
<div className="hidden rounded border-[0.5px] border-custom-border-200 group-hover:block">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
|
||||
className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
|
|
|
|||
|
|
@ -13,18 +13,18 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`relative grid text-sm font-medium divide-x-[0.5px] divide-custom-border-200 ${
|
||||
className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
|
||||
showWeekends ? "grid-cols-7" : "grid-cols-5"
|
||||
}`}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="absolute h-[1.5px] w-3/4 bg-custom-primary-100 animate-[bar-loader_2s_linear_infinite]" />
|
||||
<div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
|
||||
)}
|
||||
{Object.values(DAYS_LIST).map((day) => {
|
||||
if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
|
||||
|
||||
return (
|
||||
<div key={day.shortTitle} className="h-11 bg-custom-background-90 flex items-center px-4">
|
||||
<div key={day.shortTitle} className="flex h-11 items-center bg-custom-background-90 px-4">
|
||||
{day.shortTitle}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
|
|||
searchParams={{ cycle: true }}
|
||||
handleOnSubmit={handleAddIssuesToCycle}
|
||||
/>
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptyState
|
||||
title="Cycle issues will appear here"
|
||||
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
||||
|
|
|
|||
|
|
@ -15,12 +15,16 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
|||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { commandPalette: commandPaletteStore, project: projectStore, trackEvent: { setTrackElement } } = useMobxStore();
|
||||
const {
|
||||
commandPalette: commandPaletteStore,
|
||||
project: projectStore,
|
||||
trackEvent: { setTrackElement },
|
||||
} = useMobxStore();
|
||||
|
||||
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
{!projects || projects?.length === 0 ? (
|
||||
<EmptyState
|
||||
image={emptyProject}
|
||||
|
|
@ -30,8 +34,8 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
|||
icon: <Plus className="h-4 w-4" />,
|
||||
text: "New Project",
|
||||
onClick: () => {
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE")
|
||||
commandPaletteStore.toggleCreateProjectModal(true)
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
|
@ -44,9 +48,9 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
|
|||
text: "New issue",
|
||||
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
|
||||
onClick: () => {
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE")
|
||||
commandPaletteStore.toggleCreateIssueModal(true)
|
||||
}
|
||||
setTrackElement("ALL_ISSUES_EMPTY_STATE");
|
||||
commandPaletteStore.toggleCreateIssueModal(true);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
|
|||
searchParams={{ module: true }}
|
||||
handleOnSubmit={handleAddIssuesToModule}
|
||||
/>
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptyState
|
||||
title="Module issues will appear here"
|
||||
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
|
|||
} = useMobxStore();
|
||||
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<EmptyState
|
||||
title="View issues will appear here"
|
||||
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
|
|||
} = useMobxStore();
|
||||
|
||||
return (
|
||||
<div className="h-full w-full grid place-items-center">
|
||||
<div className="grid h-full w-full place-items-center">
|
||||
<NewEmptyState
|
||||
title="Create an issue and assign it to someone, even yourself"
|
||||
description="Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal."
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<>
|
||||
{values.map((date) => (
|
||||
<div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<span className="normal-case">{getDateLabel(date)}</span>
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
|
||||
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
|
||||
{Object.entries(appliedFilters).map(([key, value]) => {
|
||||
const filterKey = key as keyof IIssueFilterOptions;
|
||||
|
||||
|
|
@ -47,10 +47,10 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<div
|
||||
key={filterKey}
|
||||
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
|
||||
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
|
||||
>
|
||||
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{membersFilters.includes(filterKey) && (
|
||||
<AppliedMembersFilters
|
||||
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
|
||||
|
|
@ -105,7 +105,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleClearAllFilters}
|
||||
className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
|
||||
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
|
||||
>
|
||||
Clear all
|
||||
<X size={12} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
|
|||
if (!labelDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={labelId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<span
|
||||
className="h-1.5 w-1.5 rounded-full"
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
|
|||
if (!memberDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
|
||||
<span className="normal-case">{memberDetails.display_name}</span>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -17,11 +17,8 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<>
|
||||
{values.map((priority) => (
|
||||
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<PriorityIcon
|
||||
priority={priority as TIssuePriorities}
|
||||
className={`h-3 w-3`}
|
||||
/>
|
||||
<div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
|
||||
{priority}
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
|
|||
if (!projectDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={projectId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
{projectDetails.emoji ? (
|
||||
<span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
|
||||
) : projectDetails.icon_prop ? (
|
||||
<div className="grid place-items-center flex-shrink-0 -my-1">{renderEmoji(projectDetails.icon_prop)}</div>
|
||||
<div className="-my-1 grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.icon_prop)}</div>
|
||||
) : (
|
||||
<span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{projectDetails?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
|
|||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters}
|
||||
handleClearAllFilters={handleClearAllFilters}
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
|
|||
{appliedFilters &&
|
||||
viewDetails?.query_data &&
|
||||
areFiltersDifferent(appliedFilters, viewDetails?.query_data ?? {}) && (
|
||||
<div className="flex items-center justify-center flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center justify-center">
|
||||
<Button variant="primary" size="sm" onClick={handleUpdateView}>
|
||||
Update view
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
|
|||
return (
|
||||
<>
|
||||
{values.map((stateGroup) => (
|
||||
<div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
|
||||
{stateGroup}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
|
|||
if (!stateDetails) return null;
|
||||
|
||||
return (
|
||||
<div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
|
||||
<div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
|
||||
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
|
||||
{stateDetails.name}
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
|
|||
Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
|
||||
<div className="relative h-full w-full divide-y divide-custom-border-200 overflow-hidden overflow-y-auto px-2.5">
|
||||
{/* display properties */}
|
||||
{layoutDisplayFiltersOptions?.display_properties && (
|
||||
<div className="py-2">
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
|
|||
handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="flex items-center gap-2 flex-wrap mt-1">
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
{ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
|
||||
<button
|
||||
key={displayProperty.key}
|
||||
type="button"
|
||||
className={`rounded transition-all text-xs border px-2 py-0.5 ${
|
||||
className={`rounded border px-2 py-0.5 text-xs transition-all ${
|
||||
displayProperties?.[displayProperty.key]
|
||||
? "bg-custom-primary-100 border-custom-primary-100 text-white"
|
||||
? "border-custom-primary-100 bg-custom-primary-100 text-white"
|
||||
: "border-custom-border-200 hover:bg-custom-background-80"
|
||||
}`}
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -64,7 +64,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -64,7 +64,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
|
|||
const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="p-2.5 pb-0 bg-custom-background-100">
|
||||
<div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="bg-custom-background-100 p-2.5 pb-0">
|
||||
<div className="flex items-center gap-1.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 py-1 text-xs">
|
||||
<Search className="text-custom-text-400" size={12} strokeWidth={2} />
|
||||
<input
|
||||
type="text"
|
||||
className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
|
||||
className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
|
||||
placeholder="Search"
|
||||
value={filtersSearchQuery}
|
||||
onChange={(e) => setFiltersSearchQuery(e.target.value)}
|
||||
|
|
@ -56,7 +56,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
|
||||
<div className="h-full w-full divide-y divide-custom-border-200 overflow-y-auto px-2.5">
|
||||
{/* priority */}
|
||||
{isFilterEnabled("priority") && (
|
||||
<div className="py-2">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { Loader } from "@plane/ui";
|
|||
import { IIssueLabel } from "types";
|
||||
|
||||
const LabelIcons = ({ color }: { color: string }) => (
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
<span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
|
||||
);
|
||||
|
||||
type Props = {
|
||||
|
|
@ -59,7 +59,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -67,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -64,7 +64,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -56,11 +56,11 @@ export const FilterProjects: React.FC<Props> = (props) => {
|
|||
{renderEmoji(project.emoji)}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="grid place-items-center flex-shrink-0 -my-1">
|
||||
<div className="-my-1 grid flex-shrink-0 place-items-center">
|
||||
{renderEmoji(project.icon_prop)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
<span className="mr-1 grid flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)
|
||||
|
|
@ -71,7 +71,7 @@ export const FilterProjects: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -79,7 +79,7 @@ export const FilterProjects: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
|
|||
<FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -62,7 +62,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const FilterState: React.FC<Props> = (props) => {
|
|||
{filteredOptions.length > 5 && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-custom-primary-100 text-xs font-medium ml-8"
|
||||
className="ml-8 text-xs font-medium text-custom-primary-100"
|
||||
onClick={handleViewToggle}
|
||||
>
|
||||
{itemsToRender === filteredOptions.length ? "View less" : "View all"}
|
||||
|
|
@ -62,7 +62,7 @@ export const FilterState: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)
|
||||
) : (
|
||||
<Loader className="space-y-2">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
|
|||
<FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-custom-text-400 italic">No matches found</p>
|
||||
<p className="text-xs italic text-custom-text-400">No matches found</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -55,12 +55,12 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
|
|||
>
|
||||
<Popover.Panel>
|
||||
<div
|
||||
className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
|
||||
className="z-10 overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
|
||||
<div className="flex max-h-[37.5rem] w-[18.75rem] flex-col overflow-hidden">{children}</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ interface IFilterHeader {
|
|||
}
|
||||
|
||||
export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
|
||||
<div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
|
||||
<div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
|
||||
<div className="sticky top-0 flex items-center justify-between gap-2 bg-custom-background-100">
|
||||
<div className="flex-grow truncate text-xs font-medium text-custom-text-300">{title}</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
|
||||
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
|
||||
onClick={handleIsPreviewEnabled}
|
||||
>
|
||||
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@ export const FilterOption: React.FC<Props> = (props) => {
|
|||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
|
||||
className="flex w-full items-center gap-2 rounded p-1.5 hover:bg-custom-background-80"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
|
||||
isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
|
||||
className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-custom-background-90 ${
|
||||
isChecked ? "border-custom-primary-100 bg-custom-primary-100 text-white" : "border-custom-border-300"
|
||||
} ${multiple ? "rounded-sm" : "rounded-full"}`}
|
||||
>
|
||||
{isChecked && <Check size={10} strokeWidth={3} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
{icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
|
||||
<div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
|
||||
{icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
|
||||
<div className="flex-grow truncate text-xs text-custom-text-200">{title}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@ export const LayoutSelection: React.FC<Props> = (props) => {
|
|||
const { layouts, onChange, selectedLayout } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
|
||||
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
|
||||
{ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
|
||||
<Tooltip key={layout.key} tooltipContent={layout.title}>
|
||||
<button
|
||||
type="button"
|
||||
className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
|
||||
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
|
||||
selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
||||
}`}
|
||||
onClick={() => onChange(layout.key)}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-full">
|
||||
<div className="h-full w-full">
|
||||
<GanttChartRoot
|
||||
border={false}
|
||||
title="Issues"
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center relative h-full w-full rounded cursor-pointer"
|
||||
className="relative flex h-full w-full cursor-pointer items-center rounded"
|
||||
style={{ backgroundColor: data?.state_detail?.color }}
|
||||
onClick={handleIssuePeekOverview}
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
|
||||
<div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
<div className="space-y-1">
|
||||
|
|
@ -37,7 +37,7 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
|
|||
position="top-left"
|
||||
>
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={data.name}>
|
||||
<div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
|
||||
<div className="relative w-full truncate px-2.5 py-1 text-sm text-custom-text-100">{data?.name}</div>
|
||||
</Tooltip>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
@ -58,13 +58,13 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full flex items-center gap-2 h-full cursor-pointer" onClick={handleIssuePeekOverview}>
|
||||
<div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
|
||||
<StateGroupIcon stateGroup={data?.state_detail?.group} color={data?.state_detail?.color} />
|
||||
<div className="text-xs text-custom-text-300 flex-shrink-0">
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300">
|
||||
{data?.project_detail?.identifier} {data?.sequence_id}
|
||||
</div>
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={data.name}>
|
||||
<span className="text-sm font-medium flex-grow truncate">{data?.name}</span>
|
||||
<span className="flex-grow truncate text-sm font-medium">{data?.name}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const Inputs = (props: any) => {
|
|||
{...register("name", {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full rounded-md bg-transparent px-2 text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -147,17 +147,17 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
|||
{isOpen && (
|
||||
<form
|
||||
ref={ref}
|
||||
className="flex py-3 px-2 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs"
|
||||
className="mr-2.5 flex items-center gap-x-2 rounded border-[0.5px] border-custom-border-100 bg-custom-background-100 px-2 py-3 shadow-custom-shadow-2xs"
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
>
|
||||
<div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
|
||||
<div className="h-3 w-3 flex-shrink-0 rounded-full border border-custom-border-1000" />
|
||||
<h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<Inputs register={register} setFocus={setFocus} />
|
||||
</form>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<p className="text-xs ml-3 mt-3 italic text-custom-text-200">
|
||||
<p className="ml-3 mt-3 text-xs italic text-custom-text-200">
|
||||
Press {"'"}Enter{"'"} to add another issue
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -165,7 +165,7 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
|||
{!isOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
|
||||
className="flex items-center gap-x-[6px] rounded-md px-2 py-1 text-custom-primary-100"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
|
|
|
|||
|
|
@ -226,25 +226,25 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
|||
/>
|
||||
|
||||
{showLoader && issueStore?.loader === "init-loader" && (
|
||||
<div className="fixed top-16 right-2 z-30 bg-custom-background-80 shadow-custom-shadow-sm w-10 h-10 rounded flex justify-center items-center">
|
||||
<Spinner className="w-5 h-5" />
|
||||
<div className="fixed right-2 top-16 z-30 flex h-10 w-10 items-center justify-center rounded bg-custom-background-80 shadow-custom-shadow-sm">
|
||||
<Spinner className="h-5 w-5" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
|
||||
<div className={`relative h-max min-h-full w-max min-w-full bg-custom-background-90 px-3`}>
|
||||
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
|
||||
<div
|
||||
className={`fixed left-1/2 -translate-x-1/2 ${
|
||||
isDragStarted ? "z-40" : ""
|
||||
} w-72 top-3 flex items-center justify-center mx-3`}
|
||||
} top-3 mx-3 flex w-72 items-center justify-center`}
|
||||
>
|
||||
<Droppable droppableId="issue-trash-box" isDropDisabled={!isDragStarted}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`${
|
||||
isDragStarted ? `opacity-100` : `opacity-0`
|
||||
} w-full flex items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
|
||||
snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
|
||||
} flex w-full items-center justify-center rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
|
||||
snapshot.isDraggingOver ? "bg-red-500 opacity-70 blur-2xl" : ""
|
||||
} transition duration-300`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
|
|||
<>
|
||||
{displayProperties && displayProperties?.key && (
|
||||
<div className="relative">
|
||||
<div className="text-xs line-clamp-1 text-custom-text-300">
|
||||
<div className="line-clamp-1 text-xs text-custom-text-300">
|
||||
{issue.project_detail.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
<div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
|
||||
|
|
@ -130,10 +130,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
|
|||
ref={provided.innerRef}
|
||||
>
|
||||
{issue.tempId !== undefined && (
|
||||
<div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
|
||||
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
|
||||
)}
|
||||
<div
|
||||
className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
|
||||
className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
|
||||
isDragDisabled ? "" : "hover:cursor-grab"
|
||||
} ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
|
|||
</>
|
||||
) : (
|
||||
!isDragDisabled && (
|
||||
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
|
||||
<div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
|
||||
{/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -84,15 +84,15 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||
kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex gap-3">
|
||||
<div className="relative flex h-full w-full gap-3">
|
||||
{list &&
|
||||
list.length > 0 &&
|
||||
list.map((_list: any) => (
|
||||
<div
|
||||
className={`relative flex-shrink-0 flex flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
|
||||
className={`relative flex flex-shrink-0 flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
|
||||
>
|
||||
{sub_group_by === null && (
|
||||
<div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
|
||||
<KanBanGroupByHeaderRoot
|
||||
column_id={getValueFromObject(_list, listKey) as string}
|
||||
column_value={_list}
|
||||
|
|
@ -116,7 +116,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||
<Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
|
||||
{(provided: any, snapshot: any) => (
|
||||
<div
|
||||
className={`w-full h-full relative transition-all ${
|
||||
className={`relative h-full w-full transition-all ${
|
||||
snapshot.isDraggingOver ? `bg-custom-background-80` : ``
|
||||
}`}
|
||||
{...provided.droppableProps}
|
||||
|
|
@ -137,7 +137,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||
/>
|
||||
) : (
|
||||
isDragDisabled && (
|
||||
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-sm">
|
||||
<div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-sm">
|
||||
{/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -148,7 +148,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
|||
)}
|
||||
</Droppable>
|
||||
|
||||
<div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky bottom-0 z-[0]">
|
||||
<div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
|
||||
{enableQuickIssueCreate && (
|
||||
<KanBanQuickAddIssueForm
|
||||
formKey="name"
|
||||
|
|
@ -252,7 +252,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
|
|||
const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<div className="relative h-full w-full">
|
||||
{group_by && group_by === "project" && (
|
||||
<GroupByKanBan
|
||||
issues={issues}
|
||||
|
|
|
|||
|
|
@ -100,17 +100,17 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
|||
/>
|
||||
)}
|
||||
<div
|
||||
className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
|
||||
verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
|
||||
className={`relative flex flex-shrink-0 gap-2 p-1.5 ${
|
||||
verticalAlignPosition ? `w-[44px] flex-col items-center` : `w-full flex-row items-center`
|
||||
}`}
|
||||
>
|
||||
<div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
|
||||
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
|
||||
{icon ? icon : <Circle width={14} strokeWidth={2} />}
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
|
||||
<div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `w-full flex-row`}`}>
|
||||
<div
|
||||
className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
|
||||
className={`line-clamp-1 font-medium text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
|
@ -121,7 +121,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
|||
|
||||
{sub_group_by === null && (
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => handleKanBanToggle("groupByHeaderMinMax", column_id)}
|
||||
>
|
||||
{verticalAlignPosition ? (
|
||||
|
|
@ -137,7 +137,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
|||
<CustomMenu
|
||||
width="auto"
|
||||
customButton={
|
||||
<span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
|
||||
<span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
|
||||
<Plus height={14} width={14} strokeWidth={2} />
|
||||
</span>
|
||||
}
|
||||
|
|
@ -151,7 +151,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
|
|||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<Plus width={14} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export interface ILabelHeader {
|
|||
}
|
||||
|
||||
const Icon = ({ color }: any) => (
|
||||
<div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
|
||||
<div className="h-[12px] w-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
|
||||
);
|
||||
|
||||
export const LabelHeader: FC<ILabelHeader> = observer((props) => {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export interface IProjectHeader {
|
|||
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
|
||||
}
|
||||
|
||||
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
|
||||
const Icon = ({ emoji }: any) => <div className="h-6 w-6">{renderEmoji(emoji)}</div>;
|
||||
|
||||
export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export interface IStateGroupHeader {
|
|||
}
|
||||
|
||||
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
|
||||
<div className="w-3.5 h-3.5 rounded-full">
|
||||
<div className="h-3.5 w-3.5 rounded-full">
|
||||
<StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ interface IHeaderSubGroupByCard {
|
|||
|
||||
export const HeaderSubGroupByCard = observer(
|
||||
({ icon, title, count, column_id, kanBanToggle, handleKanBanToggle }: IHeaderSubGroupByCard) => (
|
||||
<div className={`flex-shrink-0 relative flex gap-2 rounded-sm flex-row items-center w-full p-1.5`}>
|
||||
<div className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5`}>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
|
||||
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => handleKanBanToggle("subgroupByIssuesVisibility", column_id)}
|
||||
>
|
||||
{kanBanToggle?.subgroupByIssuesVisibility.includes(column_id) ? (
|
||||
|
|
@ -27,11 +27,11 @@ export const HeaderSubGroupByCard = observer(
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
|
||||
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
|
||||
{icon ? icon : <Circle width={14} strokeWidth={2} />}
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 flex items-center gap-1 text-sm">
|
||||
<div className="flex flex-shrink-0 items-center gap-1 text-sm">
|
||||
<div className="line-clamp-1 text-custom-text-100">{title}</div>
|
||||
<div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 flex-wrap whitespace-nowrap">
|
||||
<div className="flex flex-wrap items-center gap-2 whitespace-nowrap">
|
||||
{/* basic properties */}
|
||||
{/* state */}
|
||||
{displayProperties && displayProperties?.state && (
|
||||
|
|
@ -166,7 +166,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
|||
{/* sub-issues */}
|
||||
{displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
|
||||
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.sub_issues_count}</div>
|
||||
</div>
|
||||
|
|
@ -176,7 +176,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
|||
{/* attachments */}
|
||||
{displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
|
||||
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.attachment_count}</div>
|
||||
</div>
|
||||
|
|
@ -186,7 +186,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
|
|||
{/* link */}
|
||||
{displayProperties && displayProperties?.link && !!issue?.link_count && (
|
||||
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.link_count}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const Inputs = (props: any) => {
|
|||
{...register("name", {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full px-2 pl-0 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -130,15 +130,15 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
|
|||
<form
|
||||
ref={ref}
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100"
|
||||
className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-3"
|
||||
>
|
||||
<Inputs formKey={formKey} register={register} setFocus={setFocus} projectDetail={projectDetail} />
|
||||
</form>
|
||||
<div className="text-xs italic text-custom-text-200 px-3 py-2">{`Press 'Enter' to add another issue`}</div>
|
||||
<div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-full flex items-center text-custom-primary-100 p-3 py-3 cursor-pointer gap-2"
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
|
|
|
|||
|
|
@ -47,11 +47,11 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full min-h-full h-max flex items-center">
|
||||
<div className="relative flex h-max min-h-full w-full items-center">
|
||||
{list &&
|
||||
list.length > 0 &&
|
||||
list.map((_list: any) => (
|
||||
<div className="flex-shrink-0 flex flex-col w-[340px]">
|
||||
<div className="flex w-[340px] flex-shrink-0 flex-col">
|
||||
<KanBanGroupByHeaderRoot
|
||||
column_id={getValueFromObject(_list, listKey) as string}
|
||||
column_value={_list}
|
||||
|
|
@ -142,13 +142,13 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full min-h-full h-max">
|
||||
<div className="relative h-max min-h-full w-full">
|
||||
{list &&
|
||||
list.length > 0 &&
|
||||
list.map((_list: any) => (
|
||||
<div className="flex-shrink-0 flex flex-col">
|
||||
<div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
|
||||
<div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
<div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
|
||||
<div className="sticky left-0 flex-shrink-0 bg-custom-background-90 pr-2">
|
||||
<KanBanSubGroupByHeaderRoot
|
||||
column_id={getValueFromObject(_list, listKey) as string}
|
||||
column_value={_list}
|
||||
|
|
@ -161,7 +161,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
|||
addIssuesToView={addIssuesToView}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full border-b border-custom-border-400 border-dashed" />
|
||||
<div className="w-full border-b border-dashed border-custom-border-400" />
|
||||
</div>
|
||||
{!kanBanToggle?.subgroupByIssuesVisibility.includes(getValueFromObject(_list, listKey) as string) && (
|
||||
<div className="relative">
|
||||
|
|
@ -265,7 +265,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
|||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
|
||||
<div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90">
|
||||
{group_by && group_by === "project" && (
|
||||
<SubGroupSwimlaneHeader
|
||||
issues={issues}
|
||||
|
|
|
|||
|
|
@ -120,11 +120,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
|||
return (
|
||||
<>
|
||||
{issueStore?.loader === "init-loader" ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<div className={`relative w-full h-full bg-custom-background-90`}>
|
||||
<div className={`relative h-full w-full bg-custom-background-90`}>
|
||||
<List
|
||||
issues={issues as unknown as IIssueResponse}
|
||||
group_by={group_by}
|
||||
|
|
|
|||
|
|
@ -38,26 +38,26 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
|
||||
<div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
|
||||
{displayProperties && displayProperties?.key && (
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
|
||||
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
|
||||
{issue?.project_detail?.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{issue?.tempId !== undefined && (
|
||||
<div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
|
||||
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
|
||||
)}
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<div
|
||||
className="line-clamp-1 text-sm font-medium text-custom-text-100 w-full cursor-pointer"
|
||||
className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
|
||||
onClick={handleIssuePeekOverview}
|
||||
>
|
||||
{issue.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="ml-auto flex-shrink-0 flex items-center gap-2">
|
||||
<div className="ml-auto flex flex-shrink-0 items-center gap-2">
|
||||
{!issue?.tempId ? (
|
||||
<>
|
||||
<ListProperties
|
||||
|
|
@ -70,8 +70,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
|||
{quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
|
||||
</>
|
||||
) : (
|
||||
<div className="w-4 h-4">
|
||||
<Spinner className="w-4 h-4" />
|
||||
<div className="h-4 w-4">
|
||||
<Spinner className="h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
|
|||
const { columnId, issueIds, issues, handleIssues, quickActions, displayProperties, canEditProperties } = props;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
|
||||
<div className="relative h-full w-full divide-y-[0.5px] divide-custom-border-200">
|
||||
{issueIds && issueIds.length > 0 ? (
|
||||
issueIds.map(
|
||||
(issueId: string) =>
|
||||
|
|
@ -38,7 +38,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
|
|||
)
|
||||
)
|
||||
) : (
|
||||
<div className="bg-custom-background-100 text-custom-text-400 text-sm p-3">No issues</div>
|
||||
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -74,14 +74,14 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<div className="relative h-full w-full">
|
||||
{list &&
|
||||
list.length > 0 &&
|
||||
list.map(
|
||||
(_list: any) =>
|
||||
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[getValueFromObject(_list, listKey) as string]) && (
|
||||
<div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
|
||||
<div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3 bg-custom-background-90 border-b border-custom-border-200">
|
||||
<div key={getValueFromObject(_list, listKey) as string} className={`flex flex-shrink-0 flex-col`}>
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
|
||||
<ListGroupByHeaderRoot
|
||||
column_id={getValueFromObject(_list, listKey) as string}
|
||||
column_value={_list}
|
||||
|
|
@ -110,7 +110,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
|||
)}
|
||||
|
||||
{enableIssueQuickAdd && (
|
||||
<div className="flex-shrink-0 w-full sticky bottom-0 z-[1]">
|
||||
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
|
||||
<ListQuickAddIssueForm
|
||||
prePopulatedData={prePopulateQuickAddData(group_by, getValueFromObject(_list, listKey))}
|
||||
quickAddCallback={quickAddCallback}
|
||||
|
|
@ -178,7 +178,7 @@ export const List: React.FC<IList> = (props) => {
|
|||
} = props;
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
<div className="relative h-full w-full">
|
||||
{group_by === null && (
|
||||
<GroupByList
|
||||
issueIds={issueIds as TUnGroupedIssues}
|
||||
|
|
|
|||
|
|
@ -57,14 +57,14 @@ export const HeaderGroupByCard = observer(
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex-shrink-0 relative flex gap-2 py-1.5 flex-row items-center w-full">
|
||||
<div className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center">
|
||||
<div className="relative flex w-full flex-shrink-0 flex-row items-center gap-2 py-1.5">
|
||||
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
|
||||
{icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-row w-full">
|
||||
<div className="font-medium line-clamp-1 text-custom-text-100">{title}</div>
|
||||
<div className="text-sm font-medium text-custom-text-300 pl-2">{count || 0}</div>
|
||||
<div className="flex w-full flex-row items-center gap-1">
|
||||
<div className="line-clamp-1 font-medium text-custom-text-100">{title}</div>
|
||||
<div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
|
||||
</div>
|
||||
|
||||
{!disableIssueCreation &&
|
||||
|
|
@ -72,7 +72,7 @@ export const HeaderGroupByCard = observer(
|
|||
<CustomMenu
|
||||
width="auto"
|
||||
customButton={
|
||||
<span className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
|
||||
<span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
</span>
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ export const HeaderGroupByCard = observer(
|
|||
</CustomMenu>
|
||||
) : (
|
||||
<div
|
||||
className="flex-shrink-0 w-5 h-5 rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
|
||||
className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<Plus width={14} strokeWidth={2} />
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export interface ILabelHeader {
|
|||
}
|
||||
|
||||
const Icon = ({ color }: any) => (
|
||||
<div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
|
||||
<div className="h-[12px] w-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
|
||||
);
|
||||
|
||||
export const LabelHeader: FC<ILabelHeader> = observer((props) => {
|
||||
|
|
|
|||
|
|
@ -16,25 +16,25 @@ export interface IPriorityHeader {
|
|||
}
|
||||
|
||||
const Icon = ({ priority }: any) => (
|
||||
<div className="w-full h-full">
|
||||
<div className="h-full w-full">
|
||||
{priority === "urgent" ? (
|
||||
<div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-sm border border-red-500 bg-red-500 text-white">
|
||||
<AlertCircle size={14} strokeWidth={2} />
|
||||
</div>
|
||||
) : priority === "high" ? (
|
||||
<div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-sm border border-red-500/20 bg-red-500/10 text-red-500">
|
||||
<SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
|
||||
</div>
|
||||
) : priority === "medium" ? (
|
||||
<div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-sm border border-orange-500/20 bg-orange-500/10 text-orange-500">
|
||||
<SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
|
||||
</div>
|
||||
) : priority === "low" ? (
|
||||
<div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-sm border border-green-500/20 bg-green-500/10 text-green-500">
|
||||
<SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
|
||||
<div className="flex h-full w-full items-center justify-center overflow-hidden rounded-sm border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400">
|
||||
<Ban size={14} strokeWidth={2} />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export interface IProjectHeader {
|
|||
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
|
||||
}
|
||||
|
||||
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
|
||||
const Icon = ({ emoji }: any) => <div className="h-6 w-6">{renderEmoji(emoji)}</div>;
|
||||
|
||||
export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
|
||||
const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export interface IStateGroupHeader {
|
|||
}
|
||||
|
||||
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
|
||||
<div className="w-[14px] h-[14px] rounded-full">
|
||||
<div className="h-[14px] w-[14px] rounded-full">
|
||||
<StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
|||
{/* sub-issues */}
|
||||
{displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && (
|
||||
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.sub_issues_count}</div>
|
||||
</div>
|
||||
|
|
@ -147,7 +147,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
|||
{/* attachments */}
|
||||
{displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && (
|
||||
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.attachment_count}</div>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
|
|||
{/* link */}
|
||||
{displayProperties && displayProperties?.link && !!issue?.link_count && (
|
||||
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
|
||||
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
|
||||
<div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
|
||||
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
|
||||
<div className="text-xs">{issue.link_count}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const Inputs: FC<IInputProps> = (props) => {
|
|||
}, [formKey, setFocus]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 w-full">
|
||||
<div className="flex w-full items-center gap-3">
|
||||
<div className="text-xs font-medium text-custom-text-400">{projectDetail?.identifier ?? "..."}</div>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -37,7 +37,7 @@ const Inputs: FC<IInputProps> = (props) => {
|
|||
{...register(formKey, {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -119,7 +119,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`bg-custom-background-100 border-t border-b border-custom-border-200 ${
|
||||
className={`border-b border-t border-custom-border-200 bg-custom-background-100 ${
|
||||
errors && errors?.name && errors?.name?.message ? `border-red-500 bg-red-500/10` : ``
|
||||
}`}
|
||||
>
|
||||
|
|
@ -128,15 +128,15 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
|
|||
<form
|
||||
ref={ref}
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100"
|
||||
className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-3"
|
||||
>
|
||||
<Inputs formKey={"name"} register={register} setFocus={setFocus} projectDetail={projectDetail} />
|
||||
</form>
|
||||
<div className="text-xs italic text-custom-text-200 px-3 py-2">{`Press 'Enter' to add another issue`}</div>
|
||||
<div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-full flex items-center text-custom-primary-100 p-3 py-3 cursor-pointer gap-2"
|
||||
className="flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
|
||||
const label = (
|
||||
<Tooltip tooltipHeading="Assignee" tooltipContent={getTooltipContent()} position="top">
|
||||
<div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
|
||||
<div className="flex h-full w-full cursor-pointer items-center gap-2 text-custom-text-200">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<AvatarGroup showTooltip={false}>
|
||||
{value.map((assigneeId) => {
|
||||
|
|
@ -110,7 +110,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
})}
|
||||
</AvatarGroup>
|
||||
) : (
|
||||
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
|
||||
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
|
||||
<User2 className="h-4 w-4 text-custom-text-400" />
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -139,7 +139,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||
className={`flex w-full items-center justify-between gap-1 text-xs ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !projectMembers && getWorkspaceMembers()}
|
||||
|
|
@ -150,7 +150,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
</Combobox.Button>
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
|
||||
className={`my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
|
@ -158,14 +158,14 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-300" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-custom-text-200">Loading...</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
|
|
@ -174,7 +174,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
|
||||
active && !selected ? "bg-custom-background-80" : ""
|
||||
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,13 +42,13 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
|
|||
<>
|
||||
<Popover.Button
|
||||
ref={dropdownBtn}
|
||||
className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none w-full ${
|
||||
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200 pointer-events-none"
|
||||
? "pointer-events-none cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
>
|
||||
<div className="overflow-hidden flex justify-center items-center gap-2">
|
||||
<div className="flex items-center justify-center gap-2 overflow-hidden">
|
||||
<Calendar className="h-3 w-3" strokeWidth={2} />
|
||||
{value && (
|
||||
<>
|
||||
|
|
@ -57,7 +57,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
|
|||
</Tooltip>
|
||||
|
||||
<div
|
||||
className="flex-shrink-0 flex justify-center items-center"
|
||||
className="flex flex-shrink-0 items-center justify-center"
|
||||
onClick={() => {
|
||||
if (onChange) onChange(null);
|
||||
}}
|
||||
|
|
@ -69,10 +69,10 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
|
|||
</div>
|
||||
</Popover.Button>
|
||||
|
||||
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
|
||||
<div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
|
||||
<Popover.Panel
|
||||
ref={dropdownOptions}
|
||||
className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
|
||||
className={`absolute z-10 mt-1 whitespace-nowrap rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none`}
|
||||
>
|
||||
{({ close }) => (
|
||||
<DatePicker
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
|
|||
const selectedEstimate = estimatePoints?.find((e) => e.key === value);
|
||||
const label = (
|
||||
<Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
|
||||
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
|
||||
<div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
|
||||
<Triangle className="h-3 w-3" strokeWidth={2} />
|
||||
<span className="truncate">{selectedEstimate?.value ?? "None"}</span>
|
||||
</div>
|
||||
|
|
@ -113,7 +113,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 h-5 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
|
||||
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
>
|
||||
|
|
@ -123,7 +123,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
|
|||
</Combobox.Button>
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
|
||||
className={`my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
|
@ -131,14 +131,14 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
|
|||
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-300" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
|
|
@ -146,7 +146,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
backgroundColor: label.color,
|
||||
}}
|
||||
/>
|
||||
<div className="truncate inline-block line-clamp-1">{label.name}</div>
|
||||
<div className="line-clamp-1 inline-block truncate">{label.name}</div>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
|
@ -98,7 +98,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
});
|
||||
|
||||
const label = (
|
||||
<div className="overflow-hidden flex flex-wrap items-center h-5 gap-2 text-custom-text-200 w-full">
|
||||
<div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden text-custom-text-200">
|
||||
{value.length > 0 ? (
|
||||
value.length <= maxRender ? (
|
||||
<>
|
||||
|
|
@ -108,25 +108,25 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
|
||||
<div
|
||||
key={label.id}
|
||||
className={`overflow-hidden flex hover:bg-custom-background-80 ${
|
||||
className={`flex overflow-hidden hover:bg-custom-background-80 ${
|
||||
!disabled && "cursor-pointer"
|
||||
} items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
|
||||
} h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
|
||||
>
|
||||
<div className="overflow-hidden flex items-center gap-1.5 text-custom-text-200 max-w-full">
|
||||
<div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: label?.color ?? "#000000",
|
||||
}}
|
||||
/>
|
||||
<div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{label.name}</div>
|
||||
<div className="line-clamp-1 inline-block w-auto max-w-[100px] truncate">{label.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<div className="h-full flex cursor-pointer items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
|
||||
<div className="flex h-full flex-shrink-0 cursor-pointer items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
|
||||
<Tooltip
|
||||
position="top"
|
||||
tooltipHeading="Labels"
|
||||
|
|
@ -135,7 +135,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
.map((l) => l.name)
|
||||
.join(", ")}
|
||||
>
|
||||
<div className="h-full flex items-center gap-1.5 text-custom-text-200">
|
||||
<div className="flex h-full items-center gap-1.5 text-custom-text-200">
|
||||
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
|
||||
{`${value.length} Labels`}
|
||||
</div>
|
||||
|
|
@ -144,7 +144,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
)
|
||||
) : (
|
||||
<div
|
||||
className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
|
||||
className={`flex h-full items-center justify-center rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
|
||||
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -157,7 +157,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
|
||||
className={`w-auto max-w-full flex-shrink-0 text-left ${className}`}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
|
|
@ -167,12 +167,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||
className={`flex w-full items-center justify-between gap-1 text-xs ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: value.length <= maxRender
|
||||
? "cursor-pointer"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
? "cursor-pointer"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !storeLabels && fetchLabels()}
|
||||
>
|
||||
|
|
@ -183,7 +183,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
|
||||
className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
|
@ -191,14 +191,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-300" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-custom-text-200">Loading...</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
|
|
@ -207,7 +207,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
|
||||
selected ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,9 +68,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
value: state.id,
|
||||
query: state.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-2 w-full overflow-hidden">
|
||||
<div className="flex w-full items-center gap-2 overflow-hidden">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} />
|
||||
<div className="truncate inline-block line-clamp-1 w-full">{state.name}</div>
|
||||
<div className="line-clamp-1 inline-block w-full truncate">{state.name}</div>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
|
@ -94,9 +94,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
|
||||
const label = (
|
||||
<Tooltip tooltipHeading="State" tooltipContent={selectedOption?.name ?? ""} position="top">
|
||||
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
|
||||
<div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
|
||||
{selectedOption && <StateGroupIcon stateGroup={selectedOption?.group as any} color={selectedOption?.color} />}
|
||||
<span className="truncate line-clamp-1 inline-block">{selectedOption?.name ?? "State"}</span>
|
||||
<span className="line-clamp-1 inline-block truncate">{selectedOption?.name ?? "State"}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
|
|
@ -106,7 +106,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
{workspaceSlug && projectId && (
|
||||
<Combobox
|
||||
as="div"
|
||||
className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
|
||||
className={`w-auto max-w-full flex-shrink-0 text-left ${className}`}
|
||||
value={selectedOption?.id}
|
||||
onChange={(data: string) => {
|
||||
const selectedState = projectStates?.find((state) => state.id === data);
|
||||
|
|
@ -118,7 +118,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between h-5 gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
|
||||
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
|
||||
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
onClick={() => !storeStates && fetchProjectStates()}
|
||||
|
|
@ -129,7 +129,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
</Combobox.Button>
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
|
||||
className={`my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
|
|
@ -137,14 +137,14 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-custom-text-300" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
|
||||
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-custom-text-200">Loading...</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
|
|
@ -153,7 +153,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
|
||||
active ? "bg-custom-background-80" : ""
|
||||
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,9 +103,9 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{currentView != currentIssueView && (loader === "init-loader" || !getIssues) ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -115,7 +115,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
|
|||
{Object.keys(getIssues ?? {}).length == 0 ? (
|
||||
<>{/* <GlobalViewEmptyState /> */}</>
|
||||
) : (
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<div className="relative h-full w-full overflow-auto">
|
||||
<SpreadsheetView
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<ArchivedIssueAppliedFiltersRoot />
|
||||
<div className="w-full h-full overflow-auto">
|
||||
<div className="h-full w-full overflow-auto">
|
||||
<ArchivedIssueListLayout />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,12 +58,12 @@ export const CycleLayoutRoot: React.FC = observer(() => {
|
|||
<>
|
||||
<TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
|
||||
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
|
||||
<CycleAppliedFiltersRoot />
|
||||
|
||||
{loader === "init-loader" || !getIssues ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -28,16 +28,16 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
|
|||
const activeLayout = issueFilters?.displayFilters?.layout || undefined;
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<DraftIssueAppliedFiltersRoot />
|
||||
|
||||
{loader === "init-loader" ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<div className="relative h-full w-full overflow-auto">
|
||||
{activeLayout === "list" ? (
|
||||
<DraftIssueListLayout />
|
||||
) : activeLayout === "kanban" ? (
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
|
|||
const activeLayout = issueFilters?.displayFilters?.layout || undefined;
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<ModuleAppliedFiltersRoot />
|
||||
|
||||
{loader === "init-loader" || !getIssues ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
|
|||
const activeLayout = issueFilters?.displayFilters?.layout;
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<ProjectAppliedFiltersRoot />
|
||||
|
||||
{loader === "init-loader" || !getIssues ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -48,7 +48,7 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
|
|||
{Object.keys(getIssues ?? {}).length == 0 ? (
|
||||
<ProjectEmptyState />
|
||||
) : (
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<div className="relative h-full w-full overflow-auto">
|
||||
{activeLayout === "list" ? (
|
||||
<ListLayout />
|
||||
) : activeLayout === "kanban" ? (
|
||||
|
|
|
|||
|
|
@ -39,16 +39,16 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
|
|||
const activeLayout = issueFilters?.displayFilters?.layout;
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full flex flex-col overflow-hidden">
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<ProjectViewAppliedFiltersRoot />
|
||||
|
||||
{loader === "init-loader" ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full h-full relative overflow-auto">
|
||||
<div className="relative h-full w-full overflow-auto">
|
||||
{activeLayout === "list" ? (
|
||||
<ProjectViewListLayout />
|
||||
) : activeLayout === "kanban" ? (
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-center text-xs h-full w-full">
|
||||
<div className="flex h-full w-full items-center justify-center text-xs">
|
||||
{renderLongDetailDateFormat(issue.created_at)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
|
|||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
onChange={(val) => onChange({ target_date: val })}
|
||||
className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
|
||||
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
|
||||
noBorder
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export const IssueColumn: React.FC<Props> = ({
|
|||
const customActionButton = (
|
||||
<div
|
||||
ref={menuActionRef}
|
||||
className={`w-full cursor-pointer text-custom-sidebar-text-400 rounded p-1 hover:bg-custom-background-80 ${
|
||||
className={`w-full cursor-pointer rounded p-1 text-custom-sidebar-text-400 hover:bg-custom-background-80 ${
|
||||
isMenuActive ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
|
|
@ -61,13 +61,13 @@ export const IssueColumn: React.FC<Props> = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="group flex items-center w-[28rem] text-sm h-11 top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
|
||||
<div className="group top-0 flex h-11 w-[28rem] items-center truncate border-b border-custom-border-100 bg-custom-background-100 text-sm">
|
||||
{properties.key && (
|
||||
<div
|
||||
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-min"
|
||||
className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"
|
||||
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
|
||||
<div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
|
||||
<span
|
||||
className={`flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ${
|
||||
isMenuActive ? "!opacity-0" : ""
|
||||
|
|
@ -77,16 +77,16 @@ export const IssueColumn: React.FC<Props> = ({
|
|||
</span>
|
||||
|
||||
{canEditProperties(issue.project) && (
|
||||
<div className={`absolute top-0 left-2.5 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
|
||||
<div className={`absolute left-2.5 top-0 hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
|
||||
{quickActions(issue, customActionButton)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue.sub_issues_count > 0 && (
|
||||
<div className="h-6 w-6 flex justify-center items-center">
|
||||
<div className="flex h-6 w-6 items-center justify-center">
|
||||
<button
|
||||
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
|
||||
className="h-5 w-5 cursor-pointer rounded-sm hover:bg-custom-background-90 hover:text-custom-text-100"
|
||||
onClick={() => handleToggleExpand(issue.id)}
|
||||
>
|
||||
<ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
|
||||
|
|
@ -98,7 +98,7 @@ export const IssueColumn: React.FC<Props> = ({
|
|||
<div className="w-full overflow-hidden">
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<div
|
||||
className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
|
||||
className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
|
||||
onClick={() => handleIssuePeekOverview(issue)}
|
||||
>
|
||||
{issue.name}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.link_count} {issue.link_count === 1 ? "link" : "links"}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
|
|||
<ViewStartDateSelect
|
||||
issue={issue}
|
||||
onChange={(val) => onChange({ start_date: val })}
|
||||
className="flex items-center px-2.5 py-1 !h-full !w-full max-w-full"
|
||||
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
|
||||
noBorder
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center px-2.5 py-1 text-xs h-full w-full">
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-center text-xs h-full w-full">
|
||||
<div className="flex h-full w-full items-center justify-center text-xs">
|
||||
{renderLongDetailDateFormat(issue.updated_at)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue