diff --git a/web/src/screens/repo/screens/build/components/procs.js b/web/src/screens/repo/screens/build/components/procs.js index a2b9c9f4e..8e8e398c1 100644 --- a/web/src/screens/repo/screens/build/components/procs.js +++ b/web/src/screens/repo/screens/build/components/procs.js @@ -15,24 +15,47 @@ const renderEnviron = data => { ); }; -const ProcListHolder = ({ vars, renderName, children }) => ( -
- {renderName && vars.name !== "drone" ? ( -
- +class ProcListHolder extends Component { + constructor(props, context) { + super(props, context); + this.state = { open: false }; + } + + toggleOpen = () => { + this.setState({ open: !this.state.open }); + }; + + render() { + const { vars, renderName, children } = this.props; + const groupExpandStatus = this.state.open + ? styles.collapsed + : styles.expanded; + return ( +
+ {renderName && vars.name !== "drone" ? ( +
+ +
+ ) : null} + {vars.environ ? ( +
+ +
+ ) : null} +
{children}
- ) : null} - {vars.environ ? ( -
- -
- ) : null} - {children} -
-); + ); + } +} export class ProcList extends Component { render() { diff --git a/web/src/screens/repo/screens/build/components/procs.less b/web/src/screens/repo/screens/build/components/procs.less index 033d8cd77..f7622d92f 100644 --- a/web/src/screens/repo/screens/build/components/procs.less +++ b/web/src/screens/repo/screens/build/components/procs.less @@ -8,6 +8,33 @@ } } +.group { + cursor: pointer; + position: relative; +} + +.expanded:after { + content: "+"; + position: absolute; + top: 8px; + right: 12px; + color: white; + font-size: 16px; +} + +.collapsed:after { + content: "—"; + position: absolute; + top: 8px; + right: 12px; + color: white; + font-size: 16px; +} + +.hide { + display: none; +} + .vars { padding: 30px 0 0 10px; }