c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update download dialog (#589)

Browse Source
This commit is contained in:
Sam El-Husseini
2018-05-07 14:59:29 -07:00
committed by GitHub
parent de61919fc1
commit df6249931d
4 changed files with 329 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
editor/extension.ts
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",