Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2139 fix home page design and skeleton structure (#2155) #2178

Merged
merged 1 commit into from
Feb 8, 2024
Merged

2139 fix home page design and skeleton structure (#2155) #2178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 24 additions & 19 deletions apps/web/app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import '../../styles/globals.css';

import { useRecoilValue } from 'recoil';
import { fullWidthState } from '@app/stores/fullWidth';
import { ChevronDown } from 'lucide-react';

function MainPage() {
const t = useTranslations();
Expand All @@ -60,14 +61,14 @@ function MainPage() {
<MainLayout>
<ChatwootWidget />
<MainHeader className="pb-1" fullWidth={fullWidth}>
<div className="flex flex-col md:flex-row items-start justify-between h-12 md:h-5">
<div className="flex items-center gap-8">
<div className="flex flex-row items-start justify-between ">
<div className="flex justify-center items-center gap-8 h-10">
<PeopleIcon className="stroke-dark dark:stroke-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumb} className="text-sm" />
</div>

{/* <Collaborative /> */}
<div className="flex w-full md:w-max items-center justify-center py-4 md:py-0 gap-1">
<div className="flex h-10 w-max items-center justify-center gap-1">
<Tooltip label={'Cards'} placement="top-start">
<button
className={clsxm(
Expand Down Expand Up @@ -127,11 +128,7 @@ function MainPage() {
<TeamInvitations />
</MainHeader>

<div
className={`sticky top-20 z-50 bg-white dark:bg-[#191A20] pt-5 ${
view !== IssuesView.CARDS ? 'pb-7' : ''
}`}
>
<div className={`z-50 bg-white dark:bg-[#191A20] pt-5 ${view !== IssuesView.CARDS ? 'pb-7' : ''}`}>
<Container fullWidth={fullWidth}>
{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
{view === IssuesView.CARDS && isTeamMember ? (
Expand Down Expand Up @@ -163,22 +160,30 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
<Card
shadow="bigger"
className={clsxm(
'w-full flex md:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
'w-full flex lg:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
'border-[#00000008] border-[0.125rem] dark:border-[#26272C] dark:shadow-lg dark:bg-[#1B1D22]'
)}
>
{/* Task inputs */}
{/* {showInput && ( */}
<AuthUserTaskInput
className={clsxm('mx-auto w-full md:w-1/2 2xl:w-full lg:mr-10', !showInput && '!hidden md:!flex')}
className={clsxm(
'mx-auto w-full lg:w-3/4 lg:mr-10',
!showInput && '!hidden md:!flex',
!isTrackingEnabled && 'md:w-full'
)}
/>
{/* )} */}

<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
{showInput ? 'hide the issue input' : 'show the issue input'}
</button>
{/* Timer */}
{isTrackingEnabled ? <Timer /> : null}
<div
onClick={() => setShowInput((p) => !p)}
className="border dark:border-[#26272C] w-full rounded p-2 md:hidden flex justify-center mt-2"
>
<ChevronDown className={clsxm('h-12 transition-all', showInput && 'rotate-180')}>
{showInput ? 'hide the issue input' : 'show the issue input'}
</ChevronDown>
</div>
{isTrackingEnabled ? (
<div className="w-full lg:w-1/4">
<Timer />
</div>
) : null}
</Card>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/hooks/features/useTaskEstimation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function useTaskEstimation(task?: Nullable<ITeamTask>) {
useEffect(() => {
const { h, m } = secondsToTime($task?.estimate || 0);
setValue({
hours: h.toString(),
hours: h ? h.toString() : '',
minutes: pad(m).toString()
});
}, [$task?.estimate]);
Expand Down
4 changes: 3 additions & 1 deletion apps/web/app/services/client/api/public-organization-team.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ export function getPublicOrganizationTeamsAPI(profile_link: string, team_id: str
params[`relations[${i}]`] = rl;
});

const queries = qs.stringify(params);

const queries = qs.stringify(params);

const endpoint = GAUZY_API_BASE_SERVER_URL.value
? `/public/team/${profile_link}/${team_id}?${queries}`
: `/public/team/${profile_link}/${team_id}?type=team`;
Expand All @@ -48,6 +49,7 @@ export function getPublicOrganizationTeamsMiscDataAPI(profile_link: string, team
params[`relations[${i}]`] = rl;
});


const queries = qs.stringify(params);

const endpoint = GAUZY_API_BASE_SERVER_URL.value
Expand Down
1 change: 1 addition & 0 deletions apps/web/app/services/server/requests/public-organization-team.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export function getPublicOrganizationTeamRequest({
params[`relations[${i}]`] = rl;
});


const queries = qs.stringify(params || {});

return serverFetch<IOrganizationTeamWithMStatus>({
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/components/inputs/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const TimeInputField = forwardRef<HTMLInputElement, ITimeProps>(
/>
<span className="absolute left-0 w-full text-center -z-10 dark:text-[#7E7991] mt-1">{dash}</span>
</div>
<span className="pl-1">{!loading ? label : <SpinnerLoader size={15} />}</span>
<span className="">{!loading ? label : <SpinnerLoader size={15} />}</span>
</div>
);
}
Expand Down
29 changes: 14 additions & 15 deletions apps/web/lib/features/auth-user-task-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,40 +23,39 @@ export function AuthUserTaskInput({ className }: IClassName) {
showTaskNumber={true}
autoAssignTaskAuth={isTrackingEnabled}
/>

<div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-center">
<div className="flex mb-4 lg:mb-0">
<span className="font-normal text-gray-500">{t('common.ESTIMATE')}:</span>
<div className="flex gap-5 flex-row lg:items-center justify-between ml-2">
<div className="xl:flex mb-4 lg:mb-0">
<span className="font-normal text-gray-500 pr-2">{t('common.ESTIMATE')}:</span>
<TaskEstimate />
</div>

<div className="justify-end flex-1 hidden gap-2 md:flex">
<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
<ActiveTaskStatusDropdown
className="lg:min-w-[170px]"
className="lg:max-w-[190px] w-full"
disabled={!activeTeamTask}
taskStatusClassName="h-7 text-xs"
taskStatusClassName="text-xs py-1.5 w-full"
/>

<ActiveTaskPropertiesDropdown
className="lg:min-w-[170px]"
className="lg:max-w-[190px] w-full"
disabled={!activeTeamTask}
taskStatusClassName="h-7 text-xs"
taskStatusClassName="w-full py-1.5 text-xs"
/>

<ActiveTaskSizesDropdown
className="lg:min-w-[170px]"
className="lg:max-w-[190px] w-full"
disabled={!activeTeamTask}
taskStatusClassName="h-7 text-xs"
taskStatusClassName="w-full py-1.5 text-xs"
/>

<TaskLabels
task={activeTeamTask}
className="lg:min-w-[170px] text-xs"
className="lg:max-w-[170px] w-full text-xs"
forDetails={false}
taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-7 text-xs"
taskStatusClassName="dark:bg-[#1B1D22] dark:border py-[7px] dark:border-[#FFFFFF33] text-xs"
/>
</div>
<div className="grid justify-items-center md:hidden">
{/* <div className="grid justify-items-center md:hidden">
<div className="flex">
<ActiveTaskStatusDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
<ActiveTaskPropertiesDropdown className="w-32" disabled={!activeTeamTask} />
Expand All @@ -65,7 +64,7 @@ export function AuthUserTaskInput({ className }: IClassName) {
<ActiveTaskSizesDropdown className="w-32 mr-2" disabled={!activeTeamTask} />
<TaskLabels task={activeTeamTask} className="lg:min-w-[170px]" forDetails={false} />
</div>
</div>
</div> */}
</div>
</div>
);
Expand Down
1 change: 0 additions & 1 deletion apps/web/lib/features/task/task-estimate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export function TaskEstimate({ _task, onCloseEdition, className, loadingRef, clo
updateLoading,
editableMode
} = useTaskEstimation(_task);

const onCloseEditionRef = useCallbackRef(onCloseEdition);
const closeable_fcRef = useCallbackRef(closeable_fc);

Expand Down
49 changes: 28 additions & 21 deletions apps/web/lib/features/team/user-team-card/task-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,36 @@ export function InviteUserTeamSkeleton() {
export function UserTeamCardHeader() {
const t = useTranslations();
return (
<div className="hidden sm:flex row font-normal justify-between pb-5 pt-8 hidde dark:text-[#7B8089]">
{/* <li className="pr-[50px]">{t('common.STATUS')}</li> */}
<div className="2xl:w-[20.625rem] text-center">{t('common.NAME')}</div>
<div className="w-1"></div>
<div className="2xl:w-80 3xl:w-[32rem] w-1/5 text-center">{t('common.TASK')}</div>
<div className="w-1"></div>
<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
<div className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col justify-center text-center">
{t('task.taskTableHead.TASK_WORK.TITLE')}
<br />
{t('common.TASK')}
<div className="my-6 dark:text-[#7B8089] font-normal">
<div className="relative m-0 flex items-center">
<div className="flex w-1/4 justify-center items-center space-x-2 lg:space-x-4 2xl:w-[20.625rem]">
<p>{t('common.NAME')}</p>
</div>
</Tooltip>
<div className="w-1"></div>
<div className=" text-center w-1/5 lg:px-3 2xl:w-52 3xl:w-64">{t('common.ESTIMATE')}</div>
<div className="w-1"></div>
<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 text-center">
{t('task.taskTableHead.TOTAL_WORK.TITLE')}
<br />
{t('common.TODAY')}

<div className="flex-grow self-stretch flex justify-end items-center">{t('common.TASK')}</div>

<div className="flex flex-1 w-[100%-_20px]"></div>

<div className="3xl:w-[12rem] flex w-1/5 flex-col justify-center gap-y-[1.125rem] 2xl:w-48">
<div className="lg:text-center text-left w-full mt-1.5">
<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
<div className="text-center">
{t('task.taskTableHead.TASK_WORK.TITLE')}
<br />
<span>{t('common.TASK')}</span>
</div>
</Tooltip>
</div>
</div>
<div className="3xl:w-80 w-1/5 lg:px-4 2xl:w-52 lg:text-center text-right">{t('common.ESTIMATE')}</div>
<div className="3xl:w-64 flex w-1/5 cursor-pointer items-center justify-center mt-1.5 gap-4 lg:px-3 2xl:w-52">
<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
{t('task.taskTableHead.TOTAL_WORK.TITLE')}
<br />
<span className="ml-6">{t('common.TODAY')}</span>
</Tooltip>
</div>
</Tooltip>
</div>
</div>
);
}
74 changes: 41 additions & 33 deletions apps/web/lib/features/timer/timer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,43 +58,51 @@ export function Timer({ className }: IClassName) {
useHotkeys(HostKeys.START_STOP_TIMER, handleStartSTOPTimer);

return (
<div className={clsxm('flex flex-row mb-6 md:mb-12 2xl:mb-0', className)}>
<div className="flex items-start justify-between border-r-[2px] dark:border-r-[#28292F] pr-5">
<div className="w-[11rem]">
<Text.Heading
as="h3"
className={`lg:text-4xl text-2xl tracking-wide font-normal ${
timerStatus?.running &&
timerStatus?.lastLog?.source &&
timerStatus?.lastLog?.source !== TimerSource.TEAMS
? 'text-[#888] dark:text-[#888]'
: ''
} `}
>
{pad(hours)}:{pad(minutes)}:{pad(seconds)}
<span className="text-sm">:{pad(ms_p)}</span>
</Text.Heading>

<ProgressBar width="100%" className="mt-2" progress={`${activeTaskEstimation}%`} />
</div>
<div className="w-[0.625rem]">
{timerStatus && timerStatus.running && (
<Tooltip
label={`The time tracker is already running in the ${(
timerStatus?.lastLog?.source || TimerSource.TEAMS
)
.split('_')
.join(' ')
.toLowerCase()}`}
placement="bottom-start"
<div
className={clsxm(
'flex space-x-2 lg:flex-col xl:flex-row justify-center items-center p-2 xl:space-y-0 space-y-5',
className
)}
>
<div className="xl:w-4/5 space-x-2 w-full flex justify-center items-center pr-2">
<div className="flex items-start justify-between w-full">
<div className="w-full mx-auto">
<Text.Heading
as="h3"
className={`text-4xl lg:text-center tracking-wide font-normal ${
timerStatus?.running &&
timerStatus?.lastLog?.source &&
timerStatus?.lastLog?.source !== TimerSource.TEAMS
? 'text-[#888] dark:text-[#888]'
: ''
} `}
>
<TimerRunningSourceIcon source={timerStatus?.lastLog?.source || TimerSource.TEAMS} />
</Tooltip>
)}
{pad(hours)}:{pad(minutes)}:{pad(seconds)}
<span className="text-sm">:{pad(ms_p)}</span>
</Text.Heading>

<ProgressBar width="100%" className="mt-2" progress={`${activeTaskEstimation}%`} />
</div>
<div>
{timerStatus && timerStatus.running && (
<Tooltip
label={`The time tracker is already running in the ${(
timerStatus?.lastLog?.source || TimerSource.TEAMS
)
.split('_')
.join(' ')
.toLowerCase()}`}
placement="bottom-start"
>
<TimerRunningSourceIcon source={timerStatus?.lastLog?.source || TimerSource.TEAMS} />
</Tooltip>
)}
</div>
</div>
</div>

<div className="ml-5 z-[50]">
<VerticalSeparator />
<div className="w-1/4 xl:w-2/5 h-fit flex justify-center items-center">
<Tooltip
label={!canRunTimer ? t('timer.START_TIMER') : osSpecificTimerTooltipLabel}
placement="top-start"
Expand Down
Loading