From a29dbe22bc14b19d54608a9e395867262d8ac216 Mon Sep 17 00:00:00 2001 From: Qingya Shu Date: Tue, 7 Aug 2018 11:12:36 -0500 Subject: [PATCH 1/9] fix(css): css refactor 4/4 --- .../DataExplorerVisualizations.jsx | 6 +- src/Explorer/ExplorerSideBar.jsx | 16 ++-- src/QueryNode/QueryNode.jsx | 35 ++------ src/QueryNode/QueryNode.less | 52 +++++++++++ src/components/CheckBox.jsx | 35 ++------ src/components/CheckBox.less | 21 +++++ src/components/CircleButton.jsx | 13 --- src/components/IndexButtonBar.jsx | 76 +++------------- src/components/IndexButtonBar.less | 46 ++++++++++ src/components/Introduction.jsx | 42 ++------- src/components/Introduction.less | 24 +++++ src/components/Popup.jsx | 87 ++++--------------- src/components/Popup.less | 72 +++++++++++++++ src/components/ProjectDashboard.jsx | 24 ++--- src/components/ProjectDashboard.less | 9 ++ src/components/SelectComponent.jsx | 33 ++----- src/components/SelectComponent.less | 15 ++++ src/components/Spinner.jsx | 48 ++-------- src/components/Spinner.less | 32 +++++++ src/components/Spinner.test.jsx | 2 +- src/components/buttons/IconicLink.jsx | 4 +- .../charts/IndexBarChart/IndexBarChart.less | 8 ++ .../index.jsx} | 24 ++--- .../PercentageStackedBarChart.less | 0 .../index.jsx} | 2 +- .../ProjectBarChart/ProjectBarChart.less | 7 ++ .../index.jsx} | 17 +--- .../SummaryChartGroup.less | 0 .../SummaryChartGroup.test.jsx | 8 +- .../index.jsx} | 6 +- .../SummaryHorizontalBarChart.less | 0 .../SummaryHorizontalBarChart.test.jsx | 4 +- .../index.jsx} | 2 +- .../SummaryPieChart.less | 0 .../SummaryPieChart.test.jsx | 4 +- .../index.jsx} | 2 +- .../charts/TooltipCDIS/TooltipCDIS.less | 4 + .../index.jsx} | 11 +-- 38 files changed, 401 insertions(+), 390 deletions(-) create mode 100644 src/QueryNode/QueryNode.less create mode 100644 src/components/CheckBox.less delete mode 100644 src/components/CircleButton.jsx create mode 100644 src/components/IndexButtonBar.less create mode 100644 src/components/Introduction.less create mode 100644 src/components/Popup.less create mode 100644 src/components/ProjectDashboard.less create mode 100644 src/components/SelectComponent.less create mode 100644 src/components/Spinner.less create mode 100644 src/components/charts/IndexBarChart/IndexBarChart.less rename src/components/charts/{IndexBarChart.jsx => IndexBarChart/index.jsx} (92%) rename src/components/charts/{ => PercentageStackedBarChart}/PercentageStackedBarChart.less (100%) rename src/components/charts/{PercentageStackedBarChart.jsx => PercentageStackedBarChart/index.jsx} (99%) create mode 100644 src/components/charts/ProjectBarChart/ProjectBarChart.less rename src/components/charts/{ProjectBarChart.jsx => ProjectBarChart/index.jsx} (91%) rename src/components/charts/{ => SummaryChartGroup}/SummaryChartGroup.less (100%) rename src/components/charts/{ => SummaryChartGroup}/SummaryChartGroup.test.jsx (85%) rename src/components/charts/{SummaryChartGroup.jsx => SummaryChartGroup/index.jsx} (89%) rename src/components/charts/{ => SummaryHorizontalBarChart}/SummaryHorizontalBarChart.less (100%) rename src/components/charts/{ => SummaryHorizontalBarChart}/SummaryHorizontalBarChart.test.jsx (84%) rename src/components/charts/{SummaryHorizontalBarChart.jsx => SummaryHorizontalBarChart/index.jsx} (98%) rename src/components/charts/{ => SummaryPieChart}/SummaryPieChart.less (100%) rename src/components/charts/{ => SummaryPieChart}/SummaryPieChart.test.jsx (89%) rename src/components/charts/{SummaryPieChart.jsx => SummaryPieChart/index.jsx} (98%) create mode 100644 src/components/charts/TooltipCDIS/TooltipCDIS.less rename src/components/charts/{TooltipCDIS.jsx => TooltipCDIS/index.jsx} (75%) diff --git a/src/DataExplorer/DataExplorerVisualizations.jsx b/src/DataExplorer/DataExplorerVisualizations.jsx index 6e203ad03f..c503a2a59d 100644 --- a/src/DataExplorer/DataExplorerVisualizations.jsx +++ b/src/DataExplorer/DataExplorerVisualizations.jsx @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import { CurrentSQON } from '@arranger/components/dist/Arranger'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import DataExplorerTable from '../components/tables/DataExplorerTable'; -import SummaryChartGroup from '../components/charts/SummaryChartGroup'; -import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart'; -import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup'; +import SummaryChartGroup from '../components/charts/SummaryChartGroup/.'; +import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart/.'; +import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup/.'; import { getCharts } from '../components/charts/helper'; import { localTheme } from '../localconf'; diff --git a/src/Explorer/ExplorerSideBar.jsx b/src/Explorer/ExplorerSideBar.jsx index 06872bf3b0..62f8a9dda9 100644 --- a/src/Explorer/ExplorerSideBar.jsx +++ b/src/Explorer/ExplorerSideBar.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { StyledCheckBoxGroup } from '../components/CheckBox'; +import { CheckBoxGroup } from '../components/CheckBox'; import { ExplorerSidebarStyle } from './style'; class ExplorerSideBar extends Component { @@ -46,31 +46,27 @@ class ExplorerSideBar extends Component { const fileTypes = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_type').values()).sort(); const fileFormats = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_format').values()).sort(); - - // console.log(this.props.selected_filters); - return ( - this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - this.props.onChange({ ...this.props.selectedFilters, ...state })} /> diff --git a/src/QueryNode/QueryNode.jsx b/src/QueryNode/QueryNode.jsx index b132f2e286..7bc56797fa 100644 --- a/src/QueryNode/QueryNode.jsx +++ b/src/QueryNode/QueryNode.jsx @@ -1,36 +1,11 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import styled, { css } from 'styled-components'; +import Select from 'react-select'; import PropTypes from 'prop-types'; - import { jsonToString, getSubmitPath } from '../utils'; import Popup from '../components/Popup'; import QueryForm from './QueryForm'; - -const actionButton = css` - cursor: pointer; - float: right; - display: inline-block; - margin-left: 2em; - &:hover, - &:active, - &:focus { - color: inherit; - } -`; - -const DownloadButton = styled.a` - ${actionButton}; -`; - -const DeleteButton = styled.a` - ${actionButton}; - color: ${props => props.theme.color_primary}; -`; -const ViewButton = styled.a` - ${actionButton}; - color: #2B547E; -`; +import './QueryNode.less'; const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { const onDelete = () => { @@ -44,9 +19,9 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { return (
  • {value.submitter_id} - Download - View - Delete + Download + View + Delete
    • ); }; diff --git a/src/QueryNode/QueryNode.less b/src/QueryNode/QueryNode.less new file mode 100644 index 0000000000..22d4347230 --- /dev/null +++ b/src/QueryNode/QueryNode.less @@ -0,0 +1,52 @@ +.query-node__search-button { + transition: 0.25s; + color: white; + margin-bottom: 1em; + background-color: #008000; + border: 1px solid #008000; + line-height: 34px; + padding: 0em 0.5em; +} + +.query-node__search-button:hover, +.query-node__search-button:active, +.query-node__search-button:focus { + background-color: #159915; + border: 1px solid #159915; +} + +.query-node__button { + cursor: pointer; + float: right; + display: inline-block; + margin-left: 2em; +} + +.query-node__button:hover, +.query-node__button:active, +.query-node__button:focus { + color: inherit; +} + +.query-node__button--delete { + color: #800000; +} + +.query-node__button--view { + color: #2B547E; +} + +.query-node__input { + transition: 0.25s; + border: 1px solid #c1c1c1; + line-height: 34px; + margin-right: 1em; + padding: 0em 0.5em; + border-radius: 5px; +} + +.query-node__select { + width: 40%; + float: left; + margin-right: 1em; +} diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx index 2e29923bc2..633a5b2ad7 100644 --- a/src/components/CheckBox.jsx +++ b/src/components/CheckBox.jsx @@ -1,25 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import { Label } from '../theme'; - -const LabelCheckBox = styled(Label)` - white-space: nowrap; - text-overflow: ellipsis; - min-width: 0px; - max-width: 12vw; - overflow: hidden; - padding: 0px 0.25rem; - margin-left: 0.3rem; - vertical-align: middle; - line-height: 1.75 -`; - -const CheckBox = styled.div` - padding: 1em 0em; - border-bottom: ${props => (props.lastChild ? '0px' : '2px solid #7d7474')}; -`; - +import './CheckBox.less'; export class CheckBoxGroup extends Component { static propTypes = { @@ -28,12 +10,8 @@ export class CheckBoxGroup extends Component { selectedItems: PropTypes.array.isRequired, title: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, - lastChild: PropTypes.bool, }; - static defaultProps = { - lastChild: false, - }; constructor(props) { super(props); this.state = { @@ -80,7 +58,7 @@ export class CheckBoxGroup extends Component { : this.props.listItems; return ( - +
    {this.props.title} {listItems.map(item => (
    @@ -92,16 +70,13 @@ export class CheckBoxGroup extends Component { checked={selectedItems.includes(item)} onChange={() => this.onChangeBox(item)} /> - {item} +
    ))} {this.displayOptions()} - +
    ); } } -export const StyledCheckBoxGroup = styled(CheckBoxGroup)` - padding: 0em 1em; - border-bottom: 2px solid #717b85; -`; +export default CheckBoxGroup; diff --git a/src/components/CheckBox.less b/src/components/CheckBox.less new file mode 100644 index 0000000000..b92f5c3844 --- /dev/null +++ b/src/components/CheckBox.less @@ -0,0 +1,21 @@ +.checkbox { + padding: 1em 0em; + border-bottom: 2px solid #7d7474; +} + +.checkbox:last-child { + border-bottom: 0; +} + +.checkbox-label { + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0px; + max-width: 12vw; + overflow: hidden; + padding: 0px 0.25rem; + margin-left: 3px 3px 3px 0.3rem; + vertical-align: middle; + line-height: 1.75; + display:inline-block; +} diff --git a/src/components/CircleButton.jsx b/src/components/CircleButton.jsx deleted file mode 100644 index f74082a178..0000000000 --- a/src/components/CircleButton.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; -import IconButton from 'material-ui/IconButton'; - - -const CircleButton = styled(IconButton)` - background-color: #ebe7e5 !important; - border-radius: 50%; - margin-right: 20px !important; - margin-top: 10px !important; -`; - - -export default CircleButton; diff --git a/src/components/IndexButtonBar.jsx b/src/components/IndexButtonBar.jsx index 246af11c66..bf09498516 100644 --- a/src/components/IndexButtonBar.jsx +++ b/src/components/IndexButtonBar.jsx @@ -1,60 +1,8 @@ import React, { Component } from 'react'; -import styled from 'styled-components'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import IconComponent from './Icon'; - -const IndexThumbnailButton = styled.div` - background-color: white; - display: inline-block; - height: 360px; - padding: 20px 20px; - text-align: center; - width: 290px; - margin-left: 20px; - border: 1px solid #e7e7e7; - border-radius: 4px; - &:first-child { - margin-left: 0px; - } - position: relative; -`; - - -const IndexIcon = styled.div` - vertical-align: middle; - padding-left: 4px; -`; - -const BarItem = styled(Link)` - position: absolute; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - bottom: 30px; -`; - -const BarItemA = styled.a` - position: absolute; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - bottom: 30px; -`; - -const ThumbnailTitle = styled.div` - margin-bottom: 15px; -`; - -const ThumbnailText = styled.div` - margin-top: 30px; - border-top: 1px solid #e7e7e7; - padding: 10px 10px; - text-align: left; -`; - +import './IndexButtonBar.less'; /** * NavBar renders row of nav-items of form { name, icon, link } @@ -63,40 +11,40 @@ const ThumbnailText = styled.div` class IndexButtonBar extends Component { render() { return ( -
    +
    { this.props.buttons.map( item => ( - - {item.name} - +
    +
    {item.name}
    +
    - - {item.body} +
    +
    {item.body}
    { item.link.startsWith('http') ? - + - : - + : + - + } - +
    ), ) } diff --git a/src/components/IndexButtonBar.less b/src/components/IndexButtonBar.less new file mode 100644 index 0000000000..20b45ef103 --- /dev/null +++ b/src/components/IndexButtonBar.less @@ -0,0 +1,46 @@ +.index-button-bar { + display: flex; + padding: 40px 0 0 0; +} + +.index-button-bar__thumbnail-button { + background-color: white; + display: inline-block; + height: 360px; + padding: 20px 20px; + text-align: center; + width: 290px; + margin-left: 20px; + border: 1px solid #e7e7e7; + border-radius: 4px; + position: relative; +} + +.index-button-bar__thumbnail-button:first-child { + margin-left: 0px; +} + +.index-button-bar__thumbnail-title { + margin-bottom: 15px; +} + +.index-button-bar__thumbnail-text { + margin-top: 30px; + border-top: 1px solid #e7e7e7; + padding: 10px 10px; + text-align: left; +} + +.index-button-bar__icon { + vertical-align: middle; + padding-left: 4px; +} + +.index-button-bar__item { + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + bottom: 30px; +} \ No newline at end of file diff --git a/src/components/Introduction.jsx b/src/components/Introduction.jsx index d337d3bebe..89ce25206f 100644 --- a/src/components/Introduction.jsx +++ b/src/components/Introduction.jsx @@ -1,27 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import styled from 'styled-components'; import IconicLink from './buttons/IconicLink'; - -const IntroDiv = styled.div` - width: 450px; - position: relative; -`; - -const IntroTitle = styled.div` - margin-bottom: 25px; - line-height: 1.0em; -`; - -const IntroText = styled.div` - padding: 10px 0px; - text-align: left; - - margin-left: auto; - margin-right: auto; - margin-top: 25px; - margin-bottom: 25px; -`; +import './Introduction.less'; class Introduction extends Component { static propTypes = { @@ -31,22 +11,18 @@ class Introduction extends Component { render() { return ( - - {this.props.data.heading} - {this.props.data.text} +
    +
    {this.props.data.heading}
    +
    {this.props.data.text}
    - +
    ); } } diff --git a/src/components/Introduction.less b/src/components/Introduction.less new file mode 100644 index 0000000000..388d47a894 --- /dev/null +++ b/src/components/Introduction.less @@ -0,0 +1,24 @@ +.introduction { + width: 450px; + position: relative; +} + +.introduction__title { + margin-bottom: 25px; + line-height: 1.0em; +} + +.introduction__text { + padding: 10px 0px; + text-align: left; + margin-left: auto; + margin-right: auto; + margin-top: 25px; + margin-bottom: 25px; +} + +.introduction__icon { + marginLeft: auto; + marginRight: auto; + marginBottom: 75px; +} diff --git a/src/components/Popup.jsx b/src/components/Popup.jsx index 4b06beddf9..5b0c83ee45 100644 --- a/src/components/Popup.jsx +++ b/src/components/Popup.jsx @@ -1,70 +1,19 @@ import React from 'react'; -import styled from 'styled-components'; import PropTypes from 'prop-types'; import IconComponent from './Icon'; import IconicButton from '../components/buttons/IconicButton'; import dictIcons from '../img/icons/index'; - -export const PopupMask = styled.section` - z-index: 100; - position: fixed; - overflow-y: scroll; - top: 0px; - width: 100%; - height: 100%; - left: 0; - background: rgba(223, 223, 223, 0.47); - padding-top: 10em; -`; - -export const PopupBox = styled.section` - width: 50%; - overflow-y: scroll; - background: white; - margin: auto; - overflow: hidden; - border-radius: 8px; - border: 1px solid #9b9b9b; -`; - -export const PopupTitleBar = styled.div` - width: 100%; - height: 70px; - line-height: 70px; - padding: 0px 30px; - background: #3283c8; - color: #ffffff; - display: table; -`; - -export const Btn = styled.div` - float: right; - display: table-cell; - &:hover { - cursor: pointer; - } -`; - -export const Message = styled.div` - font-size: 1em; - background: mid_light_gray; - padding: 40px 30px 18px 30px; -`; - - -export const Error = styled.h6` - color: red; -`; +import './Popup.less'; const Popup = ({ title, message, lines, error, iconName, leftButtons, rightButtons, onClose, }) => ( - - - -
    +
    +
    +
    +
    { iconName !== '' && } -
    {title}
    +
    {title}
    { onClose && - +
    - +
    } - - - { message &&
    {message}
    } +
    +
    + { message &&
    {message}
    } { lines.length > 0 && 
    @@ -103,11 +52,11 @@ const Popup = ({
             }
    } - { error && Error } + { error &&
    Error
    } { error && {error} } - -
    -
    +
    +
    +
    { leftButtons.map((btn, i) => [ i > 0 && ' ', @@ -128,7 +77,7 @@ const Popup = ({ ]) }
    -
    +
    { rightButtons.map((btn, i) => [ i > 0 && ' ', @@ -150,8 +99,8 @@ const Popup = ({ }
    - - +
    +
    ); const buttonType = PropTypes.shape({ diff --git a/src/components/Popup.less b/src/components/Popup.less new file mode 100644 index 0000000000..7ad0760d82 --- /dev/null +++ b/src/components/Popup.less @@ -0,0 +1,72 @@ +.popup__mask { + z-index: 100; + position: fixed; + overflow-y: scroll; + top: 0px; + width: 100%; + height: 100%; + left: 0; + background: rgba(223, 223, 223, 0.47); + padding-top: 10em; +} + +.popup__box { + width: 50%; + overflow-y: scroll; + background: white; + margin: auto; + overflow: hidden; + border-radius: 8px; + border: 1px solid #9b9b9b; +} + +.popup__title { + width: 100%; + height: 70px; + line-height: 70px; + padding: 0px 30px; + background: #3283c8; + color: #ffffff; + display: table; +} + +.popup__icon { + float: left; + display: table-cell; +} + +.popup__title-text { + display: inline-flex; +} + +.popup__button { + float: right; + display: table-cell; + &:hover { + cursor: pointer; + } +} + +.popup__message { + font-size: 1em; + background: mid_light_gray; + padding: 40px 30px 18px 30px; +} + +.popup__foot{ + width: 100%; + padding: 0 30px 40px 30px; + margin-bottom: 40px; +} + +.popup__left-foot { + flat: left; +} + +.popup__right-foot { + float: right; +} + +.popup__error { + color: red; +} diff --git a/src/components/ProjectDashboard.jsx b/src/components/ProjectDashboard.jsx index 612b7ab2d0..413cf6ed11 100644 --- a/src/components/ProjectDashboard.jsx +++ b/src/components/ProjectDashboard.jsx @@ -1,28 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import DataSummaryCardGroup from './cards/DataSummaryCardGroup'; import ProjectTable from './tables/ProjectTable'; - -const DashTopDiv = styled.div` - height: 120px; - display: flex; -`; - -const Title = styled.div` - padding-top: 10px; - flex-basis: 460px; -`; +import './ProjectDashboard.less'; class ProjectDashboard extends Component { render() { const projectList = this.props.projectList || []; return ( -
    - - + <React.Fragment> + <div className="project-dashboard"> + <div className="h1-typo project-dashboard__title"> Data Submission Summary - +
    {/* */} - +
    -
    + ); } } diff --git a/src/components/ProjectDashboard.less b/src/components/ProjectDashboard.less new file mode 100644 index 0000000000..c1af01319b --- /dev/null +++ b/src/components/ProjectDashboard.less @@ -0,0 +1,9 @@ +.project-dashboard { + height: 120px; + display: flex; +} + +.project-dashboard__title { + padding-top: 10px; + flex-basis: 460px; +} diff --git a/src/components/SelectComponent.jsx b/src/components/SelectComponent.jsx index 0778ef7cde..81b08f4c51 100644 --- a/src/components/SelectComponent.jsx +++ b/src/components/SelectComponent.jsx @@ -1,32 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import Select from 'react-select'; - +import './SelectComponent.less'; const makeDefaultSelectedState = value => ({ selectedValue: value, }); - -export const SelectionDiv = styled.div` - font-size: 15px; - position: relative; - vertical-align: middle; - span { - vertical-align: middle; - margin-right: 10px; - } - - .Select-menu-outer { - top: auto; - bottom: 100%; - } -`; -const Dropdown = styled(Select)` - display: inline-block; - vertical-align: middle; -`; - + export default class SelectComponent extends Component { static propTypes = { title: PropTypes.string, @@ -69,9 +49,10 @@ export default class SelectComponent extends Component { const options = this.props.values.map(value => ({ value, label: value })); return ( - - {this.props.title} - + {this.props.title} + - + + ); } diff --git a/src/QueryNode/QueryForm.less b/src/QueryNode/QueryForm.less new file mode 100644 index 0000000000..c96912d521 --- /dev/null +++ b/src/QueryNode/QueryForm.less @@ -0,0 +1,22 @@ +.query-form__search-button { + transition: 0.25s; + color: white; + margin-bottom: 1em; + background-color: #008000; + border: 1px solid #008000; + line-height: 34px; + padding: 0em 0.5em; +} + +.query-form__search-button:hover, +.query-form__search-button:active, +.query-form__search-button:focus { + background-color: #159915; + border: 1px solid #159915; +} + +.query-form__select { + width: 40%; + float: left; + margin-right: 1em; +} \ No newline at end of file diff --git a/src/QueryNode/QueryNode.less b/src/QueryNode/QueryNode.less index 22d4347230..4d64a7f832 100644 --- a/src/QueryNode/QueryNode.less +++ b/src/QueryNode/QueryNode.less @@ -1,20 +1,3 @@ -.query-node__search-button { - transition: 0.25s; - color: white; - margin-bottom: 1em; - background-color: #008000; - border: 1px solid #008000; - line-height: 34px; - padding: 0em 0.5em; -} - -.query-node__search-button:hover, -.query-node__search-button:active, -.query-node__search-button:focus { - background-color: #159915; - border: 1px solid #159915; -} - .query-node__button { cursor: pointer; float: right; @@ -35,18 +18,3 @@ .query-node__button--view { color: #2B547E; } - -.query-node__input { - transition: 0.25s; - border: 1px solid #c1c1c1; - line-height: 34px; - margin-right: 1em; - padding: 0em 0.5em; - border-radius: 5px; -} - -.query-node__select { - width: 40%; - float: left; - margin-right: 1em; -} From 680dc8334655945905d13a133ba289900aae11fa Mon Sep 17 00:00:00 2001 From: Qingya Shu Date: Tue, 7 Aug 2018 14:39:34 -0500 Subject: [PATCH 3/9] fix(css): review fixed --- src/Explorer/ExplorerSideBar.jsx | 6 +++--- src/Explorer/ExplorerSideBar.less | 12 ++++++++++++ src/Index/reduxer.jsx | 2 +- src/QueryNode/QueryNode.jsx | 9 ++++----- src/components/CheckBox.jsx | 6 +++--- src/components/CheckBox.less | 9 +++++++-- src/components/IndexButtonBar.less | 4 +++- src/components/Introduction.less | 11 ++++------- src/components/Popup.less | 9 +++++---- src/components/SelectComponent.less | 2 -- src/components/buttons/IconicLink.jsx | 8 ++++---- src/components/tables/ProjectTable.jsx | 2 +- 12 files changed, 47 insertions(+), 33 deletions(-) create mode 100644 src/Explorer/ExplorerSideBar.less diff --git a/src/Explorer/ExplorerSideBar.jsx b/src/Explorer/ExplorerSideBar.jsx index 62f8a9dda9..597e4e133f 100644 --- a/src/Explorer/ExplorerSideBar.jsx +++ b/src/Explorer/ExplorerSideBar.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { CheckBoxGroup } from '../components/CheckBox'; -import { ExplorerSidebarStyle } from './style'; +import './ExplorerSideBar.less'; class ExplorerSideBar extends Component { static propTypes = { @@ -47,7 +47,7 @@ class ExplorerSideBar extends Component { const fileFormats = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_format').values()).sort(); return ( - +
    this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - +
    ); } } diff --git a/src/Explorer/ExplorerSideBar.less b/src/Explorer/ExplorerSideBar.less new file mode 100644 index 0000000000..42757786d4 --- /dev/null +++ b/src/Explorer/ExplorerSideBar.less @@ -0,0 +1,12 @@ +@explorer-table-bar-color: white; + +.explorer-side-bar { + float:left; + width: 25%; + font-size: 15px; + background: @explorer-table-bar-color; + margin-right: 2em; + padding: 0em 2em; + border: 2px solid #a9a9a9; + border-radius: 5px; +} diff --git a/src/Index/reduxer.jsx b/src/Index/reduxer.jsx index 958f740d80..49d8b760f9 100644 --- a/src/Index/reduxer.jsx +++ b/src/Index/reduxer.jsx @@ -3,7 +3,7 @@ import { sortCompare } from '../utils'; import { localTheme } from '../localconf'; import dictIcons from '../img/icons'; import { setActive } from '../Top/reduxer'; -import IndexBarChart from '../components/charts/IndexBarChart'; +import IndexBarChart from '../components/charts/IndexBarChart/.'; import IndexButtonBar from '../components/IndexButtonBar'; import { components } from '../params'; diff --git a/src/QueryNode/QueryNode.jsx b/src/QueryNode/QueryNode.jsx index 7bc56797fa..bae1f2c9c2 100644 --- a/src/QueryNode/QueryNode.jsx +++ b/src/QueryNode/QueryNode.jsx @@ -1,6 +1,5 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import Select from 'react-select'; import PropTypes from 'prop-types'; import { jsonToString, getSubmitPath } from '../utils'; import Popup from '../components/Popup'; @@ -19,9 +18,9 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { return (
  • {value.submitter_id} - Download - View - Delete + Download + View + Delete
    • ); }; @@ -73,7 +72,7 @@ Entities.defaultProps = { */ class QueryNode extends React.Component { /** - * Internal helper to render the "view node" popup if necessary + * Internal helper to render the 'view node" popup if necessary * based on the popups and queryNodes properties attached to this component. * * @param {popups, queryNodes, onUpdatePopup} props including diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx index 633a5b2ad7..6dd5889e7e 100644 --- a/src/components/CheckBox.jsx +++ b/src/components/CheckBox.jsx @@ -37,7 +37,7 @@ export class CheckBoxGroup extends Component { if (this.state.collapsed === 1) { return ( this.setState({ collapsed: 2 })}> - {'More Options'} + {'More options'} ); } else if (this.state.collapsed === 2) { @@ -58,7 +58,7 @@ export class CheckBoxGroup extends Component { : this.props.listItems; return ( -
    +
    {this.props.title} {listItems.map(item => (
    @@ -70,7 +70,7 @@ export class CheckBoxGroup extends Component { checked={selectedItems.includes(item)} onChange={() => this.onChangeBox(item)} /> - +
    ))} {this.displayOptions()} diff --git a/src/components/CheckBox.less b/src/components/CheckBox.less index b92f5c3844..d251bf365b 100644 --- a/src/components/CheckBox.less +++ b/src/components/CheckBox.less @@ -1,20 +1,25 @@ .checkbox { padding: 1em 0em; border-bottom: 2px solid #7d7474; + margin-bottom: 0; + margin-top: 0; } .checkbox:last-child { border-bottom: 0; } -.checkbox-label { +.checkbox__label { white-space: nowrap; text-overflow: ellipsis; min-width: 0px; max-width: 12vw; overflow: hidden; padding: 0px 0.25rem; - margin-left: 3px 3px 3px 0.3rem; + margin-left: 0.3rem; + margin-top: 3px; + margin-right: 3px; + margin-bottom: 3px; vertical-align: middle; line-height: 1.75; display:inline-block; diff --git a/src/components/IndexButtonBar.less b/src/components/IndexButtonBar.less index 20b45ef103..243600b537 100644 --- a/src/components/IndexButtonBar.less +++ b/src/components/IndexButtonBar.less @@ -1,3 +1,5 @@ +@import '~@gen3/ui-component/dist/css/base.less'; + .index-button-bar { display: flex; padding: 40px 0 0 0; @@ -11,7 +13,7 @@ text-align: center; width: 290px; margin-left: 20px; - border: 1px solid #e7e7e7; + border: 1px solid @silver; border-radius: 4px; position: relative; } diff --git a/src/components/Introduction.less b/src/components/Introduction.less index 388d47a894..55d7b25744 100644 --- a/src/components/Introduction.less +++ b/src/components/Introduction.less @@ -11,14 +11,11 @@ .introduction__text { padding: 10px 0px; text-align: left; - margin-left: auto; - margin-right: auto; - margin-top: 25px; - margin-bottom: 25px; + margin: 25px auto 25px auto; } .introduction__icon { - marginLeft: auto; - marginRight: auto; - marginBottom: 75px; + margin-left: auto; + margin-right: auto; + margin-bottom: 75px; } diff --git a/src/components/Popup.less b/src/components/Popup.less index 7ad0760d82..8a4ddbe169 100644 --- a/src/components/Popup.less +++ b/src/components/Popup.less @@ -1,3 +1,5 @@ +@import '~@gen3/ui-component/dist/css/base.less'; + .popup__mask { z-index: 100; position: fixed; @@ -17,7 +19,7 @@ margin: auto; overflow: hidden; border-radius: 8px; - border: 1px solid #9b9b9b; + border: 1px solid @light_gray; } .popup__title { @@ -25,7 +27,7 @@ height: 70px; line-height: 70px; padding: 0px 30px; - background: #3283c8; + background: @blue; color: #ffffff; display: table; } @@ -49,7 +51,6 @@ .popup__message { font-size: 1em; - background: mid_light_gray; padding: 40px 30px 18px 30px; } @@ -60,7 +61,7 @@ } .popup__left-foot { - flat: left; + float: left; } .popup__right-foot { diff --git a/src/components/SelectComponent.less b/src/components/SelectComponent.less index 81254bae14..f27a2f5730 100644 --- a/src/components/SelectComponent.less +++ b/src/components/SelectComponent.less @@ -5,11 +5,9 @@ } .selection__title { - vertical-align: middle; margin-right: 10px; } .selection__select { display: inline-block; - vertical-align: middle; } diff --git a/src/components/buttons/IconicLink.jsx b/src/components/buttons/IconicLink.jsx index 55a28bbaff..ce010d1165 100644 --- a/src/components/buttons/IconicLink.jsx +++ b/src/components/buttons/IconicLink.jsx @@ -12,7 +12,7 @@ class IconicLink extends React.Component { { this.props.dictIcons !== undefined ? - : - } @@ -36,7 +36,7 @@ IconicLink.propTypes = { icon: PropTypes.string, iconColor: PropTypes.string, caption: PropTypes.string, - buttonClassName: PropTypes.string, + orangeButton: PropTypes.bool, className: PropTypes.string, }; @@ -45,7 +45,7 @@ IconicLink.defaultProps = { icon: '', iconColor: '', caption: '', - buttonClassName: 'button-primary-white', + orangeButton: false, className: '', }; diff --git a/src/components/tables/ProjectTable.jsx b/src/components/tables/ProjectTable.jsx index 52950deb39..63daa04af2 100644 --- a/src/components/tables/ProjectTable.jsx +++ b/src/components/tables/ProjectTable.jsx @@ -27,7 +27,7 @@ class ProjectTable extends React.Component { Date: Tue, 7 Aug 2018 15:01:36 -0500 Subject: [PATCH 4/9] fix(css): fix some quotes and style mistakes --- src/Explorer/ExplorerSideBar.jsx | 6 ++--- src/QueryNode/QueryNode.jsx | 12 ++++++---- src/components/CheckBox.jsx | 3 +-- src/components/IndexButtonBar.jsx | 14 +++++------ src/components/Introduction.jsx | 14 +++++------ src/components/Popup.jsx | 24 +++++++++---------- src/components/ProjectDashboard.jsx | 4 ++-- src/components/SelectComponent.jsx | 8 +++---- src/components/Spinner.jsx | 10 ++++---- src/components/buttons/IconicLink.jsx | 2 +- src/components/charts/IndexBarChart/index.jsx | 4 ++-- .../charts/ProjectBarChart/index.jsx | 6 ++--- src/components/charts/TooltipCDIS/index.jsx | 2 +- src/components/tables/ProjectTable.jsx | 2 +- 14 files changed, 56 insertions(+), 55 deletions(-) diff --git a/src/Explorer/ExplorerSideBar.jsx b/src/Explorer/ExplorerSideBar.jsx index 597e4e133f..2267acc6ea 100644 --- a/src/Explorer/ExplorerSideBar.jsx +++ b/src/Explorer/ExplorerSideBar.jsx @@ -47,7 +47,7 @@ class ExplorerSideBar extends Component { const fileFormats = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_format').values()).sort(); return ( -
    +
    this.props.onChange({ ...this.props.selectedFilters, ...state })} />
    diff --git a/src/QueryNode/QueryNode.jsx b/src/QueryNode/QueryNode.jsx index bae1f2c9c2..4360124145 100644 --- a/src/QueryNode/QueryNode.jsx +++ b/src/QueryNode/QueryNode.jsx @@ -6,7 +6,7 @@ import Popup from '../components/Popup'; import QueryForm from './QueryForm'; import './QueryNode.less'; -const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { +const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo, tabindexStart }) => { const onDelete = () => { onStoreNodeInfo({ project, id: value.id }).then( () => onUpdatePopup({ nodedelete_popup: true }), @@ -18,9 +18,9 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { return (
  • {value.submitter_id} - Download - View - Delete + Download + View + Delete
    • ); }; @@ -28,6 +28,7 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { Entity.propTypes = { project: PropTypes.string.isRequired, value: PropTypes.object.isRequired, + tabindexStart: PropTypes.number.isRequired, onUpdatePopup: PropTypes.func, onStoreNodeInfo: PropTypes.func, }; @@ -43,12 +44,13 @@ const Entities = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => (
      { value.map( - v => ( (), ) } diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx index 6dd5889e7e..d90791a75e 100644 --- a/src/components/CheckBox.jsx +++ b/src/components/CheckBox.jsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Label } from '../theme'; import './CheckBox.less'; export class CheckBoxGroup extends Component { @@ -70,7 +69,7 @@ export class CheckBoxGroup extends Component { checked={selectedItems.includes(item)} onChange={() => this.onChangeBox(item)} /> - +
    ))} {this.displayOptions()} diff --git a/src/components/IndexButtonBar.jsx b/src/components/IndexButtonBar.jsx index bf09498516..63f2107f40 100644 --- a/src/components/IndexButtonBar.jsx +++ b/src/components/IndexButtonBar.jsx @@ -11,23 +11,23 @@ import './IndexButtonBar.less'; class IndexButtonBar extends Component { render() { return ( -
    +
    { this.props.buttons.map( item => ( -
    -
    {item.name}
    -
    +
    +
    {item.name}
    +
    -
    {item.body}
    +
    {item.body}
    { item.link.startsWith('http') ? - + : - +