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

Redesign drag-over state for write data form

pull/1897/head
Alex P 2017-08-17 13:34:53 -07:00
parent aa26fe18e8
commit 80c9d758f3
2 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/data_explorer/components/WriteDataForm.js
View File

@ -172,7 +172,7 @@ class WriteDataForm extends Component {
</div> </div>
<div className="write-data-form--drag-container"> <div className="write-data-form--drag-container">
<div className="write-data-form--drag-here"> <div className="write-data-form--drag-here">
Drag file here to Upload <h3>Drag your file here to Upload</h3>
</div> </div>
</div> </div>
</div> </div>

56
ui/src/style/components/write-data-form.scss
View File

@ -13,7 +13,6 @@ $write-data--transition: opacity 0.4s ease;
.write-data-form { .write-data-form {
max-width: $write-data--max-width; max-width: $write-data--max-width;
margin: 0 auto; margin: 0 auto;
transition: $write-data--transition;
} }
.write-data-form--header { .write-data-form--header {
height: $chronograf-page-header-height; height: $chronograf-page-header-height;
@ -112,32 +111,53 @@ input[type="file"].write-data-form--upload {
.write-data-form--drag-container { .write-data-form--drag-container {
transition-property: all; transition-property: all;
visibility: hidden; visibility: hidden;
width: 100%; width: calc(100% - 60px);
height: 100%; max-width: $write-data--max-width;
height: 90vh;
top: 0; top: 0;
left: 0; left: 50%;
transform: translateX(-50%);
position: absolute;
z-index: 3;
} }
.write-data-form--drag-here { .write-data-form--drag-here {
position: absolute; position: absolute;
top: 50%; top: 60px;
left: 50%; width: 100%;
transform: translate(-50%,-50%); height: calc(100% - 60px);
@include gradient-v($g2-kevlar,$g0-obsidian);
transition: $write-data--transition; transition: $write-data--transition;
width: 520px; border-radius: 0 0 4px 4px;
height: 240px;
border-radius: 5px;
text-align: center;
line-height: 240px;
font-size: 30px;
font-weight: 400;
opacity: 0; opacity: 0;
color: $g20-white; display: flex;
border: 2px dashed fade-out($g20-white, 0.5); align-items: center;
justify-content: center;
align-content: center;
// Dashed box
&:after {
content: '';
position: absolute;
top: 18px;
left: 30px;
right: 30px;
bottom: 66px;
border: 2px dashed $g5-pepper;
border-radius: 4px;
}
}
.write-data-form--drag-here h3 {
text-align: center;
color: $g12-forge;
margin: 0;
@include no-user-select();
} }
.overlay-technology.drag-over { .overlay-technology.drag-over {
.write-data-form {opacity: 0;}
.write-data-form--drag-container {visibility: visible;} .write-data-form--drag-container {visibility: visible;}
.write-data-form--drag-here {opacity: 1;} .write-data-form--drag-here {
opacity: 1;
transition: $write-data--transition;
}
} }
.write-data-form--drag-graphic { .write-data-form--drag-graphic {
background-image: url(assets/images/drag-drop-icon.svg); background-image: url(assets/images/drag-drop-icon.svg);