Icon change to avoid confusion.
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 1023 B |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 844 B |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 953 B After Width: | Height: | Size: 966 B |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 749 B |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
@ -113,12 +113,12 @@ var ContainerDetailsSubheader = React.createClass({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleItemMouseEnterRun: function () {
|
handleItemMouseEnterView: function () {
|
||||||
var $action = $(this.getDOMNode()).find('.action .run');
|
var $action = $(this.getDOMNode()).find('.action .view');
|
||||||
$action.css("visibility", "visible");
|
$action.css("visibility", "visible");
|
||||||
},
|
},
|
||||||
handleItemMouseLeaveRun: function () {
|
handleItemMouseLeaveView: function () {
|
||||||
var $action = $(this.getDOMNode()).find('.action .run');
|
var $action = $(this.getDOMNode()).find('.action .view');
|
||||||
$action.css("visibility", "hidden");
|
$action.css("visibility", "hidden");
|
||||||
},
|
},
|
||||||
handleItemMouseEnterRestart: function () {
|
handleItemMouseEnterRestart: function () {
|
||||||
|
@ -168,9 +168,9 @@ var ContainerDetailsSubheader = React.createClass({
|
||||||
return (
|
return (
|
||||||
<div className="details-subheader">
|
<div className="details-subheader">
|
||||||
<div className="details-header-actions">
|
<div className="details-header-actions">
|
||||||
<div className={runActionClass} onMouseEnter={this.handleItemMouseEnterRun} onMouseLeave={this.handleItemMouseLeaveRun}>
|
<div className={runActionClass} onMouseEnter={this.handleItemMouseEnterView} onMouseLeave={this.handleItemMouseLeaveView}>
|
||||||
<span className="action-icon" onClick={this.handleRun}><RetinaImage src="button-run.png"/></span>
|
<span className="action-icon" onClick={this.handleRun}><RetinaImage src="button-view.png"/></span>
|
||||||
<span className="btn-label run">Run</span>
|
<span className="btn-label view">View</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={restartActionClass} onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
|
<div className={restartActionClass} onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
|
||||||
<span className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></span>
|
<span className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></span>
|
||||||
|
|
|
@ -24,28 +24,32 @@
|
||||||
margin-top: -12px;
|
margin-top: -12px;
|
||||||
.action {
|
.action {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
&.disabled {
|
&.disabled {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
.action-icon {
|
.action-icon {
|
||||||
color: @gray-normal;
|
color: @gray-normal;
|
||||||
font-size: 30px;
|
margin-right: 15px;
|
||||||
margin-right: 20px;
|
|
||||||
}
|
}
|
||||||
.btn-label {
|
.btn-label {
|
||||||
position: relative;
|
position: absolute;
|
||||||
top: 0px;
|
|
||||||
display: block;
|
|
||||||
color: @brand-action;
|
color: @brand-action;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
&.run {
|
width: 200px;
|
||||||
left: 8px;
|
top: 30px;
|
||||||
|
&.view {
|
||||||
|
left: 6px;
|
||||||
|
//left: 0px;
|
||||||
}
|
}
|
||||||
&.restart {
|
&.restart {
|
||||||
left: 1px;
|
left: 2px;
|
||||||
|
//left: -18px;
|
||||||
}
|
}
|
||||||
&.terminal {
|
&.terminal {
|
||||||
left: -2px;
|
left: -1px;
|
||||||
|
//left: -30px;
|
||||||
}
|
}
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|