diff options
| author | Jorik Schellekens <joriks@matrix.org> | 2019-08-16 16:23:21 +0100 |
|---|---|---|
| committer | Jorik Schellekens <joriks@matrix.org> | 2019-08-28 15:59:54 +0100 |
| commit | f56760604de225ef1aa3d3a76992aa4284a07694 (patch) | |
| tree | 1a76247c04058a5962e1c47869abc0291dd7e560 | |
| parent | Only proceed if you've copied/downloaded (diff) | |
| download | synapse-f56760604de225ef1aa3d3a76992aa4284a07694.tar.xz | |
Chevron
5 files changed, 16 insertions, 2 deletions
diff --git a/synapse_topology/webui/package.json b/synapse_topology/webui/package.json index bbc447a0c0..e62fbb3a70 100644 --- a/synapse_topology/webui/package.json +++ b/synapse_topology/webui/package.json @@ -42,6 +42,7 @@ "dependencies": { "fetch-absolute": "^1.0.0", "react-bootstrap": "^1.0.0-beta.11", + "react-icons": "^3.7.0", "react-localize-redux": "^3.5.3", "react-redux": "^7.1.0", "redux": "^4.0.4", diff --git a/synapse_topology/webui/src/js/components/AccordionToggle.jsx b/synapse_topology/webui/src/js/components/AccordionToggle.jsx index 8be4afa022..657cbd0f73 100644 --- a/synapse_topology/webui/src/js/components/AccordionToggle.jsx +++ b/synapse_topology/webui/src/js/components/AccordionToggle.jsx @@ -1,8 +1,9 @@ import React from 'react'; import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import { reset } from 'ansi-colors'; +import Chevron from './Chevron'; -export default ({ active, children, eventKey, as, reset }) => { +export default ({ active, open, children, eventKey, as, reset }) => { const toggle = useAccordionToggle(eventKey); const decoratedOnClick = () => { @@ -17,7 +18,7 @@ export default ({ active, children, eventKey, as, reset }) => { } const As = as; return <div className={active ? "active-card-header" : "inactive-card-header"}> - <As onClick={decoratedOnClick}> {children}</As> + <As onClick={decoratedOnClick}> {children} <Chevron open={open} /></As> </div> } diff --git a/synapse_topology/webui/src/js/components/Chevron.jsx b/synapse_topology/webui/src/js/components/Chevron.jsx new file mode 100644 index 0000000000..2df77c3161 --- /dev/null +++ b/synapse_topology/webui/src/js/components/Chevron.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { FaChevronRight, FaChevronDown } from 'react-icons/fa' + +export default ({ open }) => + <span className="chevron"> + {open ? <FaChevronDown /> : <FaChevronRight />} + </span> \ No newline at end of file diff --git a/synapse_topology/webui/src/js/containers/AccordionToggle.js b/synapse_topology/webui/src/js/containers/AccordionToggle.js index 48042adab8..1e0f133885 100644 --- a/synapse_topology/webui/src/js/containers/AccordionToggle.js +++ b/synapse_topology/webui/src/js/containers/AccordionToggle.js @@ -4,6 +4,7 @@ import AccordionToggle from '../components/AccordionToggle'; import { resetUI } from '../actions'; const mapStateToProps = (state, { eventKey, as, children }) => ({ active: state.setupUI.activeBlocks.includes(eventKey), + open: state.setupUI.activeBlocks[state.setupUI.activeBlocks.length - 1] == eventKey, eventKey, as, children, diff --git a/synapse_topology/webui/src/scss/main.scss b/synapse_topology/webui/src/scss/main.scss index 2b82431877..110b1bc5d0 100644 --- a/synapse_topology/webui/src/scss/main.scss +++ b/synapse_topology/webui/src/scss/main.scss @@ -227,3 +227,7 @@ input[type=checkbox] { margin-left: 1rem; } } + +.chevron { + float:right; +} \ No newline at end of file |