From ae29d20cc93ea3aecd5613c213acfe8774572536 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 25 Mar 2020 21:27:52 +0200 Subject: [PATCH] feat: scss architecture. --- client/src/components/MenuItem.js | 260 ++++++ client/src/components/Sidebar/SidebarMenu.js | 40 +- client/src/config/sidebarMenu.js | 118 ++- client/src/static/json/icons.js | 4 + client/src/style/App.scss | 853 +----------------- client/src/style/components/data-table.scss | 51 ++ client/src/style/components/dialog.scss | 9 + client/src/style/components/tabs.scss | 8 + client/src/style/objects/form.scss | 39 + client/src/style/objects/typography.scss | 9 + client/src/style/pages/account-form.scss | 11 + client/src/style/pages/accounts-chart.scss | 25 + client/src/style/pages/dashboard.scss | 246 +++++ client/src/style/pages/expense-form.scss | 17 + .../src/style/pages/financial-statements.scss | 48 + .../src/style/pages/make-journal-entries.scss | 39 + client/src/style/pages/preferences.scss | 54 ++ client/src/style/pages/view-form.scss | 91 ++ client/src/style/views/Sidebar.scss | 107 +++ client/src/style/views/filter-dropdown.scss | 38 + 20 files changed, 1156 insertions(+), 911 deletions(-) create mode 100644 client/src/components/MenuItem.js create mode 100644 client/src/style/components/data-table.scss create mode 100644 client/src/style/components/dialog.scss create mode 100644 client/src/style/components/tabs.scss create mode 100644 client/src/style/objects/form.scss create mode 100644 client/src/style/objects/typography.scss create mode 100644 client/src/style/pages/account-form.scss create mode 100644 client/src/style/pages/accounts-chart.scss create mode 100644 client/src/style/pages/expense-form.scss create mode 100644 client/src/style/pages/financial-statements.scss create mode 100644 client/src/style/pages/make-journal-entries.scss create mode 100644 client/src/style/views/filter-dropdown.scss diff --git a/client/src/components/MenuItem.js b/client/src/components/MenuItem.js new file mode 100644 index 000000000..4c5ed596f --- /dev/null +++ b/client/src/components/MenuItem.js @@ -0,0 +1,260 @@ +/* + * Copyright 2015 Palantir Technologies, Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import classNames from "classnames"; +import React, {useState} from "react"; + +// import { + // , + // } from "@bluprintjs/core/src/components/common"; +// import { DISPLAYNAME_PREFIX } from "../../common/props"; +import { + Icon, + Popover, + PopoverInteractionKind, + Text, + Menu, + Classes, Position, + AbstractPureComponent2, + DISPLAYNAME_PREFIX, + Collapse +} from "@blueprintjs/core"; + +// export interface IMenuItemProps extends IActionProps, ILinkProps { +// // override from IActionProps to make it required +// /** Item text, required for usability. */ +// text: React.ReactNode; + +// /** Whether this menu item should appear with an active state. */ +// active?: boolean; +// /** +// * Children of this component will be rendered in a __submenu__ that appears when hovering or +// * clicking on this menu item. +// * +// * Use `text` prop for the content of the menu item itself. +// */ +// children?: React.ReactNode; + +// /** +// * Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`, +// * and mouse event handlers (in particular click, down, enter, leave). +// */ +// disabled?: boolean; + +// /** +// * Right-aligned label text content, useful for displaying hotkeys. +// * +// * This prop actually supports JSX elements, but TypeScript will throw an error because +// * `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript. +// */ +// label?: string; + +// /** +// * A space-delimited list of class names to pass along to the right-aligned label wrapper element. +// */ +// labelClassName?: string; + +// /** +// * Right-aligned label content, useful for displaying hotkeys. +// */ +// labelElement?: React.ReactNode; + +// /** +// * Whether the text should be allowed to wrap to multiple lines. +// * If `false`, text will be truncated with an ellipsis when it reaches `max-width`. +// * @default false +// */ +// multiline?: boolean; + +// /** +// * Props to spread to `Popover`. Note that `content` and `minimal` cannot be +// * changed and `usePortal` defaults to `false` so all submenus will live in +// * the same container. +// */ +// popoverProps?: Partial; + +// /** +// * Whether an enabled item without a submenu should automatically close its parent popover when clicked. +// * @default true +// */ +// shouldDismissPopover?: boolean; + +// /** +// * Name of the HTML tag that wraps the MenuItem. +// * @default "a" +// */ +// tagName?: keyof JSX.IntrinsicElements; + +// /** +// * A space-delimited list of class names to pass along to the text wrapper element. +// */ +// textClassName?: string; +// } + +export default class MenuItem extends AbstractPureComponent2 { + static get defaultProps() { + return { + disabled: false, + multiline: false, + popoverProps: {}, + shouldDismissPopover: true, + text: "", + dropdownType: 'popover', + }; + }; + static get displayName() { + return `${DISPLAYNAME_PREFIX}.MenuItem`; + } + + constructor(props) { + super(props); + this.state = { + isCollapseActive: false, + }; + } + + render() { + const { + active, + className, + children, + disabled, + icon, + intent, + labelClassName, + labelElement, + multiline, + popoverProps, + shouldDismissPopover, + text, + textClassName, + tagName = "a", + dropdownType, + ...htmlProps + } = this.props; + const hasSubmenu = children != null; + + const intentClass = Classes.intentClass(intent); + const anchorClasses = classNames( + Classes.MENU_ITEM, + intentClass, + { + [Classes.ACTIVE]: active, + [Classes.INTENT_PRIMARY]: active && intentClass == null, + [Classes.DISABLED]: disabled, + // prevent popover from closing when clicking on submenu trigger or disabled item + [Classes.POPOVER_DISMISS]: shouldDismissPopover && !disabled && !hasSubmenu, + }, + className, + ); + + const handleAnchorClick = () => { + if (dropdownType === 'collapse') { + this.setState({ isCollapseActive: !this.state.isCollapseActive }); + } + }; + const target = React.createElement( + tagName, + { + ...htmlProps, + ...(disabled ? DISABLED_PROPS : {}), + className: anchorClasses, + onClick: handleAnchorClick, + }, + , + + {text} + , + this.maybeRenderLabel(labelElement), + hasSubmenu ? : undefined, + ); + + const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu }); + return
  • { + (dropdownType === 'collapse') ? + this.maybeRenderCollapse(target, children) : + this.maybeRenderPopover(target, children) + }
    • ; + } + + maybeRenderLabel(labelElement) { + const { label, labelClassName } = this.props; + if (label == null && labelElement == null) { + return null; + } + return ( + + {label} + {labelElement} + + ); + } + + maybeRenderCollapse(target, children) { + if (children == null) { + return target; + } + return ( + <> + {target} + { children } + + ); + } + + maybeRenderPopover(target, children) { + if (children == null) { + return target; + } + const { disabled, popoverProps } = this.props; + return ( + {children}} + minimal={true} + popoverClassName={classNames(Classes.MENU_SUBMENU, popoverProps.popoverClassName)} + target={target} + /> + ); + } +} + +const SUBMENU_POPOVER_MODIFIERS = { + // 20px padding - scrollbar width + a bit + flip: { boundariesElement: "viewport", padding: 20 }, + // shift popover up 5px so MenuItems align + offset: { offset: -5 }, + preventOverflow: { boundariesElement: "viewport", padding: 20 }, +}; + +// props to ignore when disabled +const DISABLED_PROPS = { + href: undefined, + onClick: undefined, + onMouseDown: undefined, + onMouseEnter: undefined, + onMouseLeave: undefined, + tabIndex: -1, +}; diff --git a/client/src/components/Sidebar/SidebarMenu.js b/client/src/components/Sidebar/SidebarMenu.js index f0ceb1997..983a69fe8 100644 --- a/client/src/components/Sidebar/SidebarMenu.js +++ b/client/src/components/Sidebar/SidebarMenu.js @@ -1,23 +1,37 @@ -import React from 'react'; -import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core"; +import React, { useState } from 'react'; +import {Menu, MenuDivider, Collapse} from "@blueprintjs/core"; import {useHistory} from 'react-router-dom'; import sidebarMenuList from 'config/sidebarMenu'; import Icon from 'components/Icon'; +import MenuItem from 'components/MenuItem'; export default function SidebarMenu() { let history = useHistory(); - const items = sidebarMenuList.map((item) => - (item.divider) ? - : - } - text={item.text} - label={item.label} - disabled={item.disabled} - onClick={() => { history.push(item.href); }} /> - ); + const menuItemsMapper = (list) => { + return list.map((item, index) => { + const children = Array.isArray(item.children) ? menuItemsMapper(item.children) : null; + + return ( + (item.divider) ? + : + } + text={item.text} + label={item.label} + disabled={item.disabled} + children={children} + dropdownType={item.dropdownType || 'collapse'} + onClick={() => { + history.push(item.href); + }} /> + ); + }); + }; + + const items = menuItemsMapper(sidebarMenuList); + return ( {items} diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js index b2f776d36..63dd585b9 100644 --- a/client/src/config/sidebarMenu.js +++ b/client/src/config/sidebarMenu.js @@ -4,13 +4,6 @@ export default [ { divider: true, }, - { - icon: 'homepage', - iconSize: 20, - text: 'Items List', - disabled: false, - href: '/dashboard/items/list', - }, { icon: 'homepage', iconSize: 20, @@ -21,6 +14,24 @@ export default [ { divider: true, }, + { + icon: 'homepage', + iconSize: 20, + text: 'Items', + children: [ + { + text: 'Items List', + href: '/dashboard/accounts', + }, + { + text: 'New Item', + href: '/dashboard/accounts', + }, + ] + }, + { + divider: true, + }, { icon: 'balance-scale', iconSize: 20, @@ -28,26 +39,12 @@ export default [ href: '/dashboard/accounts', children: [ { - text: 'cut', - label: '⌘C', - disabled: false, - }, - - { - text: 'cut', - label: '⌘C', - disabled: false, + text: 'Accounts Chart', + href: '/dashboard/accounts', }, { - text: 'cut', - label: '⌘C', - disabled: false, - }, - - { - text: 'cut', - label: '⌘C', - disabled: false, + text: 'Make Journal', + href: '/dashboard/accounting/make-journal-entry' }, ] }, @@ -57,12 +54,7 @@ export default [ text: 'Banking', href: '/dashboard/accounts', children: [ - { - icon: 'cut', - text: 'cut', - label: '⌘C', - disabled: false, - } + ] }, { @@ -71,12 +63,7 @@ export default [ text: 'Sales', href: '/dashboard/accounts', children: [ - { - icon: 'cut', - text: 'cut', - label: '⌘C', - disabled: false, - } + ] }, { @@ -100,36 +87,41 @@ export default [ href: '/dashboard/accounts', children: [ { - icon: 'cut', - text: 'cut', - label: '⌘C', - disabled: false, - } + text: 'Balance Sheet', + href: '/dashboard/accounting/balance-sheet', + }, + { + text: 'Trial Balance Sheet', + href: '/dashboard/accounting/trial-balance-sheet', + }, + { + text: 'Journal', + href: '/dashboard/accounting/journal-sheet', + }, + { + text: 'General Ledger', + href: '/dashboard/accounting/general-ledger', + }, + { + text: 'Profit Loss Sheet', + href: '/dashboard/accounting/profit-loss-sheet', + }, ] }, { text: 'Expenses', - href: '/dashboard/expenses', - }, - { - text: 'New Expenses', - href: '/dashboard/expenses/new', - }, - { - text: 'Make Journal', - href: '/dashboard/accounting/make-journal-entry' - }, - { - text: 'Balance Sheet', - href: '/dashboard/accounting/balance-sheet', - }, - { - text: 'Trial Balance Sheet', - href: '/dashboard/accounting/trial-balance-sheet', - }, - { - text: 'Journal', - href: '/dashboard/accounting/journal-sheet', + icon: 'receipt', + iconSize: 18, + children: [ + { + text: 'Expenses List', + href: '/dashboard/expenses', + }, + { + text: 'New Expenses', + href: '/dashboard/expenses/new', + }, + ] }, { divider: true, diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js index 8f43dbf1b..210a27f42 100644 --- a/client/src/static/json/icons.js +++ b/client/src/static/json/icons.js @@ -62,5 +62,9 @@ export default { "filter": { path: ['M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9 h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6 c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z'], viewBox: '0 0 91 91', + }, + "receipt": { + path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'], + viewBox: '0 0 448 512', } } \ No newline at end of file diff --git a/client/src/style/App.scss b/client/src/style/App.scss index c7b5d08f5..b891af31e 100644 --- a/client/src/style/App.scss +++ b/client/src/style/App.scss @@ -9,851 +9,34 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, $menu-item-color-hover: $light-gray4; $menu-item-color-active: $light-gray3; - // Blueprint framework. @import "@blueprintjs/core/src/blueprint.scss"; -@import "@blueprintjs/table/src/table.scss"; @import "@blueprintjs/datetime/src/blueprint-datetime.scss"; @import "basscss"; - -@import "pages/authentication.scss"; - $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif; +// Objects +@import "objects/form"; +@import "objects/typography"; -// Breadcrumbs component. -.#{$ns}-breadcrumbs-collapsed{ - background: $light-gray3; +// Components +@import "components/data-table"; +@import "components/dialog"; - &:hover{ - background: $light-gray2; - } -} +// Pages +@import "pages/dashboard"; +@import "pages/accounts-chart"; +@import "pages/authentication"; +@import "pages/expense-form"; +@import "pages/financial-statements"; +@import "pages/make-journal-entries"; +@import "pages/preferences"; +@import "pages/view-form"; -// Tabs component. -.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{ - height: 2px; -} -.#{$ns}-large > .#{$ns}-tab{ - line-height: 50px; - font-size: 15px; -} +// Views +@import "views/filter-dropdown"; +@import "views/sidebar"; -.dashboard{ - display: flex; - height: 100vh; - - &__topbar{ - width: 100%; - height: 80px; - display: flex; - justify-content: space-between; - border-bottom: 1px solid #F2EFEF; - &-right, - &-left{ - display: flex; - } - &-actions{ - - } - &-sidebar-toggle{ - display: flex; - align-items: center; - margin-left: 4px; - - .#{$ns}-button{ - color: #8E8E8E; - - &, - &:hover, - &:focus{ - border-radius: 0; - box-shadow: none; - background-color: transparent; - border: 0; - } - } - } - - &-navbar{ - display: flex; - align-items: center; - margin-right: 18px; - - .#{$ns}-button{ - color: #1552C8; - font-weight: 5000; - font-size: 14px; - - &:hover, - &:focus{ - background-color: rgba(178, 220, 253, 0.15); - } - .#{$ns}-icon{ - color: #1552C8; - } - } - } - - &-user{ - display: flex; - align-items: center; - margin-right: 28px; - - .#{$ns}-button{ - background-size: contain; - border-radius: 50%; - height: 40px; - width: 40px; - - &, - &:hover, - &:focus{ - background-color: transparent; - border: 0; - box-shadow: none; - background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400); - } - } - } - } - - &__breadcrumbs{ - display: flex; - margin-left: 16px; - align-items: center; - } - - &__actions-bar{ - border-bottom: 2px solid #EAEAEA; - - .#{$ns}-navbar{ - box-shadow: none; - - &, - &-group{ - height: 44px; - } - - .#{$ns}-navbar-divider{ - margin-left: 0; - margin-right: 0; - } - .#{$ns}-button{ - color: #5C5C5C; - padding: 8px 12px; - - &:hover{ - background: rgba(167, 182, 194, 0.12); - color: #5C5C5C; - } - .#{$ns}-icon{ - color: #666; - margin-right: 7px; - } - } - - .button--table-views{ - .#{$ns}-icon{ - color: #1183DA; - } - } - } - } - - &__breadcrumbs{ - display: flex; - align-items: center; - margin-left: 1rem; - } - &__title{ - align-items: center;; - display: flex; - margin-left: 6px; - - h1{ - font-size: 26px; - font-weight: 100; - margin: 0; - } - - .sep{ - margin-left: 12px; - margin-right: 12px; - color: #999; - border-left: 1px solid #d9d9d9; - width: 1px; - height: 25px; - } - - h3{ - font-size: 16px; - font-weight: 300; - color: #777; - margin: 0; - } - } - - &-content{ - width: calc(100% - 220px); - display: flex; - flex-direction: column; - - - } - - &__insider{ - height: 100%; - - &--loading{ - display: flex; - align-items: center; - justify-content: center; - } - } - - &__page-content{ - // padding: 22px; - } - - &__preferences-topbar{ - border-bottom: 1px solid #E5E5E5; - height: 70px; - padding: 0 22px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - h2{ - font-size: 22px; - font-weight: 200; - margin: 0; - } - } -} - -$sidebar-background: #01194E; -$sidebar-text-color: #fff; -$sidebar-width: 220px; -$sidebar-menu-item-color: #E9EBF7; - -$sidebar-popover-submenu-bg: rgb(1, 20, 62); - -.sidebar{ - background: $sidebar-background; - color: $sidebar-text-color; - width: $sidebar-width; - - &__head{ - padding: 16px 10px; - - &-company-meta{ - - .company-name{ - font-size: 16px; - font-weight: 200; - margin-bottom: 5px; - } - .company-meta{ - color: #A7AFC2; - font-size: 12px; - } - } - } - - &-menu{ - background: transparent; - padding: 0; - min-width: $sidebar-width; - border-radius: 0; - - .#{$ns}-menu-item{ - color: $sidebar-menu-item-color; - border-radius: 0; - padding: 10px 16px; - font-size: 15px; - font-weight: 200; - - &:hover{ - background: #012470; - } - &:focus, - &:active{ - background: #01143e; - } - - > .#{$ns}-icon{ - color: #767B9B; - margin-right: 12px; - margin-top: 0; - } - - > .#{$ns}-icon-caret-right{ - margin-right: -2px; - margin-top: 2px; - color: #767B9B; - } - } - - .#{$ns}-submenu{ - - .#{$ns}-menu{ - padding: 10px 0; - margin: 0; - background: $sidebar-popover-submenu-bg; - border-radius: 0; - - &-item{ - padding-top: 7px; - padding-bottom: 7px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - - &, - &:hover, - &:active, - &:focus{ - color: #fff; - background: transparent; - } - } - } - - .#{$ns}-popover{ - padding: 0; - - &-content{ - box-shadow: 0 0 0; - } - } - } - .#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{ - color: $sidebar-menu-item-color; - } - .#{$ns}-menu-divider{ - border-top-color: #183C86; - margin-left: 0; - margin-right: 0; - } - } -} -.navbar--dashboard-views{ - box-shadow: 0 0 0; - border-bottom: 1px solid #EAEAEA; -} - -.tabs--dashboard-views{ - - .#{$ns}-tab{ - color: #5C5C5C; - font-size: 14px; - line-height: 50px; - font-weight: 400; - padding: 0 14px; - margin-right: 0; - } - - .#{$ns}-tab-indicator-wrapper{ - .#{$ns}-tab-indicator{ - height: 2px; - } - } - - .button--new-view{ - margin: 0; - height: 50px; - - &, - &:hover, - &:active, - &:focus{ - background: transparent; - border: 0; - box-shadow: 0 0 0; - } - - .#{$ns}-icon{ - color: #A7A7A7; - } - } -} - - -// Dialog -.#{$ns}-dialog{ - background: #fff; - - &-header{ - background: #ebf1f5; - } -} - -// Form -label{ - font-weight: 400; -} - -.#{$ns}-input{ - box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), - 0 0 0 0 rgba(19, 124, 189, 0), - inset 0 0 0 1px rgba(16, 22, 26, 0.1), - inset 0 1px 1px rgba(16, 22, 26, 0.15); -} - -.#{$ns}-heading{ - font-weight: 300; -} - -// Dialog Account Form. -.dialog--account-form{ - - .#{$ns}-form-group{ - .#{$ns}-label{ - width: 130px; - } - } -} - -.divider{ - border-top: 1px solid #e8e8e8; - height: 1px; -} - -.view-form{ - - &--name-section{ - padding: 35px 28px; - background: #fbfafa; - margin-bottom: 22px; - - .bp3-form-group.bp3-inline{ - margin-bottom: 0; - } - } - - &--logic-expression-section{ - padding: 20px 25px; - margin: 1rem -25px 1.5rem; - background: #fbfafa; - - .#{$ns}-form-group{ - margin-bottom: 0; - } - } - - .condition-number{ - color: #666; - } - - .#{$ns}-form-group.#{$ns}-inline{ - - .#{$ns}-label{ - width: 200px; - } - - .#{$ns}-form-content{ - width: 100%; - } - } - - .new-conditional-btn{ - - } - - .dragable-columns{ - - &__items{ - border: 1px solid #e1e1e1; - padding: 10px 8px; - height: 300px; - overflow: auto; - } - - &__title{ - color: #666; - } - } - - .dragable-columns{ - &__column{ - - .bp3-input-group .bp3-input{ - border-radius: 3px 3px 0 0; - } - - } - - - &__arrows{ - text-align: center; - margin-top: 140px; - } - } - - .dragable-resource-columns{ - - } - - &__role-conditional{ - margin-top: 1rem; - } - - -} - -.preferences{ - &__inside-content--tabable{ - margin-left: -25px; - margin-right: -25px; - } - - &__inside-content{ - - .#{$ns}-tab-list{ - border-bottom: 1px solid #E5E5E5; - padding-left: 15px; - - .#{$ns}-tab{ - font-weight: 300; - } - } - } - - -} - -.preferences__sidebar{ - background: #fdfdfd; - min-width: 210px; - max-width: 210px; - - &-head{ - display: flex; - flex-direction: row; - align-items: center; - border-bottom: 1px solid #E5E5E5; - height: 70px; - padding: 0 22px; - - h2{ - font-size: 22px; - font-weight: 200; - margin: 0; - } - } - - &-menu{ - padding: 0; - background: transparent; - - .#{$ns}-menu-item{ - padding: 10px 18px; - font-size: 15px; - font-weight: 300; - color: #333; - } - } -} - -#root{ - // Essential JS 2 Datatable. - .e-grid{ - border-left: 0; - border-right: 0; - - .e-headercell, - .e-detailheadercell{ - background-color: #F8FAFA; - height: 48px; - line-height: 48px; - } - .e-headercelldiv{ - font-size: 14px; - color: #666; - } - .e-rowcell{ - padding-top: 10px; - padding-bottom: 10px; - font-size: 14px; - } - .e-rowcell:not(.e-editedbatchcell), - .e-detailrowcollapse:not(.e-editedbatchcell), - .e-detailrowexpand:not(.e-editedbatchcell), - .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell), - .e-emptyrow:not(.e-editedbatchcell){ - color: #333; - } - &.e-gridhover tr[role="row"]:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), - &.e-gridhover tr[role="row"]:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), - &.e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), - &.e-rtl .e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), - &.e-gridhover tr[role="row"]:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell){ - background: #F8FAFA; - color: #333; - } - } - - .e-spinner-pane .e-spinner-inner .e-spin-material { - stroke: #999; - } - .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop){ - color: #666; - } - - .#{$ns}-button--action{ - background: #E6EFFB; - border: 0; - box-shadow: 0 0 0; - padding: 5px 15px; - } -} - -.dashboard__insider--accounts-chart{ - - .e-grid{ - .e-gridheader{ - border-top: 0; - } - - .account-normal{ - - .#{$ns}-icon{ - color: #666; - padding-left: 15px; - } - } - - .checkbox-row{ - width: 0; - - - .#{$ns}-control{ - margin: 0; - } - } - } -} - -.dashboard__insider--expense-form{ - padding: 40px 20px; - - .#{$ns}-form-group{ - margin-bottom: 22px; - - .#{$ns}-label{ - min-width: 130px; - } - - .#{$ns}-form-content{ - width: 300px; - } - } -} - - -.form{ - &__floating-footer{ - position: fixed; - bottom: 0; - left: 220px; - right: 0; - background: #fff; - padding: 14px 16px; - border-top: 1px solid #ececec; - } -} - -.dashboard__insider--view-form{ - padding-left: 25px; - padding-right: 25px; - - .view-form--name-section{ - margin-left: -25px; - margin-right: -25px; - } -} - -.#{$ns}-form-group{ - - &.#{$ns}-intent-danger{ - select{ - box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), - 0 0 0 0 rgba(219, 55, 55, 0), - inset 0 0 0 1px #db3737, - inset 0 0 0 1px rgba(16, 22, 26, 0.15), - inset 0 1px 1px rgba(16, 22, 26, 0.2); - } - } -} - - -.bigcapital-datatable{ - - table { - text-align: left; - border-spacing: 0; - width: 100%; - - thead{ - th{ - height: 48px; - padding: 0.5rem 1.5rem; - background: #F8FAFA; - font-size: 14px; - color: #666; - font-weight: 500; - - border-bottom: 1px solid rgb(224, 224, 224); - } - } - - tr { - :last-child { - td { - border-bottom: 0; - } - } - } - - th, - td { - margin: 0; - padding: 0.5rem; - - :last-child { - border-right: 0; - } - } - } -} - -.financial-statement{ - - &__header{ - padding: 30px; - background: #FDFDFD; - } -} - -.make-journal-entries{ - - &__header{ - padding: 25px 40px; - background: #fbfbfb; - } - - &__table{ - .bp3-form-group{ - margin-bottom: 0; - } - table{ - border: 1px solid transparent; - - thead{ - th.index{ width: 3%; } - th.account{ width: 22%; } - th.note{ width: 40%; } - th.credit{ width: 17.5%; } - th.debit{ width: 17.5%; } - } - - th, - td{ - border-right: 1px dotted #999; - } - th{ - color: #444; - font-weight: 600; - border-bottom: 1px dotted #666; - } - - td{ - border-bottom: 1px dotted #999; - } - } - } -} - -.financial-statement{ - - &__body{ - padding-left: 20px; - padding-right: 20px; - } -} - -.financial-sheet{ - border: 1px solid #E2E2E2; - min-width: 640px; - width: 0; - margin-left: auto; - margin-right: auto; - padding: 20px; - margin-top: 40px; - - &__title{ - font-weight: 200; - font-size: 22px; - color: #222; - text-align: center; - } - - &__sheet-type{ - text-align: center; - } - - &__date{ - text-align: center; - } - - &__table{ - - } - - &__accounting-basis{ - - } -} - -.filter-dropdown{ - width: 500px; - - &__body{ - padding: 12px; - } - - &__condition{ - display: flex; - - &:not(:first-of-type) { - padding-top: 8px; - border-top: 1px solid #e6e6e6; - margin-top: 8px; - } - } - - .bp3-form-group{ - padding-right: 16px; - margin-bottom: 0; - - &:not(:last-of-type) { - padding-right: 15px; - } - } - - &__footer{ - border-top: 1px solid #e8e8e8; - padding: 5px 10px; - } - .form-group{ - &--condition{ width: 25%; } - &--field{ width: 45%; } - &--compatator{ width: 30%; } - &--value{ width: 25%; } - } -} \ No newline at end of file diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss new file mode 100644 index 000000000..f66dcef92 --- /dev/null +++ b/client/src/style/components/data-table.scss @@ -0,0 +1,51 @@ + +.bigcapital-datatable{ + + table { + text-align: left; + border-spacing: 0; + width: 100%; + + thead{ + th{ + height: 48px; + padding: 0.5rem 1.5rem; + background: #F8FAFA; + font-size: 14px; + color: #666; + font-weight: 500; + + border-bottom: 1px solid rgb(224, 224, 224); + } + } + + tr { + :last-child { + td { + border-bottom: 0; + } + } + } + + th, + td { + margin: 0; + padding: 0.5rem; + + :last-child { + border-right: 0; + } + } + + tbody{ + + .#{$ns}-button--action{ + background: #E6EFFB; + border: 0; + box-shadow: 0 0 0; + padding: 5px 15px; + } + } + } +} + diff --git a/client/src/style/components/dialog.scss b/client/src/style/components/dialog.scss new file mode 100644 index 000000000..0a5504745 --- /dev/null +++ b/client/src/style/components/dialog.scss @@ -0,0 +1,9 @@ + +// Dialog +.#{$ns}-dialog{ + background: #fff; + + &-header{ + background: #ebf1f5; + } +} diff --git a/client/src/style/components/tabs.scss b/client/src/style/components/tabs.scss new file mode 100644 index 000000000..28e2d19db --- /dev/null +++ b/client/src/style/components/tabs.scss @@ -0,0 +1,8 @@ +// Tabs component. +.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{ + height: 2px; +} +.#{$ns}-large > .#{$ns}-tab{ + line-height: 50px; + font-size: 15px; +} diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss new file mode 100644 index 000000000..f883cf74f --- /dev/null +++ b/client/src/style/objects/form.scss @@ -0,0 +1,39 @@ + +.form{ + &__floating-footer{ + position: fixed; + bottom: 0; + left: 220px; + right: 0; + background: #fff; + padding: 14px 16px; + border-top: 1px solid #ececec; + } +} + +// Form +label{ + font-weight: 400; +} + +.#{$ns}-input{ + box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), + 0 0 0 0 rgba(19, 124, 189, 0), + inset 0 0 0 1px rgba(16, 22, 26, 0.1), + inset 0 1px 1px rgba(16, 22, 26, 0.15); +} + + + +.#{$ns}-form-group{ + + &.#{$ns}-intent-danger{ + select{ + box-shadow: 0 0 0 0 rgba(219, 55, 55, 0), + 0 0 0 0 rgba(219, 55, 55, 0), + inset 0 0 0 1px #db3737, + inset 0 0 0 1px rgba(16, 22, 26, 0.15), + inset 0 1px 1px rgba(16, 22, 26, 0.2); + } + } +} diff --git a/client/src/style/objects/typography.scss b/client/src/style/objects/typography.scss new file mode 100644 index 000000000..120f73099 --- /dev/null +++ b/client/src/style/objects/typography.scss @@ -0,0 +1,9 @@ + +.#{$ns}-heading{ + font-weight: 300; +} + +.divider{ + border-top: 1px solid #e8e8e8; + height: 1px; +} \ No newline at end of file diff --git a/client/src/style/pages/account-form.scss b/client/src/style/pages/account-form.scss new file mode 100644 index 000000000..875259996 --- /dev/null +++ b/client/src/style/pages/account-form.scss @@ -0,0 +1,11 @@ + + +// Dialog Account Form. +.dialog--account-form{ + + .#{$ns}-form-group{ + .#{$ns}-label{ + width: 130px; + } + } +} \ No newline at end of file diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss new file mode 100644 index 000000000..5a5ea5676 --- /dev/null +++ b/client/src/style/pages/accounts-chart.scss @@ -0,0 +1,25 @@ + +.dashboard__insider--accounts-chart{ + + .e-grid{ + .e-gridheader{ + border-top: 0; + } + + .account-normal{ + + .#{$ns}-icon{ + color: #666; + padding-left: 15px; + } + } + + .checkbox-row{ + width: 0; + + .#{$ns}-control{ + margin: 0; + } + } + } +} \ No newline at end of file diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss index e69de29bb..d7cfdd09d 100644 --- a/client/src/style/pages/dashboard.scss +++ b/client/src/style/pages/dashboard.scss @@ -0,0 +1,246 @@ + + +.dashboard{ + display: flex; + height: 100vh; + + &__topbar{ + width: 100%; + height: 80px; + display: flex; + justify-content: space-between; + border-bottom: 1px solid #F2EFEF; + + &-right, + &-left{ + display: flex; + } + &-actions{ + + } + &-sidebar-toggle{ + display: flex; + align-items: center; + margin-left: 4px; + + .#{$ns}-button{ + color: #8E8E8E; + + &, + &:hover, + &:focus{ + border-radius: 0; + box-shadow: none; + background-color: transparent; + border: 0; + } + } + } + + &-navbar{ + display: flex; + align-items: center; + margin-right: 18px; + + .#{$ns}-button{ + color: #1552C8; + font-weight: 5000; + font-size: 14px; + + &:hover, + &:focus{ + background-color: rgba(178, 220, 253, 0.15); + } + .#{$ns}-icon{ + color: #1552C8; + } + } + } + + &-user{ + display: flex; + align-items: center; + margin-right: 28px; + + .#{$ns}-button{ + background-size: contain; + border-radius: 50%; + height: 40px; + width: 40px; + + &, + &:hover, + &:focus{ + background-color: transparent; + border: 0; + box-shadow: none; + background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400); + } + } + } + } + + &__breadcrumbs{ + display: flex; + margin-left: 16px; + align-items: center; + + // Breadcrumbs component. + .#{$ns}-breadcrumbs-collapsed{ + background: $light-gray3; + + &:hover{ + background: $light-gray2; + } + } + } + + &__actions-bar{ + border-bottom: 2px solid #EAEAEA; + + .#{$ns}-navbar{ + box-shadow: none; + + &, + &-group{ + height: 44px; + } + + .#{$ns}-navbar-divider{ + margin-left: 0; + margin-right: 0; + } + .#{$ns}-button{ + color: #5C5C5C; + padding: 8px 12px; + + &:hover{ + background: rgba(167, 182, 194, 0.12); + color: #5C5C5C; + } + .#{$ns}-icon{ + color: #666; + margin-right: 7px; + } + } + + .button--table-views{ + .#{$ns}-icon{ + color: #1183DA; + } + } + } + } + + &__breadcrumbs{ + display: flex; + align-items: center; + margin-left: 1rem; + } + &__title{ + align-items: center;; + display: flex; + margin-left: 6px; + + h1{ + font-size: 26px; + font-weight: 100; + margin: 0; + } + + .sep{ + margin-left: 12px; + margin-right: 12px; + color: #999; + border-left: 1px solid #d9d9d9; + width: 1px; + height: 25px; + } + + h3{ + font-size: 16px; + font-weight: 300; + color: #777; + margin: 0; + } + } + + &-content{ + width: calc(100% - 220px); + display: flex; + flex-direction: column; + + + } + + &__insider{ + height: 100%; + + &--loading{ + display: flex; + align-items: center; + justify-content: center; + } + } + + &__page-content{ + // padding: 22px; + } + + &__preferences-topbar{ + border-bottom: 1px solid #E5E5E5; + height: 70px; + padding: 0 22px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + h2{ + font-size: 22px; + font-weight: 200; + margin: 0; + } + } +} + +.tabs--dashboard-views{ + + .#{$ns}-tab{ + color: #5C5C5C; + font-size: 14px; + line-height: 50px; + font-weight: 400; + padding: 0 14px; + margin-right: 0; + } + + .#{$ns}-tab-indicator-wrapper{ + .#{$ns}-tab-indicator{ + height: 2px; + } + } + + .button--new-view{ + margin: 0; + height: 50px; + + &, + &:hover, + &:active, + &:focus{ + background: transparent; + border: 0; + box-shadow: 0 0 0; + } + + .#{$ns}-icon{ + color: #A7A7A7; + } + } +} + +.navbar--dashboard-views{ + box-shadow: 0 0 0; + border-bottom: 1px solid #EAEAEA; +} \ No newline at end of file diff --git a/client/src/style/pages/expense-form.scss b/client/src/style/pages/expense-form.scss new file mode 100644 index 000000000..ab101d880 --- /dev/null +++ b/client/src/style/pages/expense-form.scss @@ -0,0 +1,17 @@ + + +.dashboard__insider--expense-form{ + padding: 40px 20px; + + .#{$ns}-form-group{ + margin-bottom: 22px; + + .#{$ns}-label{ + min-width: 130px; + } + + .#{$ns}-form-content{ + width: 300px; + } + } +} diff --git a/client/src/style/pages/financial-statements.scss b/client/src/style/pages/financial-statements.scss new file mode 100644 index 000000000..9874cef2e --- /dev/null +++ b/client/src/style/pages/financial-statements.scss @@ -0,0 +1,48 @@ + + + +.financial-statement{ + + &__header{ + padding: 30px; + background: #FDFDFD; + } + + &__body{ + padding-left: 20px; + padding-right: 20px; + } +} + +.financial-sheet{ + border: 1px solid #E2E2E2; + min-width: 640px; + width: 0; + margin-left: auto; + margin-right: auto; + padding: 20px; + margin-top: 40px; + + &__title{ + font-weight: 200; + font-size: 22px; + color: #222; + text-align: center; + } + + &__sheet-type{ + text-align: center; + } + + &__date{ + text-align: center; + } + + &__table{ + + } + + &__accounting-basis{ + + } +} \ No newline at end of file diff --git a/client/src/style/pages/make-journal-entries.scss b/client/src/style/pages/make-journal-entries.scss new file mode 100644 index 000000000..c7dd693d0 --- /dev/null +++ b/client/src/style/pages/make-journal-entries.scss @@ -0,0 +1,39 @@ + +.make-journal-entries{ + + &__header{ + padding: 25px 40px; + background: #fbfbfb; + } + + &__table{ + .bp3-form-group{ + margin-bottom: 0; + } + table{ + border: 1px solid transparent; + + thead{ + th.index{ width: 3%; } + th.account{ width: 22%; } + th.note{ width: 40%; } + th.credit{ width: 17.5%; } + th.debit{ width: 17.5%; } + } + + th, + td{ + border-right: 1px dotted #999; + } + th{ + color: #444; + font-weight: 600; + border-bottom: 1px dotted #666; + } + + td{ + border-bottom: 1px dotted #999; + } + } + } +} diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss index e69de29bb..655884307 100644 --- a/client/src/style/pages/preferences.scss +++ b/client/src/style/pages/preferences.scss @@ -0,0 +1,54 @@ + + + +.preferences{ + &__inside-content--tabable{ + margin-left: -25px; + margin-right: -25px; + } + + &__inside-content{ + + .#{$ns}-tab-list{ + border-bottom: 1px solid #E5E5E5; + padding-left: 15px; + + .#{$ns}-tab{ + font-weight: 300; + } + } + } +} + +.preferences__sidebar{ + background: #fdfdfd; + min-width: 210px; + max-width: 210px; + + &-head{ + display: flex; + flex-direction: row; + align-items: center; + border-bottom: 1px solid #E5E5E5; + height: 70px; + padding: 0 22px; + + h2{ + font-size: 22px; + font-weight: 200; + margin: 0; + } + } + + &-menu{ + padding: 0; + background: transparent; + + .#{$ns}-menu-item{ + padding: 10px 18px; + font-size: 15px; + font-weight: 300; + color: #333; + } + } +} diff --git a/client/src/style/pages/view-form.scss b/client/src/style/pages/view-form.scss index e69de29bb..d2dd45893 100644 --- a/client/src/style/pages/view-form.scss +++ b/client/src/style/pages/view-form.scss @@ -0,0 +1,91 @@ + + + +.dashboard__insider--view-form{ + padding-left: 25px; + padding-right: 25px; + + .view-form--name-section{ + margin-left: -25px; + margin-right: -25px; + } +} +.view-form{ + + &--name-section{ + padding: 35px 28px; + background: #fbfafa; + margin-bottom: 22px; + + .bp3-form-group.bp3-inline{ + margin-bottom: 0; + } + } + + &--logic-expression-section{ + padding: 20px 25px; + margin: 1rem -25px 1.5rem; + background: #fbfafa; + + .#{$ns}-form-group{ + margin-bottom: 0; + } + } + + .condition-number{ + color: #666; + } + + .#{$ns}-form-group.#{$ns}-inline{ + + .#{$ns}-label{ + width: 200px; + } + + .#{$ns}-form-content{ + width: 100%; + } + } + + .new-conditional-btn{ + + } + + .dragable-columns{ + + &__items{ + border: 1px solid #e1e1e1; + padding: 10px 8px; + height: 300px; + overflow: auto; + } + + &__title{ + color: #666; + } + } + + .dragable-columns{ + &__column{ + + .bp3-input-group .bp3-input{ + border-radius: 3px 3px 0 0; + } + + } + + + &__arrows{ + text-align: center; + margin-top: 140px; + } + } + + .dragable-resource-columns{ + + } + + &__role-conditional{ + margin-top: 1rem; + } +} diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss index e69de29bb..5605e8a09 100644 --- a/client/src/style/views/Sidebar.scss +++ b/client/src/style/views/Sidebar.scss @@ -0,0 +1,107 @@ + +$sidebar-background: #01194E; +$sidebar-text-color: #fff; +$sidebar-width: 220px; +$sidebar-menu-item-color: #E9EBF7; + +$sidebar-popover-submenu-bg: rgb(1, 20, 62); + +.sidebar{ + background: $sidebar-background; + color: $sidebar-text-color; + width: $sidebar-width; + + &__head{ + padding: 16px 10px; + + &-company-meta{ + + .company-name{ + font-size: 16px; + font-weight: 200; + margin-bottom: 5px; + } + .company-meta{ + color: #A7AFC2; + font-size: 12px; + } + } + } + + &-menu{ + background: transparent; + padding: 0; + min-width: $sidebar-width; + border-radius: 0; + + .#{$ns}-menu-item{ + color: $sidebar-menu-item-color; + border-radius: 0; + padding: 10px 16px; + font-size: 15px; + font-weight: 200; + + &:hover{ + background: #012470; + } + &:focus, + &:active{ + background: #01143e; + } + + > .#{$ns}-icon{ + color: #767B9B; + margin-right: 12px; + margin-top: 0; + } + + > .#{$ns}-icon-caret-right{ + margin-right: -2px; + margin-top: 2px; + color: #767B9B; + } + } + + .#{$ns}-submenu{ + + .#{$ns}-menu{ + padding: 10px 0; + margin: 0; + background: $sidebar-popover-submenu-bg; + border-radius: 0; + + &-item{ + padding-top: 7px; + padding-bottom: 7px; + padding-left: 16px; + padding-right: 16px; + font-size: 14px; + + &, + &:hover, + &:active, + &:focus{ + color: #fff; + background: transparent; + } + } + } + + .#{$ns}-popover{ + padding: 0; + + &-content{ + box-shadow: 0 0 0; + } + } + } + .#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{ + color: $sidebar-menu-item-color; + } + .#{$ns}-menu-divider{ + border-top-color: #183C86; + margin-left: 0; + margin-right: 0; + } + } +} \ No newline at end of file diff --git a/client/src/style/views/filter-dropdown.scss b/client/src/style/views/filter-dropdown.scss new file mode 100644 index 000000000..b82ce17a9 --- /dev/null +++ b/client/src/style/views/filter-dropdown.scss @@ -0,0 +1,38 @@ + +.filter-dropdown{ + width: 500px; + + &__body{ + padding: 12px; + } + + &__condition{ + display: flex; + + &:not(:first-of-type) { + padding-top: 8px; + border-top: 1px solid #e6e6e6; + margin-top: 8px; + } + } + + .bp3-form-group{ + padding-right: 16px; + margin-bottom: 0; + + &:not(:last-of-type) { + padding-right: 15px; + } + } + + &__footer{ + border-top: 1px solid #e8e8e8; + padding: 5px 10px; + } + .form-group{ + &--condition{ width: 25%; } + &--field{ width: 45%; } + &--compatator{ width: 30%; } + &--value{ width: 25%; } + } +} \ No newline at end of file