Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Polish dash cell dragging interaction

pull/1124/head
Alex P 2017-03-31 15:59:10 -07:00
parent 29d681e851
commit beddd2f82d
3 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/shared/components/LayoutRenderer.js
View File

@ -187,7 +187,7 @@ export const LayoutRenderer = React.createClass({
useCSSTransforms={false} useCSSTransforms={false}
onResize={this.triggerWindowResize} onResize={this.triggerWindowResize}
onLayoutChange={this.handleLayoutChange} onLayoutChange={this.handleLayoutChange}
draggableHandle={'.dash-graph--heading'} draggableHandle={'.dash-graph--drag-handle'}
isDraggable={isDashboard} isDraggable={isDashboard}
isResizable={isDashboard} isResizable={isDashboard}
> >

1
ui/src/shared/components/NameableGraph.js
View File

@ -100,6 +100,7 @@ const NameableGraph = React.createClass({
<div className="dash-graph"> <div className="dash-graph">
<div className="dash-graph--heading"> <div className="dash-graph--heading">
<div onClick={onClickHandler(x, y, isEditing)}>{nameOrField}</div> <div onClick={onClickHandler(x, y, isEditing)}>{nameOrField}</div>
{shouldNotBeEditable ? null : <div className="dash-graph--drag-handle"></div>}
{ {
shouldNotBeEditable ? shouldNotBeEditable ?
null : null :

45
ui/src/style/pages/dashboards.scss
View File

@ -120,6 +120,29 @@ $dash-graph-heading: 30px;
cursor: $cc-default; cursor: $cc-default;
} }
} }
.dash-graph--drag-handle {
height: $dash-graph-heading;
width: 100%;
&:before {
content: '';
position: absolute;
width: 100%;
left: 0;
height: $dash-graph-heading;
background-color: $g5-pepper;
border-radius: 3px;
z-index: -1;
opacity: 0;
transition: opacity 0.25s ease;
}
&:hover {
cursor: $cc-move;
}
&:hover:before {
opacity: 1;
}
}
.dash-graph--name-edit, .dash-graph--name-edit,
.dash-graph--name { .dash-graph--name {
display: inline-block; display: inline-block;
@ -140,7 +163,7 @@ $dash-graph-heading: 30px;
color 0.25s ease, color 0.25s ease,
background-color 0.25s ease, background-color 0.25s ease,
border-color 0.25s ease; border-color 0.25s ease;
border: 2px solid $g3-castle; border: 2px solid transparent;
top: 2px; top: 2px;
&.editable { &.editable {
@ -297,15 +320,6 @@ $dash-graph-options-arrow: 8px;
Dashboard Edit Mode Dashboard Edit Mode
------------------------------------------------------ ------------------------------------------------------
*/ */
// .dash-graph--heading:hover {
// background-color: $g4-onyx;
// color: $g18-cloud;
// cursor: $cc-move;
// .dash-graph--name {
// border-color: $g4-onyx;
// }
// }
.react-grid-placeholder { .react-grid-placeholder {
@include gradient-diag-down($c-pool,$c-comet); @include gradient-diag-down($c-pool,$c-comet);
border: 0 !important; border: 0 !important;
@ -343,12 +357,11 @@ $dash-graph-options-arrow: 8px;
cursor: $cc-move; cursor: $cc-move;
} }
// & > .dash-graph--heading, .dash-graph--drag-handle:before,
// & > .dash-graph--heading:hover { .dash-graph--drag-handle:hover:before {
// background-color: $g4-onyx; opacity: 1 !important;
// color: $g18-cloud; cursor: $cc-move;
// cursor: $cc-move; }
// }
} }
& > .react-resizable-handle { & > .react-resizable-handle {
background-image: none; background-image: none;