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

Friendlier download dialog + pairing (#1212)

Browse Source 
* first shot at new download

* fixing image

* handle column width

* fixed colors

* updated images

* PR feedback
This commit is contained in:
Peli de Halleux
2018-09-11 20:50:52 -07:00
committed by GitHub
parent a17ade5b3b
commit fbb23feda7
6 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
editor/extension.ts
View File

@ -739,6 +739,7 @@ namespace pxt.editor {
}
res.blocklyPatch = patchBlocks;
res.showUploadInstructionsAsync = showUploadInstructionsAsync;
return Promise.resolve<pxt.editor.ExtensionResult>(res);
}
@ -772,4 +773,99 @@ namespace pxt.editor {
s.appendChild(f);
valueNode.appendChild(s);
}
function showUploadInstructionsAsync(fn: string, url: string, confirmAsync: (options: any) => Promise<number>) {
const boardName = pxt.appTarget.appTheme.boardName || "???";
const boardDriveName = pxt.appTarget.appTheme.driveDisplayName || pxt.appTarget.compile.driveName || "???";
const canWebusb = pxt.usb.isEnabled;
// https://msdn.microsoft.com/en-us/library/cc848897.aspx
// "For security reasons, data URIs are restricted to downloaded resources.
// Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements"
const downloadAgain = false // !pxt.BrowserUtils.isIE() && !pxt.BrowserUtils.isEdge();
const docUrl = pxt.appTarget.appTheme.usbDocs;
const columns = canWebusb ? "eleven" : "sixteen";
const htmlBody = `
<div class="ui grid stackable">
${canWebusb ? `<div class="column five wide" style="background-color: #E2E2E2;">
<div class="ui header">${lf("One click download?")}</div>
<strong style="font-size:small">${lf("Pair your device to download instantly.")}</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="https://support.microbit.org/support/solutions/articles/19000084059-beta-testing-web-usb" target="_blank">${lf("Check your firmware version here and update if needed")}</a>
</div>` : ''}
<div class="column ${columns} 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.png" style="margin-bottom:1rem;" />
</div>
<div class="content">
<div class="description">
<span class="ui purple circular label">1</span>
<strong>${lf("Connect the {0} to your computer with a USB cable", boardName)}</strong>
<br />
<span style="font-size:small">${lf("Use the microUSB port on the top of the {0}", boardName)}</span>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui">
<div class="image">
<img class="ui medium rounded image" src="./static/download/transfer.png" style="margin-bottom:1rem;" />
</div>
<div class="content">
<div class="description">
<span class="ui purple circular label">2</span>
<strong>${lf("Move the .hex file to the {0}", boardName)}</strong>
<br />
<span style="font-size:small">${lf("Locate the downloaded .hex file and drag it to the {0} drive", boardDriveName)}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`;
return confirmAsync({
header: lf("Download to your micro:bit"),
htmlBody,
hasCloseIcon: true,
hideCancel: true,
hideAgree: false,
agreeLbl: lf("I got it"),
className: 'downloaddialog',
buttons: [downloadAgain ? {
label: fn,
icon: "download",
className: "lightgrey focused",
url,
fileName: fn
} : undefined, canWebusb ? {
label: lf("Pair device"),
icon: "usb",
className: "lightgrey focused",
onclick: () => {
pxt.usb.pairAsync().done();
}
} : undefined, docUrl ? {
label: lf("Help"),
icon: "help",
className: "lightgrey",
url: docUrl
} : undefined]
//timeout: 20000
}).then(() => { });
}
}