From a6e18895b513f385c0af334e7d99d18a390ab8a4 Mon Sep 17 00:00:00 2001 From: Chris Lockwood Date: Fri, 22 Sep 2017 12:53:05 -0700 Subject: [PATCH 1/2] adding new vedio placemat code sample --- .../first-run/video-placemat/dialog.html | 2 +- .../first-run/video-placemat/index.html | 103 +++--- .../video-placemat/video.placemat.css | 296 ++++++++++++++++++ .../video-placemat/video.placemat.js | 102 ++++-- .../video-placemat/video.placemat.scss | 123 -------- 5 files changed, 439 insertions(+), 187 deletions(-) create mode 100644 src/templates/first-run/video-placemat/video.placemat.css delete mode 100644 src/templates/first-run/video-placemat/video.placemat.scss diff --git a/src/templates/first-run/video-placemat/dialog.html b/src/templates/first-run/video-placemat/dialog.html index 075f9cb..e66777c 100644 --- a/src/templates/first-run/video-placemat/dialog.html +++ b/src/templates/first-run/video-placemat/dialog.html @@ -1,4 +1,4 @@ - + + + + + + + + + + + + - - - - - - - - + + + - -
-
-
- Skip -
-
-
-

WELCOME

+ + +
+ + + + diff --git a/src/templates/first-run/video-placemat/video.placemat.css b/src/templates/first-run/video-placemat/video.placemat.css new file mode 100644 index 0000000..97a2e29 --- /dev/null +++ b/src/templates/first-run/video-placemat/video.placemat.css @@ -0,0 +1,296 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. */ + +html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: auto; +} + +body { + position: relative; + min-height: 450px; + min-width: 320px; +} + +main { + height: 100%; + overflow-y: auto; +} + +footer { + width: 100%; + position: relative; + bottom: 0; +} + +p, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +ul { + padding: 0; +} + +.clearfix { + display: block; + clear: both; + height: 0; +} + +.ms-Icon.enlarge { + position: relative; + font-size: 20px; + top: 4px; +} + +.placeholder { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-flex: 1 1 0; + -ms-flex: 1 1 0; + flex: 1 1 0; + height: 100%; +} + +.placeholder__header { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + border-bottom-width: 1px; + border-bottom-style: solid; + height: 44px; + width: 100%; +} + +.placeholder__header--left { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 44px; +} + +.placeholder__header--left nav { + width: 14px; + height: 14px; +} + +.placeholder__header--right { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.placeholder__header--right--cmd { + width: 14px; + height: 14px; + border-radius: 100%; +} + +.placeholder__header--right--text { + width: 30px; + height: 10px; + margin: auto 10px auto 6px; +} + +.placeholder__content { + padding: 20px; +} + +.placeholder__content--textTitle { + width: 100%; + height: 32px; + margin-bottom: 20px; +} + +.placeholder__content--textBody { + width: 100%; + height: 64px; + margin-bottom: 20px; +} + +.placeholder__footer { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 44px; + border-top-width: 1px; + border-top-style: solid; + position: absolute; + bottom: 0; +} + +.placeholder__footer--left { + width: 100%; + height: 100%; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-left: 20px; +} + +.placeholder__footer--left--logo { + width: 32px; + height: 32px; +} + +.placeholder__footer--left--text { + min-width: 160px; + height: 14px; + margin-left: 7px; +} + +.placeholder__footer--right { + max-width: 100%; + height: 100%; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.placeholder__footer--right--cmd { + width: 14px; + height: 14px; + border-radius: 50%; + margin: 0 20px; +} + +.dp-video-placemat { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + height: 100%; + text-align: center; + position: relative; +} + +.dp-video-placemat--skip { + height: 44px; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.dp-video-placemat #skip { + background: none repeat scroll 0 0 transparent; + border: 0 none; + line-height: 1; + cursor: pointer; + margin-right: 20px; + padding: 0; +} + +.dp-video-placemat--content__intro { + padding: 35px 20px 30px; +} + +.dp-video-placemat--content__intro p { + margin-top: 30px; + line-height: 1.5; +} + +.dp-video-placemat--content #videoImage { + cursor: pointer; +} + +.dp-video-placemat--content__caption { + padding: 10px 20px 0; +} + +.dp-video-placemat--button { + margin-top: 50px; +} + +.ms-MessageBar { + position: absolute; + top: 0; + left: 0; + text-align: left; + z-index: 99; + width: 100%; +} + +.hidden { + display: none; +} diff --git a/src/templates/first-run/video-placemat/video.placemat.js b/src/templates/first-run/video-placemat/video.placemat.js index 07f0479..2ac1e91 100644 --- a/src/templates/first-run/video-placemat/video.placemat.js +++ b/src/templates/first-run/video-placemat/video.placemat.js @@ -1,29 +1,89 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. - -(function () { +var dialog; +(function ($) { "use strict"; - - // The initialize function must be run each time a new page loads. + var overlay; Office.initialize = function () { $(document).ready(function () { - document.getElementById("videoimage").onclick = function () { - showVideoDialog(); + var OverlayElement = document.querySelector('.ms-Overlay'); + overlay = new fabric['Overlay'](OverlayElement); + function showMessage() { + // Direct the user to view the video. + $('.ms-MessageBar').attr('class', 'ms-MessageBar'); + } + function removeMessage() { + // Remove the messageBar from the task pane. + $('.ms-MessageBar').attr('class', 'ms-MessageBar hidden'); + } + ; + function reEnableParentUI() { + // Enable the button because they launched the video and then closed the dialog. + $("#buttonGetStarted").prop("disabled", false); + } + $('#videoImage').click(function () { + overlay.show(); + showMessage(); + reEnableParentUI(); + openDialog(); + }); + function dialogCallback(asyncResult) { + if (asyncResult.status == "failed") { + // In addition to general system errors, there are 3 specific errors for + // displayDialogAsync that you can handle individually. + switch (asyncResult.error.code) { + case 12004: + console.log("Domain is not trusted"); + break; + case 12005: + console.log("HTTPS is required"); + break; + case 12007: + console.log("A dialog is already opened."); + break; + default: + console.log(asyncResult.error.message); + break; + } + } + else { + dialog = asyncResult.value; + /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/ + dialog.addEventHandler(Office.EventType.DialogMessageReceived, messageHandler); + /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/ + dialog.addEventHandler(Office.EventType.DialogEventReceived, eventHandler); + } + } + function messageHandler(arg) { + dialog.close(); + console.log(arg.message); + } + function eventHandler(arg) { + // In addition to general system errors, there are 2 specific errors + // and one event that you can handle individually. + switch (arg.error) { + case 12002: + console.log("Cannot load URL, no such page or bad URL syntax."); + break; + case 12003: + console.log("HTTPS is required."); + break; + case 12006: + // The dialog was closed, typically because the user the pressed X button. + console.log("Dialog closed by user"); + $('.ms-MessageBar').attr('class', 'ms-MessageBar hidden'); + overlay.hide(); + break; + default: + console.log("Undefined error in dialog window"); + break; + } + } + function openDialog() { + var fullUrl = "https://localhost:3000/templates/first-run/video-placemat/dialog.html"; + Office.context.ui.displayDialogAsync(fullUrl, { height: 50, width: 50 }, dialogCallback); } }); }; +})(jQuery); - // Closes the dialog window. Consider adding additional code here that runs after the video finishes. - function reEnableParentUI(arg) { - // Enable the button because they launched the video and then closed the dialog. - $("#buttonGetStarted").prop("disabled", false); - } - - // Use the display dialog to open a pop-up and display the video. - function showVideoDialog() { - var fullUrl = "https://localhost:3000/templates/first-run/video-placemat/video.dialog.html"; - - // Height and width are percentages of the size of the parent Office application, e.g. PowerPoint, Excel, Word, etc. - Office.context.ui.displayDialogAsync(fullUrl, - { height: 50, width: 50, requireHTTPS: false }, reEnableParentUI); - } -}()); \ No newline at end of file +//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy90ZW1wbGF0ZXMvZmlyc3QtcnVuL3ZpZGVvLXBsYWNlbWF0L3ZpZGVvLnBsYWNlbWF0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtIQUFrSDtBQUlsSCxJQUFJLE1BQVUsQ0FBQztBQUVmLENBQUMsVUFBQyxDQUFDO0lBQ0MsWUFBWSxDQUFDO0lBRWIsSUFBSSxPQUFXLENBQUM7SUFFaEIsTUFBTSxDQUFDLFVBQVUsR0FBRztRQUNoQixDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsS0FBSyxDQUFDO1lBRWQsSUFBSSxjQUFjLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUMzRCxPQUFPLEdBQUcsSUFBSSxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsY0FBYyxDQUFDLENBQUM7WUFFaEQ7Z0JBQ0kscUNBQXFDO2dCQUNyQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLGVBQWUsQ0FBQyxDQUFDO1lBQ3ZELENBQUM7WUFFRDtnQkFDSSw0Q0FBNEM7Z0JBQzVDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsc0JBQXNCLENBQUMsQ0FBQztZQUM5RCxDQUFDO1lBQUEsQ0FBQztZQUVGO2dCQUNJLGdGQUFnRjtnQkFDaEYsQ0FBQyxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUMsQ0FBQztZQUNuRCxDQUFDO1lBRUQsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLEtBQUssQ0FBQztnQkFDbkIsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUNmLFdBQVcsRUFBRSxDQUFDO2dCQUNkLGdCQUFnQixFQUFFLENBQUM7Z0JBQ25CLFVBQVUsRUFBRSxDQUFDO1lBQ2pCLENBQUMsQ0FBQyxDQUFDO1lBRUgsd0JBQXdCLFdBQWU7Z0JBQ25DLEVBQUUsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxNQUFNLElBQUksUUFBUSxDQUFDLENBQUMsQ0FBQztvQkFFakMseUVBQXlFO29CQUN6RSx1REFBdUQ7b0JBQ3ZELE1BQU0sQ0FBQyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQzt3QkFDN0IsS0FBSyxLQUFLOzRCQUNOLE9BQU8sQ0FBQyxHQUFHLENBQUMsdUJBQXVCLENBQUMsQ0FBQzs0QkFDckMsS0FBSyxDQUFDO3dCQUNWLEtBQUssS0FBSzs0QkFDVixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7NEJBQzdCLEtBQUssQ0FBQzt3QkFDVixLQUFLLEtBQUs7NEJBQ1YsT0FBTyxDQUFDLEdBQUcsQ0FBQyw2QkFBNkIsQ0FBQyxDQUFDOzRCQUN2QyxLQUFLLENBQUM7d0JBQ1Y7NEJBQ0EsT0FBTyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDOzRCQUNuQyxLQUFLLENBQUM7b0JBQ2QsQ0FBQztnQkFDTCxDQUFDO2dCQUNELElBQUksQ0FBQyxDQUFDO29CQUNGLE1BQU0sR0FBRyxXQUFXLENBQUMsS0FBSyxDQUFDO29CQUMzQiw4R0FBOEc7b0JBQzlHLE1BQU0sQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxxQkFBcUIsRUFBRSxjQUFjLENBQUMsQ0FBQztvQkFFL0UsK0hBQStIO29CQUMvSCxNQUFNLENBQUMsZUFBZSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsbUJBQW1CLEVBQUUsWUFBWSxDQUFDLENBQUM7Z0JBQy9FLENBQUM7WUFDTCxDQUFDO1lBR0Qsd0JBQXdCLEdBQU87Z0JBQzNCLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztnQkFDZixPQUFPLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUM3QixDQUFDO1lBR0Qsc0JBQXNCLEdBQU87Z0JBRXpCLHFFQUFxRTtnQkFDckUsa0RBQWtEO2dCQUNsRCxNQUFNLENBQUMsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztvQkFDaEIsS0FBSyxLQUFLO3dCQUNWLE9BQU8sQ0FBQyxHQUFHLENBQUMsa0RBQWtELENBQUMsQ0FBQzt3QkFDNUQsS0FBSyxDQUFDO29CQUNWLEtBQUssS0FBSzt3QkFDVixPQUFPLENBQUMsR0FBRyxDQUFDLG9CQUFvQixDQUFDLENBQUM7d0JBQzlCLEtBQUssQ0FBQztvQkFDVixLQUFLLEtBQUs7d0JBQ04sMEVBQTBFO3dCQUMxRSxPQUFPLENBQUMsR0FBRyxDQUFDLHVCQUF1QixDQUFDLENBQUM7d0JBQ3JDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsc0JBQXNCLENBQUMsQ0FBQzt3QkFDMUQsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO3dCQUNmLEtBQUssQ0FBQztvQkFDVjt3QkFDQSxPQUFPLENBQUMsR0FBRyxDQUFDLGtDQUFrQyxDQUFDLENBQUM7d0JBQzVDLEtBQUssQ0FBQztnQkFDZCxDQUFDO1lBQ0wsQ0FBQztZQUVEO2dCQUNJLElBQUksT0FBTyxHQUFHLHVFQUF1RSxDQUFDO2dCQUV0RixNQUFNLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQ3hDLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsY0FBYyxDQUFDLENBQUM7WUFDbkQsQ0FBQztRQUVMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQyxDQUFDO0FBQ04sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMiLCJmaWxlIjoidGVtcGxhdGVzL2ZpcnN0LXJ1bi92aWRlby1wbGFjZW1hdC92aWRlby5wbGFjZW1hdC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIENvcHlyaWdodCAoYykgTWljcm9zb2Z0LiBBbGwgcmlnaHRzIHJlc2VydmVkLiBMaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UuIFNlZSBmdWxsIGxpY2Vuc2UgaW4gcm9vdCBvZiByZXBvLlxyXG5cclxuXHJcbmRlY2xhcmUgdmFyIGZhYnJpYzogYW55O1xyXG52YXIgZGlhbG9nOmFueTtcclxuXHJcbigoJCkgPT4ge1xyXG4gICAgXCJ1c2Ugc3RyaWN0XCI7XHJcblxyXG4gICAgbGV0IG92ZXJsYXk6YW55O1xyXG5cclxuICAgIE9mZmljZS5pbml0aWFsaXplID0gKCkgPT4geyBcclxuICAgICAgICAkKGRvY3VtZW50KS5yZWFkeSgoKSA9PiB7XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICBsZXQgT3ZlcmxheUVsZW1lbnQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcubXMtT3ZlcmxheScpO1xyXG4gICAgICAgICAgICBvdmVybGF5ID0gbmV3IGZhYnJpY1snT3ZlcmxheSddKE92ZXJsYXlFbGVtZW50KTtcclxuXHJcbiAgICAgICAgICAgIGZ1bmN0aW9uIHNob3dNZXNzYWdlKCkge1xyXG4gICAgICAgICAgICAgICAgLy8gRGlyZWN0IHRoZSB1c2VyIHRvIHZpZXcgdGhlIHZpZGVvLlxyXG4gICAgICAgICAgICAgICAgJCgnLm1zLU1lc3NhZ2VCYXInKS5hdHRyKCdjbGFzcycsICdtcy1NZXNzYWdlQmFyJyk7XHJcbiAgICAgICAgICAgIH1cclxuXHJcbiAgICAgICAgICAgIGZ1bmN0aW9uIHJlbW92ZU1lc3NhZ2UoKSB7XHJcbiAgICAgICAgICAgICAgICAvLyBSZW1vdmUgdGhlIG1lc3NhZ2VCYXIgZnJvbSB0aGUgdGFzayBwYW5lLlxyXG4gICAgICAgICAgICAgICAgJCgnLm1zLU1lc3NhZ2VCYXInKS5hdHRyKCdjbGFzcycsICdtcy1NZXNzYWdlQmFyIGhpZGRlbicpO1xyXG4gICAgICAgICAgICB9O1xyXG5cclxuICAgICAgICAgICAgZnVuY3Rpb24gcmVFbmFibGVQYXJlbnRVSSgpIHtcclxuICAgICAgICAgICAgICAgIC8vIEVuYWJsZSB0aGUgYnV0dG9uIGJlY2F1c2UgdGhleSBsYXVuY2hlZCB0aGUgdmlkZW8gYW5kIHRoZW4gY2xvc2VkIHRoZSBkaWFsb2cuXHJcbiAgICAgICAgICAgICAgICAkKFwiI2J1dHRvbkdldFN0YXJ0ZWRcIikucHJvcChcImRpc2FibGVkXCIsIGZhbHNlKTtcclxuICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgJCgnI3ZpZGVvSW1hZ2UnKS5jbGljaygoKT0+e1xyXG4gICAgICAgICAgICAgICAgb3ZlcmxheS5zaG93KCk7XHJcbiAgICAgICAgICAgICAgICBzaG93TWVzc2FnZSgpO1xyXG4gICAgICAgICAgICAgICAgcmVFbmFibGVQYXJlbnRVSSgpO1xyXG4gICAgICAgICAgICAgICAgb3BlbkRpYWxvZygpO1xyXG4gICAgICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgICAgIGZ1bmN0aW9uIGRpYWxvZ0NhbGxiYWNrKGFzeW5jUmVzdWx0OmFueSkge1xyXG4gICAgICAgICAgICAgICAgaWYgKGFzeW5jUmVzdWx0LnN0YXR1cyA9PSBcImZhaWxlZFwiKSB7XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICAgICAgICAgIC8vIEluIGFkZGl0aW9uIHRvIGdlbmVyYWwgc3lzdGVtIGVycm9ycywgdGhlcmUgYXJlIDMgc3BlY2lmaWMgZXJyb3JzIGZvciBcclxuICAgICAgICAgICAgICAgICAgICAvLyBkaXNwbGF5RGlhbG9nQXN5bmMgdGhhdCB5b3UgY2FuIGhhbmRsZSBpbmRpdmlkdWFsbHkuXHJcbiAgICAgICAgICAgICAgICAgICAgc3dpdGNoIChhc3luY1Jlc3VsdC5lcnJvci5jb2RlKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNhc2UgMTIwMDQ6XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZyhcIkRvbWFpbiBpcyBub3QgdHJ1c3RlZFwiKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICBjYXNlIDEyMDA1OlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZyhcIkhUVFBTIGlzIHJlcXVpcmVkXCIpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNhc2UgMTIwMDc6XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKFwiQSBkaWFsb2cgaXMgYWxyZWFkeSBvcGVuZWQuXCIpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGRlZmF1bHQ6XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKGFzeW5jUmVzdWx0LmVycm9yLm1lc3NhZ2UpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYnJlYWs7XHJcbiAgICAgICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgICAgZWxzZSB7XHJcbiAgICAgICAgICAgICAgICAgICAgZGlhbG9nID0gYXN5bmNSZXN1bHQudmFsdWU7XHJcbiAgICAgICAgICAgICAgICAgICAgLypNZXNzYWdlcyBhcmUgc2VudCBieSBkZXZlbG9wZXJzIHByb2dyYW1hdGljYWxseSBmcm9tIHRoZSBkaWFsb2cgdXNpbmcgb2ZmaWNlLmNvbnRleHQudWkubWVzc2FnZVBhcmVudCguLi4pKi9cclxuICAgICAgICAgICAgICAgICAgICBkaWFsb2cuYWRkRXZlbnRIYW5kbGVyKE9mZmljZS5FdmVudFR5cGUuRGlhbG9nTWVzc2FnZVJlY2VpdmVkLCBtZXNzYWdlSGFuZGxlcik7XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICAgICAgICAgIC8qRXZlbnRzIGFyZSBzZW50IGJ5IHRoZSBwbGF0Zm9ybSBpbiByZXNwb25zZSB0byB1c2VyIGFjdGlvbnMgb3IgZXJyb3JzLiBGb3IgZXhhbXBsZSwgdGhlIGRpYWxvZyBpcyBjbG9zZWQgdmlhIHRoZSAneCcgYnV0dG9uKi9cclxuICAgICAgICAgICAgICAgICAgICBkaWFsb2cuYWRkRXZlbnRIYW5kbGVyKE9mZmljZS5FdmVudFR5cGUuRGlhbG9nRXZlbnRSZWNlaXZlZCwgZXZlbnRIYW5kbGVyKTtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBcclxuICAgICAgICAgICAgXHJcbiAgICAgICAgICAgIGZ1bmN0aW9uIG1lc3NhZ2VIYW5kbGVyKGFyZzphbnkpIHtcclxuICAgICAgICAgICAgICAgIGRpYWxvZy5jbG9zZSgpO1xyXG4gICAgICAgICAgICAgICAgY29uc29sZS5sb2coYXJnLm1lc3NhZ2UpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICBcclxuICAgICAgICAgICAgZnVuY3Rpb24gZXZlbnRIYW5kbGVyKGFyZzphbnkpIHtcclxuICAgICAgICAgICAgXHJcbiAgICAgICAgICAgICAgICAvLyBJbiBhZGRpdGlvbiB0byBnZW5lcmFsIHN5c3RlbSBlcnJvcnMsIHRoZXJlIGFyZSAyIHNwZWNpZmljIGVycm9ycyBcclxuICAgICAgICAgICAgICAgIC8vIGFuZCBvbmUgZXZlbnQgdGhhdCB5b3UgY2FuIGhhbmRsZSBpbmRpdmlkdWFsbHkuXHJcbiAgICAgICAgICAgICAgICBzd2l0Y2ggKGFyZy5lcnJvcikge1xyXG4gICAgICAgICAgICAgICAgICAgIGNhc2UgMTIwMDI6XHJcbiAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coXCJDYW5ub3QgbG9hZCBVUkwsIG5vIHN1Y2ggcGFnZSBvciBiYWQgVVJMIHN5bnRheC5cIik7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgICAgICAgICAgICAgIGNhc2UgMTIwMDM6XHJcbiAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coXCJIVFRQUyBpcyByZXF1aXJlZC5cIik7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgICAgICAgICAgICAgIGNhc2UgMTIwMDY6XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIFRoZSBkaWFsb2cgd2FzIGNsb3NlZCwgdHlwaWNhbGx5IGJlY2F1c2UgdGhlIHVzZXIgdGhlIHByZXNzZWQgWCBidXR0b24uXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKFwiRGlhbG9nIGNsb3NlZCBieSB1c2VyXCIpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAkKCcubXMtTWVzc2FnZUJhcicpLmF0dHIoJ2NsYXNzJywgJ21zLU1lc3NhZ2VCYXIgaGlkZGVuJyk7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIG92ZXJsYXkuaGlkZSgpO1xyXG4gICAgICAgICAgICAgICAgICAgICAgICBicmVhaztcclxuICAgICAgICAgICAgICAgICAgICBkZWZhdWx0OlxyXG4gICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKFwiVW5kZWZpbmVkIGVycm9yIGluIGRpYWxvZyB3aW5kb3dcIik7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICBmdW5jdGlvbiBvcGVuRGlhbG9nKCkge1xyXG4gICAgICAgICAgICAgICAgbGV0IGZ1bGxVcmwgPSBcImh0dHBzOi8vbG9jYWxob3N0OjMwMDAvdGVtcGxhdGVzL2ZpcnN0LXJ1bi92aWRlby1wbGFjZW1hdC9kaWFsb2cuaHRtbFwiO1xyXG5cclxuICAgICAgICAgICAgICAgIE9mZmljZS5jb250ZXh0LnVpLmRpc3BsYXlEaWFsb2dBc3luYyhmdWxsVXJsLFxyXG4gICAgICAgICAgICAgICAgICAgIHsgaGVpZ2h0OiA1MCwgd2lkdGg6IDUwIH0sIGRpYWxvZ0NhbGxiYWNrKTtcclxuICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICB9KTtcclxuICAgIH07XHJcbn0pKGpRdWVyeSk7XHJcblxyXG4iXX0= diff --git a/src/templates/first-run/video-placemat/video.placemat.scss b/src/templates/first-run/video-placemat/video.placemat.scss deleted file mode 100644 index 1564915..0000000 --- a/src/templates/first-run/video-placemat/video.placemat.scss +++ /dev/null @@ -1,123 +0,0 @@ -@import '../../../common/common.scss'; - -.ms-firstrun-video { - @include flex(); - height: 100%; - text-align: center; - - &__header { - padding: $global-spacing; - min-height: 160px; - max-height: 250px; - @include flex(); - - h1 { - letter-spacing: 5px; - } - - p { - margin-top: 7px; - } - - &--skip { - text-align: right; - } - - &--image { - @include background-fill(cover) { - background-image: url('../../../assets/video-placeholder.png'); - } - - margin-top: 15px; - @include stretch-flex(); - @include focus-states(url('../../../assets/video-placeholder.png') center center no-repeat/cover); - - flex: 0 1 0; - min-height: 200px; - } - } - - - &__welcome { - width: 100%; - height: 100%; - flex: 1 1 0; - @include center-flex(); - - img { - height: 100px; - } - } - - &__player { - width: 100%; - height: 100%; - @include stretch-flex(); - - img { - height: 100%; - } - } - - - &__content { - @include flex(); - height: 100%; - flex: 1 1 0; - padding-left: $global-spacing; - padding-right: $global-spacing; - padding-bottom: $global-spacing; - - &--centered { - @include flex(); - } - - &--caption { - margin-top: 5px; - } - - &--valuestatement { - padding-top: 50px; - } - } - - &__list { - list-style-type: none; - - li { - margin-bottom: $global-spacing; - - i { - position: relative; - top: 2px; - margin-right: 10px; - } - } - } - - - - &__action { - &--primary { - &.ms-Button { - align-self: center; - margin-top: 65px; - border: solid 2px $ms-fontColor-white; - width: calc(100vw - 40px); - padding: 10px; - @include inline-flex(center, center); - - span.ms-Button-label { - color: $ms-fontColor-white; - } - - @include focus-states(#FFFFFF, $ms-fontColor-themePrimary, false); - } - } - } - - &__button { - padding-top: $global-spacing; - @include center-flex(); - } -} From e47e31262db746e756d37028eda13eac7d9341ed Mon Sep 17 00:00:00 2001 From: Chris Lockwood Date: Tue, 26 Sep 2017 11:35:43 -0700 Subject: [PATCH 2/2] Replacing css and js files with scss and ts --- .../first-run/video-placemat/dialog.html | 2 +- .../first-run/video-placemat/index.html | 2 +- .../video-placemat/video.placemat.css | 296 ------------------ .../video-placemat/video.placemat.js | 89 ------ .../video-placemat/video.placemat.scss | 178 +++++++++++ .../video-placemat/video.placemat.ts | 110 +++++++ 6 files changed, 290 insertions(+), 387 deletions(-) delete mode 100644 src/templates/first-run/video-placemat/video.placemat.css delete mode 100644 src/templates/first-run/video-placemat/video.placemat.js create mode 100644 src/templates/first-run/video-placemat/video.placemat.scss create mode 100644 src/templates/first-run/video-placemat/video.placemat.ts diff --git a/src/templates/first-run/video-placemat/dialog.html b/src/templates/first-run/video-placemat/dialog.html index e66777c..075f9cb 100644 --- a/src/templates/first-run/video-placemat/dialog.html +++ b/src/templates/first-run/video-placemat/dialog.html @@ -1,4 +1,4 @@ - + +