Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
influxdb/ui/assets/images/drag-drop-icon.svg

56 lines
3.4 KiB
XML
Raw Normal View History

Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<?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>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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)">
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<stop offset="0.2122" style="stop-color:#326BBA"/>
<stop offset="1" style="stop-color:#20186B"/>
</linearGradient>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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)">
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<stop offset="0" style="stop-color:#BEF0FF"/>
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
<stop offset="1" style="stop-color:#9394FF"/>
</linearGradient>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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)">
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<stop offset="0" style="stop-color:#BEF0FF"/>
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
<stop offset="1" style="stop-color:#9394FF"/>
</linearGradient>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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"/>
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<g>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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)">
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<stop offset="0.2122" style="stop-color:#326BBA"/>
<stop offset="1" style="stop-color:#20186B"/>
</linearGradient>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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)">
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
<stop offset="0" style="stop-color:#BEF0FF"/>
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
<stop offset="1" style="stop-color:#9394FF"/>
</linearGradient>
Use a new interaction pattern and new styles for file upload - Largely mimicking the pattern featured in Dropzone.js (I feel this is a great pattern for file drag & drop) - Got rid of the button for uploading, change copy to read “Drop a file here or click to upload” - Made entire file upload div clickable - After a file has been uploaded: - Submit button has been moved inside the div - Added a “Cancel” button and method to reset the state of the modal - Hover state of clickable area matches drag-over state
2017-08-18 00:00:18 +00:00
<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"/>
Rework styles to prevent some UI clash
2017-08-16 19:37:36 +00:00
</g>
</svg>