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

Rework styles to prevent some UI clash

pull/1897/head
Alex P 2017-08-16 12:37:36 -07:00
parent e2e684b5e2
commit 5b460d5268
4 changed files with 97 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ui/assets/images/drag-drop-icon.svg Normal file
View File

@ -0,0 +1,54 @@
<?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="11.6298" y1="7.6571" x2="64.7548" y2="77.6571">
<stop offset="0.2122" style="stop-color:#326BBA"/>
<stop offset="1" style="stop-color:#20186B"/>
</linearGradient>
<path class="st1" d="M72,20.9c0-0.1,0-0.2-0.1-0.3c0,0,0-0.1,0-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.2
c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0H17c-2.8,0-5,2.2-5,5v68c0,2.8,2.2,5,5,5h50c2.8,0,5-2.2,5-5L72,20.9
C72,21,72,21,72,20.9z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="59.5495" y1="12.4691" x2="49.5495" y2="22.7191">
<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="M68.6,20H55c-1.7,0-3-1.4-3-3V3.4L68.6,20z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="12.8814" y1="72.9887" x2="85.3814" y2="-11.6363">
<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="M55,22c-2.8,0-5-2.3-5-5V2H17c-1.7,0-3,1.3-3,3v68c0,1.7,1.3,3,3,3h50c1.7,0,3-1.3,3-3V22H55z M62,43.8H22
c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h40c1.1,0,2,0.9,2,2C64,42.8,63.1,43.8,62,43.8z M62,37.8H22c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h40
c1.1,0,2,0.9,2,2C64,36.8,63.1,37.8,62,37.8z M62,31.8H22c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2h40c1.1,0,2,0.9,2,2
C64,30.8,63.1,31.8,62,31.8z"/>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="68.0395" y1="57.7421" x2="77.9145" y2="81.4921">
<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.2C62.5,46.5,62,47.2,62,48l0,33.8c0,0.7,0.3,1.4,0.8,1.9c0.5,0.5,1.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.9c0.5-1.3,0.5-2.7,0-4
l-3.4-8.1l6.8,0c1,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.4241" y1="52.533" x2="81.9241" y2="90.533">
<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.5l-4.2-10.2c-0.2-0.4,0.1-0.8,0.5-0.8l9,0c0.5,0,0.7-0.6,0.4-0.9L64,48l0,33.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.7h0C82.1,87,82.8,85.1,82.2,83.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

8
ui/src/data_explorer/components/WriteDataBody.js
View File

@ -27,6 +27,9 @@ const WriteDataBody = ({
data-test="manual-entry-field"
/>
: <div className="write-data-form--file">
<h3>Drag & drop File here</h3>
<div className="write-data-form--drag-graphic" />
<p>OR</p>
<input
type="file"
onChange={e => handleFile(e, false)}
@ -34,10 +37,7 @@ const WriteDataBody = ({
ref={fileInput}
accept="text/*, application/gzip"
/>
<button
className="write-data-form--upload-button btn btn-md btn-primary"
onClick={handleFileOpen}
>
<button className="btn btn-md btn-primary" onClick={handleFileOpen}>
{uploadContent
? 'Choose Another File to Upload'
: 'Choose a File to Upload'}

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

@ -170,8 +170,10 @@ class WriteDataForm extends Component {
handleFileOpen={this.handleFileOpen}
/>
</div>
<div className="write-data-form--drag-here">
Drag & Drop a File to Upload
<div className="write-data-form--drag-container">
<div className="write-data-form--drag-here">
Drag file here to Upload
</div>
</div>
</div>
)

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

@ -72,13 +72,22 @@ textarea.form-control.write-data-form--input {
background-color: $g2-kevlar;
border: 2px solid $g4-onyx;
border-radius: 3px;
> h3, > p {
color: $g12-forge;
@include no-user-select();
}
> h3 {
margin: 0 0 20px 0;
}
> p {
font-weight: 600;
margin: 20px 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();
@ -96,9 +105,21 @@ button.write-data-form--upload-button {
}
/* Drag File to Upload Styles */
.write-data-form--drag-container,
.write-data-form--drag-here {
position: absolute;
top: 35%;
}
.write-data-form--drag-container {
transition-property: all;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.write-data-form--drag-here {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: $write-data--transition;
@ -109,11 +130,19 @@ button.write-data-form--upload-button {
line-height: 240px;
font-size: 30px;
font-weight: 400;
opacity: 0.5;
opacity: 0;
color: $g20-white;
border: 2px dashed fade-out($g20-white, 0.5);
}
.drag-over {
.overlay-technology.drag-over {
.write-data-form {opacity: 0;}
.write-data-form--drag-container {visibility: visible;}
.write-data-form--drag-here {opacity: 1;}
}
.write-data-form--drag-graphic {
background-image: url(assets/images/drag-drop-icon.svg);
background-size: 100% 100%;
background-position: center center;
width: 90px;
height: 90px;
}