diff options
Diffstat (limited to 'web/src/containers/status')
| -rw-r--r-- | web/src/containers/status/Change.jsx | 10 | ||||
| -rw-r--r-- | web/src/containers/status/ChangePanel.jsx | 20 |
2 files changed, 20 insertions, 10 deletions
diff --git a/web/src/containers/status/Change.jsx b/web/src/containers/status/Change.jsx index ac0a4e6e8..b2ab50c5b 100644 --- a/web/src/containers/status/Change.jsx +++ b/web/src/containers/status/Change.jsx @@ -48,7 +48,8 @@ class Change extends React.Component { pipeline: PropTypes.object, tenant: PropTypes.object, user: PropTypes.object, - dispatch: PropTypes.func + dispatch: PropTypes.func, + preferences: PropTypes.object } state = { @@ -268,7 +269,11 @@ class Change extends React.Component { for (i = 0; i < queue._tree_columns; i++) { let className = '' if (i < change._tree.length && change._tree[i] !== null) { - className = ' zuul-change-row-line' + if (this.props.preferences.darkMode) { + className = ' zuul-change-row-line-dark' + } else { + className = ' zuul-change-row-line' + } } row.push( <td key={i} className={'zuul-change-row' + className}> @@ -313,4 +318,5 @@ class Change extends React.Component { export default connect(state => ({ tenant: state.tenant, user: state.user, + preferences: state.preferences, }))(Change) diff --git a/web/src/containers/status/ChangePanel.jsx b/web/src/containers/status/ChangePanel.jsx index dd4fc27e5..4c8c20469 100644 --- a/web/src/containers/status/ChangePanel.jsx +++ b/web/src/containers/status/ChangePanel.jsx @@ -25,7 +25,8 @@ class ChangePanel extends React.Component { static propTypes = { globalExpanded: PropTypes.bool.isRequired, change: PropTypes.object.isRequired, - tenant: PropTypes.object + tenant: PropTypes.object, + preferences: PropTypes.object } constructor () { @@ -126,7 +127,7 @@ class ChangePanel extends React.Component { const interesting_jobs = change.jobs.filter(j => this.jobStrResult(j) !== 'skipped') let jobPercent = (100 / interesting_jobs.length).toFixed(2) return ( - <div className='progress zuul-change-total-result'> + <div className={`progress zuul-change-total-result${this.props.preferences.darkMode ? ' progress-dark' : ''}`}> {change.jobs.map((job, idx) => { let result = this.jobStrResult(job) if (['queued', 'waiting', 'skipped'].includes(result)) { @@ -204,7 +205,7 @@ class ChangePanel extends React.Component { } return ( - <div className='progress zuul-job-result' + <div className={`progress zuul-job-result${this.props.preferences.darkMode ? ' progress-dark' : ''}`} title={title}> <div className={'progress-bar ' + className} role='progressbar' @@ -321,9 +322,9 @@ class ChangePanel extends React.Component { return ( <> - <ul className='list-group zuul-patchset-body'> + <ul className={`list-group ${this.props.preferences.darkMode ? 'zuul-patchset-body-dark' : 'zuul-patchset-body'}`}> {interestingJobs.map((job, idx) => ( - <li key={idx} className='list-group-item zuul-change-job'> + <li key={idx} className={`list-group-item ${this.props.preferences.darkMode ? 'zuul-change-job-dark' : 'zuul-change-job'}`}> {this.renderJob(job, times.jobs[job.name])} </li> ))} @@ -389,8 +390,8 @@ class ChangePanel extends React.Component { } const times = this.calculateTimes(change) const header = ( - <div className='panel panel-default zuul-change'> - <div className='panel-heading zuul-patchset-header' + <div className={`panel panel-default ${this.props.preferences.darkMode ? 'zuul-change-dark' : 'zuul-change'}`}> + <div className={`panel-heading ${this.props.preferences.darkMode ? 'zuul-patchset-header-dark' : 'zuul-patchset-header'}`} onClick={this.onClick}> <div className='row'> <div className='col-xs-8'> @@ -422,4 +423,7 @@ class ChangePanel extends React.Component { } } -export default connect(state => ({tenant: state.tenant}))(ChangePanel) +export default connect(state => ({ + tenant: state.tenant, + preferences: state.preferences, +}))(ChangePanel) |