From a64badc0ea1d5e7fbd555fb5467dd7f2e32a35e7 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 25 Jun 2019 18:01:04 +0300 Subject: [PATCH] Web: Changed style of GroupButton and GroupButtonsMenu components --- .../stories/group-button/all/index.stories.js | 92 +--------- .../stories/group-button/base/README.md | 9 +- .../group-button/base/index.stories.js | 9 +- .../group-buttons-menu/index.stories.js | 63 +++---- .../src/components/group-button/index.js | 158 +++++------------- .../components/group-buttons-menu/index.js | 42 ++++- 6 files changed, 120 insertions(+), 253 deletions(-) diff --git a/web/ASC.Web.Components/example/stories/group-button/all/index.stories.js b/web/ASC.Web.Components/example/stories/group-button/all/index.stories.js index ced32e4626..d66bc87376 100644 --- a/web/ASC.Web.Components/example/stories/group-button/all/index.stories.js +++ b/web/ASC.Web.Components/example/stories/group-button/all/index.stories.js @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react' import withReadme from 'storybook-readme/with-readme' import Readme from './README.md' import { Container, Row, Col } from 'reactstrap'; -import { GroupButton } from 'asc-web-components' +import { GroupButton, DropDownItem } from 'asc-web-components' const rowStyle = { marginTop: 8 }; @@ -13,102 +13,22 @@ storiesOf('Components|GroupButton', module) .add('all', () => ( - Active Hover Click*(Press) Disable - Default - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - Primary - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + )); \ No newline at end of file diff --git a/web/ASC.Web.Components/example/stories/group-button/base/README.md b/web/ASC.Web.Components/example/stories/group-button/base/README.md index fd39dde652..f554314f7b 100644 --- a/web/ASC.Web.Components/example/stories/group-button/base/README.md +++ b/web/ASC.Web.Components/example/stories/group-button/base/README.md @@ -13,18 +13,15 @@ Base Button is used for a group action on a page. #### Usage ```js - + ``` #### Properties | Props | Type | Required | Values | Default | Description | | ------------------ | -------- | :------: | --------------------------- | -------------- | ----------------------------------------------------------------- | -| `text` | `string` | - | - | `Default text` | Value of the group button | -| `primary` | `bool` | - | - | `false` | Tells when the button should be primary | +| `label` | `string` | - | - | `Group button` | Value of the group button | | `disabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state | -| `isCheckbox` | `bool` | - | - | `false` | Tells when the button should present a checkbox state | | `isDropdown` | `bool` | - | - | `false` | Tells when the button should present a dropdown state | -| `splitted` | `bool` | - | - | `false` | Tells when the button should present a dropdown state with button | | `opened` | `bool` | - | - | `false` | Tells when the button should be opened by default | -| `clickAction` | `func` | - | - | - | What the button will trigger when clicked | \ No newline at end of file +| `action` | `func` | - | - | - | What the button will trigger when clicked | \ No newline at end of file diff --git a/web/ASC.Web.Components/example/stories/group-button/base/index.stories.js b/web/ASC.Web.Components/example/stories/group-button/base/index.stories.js index 6b6f8e03ef..e4d2f2ef42 100644 --- a/web/ASC.Web.Components/example/stories/group-button/base/index.stories.js +++ b/web/ASC.Web.Components/example/stories/group-button/base/index.stories.js @@ -3,21 +3,18 @@ import { storiesOf } from '@storybook/react' import { withKnobs, boolean, text } from '@storybook/addon-knobs/react'; import withReadme from 'storybook-readme/with-readme' import Readme from './README.md' -import { GroupButton } from 'asc-web-components' +import { GroupButton, DropDownItem } from 'asc-web-components' storiesOf('Components|GroupButton', module) .addDecorator(withKnobs) .addDecorator(withReadme(Readme)) .add('base', () => ( - + )); diff --git a/web/ASC.Web.Components/example/stories/group-buttons-menu/index.stories.js b/web/ASC.Web.Components/example/stories/group-buttons-menu/index.stories.js index 9afd1d8b89..4fea278f32 100644 --- a/web/ASC.Web.Components/example/stories/group-buttons-menu/index.stories.js +++ b/web/ASC.Web.Components/example/stories/group-buttons-menu/index.stories.js @@ -1,14 +1,19 @@ import React from 'react' import { storiesOf } from '@storybook/react' import withReadme from 'storybook-readme/with-readme' -import styled from '@emotion/styled'; +import styled, { css } from '@emotion/styled'; import Readme from './README.md' -import { GroupButtonsMenu, GroupButton } from 'asc-web-components' +import { GroupButtonsMenu, GroupButton, DropDownItem } from 'asc-web-components' const GroupButtonsMenuContainer = styled.div` height: 2000px; `; +const Checkbox = styled.input` + vertical-align: middle; + margin-left: 24px; +`; + storiesOf('Components|GroupButtonsMenu', module) .addDecorator(withReadme(Readme)) .add('empty', () => ( @@ -19,41 +24,41 @@ storiesOf('Components|GroupButtonsMenu', module) .add('documents', () => ( - - - - - - - - - - + + + + + + + + + - - - - - - + + + + + + )) .add('people', () => ( - - - - + + + + + - - - - - - - + + + + + + + )); \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/group-button/index.js b/web/ASC.Web.Components/src/components/group-button/index.js index d8221b2638..b93bf28ea6 100644 --- a/web/ASC.Web.Components/src/components/group-button/index.js +++ b/web/ASC.Web.Components/src/components/group-button/index.js @@ -4,74 +4,49 @@ import PropTypes from 'prop-types' import { Icons } from '../icons' import DropDown from '../drop-down' -const backgroundColor = '#ebebeb', - disabledBackgroundColor = '#f7f7f7', - activatedBackgroundColor = '#e2e2e2', - hoveredBackgroundColor = '#f5f5f5', - primaryBackgroundColor = '#2da7db', - primaryDisabledBackgroundColor = '#a6dcf2', - primaryActivatedBackgroundColor = '#1f97ca', - primaryHoveredBackgroundColor = '#3db8ec'; - -const borderColor = '#c4c4c4', - disabledBorderColor = '#ebebeb', - activatedBorderColor = '#dadada', - hoveredBorderColor = '#d4d4d4', - primaryBorderColor = 'transparent'; - -const textColor = '#666666', - disabledTextColor = '#999999', - primaryTextColor = '#ffffff'; +const textColor = '#333333', + disabledTextColor = '#A3A9AE'; const activatedCss = css` cursor: pointer; - border: 1px solid ${props => props.primary ? primaryBorderColor : activatedBorderColor} !important; - background-color: ${props => props.primary ? primaryActivatedBackgroundColor : activatedBackgroundColor} !important; `; const hoveredCss = css` cursor: pointer; - border: 1px solid ${props => props.primary ? primaryBorderColor : hoveredBorderColor}; - background-color: ${props => props.primary ? primaryHoveredBackgroundColor : hoveredBackgroundColor}; `; const StyledGroupButton = styled.div` position: relative; display: inline-flex; vertical-align: middle; - box-sizing: border-box; `; -const StyledDropdownToggle = styled.button` - font: normal 12px 'Open Sans', sans-serif; +const StyledDropdownToggle = styled.div` + font-family: Open Sans; + font-style: normal; + font-weight: ${props => props.fontWeight}; + font-size: 14px; + line-height: 19px; + cursor: default; - color: ${props => (props.primary && primaryTextColor) || (props.disabled ? disabledTextColor : textColor)}; - background-color: ${props => (props.disabled - ? (props.primary ? primaryDisabledBackgroundColor : disabledBackgroundColor) - : (props.primary ? primaryBackgroundColor : backgroundColor))}; - border: 1px solid ${props => (props.disabled - ? (props.primary ? primaryBorderColor : disabledBorderColor) - : (props.primary ? primaryBorderColor : borderColor))}; + color: ${props => (props.disabled ? disabledTextColor : textColor)}; float: left; - height: 21px; - margin-right: ${props => props.splitted ? '0px' : '4px'}; - margin-left: ${props => props.splitted ? '-1px' : '0px'}; + height: 19px; + margin: 18px 12px 19px 12px; overflow: hidden; - padding: 1px 5px 1px; + padding: 0px; + text-align: center; text-decoration: none; white-space: nowrap; + user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; - border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'}; - -moz-border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'}; - -webkit-border-radius: ${props => props.splitted ? '0px 3px 3px 0px' : '3px'}; - ${props => !props.disabled && (props.activated ? `${activatedCss}` : css` &:active { ${activatedCss} @@ -83,48 +58,19 @@ const StyledDropdownToggle = styled.button` ${hoveredCss} }`) } - - ${props => props.isCheckbox & !props.splitted && css` - padding: 3px 5px 1px; - `} -`; - -const StyledButton = styled(StyledDropdownToggle)` - margin-right: 0px; - margin-left: 0px; - - border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'}; - -moz-border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'}; - -webkit-border-radius: ${props => props.splitted ? '3px 0px 0px 3px' : '3px'}; - - ${props => props.isCheckbox & props.splitted && css` - padding: 3px 5px 1px; - `} `; const Caret = styled(Icons.ExpanderDownIcon)` width: 10px; margin-left: 4px; +`; - ${props => props.isCheckbox && (props.splitted - ? css` - margin-top: -4px; - margin-left: 0; - ` - : css` - margin-top: -6px; - `) - } - - ${props => !props.isCheckbox && (props.splitted - ? css` - margin-top: -2px; - margin-left: 0; - ` - : css` - margin-top: -3px; - `) - } +const Separator = styled.div` + vertical-align: middle; + border: 0.5px solid #ECEEF1; + width: 1px; + height: 24px; + margin-top: 16px; `; const useOuterClickNotifier = (onOuterClick, ref) => { @@ -142,7 +88,7 @@ const useOuterClickNotifier = (onOuterClick, ref) => { } const GroupButton = (props) => { - const { text, splitted, isDropdown, isCheckbox, opened, disabled, primary, clickAction } = props; + const { label, isDropdown, opened, disabled, action, isSeparator } = props; const [isOpen, toggle] = useState(opened); const ref = useRef(null); @@ -150,76 +96,50 @@ const GroupButton = (props) => { const dropMenu = ; - const splittedDropButton = - <> - - {text} - {isCheckbox && } - - { disabled ? false : toggle(!isOpen) }}> - - - ; - - const singleDropButton = + const dropDownButton = { disabled ? false : toggle(!isOpen) }}> - {text} - {isCheckbox && } - + {label} + ; return ( {isDropdown - ? (splitted - ? { ...splittedDropButton } - : { ...singleDropButton }) - : - {text} - {isCheckbox && } + ? {...dropDownButton} + : + {label} } - {isDropdown && { ...dropMenu }} + {isSeparator && } + {isDropdown && {...dropMenu}} ); } GroupButton.propTypes = { - text: PropTypes.string, - primary: PropTypes.bool, + label: PropTypes.string, disabled: PropTypes.bool, activated: PropTypes.bool, opened: PropTypes.bool, hovered: PropTypes.bool, - splitted: PropTypes.bool, - isCheckbox: PropTypes.bool, isDropdown: PropTypes.bool, + isSeparator: PropTypes.bool, tabIndex: PropTypes.number, - clickAction: PropTypes.func + action: PropTypes.func, + fontWeight: PropTypes.string }; GroupButton.defaultProps = { - text: 'Default text', - primary: false, + label: 'Group button', disabled: false, activated: false, opened: false, hovered: false, - splitted: false, - isCheckbox: false, isDropdown: false, + isSeparator: false, tabIndex: -1, - clickAction: (e) => console.log('Button "' + e.target.innerText + '" clicked!') + action: (e) => console.log('Button "' + e.target.innerText + '" clicked!'), + fontWeight: 600 }; export default GroupButton \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index 575f4b5f5d..c804672cd1 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -6,19 +6,46 @@ import GroupButton from '../group-button' const StyledGroupButtonsMenu = styled.div` position: sticky; top: 0; - background: white; - border-bottom: 1px solid #d1d1d1; - color: #999999; - height: 30px; + background: #FFFFFF; + box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.100306); + height: 56px; list-style: none; - margin: 0 0 -1px; - padding: 0 0 8px 0; + padding: 0 18px 19px 0; .hidden { display: none; } `; +const CloseButton = styled.div` + position: absolute; + right: 20px; + top: 20px; + width: 20px; + height: 20px; + + &:hover{ + cursor: pointer; + } + + &:before, &:after { + position: absolute; + left: 15px; + content: ' '; + height: 20px; + width: 1px; + background-color: #D8D8D8; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } +`; + const padding = 4; var lastWidth = 0; @@ -85,7 +112,8 @@ const GroupButtonsMenu = props => { return ( {children} - {needCollapse && {children}} + {needCollapse && {children}} + ); }