self-hosted/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-30 10:11:23 +02:00
Code Issues Releases Activity

[multipipeline-group-ui] add collapse/expand feature to multipipeline group

Browse Source
This commit is contained in:
Kepler Vital 2021-03-04 19:15:39 +01:00
parent 1459f306eb
commit 3b7147780b
2 changed files with 67 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
web/src/screens/repo/screens/build/components/procs.js
View File

@ -15,24 +15,47 @@ const renderEnviron = data => {
);
};
const ProcListHolder = ({ vars, renderName, children }) => (
<div className={styles.list}>
{renderName && vars.name !== "drone" ? (
<div>
<StatusText status={vars.state} text={vars.name} />
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 (
<div className={styles.list}>
{renderName && vars.name !== "drone" ? (
<div
onClick={this.toggleOpen}
className={`${styles.group} ${groupExpandStatus}`}
>
<StatusText status={vars.state} text={vars.name} />
</div>
) : null}
{vars.environ ? (
<div
onClick={this.toggleOpen}
className={`${styles.group} ${groupExpandStatus}`}
>
<StatusText
status={vars.state}
text={Object.entries(vars.environ).map(renderEnviron)}
/>
</div>
) : null}
<div className={!this.state.open ? styles.hide : ""}>{children}</div>
</div>
) : null}
{vars.environ ? (
<div>
<StatusText
status={vars.state}
text={Object.entries(vars.environ).map(renderEnviron)}
/>
</div>
) : null}
{children}
</div>
);
);
}
}
export class ProcList extends Component {
render() {

27
web/src/screens/repo/screens/build/components/procs.less
View File

@ -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;
}