mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 05:40:31 +00:00
feat: homeapge style.
This commit is contained in:
elforjani3
56
client/src/common/homepageOptions.js
Normal file
56
client/src/common/homepageOptions.js
Normal file
@@ -0,0 +1,56 @@
|
||||
export const shortcutBox = [
|
||||
{
|
||||
title: 'Request time Off',
|
||||
iconColor: '#F3FEFA',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
{
|
||||
title: 'Benefits',
|
||||
iconColor: '#F5F3FE',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
{
|
||||
title: 'Schedule a one-on-one',
|
||||
iconColor: '#F2F9FF',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
{
|
||||
title: 'Payroll',
|
||||
iconColor: '#FFFCED',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
{
|
||||
title: 'Submit an expense',
|
||||
iconColor: '#FDF1F1',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
{
|
||||
title: 'Training',
|
||||
iconColor: '#EFF1FE',
|
||||
description:
|
||||
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
|
||||
},
|
||||
];
|
||||
|
||||
export const announcementLists = [
|
||||
{
|
||||
title: 'Office closed on July 2nd',
|
||||
description:
|
||||
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
|
||||
},
|
||||
{
|
||||
title: 'New Password policy ',
|
||||
description:
|
||||
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
|
||||
},
|
||||
{
|
||||
title: 'Office closed on July 2nd',
|
||||
description:
|
||||
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
|
||||
},
|
||||
];
|
||||
32
client/src/containers/Homepage/AnnouncementList.js
Normal file
32
client/src/containers/Homepage/AnnouncementList.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { announcementLists } from 'common/homepageOptions';
|
||||
|
||||
function AnnouncementBox({ title, description }) {
|
||||
return (
|
||||
<div className={'announcement-box'}>
|
||||
<div className={'announcement-box__title'}>{title}</div>
|
||||
<div className={'announcement-box__description'}>{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AnnouncementList() {
|
||||
return (
|
||||
<section className={'announcements-list'}>
|
||||
<div className={'announcements-list__title'}>Announcement</div>
|
||||
|
||||
{announcementLists.map(({ title, description }) => (
|
||||
<AnnouncementBox title={title} description={description} />
|
||||
))}
|
||||
|
||||
<a href={'#'} className={'btn-view-all'}>
|
||||
<T id={'view_all'} />
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default AnnouncementList;
|
||||
@@ -1,19 +1,19 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import HomepageContent from './HomepageContent';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function DashboardHomepage({ changePageTitle, name }) {
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(name)
|
||||
changePageTitle(name);
|
||||
}, [name, changePageTitle]);
|
||||
|
||||
return (
|
||||
<DashboardInsider name="homepage">
|
||||
|
||||
<HomepageContent />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
@@ -23,4 +23,4 @@ export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
name: organizationSettings.name,
|
||||
})),
|
||||
)(DashboardHomepage);
|
||||
)(DashboardHomepage);
|
||||
|
||||
16
client/src/containers/Homepage/HomepageContent.js
Normal file
16
client/src/containers/Homepage/HomepageContent.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import ShortcutBoxes from './ShortcutBoxes';
|
||||
import AnnouncementList from './AnnouncementList';
|
||||
|
||||
import 'style/pages/HomePage/HomePage.scss';
|
||||
|
||||
function HomepageContent() {
|
||||
return (
|
||||
<div className={'homepage__container'}>
|
||||
<ShortcutBoxes />
|
||||
<AnnouncementList />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomepageContent;
|
||||
45
client/src/containers/Homepage/ShortcutBoxes.js
Normal file
45
client/src/containers/Homepage/ShortcutBoxes.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { shortcutBox } from 'common/homepageOptions';
|
||||
import { Icon } from 'components';
|
||||
|
||||
function ShortcutBox({ title, iconColor, description }) {
|
||||
return (
|
||||
<div className={'shortcut-box'}>
|
||||
<div className={'shortcut-box__header'}>
|
||||
<span
|
||||
className={'header--icon'}
|
||||
style={{ backgroundColor: `${iconColor}` }}
|
||||
>
|
||||
<Icon icon={'clock'} iconSize={24} />
|
||||
</span>
|
||||
<span>
|
||||
<a href={'#'}>
|
||||
<Icon icon={'arrow-top-right'} iconSize={24} />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div className={'shortcut-box__title'}>{title}</div>
|
||||
<div className={'shortcut-box__description'}>{description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ShortcutBoxes() {
|
||||
return (
|
||||
<section className={'shortcut-boxes'}>
|
||||
{shortcutBox.map(({ title, description, iconColor }) => {
|
||||
return (
|
||||
<ShortcutBox
|
||||
title={title}
|
||||
description={description}
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShortcutBoxes;
|
||||
@@ -322,7 +322,7 @@ export default {
|
||||
full_name: 'Full Name',
|
||||
the_user_has_been_inactivated_successfully:
|
||||
'The user has been inactivated successfully.',
|
||||
the_user_has_been_deleted_successfully:
|
||||
the_user_has_been_deleted_successfully:
|
||||
'The user has been deleted successfully.',
|
||||
customize_report: 'Customize Report',
|
||||
print: 'Print',
|
||||
@@ -942,7 +942,7 @@ export default {
|
||||
delete_adjustment: 'Delete Adjustment',
|
||||
the_make_adjustment_has_been_created_successfully:
|
||||
'The make adjustment has been created successfully.',
|
||||
the_adjustment_has_been_deleted_successfully:
|
||||
the_adjustment_has_been_deleted_successfully:
|
||||
'The adjustment has been deleted successfully.',
|
||||
once_delete_this_inventory_a_adjustment_you_will_able_to_restore_it: `Once you delete this inventory a adjustment, you won\'t be able to restore it later. Are you sure you want to delete this invoice?`,
|
||||
select_adjustment_account: 'Select adjustment account',
|
||||
@@ -964,4 +964,5 @@ export default {
|
||||
selected_customers: '{count} Selected Customers',
|
||||
transaction_number: 'Transaction #',
|
||||
running_balance: 'Running balance',
|
||||
view_all: 'View all',
|
||||
};
|
||||
|
||||
@@ -354,18 +354,22 @@ export default {
|
||||
path: ['M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'],
|
||||
viewBox: '0 0 24 24',
|
||||
},
|
||||
'numbers': {
|
||||
numbers: {
|
||||
path: [
|
||||
'M2.9377,11V5.26q0-.3633.0069-.9238T2.98,3.3a3.6334,3.6334,0,0,1-.35.3785q-.1677.1538-.3642.3076L1.16,4.9105.0535,3.5246,3.19,1.0046H5.08V11Z',
|
||||
'M7.8655,11V9.5158l2.5058-2.5332q.7559-.77,1.2178-1.295a4.512,4.512,0,0,0,.6719-.9521,2.0537,2.0537,0,0,0,.21-.917,1.0375,1.0375,0,0,0-.3711-.875,1.455,1.455,0,0,0-.917-.2871,2.2924,2.2924,0,0,0-1.0712.2661A6.6756,6.6756,0,0,0,9,3.6789L7.8376,2.2926A10.771,10.771,0,0,1,8.7615,1.6a4.4132,4.4132,0,0,1,1.1264-.5323A4.931,4.931,0,0,1,11.3791.8644a3.9291,3.9291,0,0,1,1.7012.3433,2.6249,2.6249,0,0,1,1.1123.9521,2.5386,2.5386,0,0,1,.3926,1.4068A3.5845,3.5845,0,0,1,14.27,5.0788a5.32,5.32,0,0,1-.9307,1.3579q-.6166.6715-1.4981,1.498L10.595,9.1378v.07h4.27V11Z',
|
||||
'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z'
|
||||
'M18.91,11.14a7.8841,7.8841,0,0,1-1.582-.14,7.3067,7.3067,0,0,1-1.3155-.4062v-1.82a5.5853,5.5853,0,0,0,1.3438.498,5.9318,5.9318,0,0,0,1.3164.16,2.5022,2.5022,0,0,0,1.5742-.3779,1.2582,1.2582,0,0,0,.4556-1.0216,1.105,1.105,0,0,0-.5459-1.0078,3.7194,3.7194,0,0,0-1.8477-.336h-.7422V5.0368h.7558a3.0031,3.0031,0,0,0,1.708-.378,1.167,1.167,0,0,0,.5322-.9941.93.93,0,0,0-.3779-.8052,1.7126,1.7126,0,0,0-1.0225-.2729,3.1339,3.1339,0,0,0-1.28.2451,6.4963,6.4963,0,0,0-.917.4829l-.9248-1.4277a6.0463,6.0463,0,0,1,1.3867-.7212A5.67,5.67,0,0,1,19.4149.8644a3.838,3.838,0,0,1,2.3945.6514,2.08,2.08,0,0,1,.84,1.729,2.2193,2.2193,0,0,1-.6231,1.6518,3.2277,3.2277,0,0,1-1.5332.84v.042a3.1845,3.1845,0,0,1,1.8272.7422,2.1271,2.1271,0,0,1,.623,1.624,2.8,2.8,0,0,1-.4267,1.5185A2.9013,2.9013,0,0,1,21.2,10.7415,5.6336,5.6336,0,0,1,18.91,11.14Z',
|
||||
],
|
||||
viewBox: '0 0 23 12',
|
||||
},
|
||||
"small-tick": {
|
||||
'small-tick': {
|
||||
path: [
|
||||
'M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm5-14c-.28 0-.53.11-.71.29L8 12.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l7-7A1.003 1.003 0 0015 6z'
|
||||
'M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm5-14c-.28 0-.53.11-.71.29L8 12.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29.28 0 .53-.11.71-.29l7-7A1.003 1.003 0 0015 6z',
|
||||
],
|
||||
viewBox: '0 0 20 20'
|
||||
}
|
||||
viewBox: '0 0 20 20',
|
||||
},
|
||||
'arrow-top-right': {
|
||||
path: ['M9,5v2h6.59L4,18.59L5.41,20L17,8.41V15h2V5H9'],
|
||||
viewBox: '0 0 24 24',
|
||||
},
|
||||
};
|
||||
|
||||
107
client/src/style/pages/HomePage/HomePage.scss
Normal file
107
client/src/style/pages/HomePage/HomePage.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
.homepage {
|
||||
&__container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin: 22px 32px;
|
||||
background-color: transparent;
|
||||
|
||||
.shortcut-boxes {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
border-right: 1px solid #d2dce2;
|
||||
|
||||
.shortcut-box {
|
||||
width: 50%;
|
||||
// height: 174px;
|
||||
padding: 16px;
|
||||
border-left: 1px solid #d2dce2;
|
||||
border-top: 1px solid #d2dce2;
|
||||
background-color: transparent;
|
||||
transition: 0.2s;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
|
||||
span > a {
|
||||
color: #d6d6e0;
|
||||
}
|
||||
.header--icon {
|
||||
width: 38px;
|
||||
height: 32px;
|
||||
// background-color:#F3FEFA;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: #48485c;
|
||||
font-weight: 500;
|
||||
line-height: 1.6rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__description {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.announcements-list {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d2dce2;
|
||||
margin-left: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.announcement-box {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&____description {
|
||||
}
|
||||
|
||||
&.announcement-box:not(:last-child) {
|
||||
// border-top: 1px solid #d2dce2;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
}
|
||||
}
|
||||
.btn-view-all {
|
||||
display: flex;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
padding: 5px;
|
||||
margin: 20px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: 1px solid;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user