Skip to content

Commit

Permalink
[Fixbug] Add avatar to assignee on task creation (& task input dropdo…
Browse files Browse the repository at this point in the history 
…wn UIs light/dark mode) (#3531)

* fix dark / light colors and bg for input task default state

* fix all task input dropdowns (ui)
  • Loading branch information
@CREDO23
CREDO23 authored Jan 21, 2025
1 parent f40a8bf commit e0f2730
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 52 deletions.
15 changes: 11 additions & 4 deletions apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
import { useAtomValue } from 'jotai';
import TaskRow from '../components/task-row';
import { useTranslations } from 'next-intl';
import { AddIcon, ChevronDownIcon, Square4OutlineIcon, TrashIcon } from 'assets/svg';
import { AddIcon, CircleIcon, Square4OutlineIcon, TrashIcon } from 'assets/svg';
import { Listbox, Transition } from '@headlessui/react';
import { clsxm } from '@/app/utils';
import { organizationProjectsState } from '@/app/stores/organization-projects';
import ProjectIcon from '@components/ui/svgs/project-icon';
import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
import { CreateProjectModal } from '@/lib/features/project/create-project-modal';
import { ChevronDownIcon } from '@heroicons/react/20/solid';

type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';

Expand Down Expand Up @@ -373,13 +374,19 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
{updateLoading ? (
<SpinnerLoader size={10} />
) : (
<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
<p
className={clsxm(
'truncate',
!selected && ' text-slate-400 flex gap-1 dark:text-white font-light'
)}
>
{!selected && <CircleIcon className="w-4 h-4" />}
{selected?.name ?? 'Project'}
</p>
)}
<ChevronDownIcon
className={clsxm(
'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
'transition duration-150 ease-in-out group-hover:text-opacity-80 w-5 h-5 text-default dark:text-white'
)}
aria-hidden="true"
/>
Expand Down Expand Up @@ -408,7 +415,7 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
{organizationProjects.map((item, i) => {
return (
<Listbox.Option key={item.id} value={item} as={Fragment}>
<li className="relative border h-[2rem] flex items-center gap-1 px-2 rounded-lg outline-none cursor-pointer dark:text-white">
<li className="relative border h-[2rem] flex items-center gap-2 px-2 rounded-lg outline-none cursor-pointer dark:text-white">
<ProjectIcon width={14} height={14} />{' '}
<span className=" truncate">{item.name}</span>
</li>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/components/ui/svgs/project-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ export default function ProjectIcon(props: Partial<IIconProps>) {
>
<path
d="M12 12.2501C11.56 12.2501 11.12 12.1401 10.72 11.9301L4.21 8.4201C3.62 8.1001 3.25 7.4701 3.25 6.7701C3.25 6.0701 3.62 5.4401 4.21 5.1201L10.72 1.6101C11.52 1.1801 12.48 1.1801 13.27 1.6101L19.78 5.1201C20.37 5.4401 20.74 6.0701 20.74 6.7701C20.74 7.4701 20.37 8.1001 19.78 8.4201L13.27 11.9301C12.88 12.1501 12.44 12.2501 12 12.2501ZM12 2.7801C11.81 2.7801 11.61 2.8301 11.43 2.9301L4.93 6.4301C4.76 6.5201 4.75 6.7101 4.75 6.7701C4.75 6.8301 4.76 7.0201 4.93 7.1001L11.44 10.6101C11.8 10.8001 12.21 10.8001 12.57 10.6101L19.08 7.1001C19.24 7.0101 19.26 6.8201 19.26 6.7701C19.26 6.7101 19.25 6.5201 19.08 6.4401L12.57 2.9301C12.39 2.8301 12.19 2.7801 12 2.7801Z"
fill="#292D32"
fill="currentColor"
/>
<path
d="M9.78 22.72C9.5 22.72 9.21 22.65 8.95 22.52L2.89 19.5C1.88 18.99 1.25 17.97 1.25 16.84V11.12C1.25 10.47 1.58 9.88001 2.13 9.54001C2.69 9.20001 3.36 9.17001 3.94 9.46001L10 12.48C11.01 12.99 11.64 14 11.64 15.14V20.86C11.64 21.51 11.31 22.1 10.76 22.44C10.46 22.63 10.12 22.72 9.78 22.72ZM3.11 10.76C3.03 10.76 2.96 10.79 2.92 10.81C2.86 10.85 2.75 10.94 2.75 11.12V16.84C2.75 17.4 3.06 17.91 3.56 18.16L9.61 21.19C9.77 21.27 9.9 21.21 9.96 21.18C10.02 21.14 10.13 21.05 10.13 20.87V15.15C10.13 14.59 9.82 14.08 9.32 13.83L3.27 10.8C3.21 10.77 3.16 10.76 3.11 10.76Z"
fill="#292D32"
fill="currentColor"
/>
<path
d="M14.2201 22.72C13.8801 22.72 13.5401 22.63 13.2401 22.44C12.6901 22.1 12.3601 21.51 12.3601 20.86V15.14C12.3601 14.01 12.9901 12.99 14.0001 12.48L20.0501 9.45C20.6301 9.16 21.3101 9.19 21.8601 9.53C22.4101 9.87 22.7401 10.46 22.7401 11.11V16.83C22.7401 17.96 22.1101 18.98 21.1001 19.49L15.0501 22.52C14.7901 22.66 14.5001 22.72 14.2201 22.72ZM20.8901 10.76C20.8401 10.76 20.7901 10.77 20.7301 10.8L14.6801 13.83C14.1801 14.08 13.8701 14.58 13.8701 15.15V20.87C13.8701 21.05 13.9801 21.14 14.0401 21.18C14.1001 21.22 14.2301 21.27 14.3901 21.19L20.4401 18.16C20.9401 17.91 21.2501 17.4 21.2501 16.84V11.12C21.2501 10.94 21.1401 10.85 21.0801 10.81C21.0401 10.79 20.9701 10.76 20.8901 10.76Z"
fill="#292D32"
fill="currentColor"
/>
</svg>
);
Expand Down
51 changes: 38 additions & 13 deletions apps/web/lib/features/task/task-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ import {
import { activeTeamTaskId, timerStatusState } from '@app/stores';
import { clsxm } from '@app/utils';
import { Combobox, Popover, Transition } from '@headlessui/react';
import { CheckIcon, ChevronUpDownIcon, PlusIcon } from '@heroicons/react/20/solid';
import { CheckIcon, ChevronDownIcon, PlusIcon, UserGroupIcon } from '@heroicons/react/20/solid';
import { Button, Card, Divider, InputField, OutlineBadge, SpinnerLoader, Tooltip } from 'lib/components';
import { CheckCircleTickIcon as TickCircleIcon } from 'assets/svg';
import { CircleIcon, CheckCircleTickIcon as TickCircleIcon } from 'assets/svg';
import {
Fragment,
MutableRefObject,
Expand All @@ -49,6 +49,7 @@ import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
import { ObserverComponent } from '@components/shared/Observer';
import { LazyRender } from 'lib/components/lazy-render';
import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';
import { cn } from '@/lib/utils';

type Props = {
task?: Nullable<ITeamTask>;
Expand Down Expand Up @@ -569,7 +570,7 @@ function TaskCard({
<TaskLabels
className="lg:min-w-[170px] text-xs z-[9999]"
forDetails={false}
taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-9 text-xs"
taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-full text-xs"
onValueChange={(_: any, values: string[] | undefined) => {
taskLabelsData.filter((tag) =>
tag.name ? values?.includes(tag.name) : false
Expand All @@ -586,6 +587,7 @@ function TaskCard({

{taskAssignees !== undefined && (
<AssigneesSelect
className="lg:min-w-[170px] bg-white"
assignees={taskAssignees}
teamMembers={activeTeam?.members ?? []}
/>
Expand Down Expand Up @@ -731,6 +733,7 @@ interface ITeamMemberSelectProps {
id: string;
}[]
>;
className?: string;
}
/**
* A multi select component for assignees
Expand All @@ -751,14 +754,30 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
);

return (
<div className="w-52 rounded-xl bg-[#F2F2F2] dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-2 px-3">
<div
className={cn(
'max-w-52 border rounded-xl bg-[#F2F2F2] dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] px-3',
props.className
)}
>
<Combobox multiple={true}>
<div className="relative my-auto">
<div className="relative w-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
<Combobox.Input readOnly className="w-0 h-0" />
<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-40 items-center">
<span>{t('common.ASSIGNEE')}</span>
<ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
<div className="relative h-full my-auto">
<div className=" w-full h-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
<Combobox.Button className=" h-full hover:transition-all flex justify-between w-40 items-center">
<div
className={cn(
'flex gap-1 items-center !text-default dark:!text-white',
!assignees.current.length && ['!text-dark/40 dark:!text-white']
)}
>
{!assignees.current.length ? (
<CircleIcon className="w-4 h-4" />
) : (
<UserGroupIcon className="w-4 h-4" />
)}
{t('common.ASSIGNEE')}
</div>
<ChevronDownIcon className={clsxm('w-5 h-5 text-default dark:text-white')} />
</Combobox.Button>
</div>
<Transition
Expand All @@ -767,11 +786,14 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Combobox.Options className="absolute mt-1 max-h-40 h-auto w-44 overflow-auto rounded-md dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
<Combobox.Options className="absolute mt-1 max-h-40 h-auto overflow-auto rounded-md dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
{authMember && (
<Combobox.Option
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-primary/5 dark:bg-dark--theme-light dark:text-white' : 'text-gray-100'
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active
? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights'
: 'text-gray-900 dark:text-gray-200'
}`
}
value={authMember}
Expand All @@ -789,7 +811,10 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
<Combobox.Option
key={member.id}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights' : 'text-gray-900 dark:text-gray-200'
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
active
? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights'
: 'text-gray-900 dark:text-gray-200'
}`
}
onClick={() => {
Expand Down
65 changes: 33 additions & 32 deletions apps/web/lib/features/task/task-status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,11 +239,14 @@ export function useStatusValue<T extends ITaskStatusField>({
(value: ITaskStatusStack[T]) => {
if (multipleRef.current) {
setValues((prevValues) => {
const newValues = typeof value === 'string'
? (prevValues.includes(value)
? prevValues.filter((v) => v !== value)
: [...prevValues, value])
: Array.isArray(value) ? value : [value];
const newValues =
typeof value === 'string'
? prevValues.includes(value)
? prevValues.filter((v) => v !== value)
: [...prevValues, value]
: Array.isArray(value)
? value
: [value];

onValueChangeRef.current?.(value, newValues);
return newValues;
Expand Down Expand Up @@ -823,18 +826,18 @@ export function TaskStatus({
isEpic
}: PropsWithChildren<
TStatusItem &
IClassName & {
active?: boolean;
issueType?: 'status' | 'issue';
showIssueLabels?: boolean;
forDetails?: boolean;
titleClassName?: string;
cheched?: boolean;
sidebarUI?: boolean;
value?: string;
isVersion?: boolean;
isEpic?: boolean;
}
IClassName & {
active?: boolean;
issueType?: 'status' | 'issue';
showIssueLabels?: boolean;
forDetails?: boolean;
titleClassName?: string;
cheched?: boolean;
sidebarUI?: boolean;
value?: string;
isVersion?: boolean;
isEpic?: boolean;
}
>) {
const { theme } = useTheme();
const readableColorHex = readableColor(backgroundColor || (theme === 'light' ? '#FFF' : '#000'));
Expand Down Expand Up @@ -864,6 +867,7 @@ export function TaskStatus({
<div
className={cn(
'flex overflow-hidden gap-x-1 items-center whitespace-nowrap text-ellipsis',
'',
titleClassName
)}
>
Expand All @@ -888,8 +892,8 @@ export function TaskStatus({
style={
isVersion || isEpic
? {
color: theme === 'light' ? '#000' : '#FFF'
}
color: theme === 'light' ? '#000' : '#FFF'
}
: {}
}
>
Expand Down Expand Up @@ -985,22 +989,15 @@ export function StatusDropdown<T extends TStatusItem>({
'!text-dark/40 dark:text-white/70',
'bg-white dark:bg-[#1B1D22] border border-gray-200 dark:border-[#FFFFFF33]'
],
value && [
'text-black dark:text-black',
'bg-white dark:bg-white border border-gray-200'
],
isVersion || (forDetails && !value)
? ['text-xs font-normal']
: ['text-sm font-normal'],
value && ['text-black dark:text-black', 'bg-white dark:bg-white border border-gray-200'],
isVersion || (forDetails && !value) ? ['text-xs font-normal'] : ['text-sm font-normal'],
className,
isVersion && 'dark:text-white',
'h-full transition-colors duration-200'
)}
titleClassName={clsxm(
hasBtnIcon && [
'whitespace-nowrap overflow-hidden max-w-[90%] text-ellipsis',
value ? 'text-black dark:text-black' : 'text-dark/40 dark:text-white/70'
]
hasBtnIcon && ['whitespace-nowrap overflow-hidden max-w-[90%] text-ellipsis overflow-hidden'],
!value && 'dark:text-white'
)}
isVersion={isVersion}
isEpic={isEpic}
Expand Down Expand Up @@ -1060,7 +1057,7 @@ export function StatusDropdown<T extends TStatusItem>({
sidebarUI && ['text-xs'],
'text-dark dark:text-white bg-[#F2F2F2] dark:bg-dark--theme-light',
forDetails &&
'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
taskStatusClassName
)}
name={
Expand Down Expand Up @@ -1239,10 +1236,14 @@ export function MultipleStatusDropdown<T extends TStatusItem>({
className={clsxm(
'justify-between w-full capitalize',
sidebarUI && ['text-xs'],
'text-dark dark:text-white bg-[#F2F2F2] dark:bg-dark--theme-light',
' dark:text-white bg-white border dark:bg-dark--theme-light',
forDetails && 'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
taskStatusClassName
)}
titleClassName={clsxm(
values.length > 0 && '!text-dark dark:!text-white',
!value && 'dark:text-white text-slate-400'
)}
name={
values.length > 0
? `Item${values.length === 1 ? '' : 's'} (${values.length})`
Expand Down

0 comments on commit e0f2730

Please sign in to comment.