diff --git a/src/app.scss b/src/app.scss index 08584353af..5d2f72d701 100644 --- a/src/app.scss +++ b/src/app.scss @@ -135,7 +135,7 @@ cursor: pointer; } } -.awx-pill { +.awx-c-tag--pill { color: white; background-color: rgb(0, 123, 186); border-radius: 3px; @@ -151,17 +151,27 @@ flex-direction: row; justify-content: flex-end; } - +// +// list styles +// .awx-c-list { border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; } - +// +// pf modal overrides +// .awx-c-modal { width: 550px; margin: 0; } +.awx-c-icon--remove { + padding-left: 10px; + &:hover { + cursor: pointer; + } +} .pf-c-modal-box__footer { --pf-c-modal-box__footer--PaddingTop: 0; --pf-c-modal-box__footer--PaddingBottom: 0; @@ -177,4 +187,4 @@ .pf-c-modal-box__body { --pf-c-modal-box__body--PaddingLeft: 20px; --pf-c-modal-box__body--PaddingRight: 20px; -} \ No newline at end of file +} diff --git a/src/components/ListItem/ListItem.jsx b/src/components/ListItem/CheckboxListItem.jsx similarity index 89% rename from src/components/ListItem/ListItem.jsx rename to src/components/ListItem/CheckboxListItem.jsx index dea68b2030..5970690429 100644 --- a/src/components/ListItem/ListItem.jsx +++ b/src/components/ListItem/CheckboxListItem.jsx @@ -26,9 +26,9 @@ export default ({
- + +
); diff --git a/src/components/ListItem/index.js b/src/components/ListItem/index.js index 038fb1ed81..cfc19060dd 100644 --- a/src/components/ListItem/index.js +++ b/src/components/ListItem/index.js @@ -1,3 +1,3 @@ -import ListItem from './ListItem'; +import CheckboxListItem from './CheckboxListItem'; -export default ListItem; +export default CheckboxListItem; diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index 3be0464535..f2c6635139 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -9,7 +9,7 @@ import { ToolbarGroup, } from '@patternfly/react-core'; -import ListItem from '../ListItem' +import CheckboxListItem from '../CheckboxListItem' class Lookup extends React.Component { constructor(props) { @@ -21,6 +21,7 @@ class Lookup extends React.Component { this.onLookup = this.onLookup.bind(this); this.onChecked = this.onChecked.bind(this); this.wrapTags = this.wrapTags.bind(this); + this.onRemove = this.onRemove.bind(this); } handleModalToggle() { @@ -37,10 +38,13 @@ class Lookup extends React.Component { this.props.lookupChange(evt.target.value); }; + onRemove(evt) { + this.props.lookupChange(evt.target.id); + } wrapTags(tags) { return tags.filter(tag => tag.isChecked).map((tag, index) => { return ( - {tag.name} + {tag.name}x ) }) } @@ -53,7 +57,6 @@ class Lookup extends React.Component {
{this.wrapTags(this.props.data)}