feat: homeapge style.

2026-02-17 21:30:31 +00:00 · 2021-01-31 21:20:20 +02:00
parent 732c3bbfd7
commit 9456cc989e
8 changed files with 273 additions and 12 deletions
--- a/client/src/common/homepageOptions.js
+++ b/client/src/common/homepageOptions.js
@@ -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.',
+  },
+];
--- a/client/src/containers/Homepage/AnnouncementList.js
+++ b/client/src/containers/Homepage/AnnouncementList.js
@@ -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;
--- a/client/src/containers/Homepage/Homepage.js
+++ b/client/src/containers/Homepage/Homepage.js
@@ -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);
--- a/client/src/containers/Homepage/HomepageContent.js
+++ b/client/src/containers/Homepage/HomepageContent.js
@@ -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;
--- a/client/src/containers/Homepage/ShortcutBoxes.js
+++ b/client/src/containers/Homepage/ShortcutBoxes.js
@@ -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;
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -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',
 };
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -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',
+  },
 };
--- a/client/src/style/pages/HomePage/HomePage.scss
+++ b/client/src/style/pages/HomePage/HomePage.scss
@@ -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;
+      }
+    }
+  }
+}