Update download dialog (#589)

This commit is contained in:
Sam El-Husseini 2018-05-07 14:59:29 -07:00 committed by GitHub
parent de61919fc1
commit df6249931d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 329 additions and 285 deletions

BIN
docs/static/download/firmware.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@ -1,252 +1,279 @@
<svg xmlns="http://www.w3.org/2000/svg" width="261.3" height="109.3" viewBox="0 0 69.1 28.9" id="svg9461">
<defs id="defs9455">
<clipPath id="clipPath8689">
<path d="M0 1145.9h1366V0H0z" id="path8687"/>
</clipPath>
<clipPath id="clipPath8663">
<path d="M309.8 89.4h3.7v3.7h-3.7z" id="path8661"/>
</clipPath>
<clipPath id="clipPath8647">
<path d="M0 1145.9h1366V0H0z" id="path8645"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .6661 -.32488 0 300.7 115)" id="linearGradient8637">
<stop offset="0" id="stop8633" stop-color="#757575"/>
<stop offset="1" id="stop8635" stop-color="#393939"/>
</linearGradient>
<clipPath id="clipPath8595">
<path d="M0 1145.9h1366V0H0z" id="path8593"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.8096 -17.18704 0 300.7 98.4)" id="linearGradient8585">
<stop offset="0" id="stop8579" stop-color="#6a6a6a"/>
<stop offset=".5" id="stop8581" stop-color="#48e400"/>
<stop offset="1" id="stop8583" stop-color="#6a6a6a"/>
</linearGradient>
<clipPath id="clipPath8561">
<path d="M0 1145.9h1366V0H0z" id="path8559"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33016 5.597 0 300.7 88.4)" id="linearGradient8551">
<stop offset="0" id="stop8547" stop-color="#a9aba9"/>
<stop offset="1" id="stop8549" stop-color="#535453"/>
</linearGradient>
<clipPath id="clipPath8525">
<path d="M0 1145.9h1366V0H0z" id="path8523"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56074 .70884 0 300.7 115.6)" id="linearGradient8515">
<stop offset="0" id="stop8511" stop-color="#a9aba9"/>
<stop offset="1" id="stop8513" stop-color="#818181"/>
</linearGradient>
<clipPath id="clipPath8493">
<path d="M0 1145.9h1366V0H0z" id="path8491"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.39765 2.48247 0 300.7 98.1)" id="linearGradient8483">
<stop offset="0" id="stop8479" stop-color="#f2f2f2"/>
<stop offset="1" id="stop8481" stop-color="#7a7a7a"/>
</linearGradient>
<clipPath id="clipPath8449">
<path d="M0 1145.9h1366V0H0z" id="path8447"/>
</clipPath>
<clipPath id="clipPath8977">
<path d="M0 1145.9h1366V0H0z" id="path8975"/>
</clipPath>
<clipPath id="clipPath8951">
<path d="M593 101h3.6v3.7H593z" id="path8949"/>
</clipPath>
<clipPath id="clipPath8935">
<path d="M0 1145.9h1366V0H0z" id="path8933"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 .67046 -.32706 0 583.8 126.8)" id="linearGradient8925">
<stop offset="0" id="stop8921" stop-color="#757575"/>
<stop offset="1" id="stop8923" stop-color="#393939"/>
</linearGradient>
<clipPath id="clipPath8883">
<path d="M0 1145.9h1366V0H0z" id="path8881"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 12.89405 -17.29507 0 583.7 110)" id="linearGradient8873">
<stop offset="0" id="stop8867" stop-color="#6a6a6a"/>
<stop offset=".5" id="stop8869" stop-color="#48e400"/>
<stop offset="1" id="stop8871" stop-color="#6a6a6a"/>
</linearGradient>
<clipPath id="clipPath8849">
<path d="M0 1145.9h1366V0H0z" id="path8847"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.33884 5.6329 0 583.7 100)" id="linearGradient8839">
<stop offset="0" id="stop8835" stop-color="#a9aba9"/>
<stop offset="1" id="stop8837" stop-color="#535453"/>
</linearGradient>
<clipPath id="clipPath8813">
<path d="M0 1145.9h1366V0H0z" id="path8811"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -.56429 .71345 0 583.7 127.4)" id="linearGradient8803">
<stop offset="0" id="stop8799" stop-color="#a9aba9"/>
<stop offset="1" id="stop8801" stop-color="#818181"/>
</linearGradient>
<clipPath id="clipPath8781">
<path d="M0 1145.9h1366V0H0z" id="path8779"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.41323 2.4988 0 583.7 109.8)" id="linearGradient8771">
<stop offset="0" id="stop8767" stop-color="#f2f2f2"/>
<stop offset="1" id="stop8769" stop-color="#7a7a7a"/>
</linearGradient>
<clipPath id="clipPath8737">
<path d="M0 1145.9h1366V0H0z" id="path8735"/>
</clipPath>
</defs>
<g id="layer1" transform="translate(0 -268)">
<g id="g10860" transform="translate(-20.8 -2)">
<g transform="matrix(.35278 0 0 -.35278 62.8 291.4)" id="g8727">
<path id="path8729" d="M0 0h24" fill="none" stroke="#000" stroke-width="2"/>
</g>
<g id="g8731" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8737)" id="g8733">
<g transform="translate(458 159.9)" id="g8739">
<path id="path8741" d="M0 0h83a4 4 0 0 0 4-4v-52.5H-4V-4a4 4 0 0 0 4 4" fill="#e6e6e6"/>
</g>
<g transform="translate(458 158.4)" id="g8743">
<path id="path8745" d="M0 0h83c1.3 0 2.4-1.1 2.4-2.5V-52c0-.9-.6-1.5-1.5-1.5H-1c-.8 0-1.5.6-1.5 1.5v49.5C-2.5-1.1-1.4 0 0 0z" fill="none" stroke="#282828" stroke-width="3"/>
</g>
<g transform="translate(445 102.9)" id="g8747">
<path id="path8749" d="M0 0h108.8v-1.2a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3z" fill="#626262"/>
</g>
<g transform="translate(489.8 102.9)" id="g8751">
<path id="path8753" d="M0 0h19.3c0-.8-.6-1.4-1.4-1.4H1.4C.6-1.4 0-.8 0 0" fill="#818181"/>
</g>
</g>
</g>
<g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8757">
<g id="g8763">
<g id="g8765">
<path id="path8773" d="M567.9 139.7a.6.6 0 0 1-.6-.6v-30.6c0-.3.2-.6.6-.6h31.7c.3 0 .5.3.5.6v30.6c0 .3-.2.6-.5.6z" fill="url(#linearGradient8771)"/>
</g>
</g>
</g>
</g>
<g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8781)" id="g8777">
<g transform="translate(569.7 111.2)" id="g8783">
<path id="path8785" d="M0 0h28c.3 0 .6-.3.6-.6V-12c0-.4-.3-.6-.6-.6H0c-.3 0-.6.2-.6.6V-.6c0 .3.3.6.6.6" fill="#f2f2f2"/>
</g>
</g>
</g>
<g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8789">
<g id="g8795">
<g id="g8797">
<path id="path8805" d="M569.4 149.1a.6.6 0 0 1-.6-.6v-22.3c0-.3.3-.6.6-.6H598c.3 0 .6.3.6.6v22.3c0 .3-.3.6-.6.6z" fill="url(#linearGradient8803)"/>
</g>
</g>
</g>
</g>
<g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8813)" id="g8809">
<g transform="translate(572.7 146)" id="g8815">
<path id="path8817" d="M0 0h22.1c.6 0 1.1-.5 1.1-1.1v-12.5c0-.6-.5-1-1-1H0c-.6 0-1.1.4-1.1 1V-1c0 .5.5 1 1.1 1" fill="#393939"/>
</g>
<g transform="translate(574.4 145.4)" id="g8819">
<path id="path8821" d="M0 0h18.8c.4 0 .8-.4.8-.8v-12c0-.4-.4-.8-.8-.8H0c-.4 0-.8.4-.8.8v12c0 .4.4.8.8.8" fill="#98b6a7"/>
</g>
</g>
</g>
<g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8825">
<g id="g8831">
<g id="g8833">
<path id="path8841" d="M569.1 105.6v-6.4c0-.3.3-.6.6-.6h28c.3 0 .6.3.6.6v6.4z" fill="url(#linearGradient8839)"/>
</g>
</g>
</g>
</g>
<g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8849)" id="g8845">
<g transform="translate(581.7 109.3)" id="g8851">
<path id="path8853" d="M0 0l-4.2 4.2v.6h-1a2.5 2.5 0 0 0 0 4.9h1v.5L0 14.5h4l4.2-4.2v-.6h1a2.5 2.5 0 0 0 0-5h-1v-.5L4.2 0z" fill="#6a6a6a"/>
</g>
</g>
</g>
<g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8857">
<g id="g8863">
<g id="g8865">
<path id="path8875" d="M581.7 123.8l-4.2-4.2v-.6h-1a2.5 2.5 0 1 1 0-5v.1h1v-.5l4.2-4.3h4.2l4.2 4.3v.5h1a2.5 2.5 0 0 1-.1 4.9h-1v.7l-4.1 4.1z" fill="url(#linearGradient8873)"/>
</g>
</g>
</g>
</g>
<g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8883)" id="g8879">
<g transform="translate(576.4 118.4)" id="g8885">
<path id="path8887" d="M0 0h3v-3.6H0A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
</g>
<g transform="translate(591 114.8)" id="g8889">
<path id="path8891" d="M0 0h-3v3.6h3A1.8 1.8 0 1 0 0 0" fill="#a9aba9"/>
</g>
<g transform="translate(582 118.4)" id="g8893">
<path id="path8895" d="M0 0h3.6v-3.6H-.1V0H0" fill="#393939"/>
</g>
<g transform="translate(581.9 123.2)" id="g8897">
<path id="path8899" d="M0 0h3.8l2.8-2.9L5.5-4v-2H4.3v1c0 .5-.4 1-1 1h-3a.7.7 0 0 1-.8-.8v-1.4h-1V-4l-1.2 1.2z" fill="#a9aba9"/>
</g>
<g transform="translate(585.6 110)" id="g8901">
<path id="path8903" d="M0 0h-3.8l-2.8 2.9 1.2 1.2v2h1V5c0-.5.5-1 1-1h3.2c.5 0 .8.4.8.8v1.4h1.1V4l1.2-1.2z" fill="#a9aba9"/>
</g>
<path id="path8905" d="M583.3 131.4h.9v-4.1h-.9z" fill="#393939"/>
<path id="path8907" d="M583.3 127.4h.9v-1.8h-.9z" fill="#9b9b9b"/>
</g>
</g>
<g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8911">
<g id="g8917">
<g id="g8919">
<path id="path8927" d="M583.3 125.6h.9v1.8h-.9z" fill="url(#linearGradient8925)"/>
</g>
</g>
</g>
</g>
<g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8935)" id="g8931">
<path id="path8937" d="M583.3 125.6h.9v-1.8h-.9z" fill="#818181"/>
<g transform="translate(571.2 125.6)" id="g8939">
<path id="path8941" d="M0 0h7v-1.7L5.3-3.5H.6c-.3 0-.6.3-.6.6z" fill="#a9aba9"/>
</g>
<path id="path8943" d="M593 104.7h3.6V101H593z" fill="#fff"/>
</g>
</g>
<g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8951)" id="g8947">
<g transform="translate(596.4 103.2)" id="g8953">
<path id="path8955" d="M0 0v-.3C-.3-.8-.4-1-.8-1l-.3.2a.6.6 0 0 0-.5-.2c-.1 0-.2 0-.3.2C-2-1-2.1-1-2.2-1h-.6a.3.3 0 0 0-.3.2l.3 1h.5l.5.2.2-.1h.4c.1.1.3 0 .4 0V.1l.4.2.3-.1L0 0m-3.4-2.1H.2v3.6h-3.6z" fill="#fe0"/>
</g>
<g transform="translate(596.5 103)" id="g8957">
<path id="path8959" d="M0 0c0-.2 0-.3-.2-.5 0-.2-.3-.4-.6-.4l-.4.1a.7.7 0 0 0-.4-.1H-2a.7.7 0 0 0-.4 0H-3c-.2 0-.3.1-.4.3 0 .4.2.7.4 1 0 .2.2.2.4.2h2.1L0 .5V0m-3.5-2H.1v3.6h-3.6z" fill="#d52715"/>
</g>
<path id="path8961" d="M596.6 101H593v3.6h3.6zm-3.7 0h3.7v3.7H593z" fill="#171714"/>
<g transform="translate(596.5 103.7)" id="g8963">
<path id="path8965" d="M0 0v-.2.2m0 0v-.2.1m0 0zm0 0z" fill="#171714"/>
</g>
<g transform="translate(596 103.2)" id="g8967">
<path id="path8969" d="M0 0a3 3 0 0 0-.2-.6h-.1c0 .2 0 .4.2.6H0m.3-.2L0-.6C0-.8-.2-1-.3-1c-.2 0-.3 0-.3.3l.1.4c.1.3.2.5.5.5s.3-.3.3-.5M-1 .1V0l-.3-.5.1-.1.2.2c0 .2 0 .2.2.2s.2-.1.1-.2c0-.3-.2-.5-.5-.5a.3.3 0 0 0-.3.3l.2.5c0 .2.2.4.5.4.2 0 .3 0 .3-.2 0-.1 0-.2-.2-.2h-.1v.2m-1-.5v-.2h.3c0-.2-.2-.3-.3-.3-.2 0-.3.1-.3.2 0 .3 0 .5.2.7 0 .2.2.3.4.3l.2-.1c0-.2 0-.2-.2-.2h-.1v-.1c.1 0 .2 0 .1-.2l-.3-.1m-.6-.2h.2c0-.2-.1-.3-.3-.3 0 0-.2 0-.2.2l.3.9s.1.1.2 0h.1c0-.3-.2-.5-.3-.8M0 .4C-.2.4-.3.4-.4.2l-.4.2-.4-.1-.3.1c-.2 0-.3 0-.4-.2v.1l-.3.1c-.1 0-.2 0-.3-.2-.1-.3-.3-.6-.3-1 0 0 .1-.2.3-.2l.3.1c.1 0 .2-.1.4 0h.6l.5.1.4-.2c.3 0 .5.3.6.6V0a.4.4 0 0 1-.3.4" fill="#171714"/>
</g>
</g>
</g>
<g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g clip-path="url(#clipPath8977)" id="g8973">
<g transform="translate(578 103)" id="g8979">
<path id="path8981" d="M0 0v-.3h-.6l-.1-.1v-.4H0v-.4h-1l-.2.2h-.3l-.1-.1v-.6H.7V.5h-2.3v-.6h.5V0H0z" fill="#f2f2f2"/>
</g>
<g transform="translate(576 103.6)" id="g8983">
<path id="path8985" d="M0 0h-.5l-.1-.1-.6-1.3L-2-.1V0h-.5s-.1 0 0-.1l.9-2 .2-.1h.5l1 2L0 0" fill="#f2f2f2"/>
</g>
<g transform="translate(573 102.8)" id="g8987">
<path id="path8989" d="M0 0h.1v-.4L0-.5h-1.5v-.3H0L.1-1v-.4h-2.2v2l.1.2H.1V.4h-1.6V0z" fill="#f2f2f2"/>
</g>
<g transform="translate(583.5 136.6)" id="g8991">
<path id="path8993" d="M0 0l-.8 1.3-1.4-2.9 4-1c-.5.5-.5.7-.9 1.3.5.1 1 .4 1.4.7.8.4 1.5 1 2 1.9a4 4 0 0 1-.6 3.6c-.4 0-.8 0-1.3-.2C3.5 3 3.5 1 0 0" fill="#303030"/>
</g>
<g transform="translate(583.1 141.4)" id="g8995">
<path id="path8997" d="M0 0l.8-1.2 1.4 2.8-3.8 1 .7-1.3-1.3-.7a4.5 4.5 0 0 1-2-2c-.4-1-.2-2.4.5-3.4.4 0 .8 0 1.2.2C-3.3-3-3.3-1 0 0" fill="#303030"/>
</g>
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="svg9461" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 85.6 95.6" style="enable-background:new 0 0 85.6 95.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#path8773_1_);}
.st1{clip-path:url(#SVGID_2_);}
.st2{fill:#F2F2F2;}
.st3{fill:url(#path8805_1_);}
.st4{clip-path:url(#SVGID_4_);}
.st5{fill:#393939;}
.st6{fill:#98B6A7;}
.st7{fill:url(#path8841_1_);}
.st8{clip-path:url(#SVGID_6_);}
.st9{fill:#6A6A6A;}
.st10{fill:url(#path8875_1_);}
.st11{clip-path:url(#SVGID_8_);}
.st12{fill:#A9ABA9;}
.st13{fill:#9B9B9B;}
.st14{fill:url(#path8927_1_);}
.st15{clip-path:url(#SVGID_10_);}
.st16{fill:#818181;}
.st17{fill:#FFFFFF;}
.st18{clip-path:url(#SVGID_12_);}
.st19{fill:#FFEE00;}
.st20{fill:#D52715;}
.st21{fill:#171714;}
.st22{clip-path:url(#SVGID_14_);}
.st23{fill:#303030;}
</style>
<g id="layer1" transform="translate(0 -268)">
<g id="g10860" transform="translate(-20.8 -2)">
<g id="g8755" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8757">
<g id="g8763">
<g id="g8765">
<linearGradient id="path8773_1_" gradientUnits="userSpaceOnUse" x1="-839.9431" y1="-715.001" x2="-838.9431" y2="-715.001" gradientTransform="matrix(0 -3.2193 3.3335 0 2933.3757 -2723.9758)">
<stop offset="0" style="stop-color:#F2F2F2"/>
<stop offset="1" style="stop-color:#7A7A7A"/>
</linearGradient>
<path id="path8773" class="st0" d="M490.2,93.1c-1.3,0-2.3-1-2.3-2.3V-24.8c0-1.1,0.8-2.3,2.3-2.3h119.9
c1.1,0,1.9,1.1,1.9,2.3V90.9c0,1.1-0.8,2.3-1.9,2.3H490.2z"/>
</g>
</g>
</g>
</g>
<g id="g8775" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_1_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g id="g8777" class="st1">
<g id="g8783" transform="translate(569.7 111.2)">
<path id="path8785" class="st2" d="M-72.7-125.8H33.2c1.1,0,2.3-1.1,2.3-2.3v-43.1c0-1.5-1.1-2.3-2.3-2.3H-72.7
c-1.1,0-2.3,0.8-2.3,2.3v43.1C-75-127-73.8-125.8-72.7-125.8"/>
</g>
</g>
</g>
</g>
<g id="g8787" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8789">
<g id="g8795">
<g id="g8797">
<linearGradient id="path8805_1_" gradientUnits="userSpaceOnUse" x1="106.3515" y1="93.6155" x2="107.3515" y2="93.6155" gradientTransform="matrix(0 -0.7528 0.9518 0 460.8399 126.682)">
<stop offset="0" style="stop-color:#A9ABA9"/>
<stop offset="1" style="stop-color:#818181"/>
</linearGradient>
<path id="path8805" class="st3" d="M495.9,128.7c-1.3,0-2.3-1-2.3-2.3V42.1c0-1.1,1.1-2.3,2.3-2.3H604c1.1,0,2.3,1.1,2.3,2.3
v84.3c0,1.1-1.1,2.3-2.3,2.3H495.9z"/>
</g>
</g>
</g>
</g>
<g id="g8807" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_3_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<g id="g8809" class="st4">
<g id="g8815" transform="translate(572.7 146)">
<path id="path8817" class="st5" d="M-64.4-29h83.6c2.3,0,4.2-1.9,4.2-4.2v-47.3c0-2.3-1.9-3.8-3.8-3.8h-83.9
c-2.3,0-4.2,1.5-4.2,3.8v47.6C-68.5-30.9-66.6-29-64.4-29"/>
</g>
<g id="g8819" transform="translate(574.4 145.4)">
<path id="path8821" class="st6" d="M-59.6-30.7h71.1c1.5,0,3-1.5,3-3v-45.4c0-1.5-1.5-3-3-3h-71.1c-1.5,0-3,1.5-3,3v45.4
C-62.7-32.2-61.1-30.7-59.6-30.7"/>
</g>
</g>
</g>
</g>
<g id="g8823" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8825">
<g id="g8831">
<g id="g8833">
<linearGradient id="path8841_1_" gradientUnits="userSpaceOnUse" x1="-608.1827" y1="-894.7903" x2="-607.1827" y2="-894.7903" gradientTransform="matrix(0 -1.7861 7.5145 0 7273.7993 -1143.2354)">
<stop offset="0" style="stop-color:#A9ABA9"/>
<stop offset="1" style="stop-color:#535453"/>
</linearGradient>
<path id="path8841" class="st7" d="M494.7-35.8V-60c0-1.1,1.1-2.3,2.3-2.3h105.9c1.1,0,2.3,1.1,2.3,2.3v24.2H494.7z"/>
</g>
</g>
</g>
</g>
<g id="g8843" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_5_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
<g id="g8845" class="st8">
<g id="g8851" transform="translate(581.7 109.3)">
<path id="path8853" class="st9" d="M-39.3-131.1l-15.9,15.9v2.3H-59c-5.1,1-8.4,6-7.4,11.1c0.8,3.7,3.7,6.6,7.4,7.4h3.8v1.9
l15.9,16.3h15.1l15.9-15.9v-2.3h3.8c5.2,0,9.5-4.2,9.5-9.5c0-5.2-4.2-9.5-9.5-9.5h-3.8v-1.9l-15.1-15.9H-39.3z"/>
</g>
</g>
</g>
</g>
<g id="g8855" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8857">
<g id="g8863">
<g id="g8865">
<linearGradient id="path8875_1_" gradientUnits="userSpaceOnUse" x1="-1182.8013" y1="-1084.7936" x2="-1181.8013" y2="-1084.7936" gradientTransform="matrix(0 17.201 -23.0721 0 -24479.207 20326.2344)">
<stop offset="0" style="stop-color:#6A6A6A"/>
<stop offset="0.5" style="stop-color:#48E400"/>
<stop offset="1" style="stop-color:#6A6A6A"/>
</linearGradient>
<path id="path8875" class="st10" d="M542.4,33l-15.9-15.9v-2.3h-3.8c-5.2,0-9.5-4.2-9.5-9.5s4.2-9.5,9.5-9.5v0.4h3.8v-1.9
l15.9-16.3h15.9l15.9,16.3v1.9h3.8c5.1,1.1,8.3,6.2,7.2,11.3c-0.8,3.7-3.8,6.6-7.5,7.2h-3.8v2.6L558.3,33H542.4z"/>
</g>
</g>
</g>
</g>
<g id="g8877" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_7_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
</clipPath>
<g id="g8879" class="st11">
<g id="g8885" transform="translate(576.4 118.4)">
<path id="path8887" class="st12" d="M-54.1-105.8h11.3v-13.6h-11.3c-3.8,0-6.8,3-6.8,6.8C-60.9-108.9-57.8-105.8-54.1-105.8"
/>
</g>
<g id="g8889" transform="translate(591 114.8)">
<path id="path8891" class="st12" d="M-13.5-115.8h-11.3v13.6h11.3c3.8,0,6.8-3,6.8-6.8C-6.6-112.8-9.7-115.8-13.5-115.8"/>
</g>
<g id="g8893" transform="translate(582 118.4)">
<path id="path8895" class="st5" d="M-38.5-105.8h13.6v-13.6h-14v13.6H-38.5"/>
</g>
<g id="g8897" transform="translate(581.9 123.2)">
<path id="path8899" class="st12" d="M-38.8-92.5h14.4l10.6-11l-4.2-4.2v-7.6h-4.5v3.8c0,1.9-1.5,3.8-3.8,3.8h-11.3
c-1.4,0.2-2.8-0.8-3-2.2c0-0.3,0-0.5,0-0.8v-5.3h-3.8v8.3L-49-103L-38.8-92.5z"/>
</g>
<g id="g8901" transform="translate(585.6 110)">
<path id="path8903" class="st12" d="M-28.5-129.2h-14.4l-10.6,11l4.5,4.5v7.6h3.8v-4.2c0-1.9,1.9-3.8,3.8-3.8h12.1
c1.9,0,3,1.5,3,3v5.3h4.2v-8.3l4.5-4.5L-28.5-129.2z"/>
</g>
<path id="path8905" class="st5" d="M548.4,61.7h3.4V46.2h-3.4V61.7z"/>
<path id="path8907" class="st13" d="M548.4,46.6h3.4v-6.8h-3.4V46.6z"/>
</g>
</g>
</g>
<g id="g8909" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g id="g8911">
<g id="g8917">
<g id="g8919">
<linearGradient id="path8927_1_" gradientUnits="userSpaceOnUse" x1="-2168.2661" y1="-3506.5073" x2="-2167.2661" y2="-3506.5073" gradientTransform="matrix(0 0.8944 -0.4363 0 -979.787 1983.6796)">
<stop offset="0" style="stop-color:#757575"/>
<stop offset="1" style="stop-color:#393939"/>
</linearGradient>
<path id="path8927" class="st14" d="M548.4,39.8h3.4v6.8h-3.4V39.8z"/>
</g>
</g>
</g>
</g>
<g id="g8929" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_9_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_10_">
<use xlink:href="#SVGID_9_" style="overflow:visible;"/>
</clipPath>
<g id="g8931" class="st15">
<path id="path8937" class="st16" d="M548.4,39.8h3.4V33h-3.4V39.8z"/>
<g id="g8939" transform="translate(571.2 125.6)">
<path id="path8941" class="st12" d="M-68.5-85.8h26.5v-6.4l-6.4-6.8h-17.8c-1.1,0-2.3,1.1-2.3,2.3V-85.8z"/>
</g>
<path id="path8943" class="st17" d="M585.1-39.2h13.6v-14h-13.6V-39.2z"/>
</g>
</g>
</g>
<g id="g8945" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_11_" x="589.5" y="-48.7" width="4.8" height="4.9"/>
</defs>
<clipPath id="SVGID_12_">
<use xlink:href="#SVGID_11_" style="overflow:visible;"/>
</clipPath>
<g id="g8947" class="st18">
<g id="g8953" transform="translate(596.4 103.2)">
<path id="path8955" class="st19" d="M1.6-148.1v-1.1c-1.1-1.9-1.5-2.6-3-2.6l-1.1,0.8c-0.5-0.5-1.2-0.8-1.9-0.8
c-0.4,0-0.8,0-1.1,0.8c-0.4-0.8-0.8-0.8-1.1-0.8H-9c-0.5,0-1,0.3-1.1,0.8l1.1,3.8h1.9l1.9,0.8l0.8-0.4H-3c0.4,0.4,1.1,0,1.5,0
v-0.8l1.5,0.8l1.1-0.4L1.6-148.1 M-11.3-156H2.3v13.6h-13.6L-11.3-156z"/>
</g>
<g id="g8957" transform="translate(596.5 103)">
<path id="path8959" class="st20" d="M1.8-148.6c0-0.8,0-1.1-0.8-1.9c0-0.8-1.1-1.5-2.3-1.5l-1.5,0.4c-0.5-0.3-1-0.4-1.5-0.4
h-1.5c-0.5-0.1-1-0.1-1.5,0h-2.3c-0.8,0-1.1,0.4-1.5,1.1c0,1.5,0.8,2.6,1.5,3.8c0,0.8,0.8,0.8,1.5,0.8H0l1.9-0.4V-148.6
M-11.4-156.2H2.2v13.6h-13.6V-156.2z"/>
</g>
<path id="path8961" class="st21" d="M598.7-53.2h-13.6v13.6h13.6V-53.2z M584.7-53.2h14v14h-13.6L584.7-53.2z"/>
<g id="g8963" transform="translate(596.5 103.7)">
<path id="path8965" class="st21" d="M1.8-146.7v-0.8V-146.7 M1.8-146.7v-0.8v0.4V-146.7z"/>
</g>
<g id="g8967" transform="translate(596 103.2)">
<path id="path8969" class="st21" d="M0.5-148.1c-0.2-0.8-0.4-1.5-0.8-2.3h-0.4c0,0.8,0,1.5,0.8,2.3H0.5 M1.6-148.8l-1.1-1.5
c0-0.8-0.8-1.5-1.1-1.5c-0.8,0-1.1,0-1.1,1.1l0.4,1.5c0.4,1.1,0.8,1.9,1.9,1.9s1.1-1.1,1.1-1.9 M-3.3-147.7v-0.4l-1.1-1.9
l0.4-0.4l0.8,0.8c0,0.8,0,0.8,0.8,0.8s0.8-0.4,0.4-0.8c0-1.1-0.8-1.9-1.9-1.9c-0.6,0-1.1,0.5-1.1,1.1l0,0l0.8,1.9
c0,0.8,0.8,1.5,1.9,1.5c0.8,0,1.1,0,1.1-0.8c0-0.4,0-0.8-0.8-0.8h-0.4v0.8 M-6.4-149.6v-0.8h1.1c0-0.8-0.8-1.1-1.1-1.1
c-0.8,0-1.1,0.4-1.1,0.8c0,1.1,0,1.9,0.8,2.6c0,0.8,0.8,1.1,1.5,1.1l0.8-0.4c0-0.8,0-0.8-0.8-0.8h-0.4v-0.4
c0.4,0,0.8,0,0.4-0.8L-6.4-149.6 M-8.6-150.4h0.8c0-0.8-0.4-1.1-1.1-1.1c0,0-0.8,0-0.8,0.8l1.1,3.4c0,0,0.4,0.4,0.8,0h0.4
C-7.5-148.5-8.2-149.2-8.6-150.4 M0.5-146.6c-0.8,0-1.1,0-1.5-0.8l-1.5,0.8l-1.5-0.4l-1.1,0.4c-0.8,0-1.1,0-1.5-0.8v0.4
l-1.1,0.4c-0.4,0-0.8,0-1.1-0.8c-0.4-1.1-1.1-2.3-1.1-3.8c0,0,0.4-0.8,1.1-0.8l1.1,0.4c0.4,0,0.8-0.4,1.5,0h2.3l1.9,0.4
l1.5-0.8c1.1,0,1.9,1.1,2.3,2.3v1.5C1.6-147.4,1.1-146.8,0.5-146.6"/>
</g>
</g>
</g>
</g>
<g id="g8971" transform="matrix(.35278 0 0 -.35278 -129 330.1)">
<g>
<defs>
<rect id="SVGID_13_" x="14.3" y="967.1" width="1822.3" height="1528.7"/>
</defs>
<clipPath id="SVGID_14_">
<use xlink:href="#SVGID_13_" style="overflow:visible;"/>
</clipPath>
<g id="g8973" class="st22">
<g id="g8979" transform="translate(578 103)">
<path id="path8981" class="st2" d="M-49.6-148.6v-1.1h-2.3l-0.4-0.4v-1.5h2.6v-1.5h-3.8l-0.8,0.8h-1.1l-0.4-0.4v-2.3h8.7v8.3
h-8.7v-2.3h1.9v0.4H-49.6z"/>
</g>
<g id="g8983" transform="translate(576 103.6)">
<path id="path8985" class="st2" d="M-55.2-147h-1.9l-0.4-0.4l-2.3-4.9l-3,4.9v0.4h-1.9c0,0-0.4,0,0-0.4l3.4-7.6l0.8-0.4h1.9
l3.8,7.6L-55.2-147"/>
</g>
<g id="g8987" transform="translate(573 102.8)">
<path id="path8989" class="st2" d="M-63.5-149.2h0.4v-1.5l-0.4-0.4h-5.7v-1.1h5.7l0.4-0.8v-1.5h-8.3v7.6l0.4,0.8h7.9v-1.5
h-6.1v-1.5H-63.5z"/>
</g>
<g id="g8991" transform="translate(583.5 136.6)">
<path id="path8993" class="st23" d="M-34.3-55.2l-3,4.9l-5.3-11l15.1-3.8c-1.9,1.9-1.9,2.6-3.4,4.9c1.9,0.4,3.8,1.5,5.3,2.6
c3,1.5,5.7,3.8,7.6,7.2c1.5,4.6,0.6,9.7-2.3,13.6c-1.5,0-3,0-4.9-0.8C-21.1-43.8-21.1-51.4-34.3-55.2"/>
</g>
<g id="g8995" transform="translate(583.1 141.4)">
<path id="path8997" class="st23" d="M-35.4-41.8l3-4.5l5.3,10.6L-41.5-32l2.6-4.9l-4.9-2.6c-3.3-1.6-5.9-4.3-7.6-7.6
c-1.5-3.8-0.8-9.1,1.9-12.9c1.5,0,3,0,4.5,0.8C-47.9-53.2-47.9-45.6-35.4-41.8"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -25,41 +25,55 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
const saveAs = pxt.BrowserUtils.hasSaveAs();
const htmlBody = `
<div class="ui two column grid stackable">
<div class="column">
<div class="ui">
<div class="image">
<img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;">
</div>
<div class="content">
<div class="description">
<span class="ui blue circular label">1</span>
<strong>${lf("Connect the EV3 brick to your computer with a USB cable.")}</strong>
<div class="ui grid stackable">
<div class="column five wide" style="background-color: #E2E2E2;">
<div class="ui header">${lf("First time here?")}</div>
<strong style="font-size:small">${lf("You must have version 1.10 or above of the firmware")}</strong>
<div style="justify-content: center;display: flex;padding: 1rem;">
<img class="ui image" src="./static/download/firmware.png" style="height:100px;" />
</div>
<a href="/troubleshoot" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
</div>
<div class="column eleven wide">
<div class="ui grid">
<div class="row">
<div class="column">
<div class="ui two column grid padded">
<div class="column">
<div class="ui">
<div class="image">
<img class="ui medium rounded image" src="./static/download/connect.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
</div>
<div class="content">
<div class="description">
<span class="ui yellow circular label">1</span>
<strong>${lf("Connect the EV3 to your computer with a USB cable")}</strong>
<br />
<span style="font-size:small">${lf("Use the miniUSB port on the top of the EV3 brick")}</span>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui">
<div class="image">
<img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;" />
</div>
<div class="content">
<div class="description">
<span class="ui yellow circular label">2</span>
<strong>${lf("Move the .uf2 file to the EV3 brick")}</strong>
<br />
<span style="font-size:small">${lf("Locate the downloaded .uf2 file and drag it to the EV3 USB drive")}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui">
<div class="image">
<img class="ui medium rounded image" src="./static/download/transfer.svg" style="height:109px;width:261px;margin-bottom:1rem;">
</div>
<div class="content">
<div class="description">
<span class="ui blue circular label">2</span>
${lf("Locate the downloaded .uf2 file and drag it to the EV3 drive")}
</div>
</div>
</div>
</div>
</div>
<div class="ui one column grid">
<div class="column">
<a href="/troubleshoot" target="_blank" class="ui segment container" style="background:#ffdb90">
<i class="icon exclamation circle large" aria-hidden="true"></i>
${lf("Did you prepare your EV3 brick for MakeCode?")}
</a>
</div>
</div>`;
return confirmAsync({
@ -69,6 +83,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
hideCancel: true,
hideAgree: false,
agreeLbl: lf("I got it"),
className: 'downloaddialog',
buttons: [downloadAgain ? {
label: fn,
icon: "download",

View File

@ -111,9 +111,11 @@
}
/* Editor download dialog */
.ui.button.troubleshoot {
background: none !important;
color: @blue;
.ui.downloaddialog.modal>.content {
padding: 1rem;
}
.ui.downloaddialog.modal>.actions {
background-color: #FAFAFA;
}
/* Tutorial */