From 349a9c7cc23387a264a2d99b1d60747ead8a1239 Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Fri, 10 May 2019 11:03:16 -0400 Subject: [PATCH 1/8] =?UTF-8?q?Add=20`styled-components`=20library=20and?= =?UTF-8?q?=20its=20babel=20plugin.=20=F0=9F=92=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- babel.config.js | 1 + package-lock.json | 144 +++++++++++++++++++++++++++++++++------------- package.json | 4 +- 3 files changed, 107 insertions(+), 42 deletions(-) diff --git a/babel.config.js b/babel.config.js index 87b4f38f68..aca16f7246 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,6 +2,7 @@ module.exports = api => { api.cache(false); return { plugins: [ + 'babel-plugin-styled-components', '@babel/plugin-proposal-class-properties', 'macros' ], diff --git a/package-lock.json b/package-lock.json index 35c6800410..5c40be73c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -163,7 +163,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -1134,6 +1133,21 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz", "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==" }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "requires": { + "@emotion/memoize": "0.7.1" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + } + } + }, "@emotion/memoize": { "version": "0.6.6", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", @@ -2219,7 +2233,7 @@ }, "ansi-colors": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", "requires": { "ansi-wrap": "^0.1.0" @@ -3237,14 +3251,25 @@ "resolve": "^1.8.1" } }, + "babel-plugin-styled-components": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", + "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-flow": { "version": "6.18.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=" }, "babel-plugin-syntax-jsx": { @@ -4154,6 +4179,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-lite": { "version": "1.0.30000902", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz", @@ -4885,6 +4915,11 @@ "urix": "^0.1.0" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-loader": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz", @@ -4962,6 +4997,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz", + "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -5421,7 +5466,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -6640,7 +6685,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -7027,8 +7072,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -7049,14 +7093,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7071,20 +7113,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7201,8 +7240,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7214,7 +7252,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7229,7 +7266,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7237,14 +7273,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7263,7 +7297,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7344,8 +7377,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7357,7 +7389,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7443,8 +7474,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7480,7 +7510,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7500,7 +7529,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7544,14 +7572,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -7803,8 +7829,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -10625,7 +10650,7 @@ }, "kind-of": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=" }, "kleur": { @@ -10951,6 +10976,11 @@ } } }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -12639,8 +12669,7 @@ "postcss-value-parser": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" }, "prelude-ls": { "version": "1.1.2", @@ -14922,6 +14951,39 @@ "schema-utils": "^1.0.0" } }, + "styled-components": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/is-prop-valid": "^0.7.3", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylis": { "version": "3.5.4", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", diff --git a/package.json b/package.json index a4edfe39e6..7678e5dfa3 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "babel-jest": "^24.7.1", "babel-loader": "^8.0.4", "babel-plugin-macros": "^2.4.2", + "babel-plugin-styled-components": "^1.10.0", "css-loader": "^1.0.0", "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.12.1", @@ -59,6 +60,7 @@ "prop-types": "^15.6.2", "react": "^16.4.1", "react-dom": "^16.4.1", - "react-router-dom": "^4.3.1" + "react-router-dom": "^4.3.1", + "styled-components": "^4.2.0" } } From 82c7052d6fc1cb9e0fdc5863beacc89a3724bab4 Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Fri, 10 May 2019 10:23:16 -0400 Subject: [PATCH 2/8] Make Org Notifications page responsive. --- .../NotificationListItem.jsx | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/src/components/NotificationsList/NotificationListItem.jsx b/src/components/NotificationsList/NotificationListItem.jsx index 483a1345e9..5493982145 100644 --- a/src/components/NotificationsList/NotificationListItem.jsx +++ b/src/components/NotificationsList/NotificationListItem.jsx @@ -5,13 +5,31 @@ import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { Badge, - Switch, + Switch as PFSwitch, DataListItem, DataListItemRow, DataListItemCells, - DataListCell, + DataListCell as PFDataListCell, } from '@patternfly/react-core'; +import styled from 'styled-components'; + +const DataListCell = styled(PFDataListCell)` + display: flex; + justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')}; + padding-bottom: ${props => (props.righthalf ? '16px' : '8px')}; + + @media screen and (min-width: 768px) { + justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')}; + padding-bottom: 0; + } +`; + +const Switch = styled(PFSwitch)` + display: flex; + flex-wrap: no-wrap; +`; + function NotificationListItem (props) { const { canToggleNotifications, @@ -21,13 +39,6 @@ function NotificationListItem (props) { errorTurnedOn, toggleNotification } = props; - const capText = { - textTransform: 'capitalize' - }; - const toggleCellStyles = { - display: 'flex', - justifyContent: 'flex-end', - }; return ( @@ -43,18 +54,18 @@ function NotificationListItem (props) { to={{ pathname: detailUrl }} - style={{ marginRight: '1.5em' }} + css="margin-right: 1.5em;" > {notification.name} {notification.notification_type} , - + Date: Mon, 13 May 2019 18:42:08 -0400 Subject: [PATCH 3/8] Make Orgs List page responsive. --- src/app.scss | 11 ---- .../components/OrganizationListItem.jsx | 54 ++++++++++++++----- 2 files changed, 42 insertions(+), 23 deletions(-) diff --git a/src/app.scss b/src/app.scss index c2f8b84d53..af1f7b47ca 100644 --- a/src/app.scss +++ b/src/app.scss @@ -128,17 +128,6 @@ --pf-c-data-list__cell--PaddingTop: 16px; --pf-c-data-list__cell-cell--PaddingTop: 16px; - .awx-c-list-group { - display: inline-flex; - margin-right: 20px; - - &--badge { - align-items: center; - display: flex; - justify-content: center; - margin-left: 10px; - } - } &.pf-c-data-list__cell--divider { --pf-c-data-list__cell-cell--MarginRight: 0; diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx index f250f5ce75..865fa4e3c0 100644 --- a/src/pages/Organizations/components/OrganizationListItem.jsx +++ b/src/pages/Organizations/components/OrganizationListItem.jsx @@ -2,20 +2,52 @@ import React from 'react'; import { string, bool, func } from 'prop-types'; import { Trans } from '@lingui/macro'; import { - Badge, + Badge as PFBadge, DataListItem, DataListItemRow, DataListItemCells, DataListCheck, - DataListCell, + DataListCell as PFDataListCell, } from '@patternfly/react-core'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; + import VerticalSeparator from '../../../components/VerticalSeparator'; import { Organization } from '../../../types'; +const Badge = styled(PFBadge)` + align-items: center; + display: flex; + justify-content: center; + margin-left: 10px; +`; + +const ListGroup = styled.span` + display: flex; + margin-left: 40px; + + @media screen and (min-width: 768px) { + margin-left: 20px; + + &:first-of-type { + margin-left: 0; + } + } +`; + +const DataListCell = styled(PFDataListCell)` + display: flex; + align-items: center; + padding-bottom: ${props => (props.righthalf ? '16px' : '8px')}; + + @media screen and (min-width: 768px) { + padding-bottom: 0; + } +`; + class OrganizationListItem extends React.Component { static propTypes = { organization: Organization.isRequired, @@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component { aria-labelledby={labelId} /> + - , - , - - + + Members - + {organization.summary_fields.related_field_counts.users} - - + + Teams - + {organization.summary_fields.related_field_counts.teams} - + ]} /> From 0ea4a4dedd169a812136c54a0aadd716d17f9afc Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Fri, 10 May 2019 12:27:19 -0400 Subject: [PATCH 4/8] Convert toolbar button components to styled-components. --- .../DataListToolbar/DataListToolbar.jsx | 2 +- src/components/DataListToolbar/styles.scss | 74 +++++++++---------- .../PaginatedDataList/ToolbarAddButton.jsx | 18 ++++- .../PaginatedDataList/ToolbarDeleteButton.jsx | 34 ++++++++- 4 files changed, 85 insertions(+), 43 deletions(-) diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 4616370f76..74f57e1fd6 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -96,7 +96,7 @@ class DataListToolbar extends React.Component { )} - + {additionalControls} diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss index 8909439caa..721855f930 100644 --- a/src/components/DataListToolbar/styles.scss +++ b/src/components/DataListToolbar/styles.scss @@ -66,49 +66,49 @@ margin-left: 20px; } -.awx-toolbar .pf-c-button.pf-m-primary { - background-color: #5cb85c; - min-width: 0px; - width: 30px; - height: 30px; - text-align: center; - padding: 0px; - margin: 0px; - margin-right: 20px; -} +// .awx-toolbar .pf-c-button.pf-m-primary { +// background-color: #5cb85c; +// min-width: 0px; +// width: 30px; +// height: 30px; +// text-align: center; +// padding: 0px; +// margin: 0px; +// margin-right: 20px; +// } .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain { font-size: 18px; } -.awx-ToolBarBtn { - width: 30px; - display: flex; - justify-content: center; - margin-right: 20px; - border-radius: 3px; +// .awx-ToolBarBtn { +// width: 30px; +// display: flex; +// justify-content: center; +// margin-right: 20px; +// border-radius: 3px; - &[disabled] { - cursor: not-allowed; - } -} +// &[disabled] { +// cursor: not-allowed; +// } +// } -.awx-ToolBarBtn:hover { - .awx-ToolBarTrashCanIcon { - color: white; - } - background-color:#d9534f; -} +// .awx-ToolBarBtn:hover { +// .awx-ToolBarTrashCanIcon { +// color: white; +// } +// background-color:#d9534f; +// } -.awx-ToolBarBtn[disabled]:hover { - .awx-ToolBarTrashCanIcon { - color: #d2d2d2; - } - background-color: white; -} +// .awx-ToolBarBtn[disabled]:hover { +// .awx-ToolBarTrashCanIcon { +// color: #d2d2d2; +// } +// background-color: white; +// } -.pf-l-toolbar > div { - &:last-child{ - display:none; - } -} +// .pf-l-toolbar > div { +// &:last-child{ +// display:none; +// } +// } diff --git a/src/components/PaginatedDataList/ToolbarAddButton.jsx b/src/components/PaginatedDataList/ToolbarAddButton.jsx index 72c5ba1398..ae6b7e0c74 100644 --- a/src/components/PaginatedDataList/ToolbarAddButton.jsx +++ b/src/components/PaginatedDataList/ToolbarAddButton.jsx @@ -1,10 +1,24 @@ import React from 'react'; import { string, func } from 'prop-types'; import { Link } from 'react-router-dom'; -import { Button } from '@patternfly/react-core'; +import { Button as PFButton } from '@patternfly/react-core'; import { PlusIcon } from '@patternfly/react-icons'; import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; +import styled from 'styled-components'; + +const Button = styled(PFButton)` + &&& { /* higher specificity order */ + background-color: #5cb85c; + min-width: 0; + width: 30px; + height: 30px; + text-align: center; + padding: 0; + margin: 0; + margin-right: 20px; + } +`; function ToolbarAddButton ({ linkTo, onClick }) { if (!linkTo && !onClick) { @@ -15,7 +29,7 @@ function ToolbarAddButton ({ linkTo, onClick }) { return ( {({ i18n }) => ( - + { isModalOpen && ( From a87c6ddf1b87c6c5c2ebb2e1b55e06d9ccf7a9bd Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Fri, 10 May 2019 17:21:31 -0400 Subject: [PATCH 5/8] Convert DataListToolbar to a styled-component. --- .../DataListToolbar/DataListToolbar.jsx | 51 ++++++++---- src/components/DataListToolbar/styles.scss | 78 ++++++++++--------- .../PaginatedDataList/ToolbarDeleteButton.jsx | 1 + src/components/Search/Search.jsx | 43 +++++++++- src/components/Sort/Sort.jsx | 38 ++++++++- 5 files changed, 153 insertions(+), 58 deletions(-) diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 74f57e1fd6..070c56359f 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -6,16 +6,43 @@ import { Checkbox, Level, LevelItem, - Toolbar, - ToolbarGroup, + Toolbar as PFToolbar, + ToolbarGroup as PFToolbarGroup, ToolbarItem, } from '@patternfly/react-core'; +import styled from 'styled-components'; import ExpandCollapse from '../ExpandCollapse'; import Search from '../Search'; import Sort from '../Sort'; import VerticalSeparator from '../VerticalSeparator'; +const AWXToolbar = styled.div` + --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); + --awx-toolbar--BorderColor: #ebebeb; + --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); + + border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); + background-color: var(--awx-toolbar--BackgroundColor); + display: flex; + min-height: 70px; + padding-top: 5px; + + --pf-global--target-size--MinHeight: 0px; + --pf-global--target-size--MinWidth: 0px; + --pf-global--FontSize--md: 14px; +`; + +const Toolbar = styled(PFToolbar)` + flex-grow: 1; + margin-left: ${props => (props.noleftmargin ? '0' : '20px')}; +`; + +const ToolbarGroup = styled(PFToolbarGroup)` + &&& { + margin: 0; + } +`; class DataListToolbar extends React.Component { render () { const { @@ -38,12 +65,12 @@ class DataListToolbar extends React.Component { return ( {({ i18n }) => ( -
- - - + + + + { showSelectAll && ( - + )} - - + + - + -
+ )} ); diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss index 721855f930..fb10fa7168 100644 --- a/src/components/DataListToolbar/styles.scss +++ b/src/components/DataListToolbar/styles.scss @@ -1,69 +1,71 @@ .awx-toolbar { - --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); - --awx-toolbar--BorderColor: #ebebeb; - --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); + // --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); + // --awx-toolbar--BorderColor: #ebebeb; + // --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm); - border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); - background-color: var(--awx-toolbar--BackgroundColor); - display: flex; - height: 70px; - padding-top: 5px; + // border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); + // background-color: var(--awx-toolbar--BackgroundColor); + // display: flex; + // height: 70px; + // padding-top: 5px; - --pf-global--target-size--MinHeight: 0px; - --pf-global--target-size--MinWidth: 0px; - --pf-global--FontSize--md: 14px; + // --pf-global--target-size--MinHeight: 0px; + // --pf-global--target-size--MinWidth: 0px; + // --pf-global--FontSize--md: 14px; } .awx-toolbar .pf-l-level { - flex: 1; + // flex: 1; } .awx-toolbar .pf-c-button.pf-m-plain { - --pf-c-button--m-plain--PaddingLeft: 0px; - --pf-c-button--m-plain--PaddingRight: 0px; + // --pf-c-button--m-plain--PaddingLeft: 0px; + // --pf-c-button--m-plain--PaddingRight: 0px; } .awx-toolbar .pf-l-toolbar__group { - --pf-l-toolbar__group--MarginRight: 0px; - --pf-l-toolbar__group--MarginLeft: 0px; + // --pf-l-toolbar__group--MarginRight: 0px; + // --pf-l-toolbar__group--MarginLeft: 0px; } .awx-toolbar button.pf-c-button { - height: 30px; - width: 30px; - padding: 0px; + // height: 30px; + // width: 30px; + // padding: 0px; } -.awx-toolbar .pf-c-input-group { - min-height: 0px; - height: 30px; +// SEARCH +// .awx-toolbar .pf-c-input-group { +// // min-height: 0px; +// // height: 30px; - .pf-m-tertiary { - width: 34px; - padding: 0px; - } -} +// .pf-m-tertiary { +// // width: 34px; +// // padding: 0px; +// } +// } +// SEARCH .awx-toolbar .pf-c-dropdown__toggle { - min-height: 30px; - min-width: 70px; - height: 30px; - padding: 0 10px; - margin: 0px; + // min-height: 30px; + // min-width: 70px; + // height: 30px; + // padding: 0 10px; + // margin: 0px; .pf-c-dropdown__toggle-text { - width: auto; + // width: auto; } .pf-c-dropdown__toggle-icon { - margin: 0px; - padding-top: 3px; - padding-left: 3px; + // margin: 0px; + // padding-top: 3px; + // padding-left: 3px; } } .awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button { - margin-left: 20px; + // margin-left: 20px; } // .awx-toolbar .pf-c-button.pf-m-primary { @@ -78,7 +80,7 @@ // } .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain { - font-size: 18px; + // font-size: 18px; } // .awx-ToolBarBtn { diff --git a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx index 49600c19e9..d9ff520ee2 100644 --- a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx +++ b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx @@ -15,6 +15,7 @@ const Button = styled(PFButton)` justify-content: center; margin-right: 20px; border-radius: 3px; + padding: 0; &:disabled { diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index ec23b2d071..4df3abf9bc 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -3,14 +3,49 @@ import PropTypes from 'prop-types'; import { I18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { - Button, - Dropdown, + Button as PFButton, + Dropdown as PFDropdown, DropdownPosition, DropdownToggle, DropdownItem, - TextInput + TextInput as PFTextInput } from '@patternfly/react-core'; +import { SearchIcon } from '@patternfly/react-icons'; + +import styled from 'styled-components'; + +const TextInput = styled(PFTextInput)` + min-height: 0px; + height: 30px; +`; + +const Button = styled(PFButton)` + width: 34px; + padding: 0px; +`; + +const Dropdown = styled(PFDropdown)` + &&& { /* Higher specificity required because we are selecting unclassed elements */ + > button { + min-height: 30px; + min-width: 70px; + height: 30px; + padding: 0 10px; + margin: 0px; + + > span { /* text element */ + width: auto; + } + + > svg { /* caret icon */ + margin: 0px; + padding-top: 3px; + padding-left: 3px; + } + } + } +`; class Search extends React.Component { constructor (props) { super(props); @@ -103,7 +138,7 @@ class Search extends React.Component { aria-label={i18n._(t`Search`)} onClick={this.handleSearch} > -