diff --git a/CHANGELOG.md b/CHANGELOG.md index 16accb2df..d6d2091fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ 1. [#1870](https://github.com/influxdata/chronograf/pull/1870): Fix console error for placing prop on div 1. [#1864](https://github.com/influxdata/chronograf/pull/1864): Fix Write Data form upload button and add `onDragExit` handler 1. [#1891](https://github.com/influxdata/chronograf/pull/1891): Fix Kapacitor config for PagerDuty via the UI +1. [#1897](https://github.com/influxdata/chronograf/pull/1897): Fix regression from [#1864](https://github.com/influxdata/chronograf/pull/1864) and redesign drag & drop interaction 1. [#1872](https://github.com/influxdata/chronograf/pull/1872): Prevent stats in the legend from wrapping line 1. [#1899](https://github.com/influxdata/chronograf/pull/1899): Fix raw query editor in Data Explorer not using selected time diff --git a/ui/assets/images/drag-drop-icon--success.svg b/ui/assets/images/drag-drop-icon--success.svg new file mode 100644 index 000000000..98ee1d762 --- /dev/null +++ b/ui/assets/images/drag-drop-icon--success.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ui/assets/images/drag-drop-icon.svg b/ui/assets/images/drag-drop-icon.svg new file mode 100644 index 000000000..7ad4fe868 --- /dev/null +++ b/ui/assets/images/drag-drop-icon.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/data_explorer/components/WriteDataBody.js b/ui/src/data_explorer/components/WriteDataBody.js index 97020291f..272c94195 100644 --- a/ui/src/data_explorer/components/WriteDataBody.js +++ b/ui/src/data_explorer/components/WriteDataBody.js @@ -3,6 +3,7 @@ import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter' const WriteDataBody = ({ handleKeyUp, + handleCancelFile, handleFile, handleEdit, handleSubmit, @@ -26,7 +27,28 @@ const WriteDataBody = ({ autoFocus={true} data-test="manual-entry-field" /> - :
+ :
+ {uploadContent + ?

+ {fileName} +

+ :

+ Drop a file here or click to upload +

} +
- - {uploadContent - ? - - {fileName} - - : - No file selected - } + {uploadContent && + + + + }
} - + {isManual && + }
const {func, string, bool} = PropTypes @@ -65,6 +84,7 @@ const {func, string, bool} = PropTypes WriteDataBody.propTypes = { handleKeyUp: func.isRequired, handleEdit: func.isRequired, + handleCancelFile: func.isRequired, handleFile: func.isRequired, handleSubmit: func.isRequired, inputContent: string, diff --git a/ui/src/data_explorer/components/WriteDataForm.js b/ui/src/data_explorer/components/WriteDataForm.js index 3d16559dc..2ae70db83 100644 --- a/ui/src/data_explorer/components/WriteDataForm.js +++ b/ui/src/data_explorer/components/WriteDataForm.js @@ -92,6 +92,10 @@ class WriteDataForm extends Component { } } + handleCancelFile = () => { + this.setState({uploadContent: ''}) + } + handleDragOver = e => { e.preventDefault() e.stopPropagation() @@ -112,7 +116,10 @@ class WriteDataForm extends Component { } handleFileOpen = () => { - this.fileInput.click() + const {uploadContent} = this.state + if (uploadContent === '') { + this.fileInput.click() + } } handleFileInputRef = el => (this.fileInput = el) @@ -146,11 +153,9 @@ class WriteDataForm extends Component { handleKeyUp={this.handleKeyUp} handleSubmit={this.handleSubmit} handleFileOpen={this.handleFileOpen} + handleCancelFile={this.handleCancelFile} />
-
- Drag & Drop a File to Upload -
) } diff --git a/ui/src/style/components/write-data-form.scss b/ui/src/style/components/write-data-form.scss index 2ee00a119..6f9582567 100644 --- a/ui/src/style/components/write-data-form.scss +++ b/ui/src/style/components/write-data-form.scss @@ -4,6 +4,8 @@ Accessed via Data Explorer */ +$write-data--form-z: 2; +$write-data--drag-overlay-z: 1; $write-data--max-width: 960px; $write-data--gutter: 30px; $write-data--margin: 18px; @@ -13,7 +15,8 @@ $write-data--transition: opacity 0.4s ease; .write-data-form { max-width: $write-data--max-width; margin: 0 auto; - transition: $write-data--transition; + position: relative; + z-index: $write-data--form-z; } .write-data-form--header { height: $chronograf-page-header-height; @@ -71,49 +74,63 @@ textarea.form-control.write-data-form--input { justify-content: center; background-color: $g2-kevlar; border: 2px solid $g4-onyx; + margin-bottom: 48px; border-radius: 3px; + transition: + background-color 0.25s ease, + border-color 0.25s ease; + + > p { + color: $g12-forge; + font-weight: 600; + margin: 20px 0; + } } +.write-data-form--graphic { + background-image: url(assets/images/drag-drop-icon.svg); + background-size: 100% 100%; + background-position: center center; + width: 90px; + height: 90px; + margin-bottom: 68px; + + &.write-data-form--graphic_success { + background-image: url(assets/images/drag-drop-icon--success.svg); + margin-bottom: 0; + } +} + input[type="file"].write-data-form--upload { display: none; } -button.write-data-form--upload-button { - margin-top: 312px; -} .write-data-form--filepath_selected, .write-data-form--filepath_empty { @include no-user-select(); - font-size: 13px; - font-weight: 600; - margin-top: 15px; + width: 100%; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0 0 30px 0; } -.write-data-form--filepath_empty { - color: $g13-mist; - font-style: italic; -} -.write-data-form--filepath_selected { - color: $c-rainforest; - .icon {margin-right: 4px;} +.write-data-form--filepath_empty {color: $g12-forge;} +.write-data-form--filepath_selected {color: $c-rainforest;} + +.write-data-form--file-submit { + margin-top: 30px; + & .btn { + width: 124px; + margin: 0 8px; + } } -/* Drag File to Upload Styles */ -.write-data-form--drag-here { - position: absolute; - top: 35%; - left: 50%; - transform: translate(-50%,-50%); - transition: $write-data--transition; - width: 520px; - height: 240px; - border-radius: 5px; - text-align: center; - line-height: 240px; - font-size: 30px; - font-weight: 400; - opacity: 0.5; - color: $g20-white; - border: 2px dashed fade-out($g20-white, 0.5); -} -.drag-over { - .write-data-form {opacity: 0;} - .write-data-form--drag-here {opacity: 1;} +/* + Styles for hover state and drag-over state look the same + ------------------------------------------------------------------------------ +*/ +.write-data-form--file.write-data-form--file_active:hover, +.overlay-technology.drag-over .write-data-form--file { + cursor: pointer; + background-color: $g4-onyx; + border-color: $g6-smoke; }