QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 06:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(projects): optimize style time entry form.

Browse Source
This commit is contained in:
a.bouhuolia
2022-10-05 23:29:13 +02:00
parent f9a7021f55
commit 048fcda9dc
8 changed files with 94 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx
View File

@@ -2,7 +2,8 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { ProjectPurchasesTable } from './ProjectPurchasesTable'; import { ProjectPurchasesTable } from './ProjectPurchasesTable';
import { DashboardContentTable } from '@/components'; import { Box, DashboardContentTable } from '@/components';
import { ProjectDetailHeader } from '../ProjectDetailsHeader';
/** /**
* *
@@ -10,8 +11,11 @@ import { DashboardContentTable } from '@/components';
*/ */
export default function ProjectPurchasesTableRoot() { export default function ProjectPurchasesTableRoot() {
return ( return (
<DashboardContentTable> <Box>
<ProjectPurchasesTable /> <ProjectDetailHeader />
</DashboardContentTable> <DashboardContentTable>
<ProjectPurchasesTable />
</DashboardContentTable>
</Box>
); );
} }

40
src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
View File

@@ -16,6 +16,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
import withDialogActions from '@/containers/Dialog/withDialogActions'; import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils'; import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/** /**
* Timesheet DataTable. * Timesheet DataTable.
@@ -39,11 +40,10 @@ function ProjectTimesheetsTableRoot({
const handleDeleteTimesheet = ({ id }) => { const handleDeleteTimesheet = ({ id }) => {
openAlert('project-timesheet-delete', { timesheetId: id }); openAlert('project-timesheet-delete', { timesheetId: id });
}; };
// Handle edit timesheet.
const handleEditTimesheet = ({ id }) => { const handleEditTimesheet = ({ id }) => {
openDialog('project-time-entry-form', { timesheetId: id, action: 'edit' }); openDialog('project-time-entry-form', { timesheetId: id, action: 'edit' });
}; };
// Local storage memorizing columns widths. // Local storage memorizing columns widths.
const [initialColumnsWidths, , handleColumnResizing] = const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.TIMESHEETS); useMemorizedColumnsWidths(TABLES.TIMESHEETS);
@@ -87,33 +87,19 @@ const ProjectTimesheetDataTable = styled(DataTable)`
.tbody { .tbody {
.tr .td { .tr .td {
padding: 0.4rem 0.8rem; padding-top: 0.7rem;
padding-bottom: 0.7rem;
&.td-name {
padding-left: 1rem;
}
&.td-actions{
padding-right: 1rem;
}
} }
.avatar.td { .tr:last-of-type .td{
.cell-inner { border-bottom: 0;
.avatar {
display: inline-block;
background: #adbcc9;
border-radius: 50%;
text-align: center;
font-weight: 400;
color: #fff;
&[data-size='medium'] {
height: 30px;
width: 30px;
line-height: 30px;
font-size: 14px;
}
&[data-size='small'] {
height: 25px;
width: 25px;
line-height: 25px;
font-size: 12px;
}
}
}
} }
} }
} }

27
src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx
View File

@@ -30,22 +30,13 @@ export function ActionsMenu({
); );
} }
/**
* Avatar cell.
*/
export const AvatarCell = ({ row: { original }, size }) => (
<span className="avatar" data-size={size}>
{firstLettersArgs(original?.display_name, original?.task_name)}
</span>
);
/** /**
* Timesheet accessor. * Timesheet accessor.
*/ */
export const TimesheetAccessor = (timesheet) => ( export const TimesheetAccessor = (timesheet) => (
<React.Fragment> <React.Fragment>
<TimesheetHeader> <TimesheetHeader>
<TimesheetTitle>{timesheet.display_name}</TimesheetTitle> <TimesheetTitle>{timesheet.customer_name}</TimesheetTitle>
<TimesheetSubTitle>{timesheet.task_name}</TimesheetSubTitle> <TimesheetSubTitle>{timesheet.task_name}</TimesheetSubTitle>
</TimesheetHeader> </TimesheetHeader>
<TimesheetContent> <TimesheetContent>
@@ -63,19 +54,19 @@ const TimesheetHeader = styled.div`
flex-flow: wrap; flex-flow: wrap;
`; `;
const TimesheetTitle = styled.span` const TimesheetTitle = styled.span`
font-weight: 500; font-weight: 600;
margin-right: 12px; margin-right: 8px;
line-height: 1.5rem; `;
const TimesheetSubTitle = styled.span`
font-size: 13px;
opacity: 0.9;
`; `;
const TimesheetSubTitle = styled.span``;
const TimesheetContent = styled.div` const TimesheetContent = styled.div`
display: block; display: block;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
opacity: 0.75; color: #5D5E71;
margin-bottom: 0.1rem; margin-top: 0.25rem;
line-height: 1.2rem;
`; `;
const TimesheetDescription = styled.span` const TimesheetDescription = styled.span`

10
src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
View File

@@ -9,16 +9,6 @@ import { AvatarCell, TimesheetAccessor } from './components';
export function useProjectTimesheetColumns() { export function useProjectTimesheetColumns() {
return React.useMemo( return React.useMemo(
() => [ () => [
{
id: 'avatar',
Header: '',
Cell: AvatarCell,
className: 'avatar',
width: 45,
disableResizing: true,
disableSortBy: true,
clickable: true,
},
{ {
id: 'name', id: 'name',
Header: 'Header', Header: 'Header',

110
src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
View File

@@ -13,6 +13,7 @@ import {
FTextArea, FTextArea,
FieldRequiredHint, FieldRequiredHint,
FormattedMessage as T, FormattedMessage as T,
Stack,
} from '@/components'; } from '@/components';
import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider'; import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
import { import {
@@ -37,8 +38,25 @@ function ProjectTimeEntryFormFields() {
return ( return (
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
{/*------------ Project -----------*/} <Stack spacing={20}>
<If condition={!projectId}> {/*------------ Date -----------*/}
<FFormGroup
label={intl.get('project_time_entry.dialog.date')}
name={'date'}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<FDateInput
{...momentFormatter('YYYY/MM/DD')}
name="date"
formatDate={(date) => date.toLocaleString()}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
/>
</FFormGroup>
{/*------------ Project -----------*/}
<FFormGroup <FFormGroup
name={'project_id'} name={'project_id'}
label={<T id={'project_time_entry.dialog.project'} />} label={<T id={'project_time_entry.dialog.project'} />}
@@ -51,55 +69,51 @@ function ProjectTimeEntryFormFields() {
input={ProjectSelectButton} input={ProjectSelectButton}
/> />
</FFormGroup> </FFormGroup>
</If>
{/*------------ Task -----------*/}
<FFormGroup
name={'task_id'}
label={<T id={'project_time_entry.dialog.task'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ProjectTaskSelect
name={'task_id'}
tasks={projectTasks}
popoverProps={{ minimal: true }}
/>
</FFormGroup>
{/*------------ Duration -----------*/} {/*------------ Task -----------*/}
<FFormGroup <FFormGroup
label={intl.get('project_time_entry.dialog.duration')} name={'task_id'}
name={'duration'} label={<T id={'project_time_entry.dialog.task'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
> className={classNames('form-group--select-list', Classes.FILL)}
<FInputGroup name="duration" inputProps={{}} /> >
</FFormGroup> <ProjectTaskSelect
{/*------------ Date -----------*/} name={'task_id'}
<FFormGroup tasks={projectTasks}
label={intl.get('project_time_entry.dialog.date')} popoverProps={{ minimal: true }}
name={'date'} />
className={classNames(CLASSES.FILL, 'form-group--date')} </FFormGroup>
>
<FDateInput {/*------------ Duration -----------*/}
{...momentFormatter('YYYY/MM/DD')} <FFormGroup
name="date" label={intl.get('project_time_entry.dialog.duration')}
formatDate={(date) => date.toLocaleString()} name={'duration'}
popoverProps={{ labelInfo={<FieldRequiredHint />}
position: Position.BOTTOM, >
minimal: true, <DurationInputGroup
}} name="duration"
/> inputProps={{}}
</FFormGroup> placeholder="HH:MM"
{/*------------ Description -----------*/} />
<FFormGroup </FFormGroup>
name={'description'}
label={intl.get('project_time_entry.dialog.description')} {/*------------ Description -----------*/}
className={'form-group--description'} <FFormGroup
> name={'description'}
<FTextArea name={'description'} /> label={intl.get('project_time_entry.dialog.description')}
</FFormGroup> className={'form-group--description'}
>
<FTextArea name={'description'} />
</FFormGroup>
</Stack>
</div> </div>
); );
} }
export default ProjectTimeEntryFormFields; export default ProjectTimeEntryFormFields;
const DurationInputGroup = styled(FInputGroup)`
.bp3-input {
width: 150px;
}
`;

5
src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
View File

@@ -29,13 +29,10 @@ function ProjectTimeEntryFormFloatingActions({
return ( return (
<div className={Classes.DIALOG_FOOTER}> <div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}> <div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
<T id={'cancel'} />
</Button>
<Button <Button
intent={Intent.PRIMARY} intent={Intent.PRIMARY}
loading={isSubmitting} loading={isSubmitting}
style={{ minWidth: '75px' }} style={{ minWidth: '95px' }}
type="submit" type="submit"
> >
<T id={'project_time_entry.dialog.create'} /> <T id={'project_time_entry.dialog.create'} />

2
src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
View File

@@ -49,7 +49,7 @@ export default compose(withDialogRedux())(ProjectTimeEntryFormDialog);
const ProjectTimeEntryFormDialogRoot = styled(Dialog)` const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
.bp3-dialog-body { .bp3-dialog-body {
.bp3-form-group { .bp3-form-group {
margin-bottom: 15px; margin-bottom: 0;
label.bp3-label { label.bp3-label {
margin-bottom: 3px; margin-bottom: 3px;

24
src/style/containers/FinancialStatements/DrawerHeader.scss
View File

@@ -13,13 +13,6 @@
&.is-hidden { &.is-hidden {
visibility: hidden; visibility: hidden;
} }
.row {
.col {
max-width: 400px;
min-width: 250px;
}
}
.bp3-drawer { .bp3-drawer {
box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent;
max-height: 550px; max-height: 550px;
@@ -38,14 +31,6 @@
} }
} }
.bp3-form-group {
margin-bottom: 22px;
label.bp3-label {
margin-bottom: 6px;
}
}
.bp3-button.button--submit-filter { .bp3-button.button--submit-filter {
min-height: 34px; min-height: 34px;
padding-left: 16px; padding-left: 16px;
@@ -102,9 +87,6 @@
} }
} }
.bp3-tab-panel {
}
&__footer { &__footer {
background-color: #ecf0f3; background-color: #ecf0f3;
border-top: 1px solid #c3cdd5; border-top: 1px solid #c3cdd5;
@@ -114,7 +96,6 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.row { .row {
margin-left: -0.85rem; margin-left: -0.85rem;
margin-right: -0.85rem; margin-right: -0.85rem;
@@ -129,9 +110,4 @@
height: auto; height: auto;
} }
} }
// .bp3-multi-select-popover .bp3-menu {
// max-height: 200px;
// width: 300px;
// overflow: auto;
// }
} }