Merge pull request #1897 from influxdata/file-drag-polish
Write Data Drag & Drop Polishpull/1921/merge
Alex Paxton
GitHub
commit
9b4f1ee6a0
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{fill:url(#SVGID_3_);}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6466" y1="84.3557" x2="67.7716" y2="14.3557" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#7CE490"/>
|
||||
<stop offset="1" style="stop-color:#4ED8A0"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M75,20.9c0-0.1,0-0.2-0.1-0.3v-0.1c0-0.1-0.1-0.2-0.2-0.3l-20-20c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
|
||||
c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0H20c-2.8,0-5,2.2-5,5v68c0,2.8,2.2,5,5,5h50c2.8,0,5-2.2,5-5V20.9C75,21,75,21,75,20.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="62.5496" y1="79.5308" x2="52.5496" y2="69.2808" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#F2FFF4"/>
|
||||
<stop offset="1" style="stop-color:#A5F3B4"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M71.6,20H58c-1.7,0-3-1.4-3-3V3.4L71.6,20z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="64.9631" y1="11.4346" x2="19.3381" y2="74.4346">
|
||||
<stop offset="0" style="stop-color:#F2FFF4"/>
|
||||
<stop offset="1" style="stop-color:#A5F3B4"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M58,22c-2.8,0-5-2.3-5-5V2H20c-1.7,0-3,1.3-3,3v68c0,1.7,1.3,3,3,3h50c1.7,0,3-1.3,3-3V22H58z M60,40.7
|
||||
L43.6,57.1c-1.8,1.8-4.8,1.8-6.6,0L30,50.2c-0.8-0.8-0.8-2.1,0-2.9l2.7-2.7c0.8-0.8,2.1-0.8,2.9,0l3.1,3.1c0.8,0.8,2.1,0.8,2.9,0
|
||||
l12.6-12.6c0.8-0.8,2.1-0.8,2.9,0l2.7,2.7C60.8,38.6,60.8,39.9,60,40.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,55 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#383846;}
|
||||
.st1{fill:url(#SVGID_1_);}
|
||||
.st2{fill:url(#SVGID_2_);}
|
||||
.st3{fill:url(#SVGID_3_);}
|
||||
.st4{fill:url(#SVGID_4_);}
|
||||
.st5{fill:url(#SVGID_5_);}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M58,86c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V18c0-2.2,1.8-4,4-4h50c2.2,0,4,1.8,4,4V86z"/>
|
||||
</g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6466" y1="84.3557" x2="67.7716" y2="14.3557" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#326BBA"/>
|
||||
<stop offset="1" style="stop-color:#20186B"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M75,20.9c0-0.1,0-0.2-0.1-0.3v-0.1c0-0.1-0.1-0.2-0.2-0.3l-20-20c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
|
||||
c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0H20c-2.8,0-5,2.2-5,5v68c0,2.8,2.2,5,5,5h50c2.8,0,5-2.2,5-5V20.9C75,21,75,21,75,20.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="62.5496" y1="79.5308" x2="52.5496" y2="69.2808" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M71.6,20H58c-1.7,0-3-1.4-3-3V3.4L71.6,20z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="15.8813" y1="19.0114" x2="88.3813" y2="103.6364" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M58,22c-2.8,0-5-2.3-5-5V2H20c-1.7,0-3,1.3-3,3v68c0,1.7,1.3,3,3,3h50c1.7,0,3-1.3,3-3V22H58z M65,43.8H25
|
||||
c-1.1,0-2-0.9-2-2s0.9-2,2-2h40c1.1,0,2,0.9,2,2C67,42.8,66.1,43.8,65,43.8z M65,37.8H25c-1.1,0-2-0.9-2-2s0.9-2,2-2h40
|
||||
c1.1,0,2,0.9,2,2C67,36.8,66.1,37.8,65,37.8z M65,31.8H25c-1.1,0-2-0.9-2-2s0.9-2,2-2h40c1.1,0,2,0.9,2,2C67,30.8,66.1,31.8,65,31.8
|
||||
z"/>
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="68.0513" y1="34.2628" x2="77.9263" y2="10.5128" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#326BBA"/>
|
||||
<stop offset="1" style="stop-color:#20186B"/>
|
||||
</linearGradient>
|
||||
<path class="st4" d="M64,46c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8v33.8c0,0.7,0.3,1.4,0.8,1.9s1.1,0.7,1.7,0.7
|
||||
c0.7,0,1.3-0.3,1.8-0.8l4.8-5l3.4,8.1c0.8,2,2.7,3.2,4.8,3.2c0.7,0,1.4-0.1,2-0.4c1.3-0.6,2.3-1.6,2.8-2.9s0.5-2.7,0-4l-3.4-8.1
|
||||
h6.8c1,0,2-0.6,2.3-1.6c0.4-1,0.2-2.1-0.6-2.8L65.4,46.6C65,46.2,64.5,46,64,46L64,46z"/>
|
||||
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="65.4447" y1="39.476" x2="81.9447" y2="1.476" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st5" d="M82.2,83.5L78,73.3c-0.2-0.4,0.1-0.8,0.5-0.8h9c0.5,0,0.7-0.6,0.4-0.9L64,48v33.8c0,0.5,0.6,0.7,0.9,0.4
|
||||
l6.3-6.6c0.3-0.3,0.8-0.2,0.9,0.2L76.3,86c0.7,1.6,2.5,2.4,4.2,1.7l0,0C82.1,87,82.8,85.1,82.2,83.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -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"
|
||||
/>
|
||||
: <div className="write-data-form--file">
|
||||
: <div
|
||||
className={
|
||||
uploadContent
|
||||
? 'write-data-form--file'
|
||||
: 'write-data-form--file write-data-form--file_active'
|
||||
}
|
||||
onClick={handleFileOpen}
|
||||
>
|
||||
{uploadContent
|
||||
? <h3 className="write-data-form--filepath_selected">
|
||||
{fileName}
|
||||
</h3>
|
||||
: <h3 className="write-data-form--filepath_empty">
|
||||
Drop a file here or click to upload
|
||||
</h3>}
|
||||
<div
|
||||
className={
|
||||
uploadContent
|
||||
? 'write-data-form--graphic write-data-form--graphic_success'
|
||||
: 'write-data-form--graphic'
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleFile(false)}
|
||||
|
|
@ -34,30 +56,27 @@ const WriteDataBody = ({
|
|||
ref={fileInput}
|
||||
accept="text/*, application/gzip"
|
||||
/>
|
||||
<button
|
||||
className="write-data-form--upload-button btn btn-md btn-primary"
|
||||
onClick={handleFileOpen}
|
||||
>
|
||||
{uploadContent
|
||||
? 'Choose Another File to Upload'
|
||||
: 'Choose a File to Upload'}
|
||||
</button>
|
||||
{uploadContent
|
||||
? <span className="write-data-form--filepath_selected">
|
||||
<span className="icon checkmark" />
|
||||
{fileName}
|
||||
</span>
|
||||
: <span className="write-data-form--filepath_empty">
|
||||
No file selected
|
||||
</span>}
|
||||
{uploadContent &&
|
||||
<span className="write-data-form--file-submit">
|
||||
<button className="btn btn-md btn-success" onClick={handleSubmit}>
|
||||
Write this File
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-md btn-default"
|
||||
onClick={handleCancelFile}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</span>}
|
||||
</div>}
|
||||
<WriteDataFooter
|
||||
isUploading={isUploading}
|
||||
isManual={isManual}
|
||||
inputContent={inputContent}
|
||||
handleSubmit={handleSubmit}
|
||||
uploadContent={uploadContent}
|
||||
/>
|
||||
{isManual &&
|
||||
<WriteDataFooter
|
||||
isUploading={isUploading}
|
||||
isManual={isManual}
|
||||
inputContent={inputContent}
|
||||
handleSubmit={handleSubmit}
|
||||
uploadContent={uploadContent}
|
||||
/>}
|
||||
</div>
|
||||
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</div>
|
||||
<div className="write-data-form--drag-here">
|
||||
Drag & Drop a File to Upload
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue