Merge pull request #4 from rtyler/pipeline-status-improvements
Easier to understand pipeline status icons, indicate under construction
This commit is contained in:
commit
fa3615457d
|
@ -1,12 +1,38 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { SvgStatus } from '@jenkins-cd/design-language';
|
import { SvgStatus } from '@jenkins-cd/design-language';
|
||||||
|
import { getAdjunctURL } from '@jenkins-cd/js-modules';
|
||||||
|
|
||||||
|
const width = 40, height = 40;
|
||||||
|
const successImage = getAdjunctURL() + '/org/jenkins/ui/jsmodules/retrocean-plugin/mchammer.gif';
|
||||||
|
const failureImage = getAdjunctURL() + '/org/jenkins/ui/jsmodules/retrocean-plugin/flames.gif';
|
||||||
|
|
||||||
|
const success = () => (
|
||||||
|
<foreignObject x={-width/2} y={-height/2} width={width} height={height}>
|
||||||
|
<img src={successImage} style={{width, height}}/>
|
||||||
|
</foreignObject>
|
||||||
|
);
|
||||||
|
|
||||||
|
const xPos = () => -15 - Math.floor(Math.random()*20);
|
||||||
|
|
||||||
|
const failure = () => (
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="-18" y="-16">
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip-image">
|
||||||
|
<rect x="0" y="0" width="40" height="40" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<image xLinkHref={successImage} href={failureImage} x={xPos()} y="-10" height="50px" clipPath="url(#clip-image)" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
const _render = SvgStatus.prototype.render;
|
const _render = SvgStatus.prototype.render;
|
||||||
SvgStatus.prototype.render = () => {
|
SvgStatus.prototype.render = function() {
|
||||||
console.log('render!!');
|
console.log('svg status: ', this.props);
|
||||||
//return _render.apply(this);
|
if (false) {
|
||||||
return <div className="mc-hammer"/>;
|
return _render.apply(this);
|
||||||
|
}
|
||||||
|
return this.props.result === 'success' ? success() : failure();
|
||||||
}
|
}
|
||||||
|
|
||||||
export default () => <div style={{height:0, width:0, padding:0, fontSize:0, display: 'inline-block'}}> </div>;
|
export default () => <div style={{display: 'none'}}> </div>;
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.6 KiB |
|
@ -94,12 +94,6 @@ body, * {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pipeline-node-hittarget {
|
|
||||||
fill-opacity: 1;
|
|
||||||
fill: #0ee;
|
|
||||||
r: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blockscreen.connection-lost .toast {
|
.blockscreen.connection-lost .toast {
|
||||||
border-left-color: #f00;
|
border-left-color: #f00;
|
||||||
}
|
}
|
||||||
|
@ -108,8 +102,7 @@ body, * {
|
||||||
}
|
}
|
||||||
|
|
||||||
.development-footer {
|
.development-footer {
|
||||||
background-image: url(mchammer.gif);
|
background: center center url(Dungeon8807construction.gif) no-repeat;
|
||||||
background-repeat: repeat-x;
|
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,3 +113,9 @@ body, * {
|
||||||
.JTable-cell-contents > div {
|
.JTable-cell-contents > div {
|
||||||
width: 45px;
|
width: 45px;
|
||||||
}
|
}
|
||||||
|
.JTable-cell-contents {
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue