Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

adding new video placemat code sample #19

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

adding new video placemat code sample #19

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6e1889
adding new vedio placemat code sample
cwlock Sep 22, 2017
e47e312
Replacing css and js files with scss and ts
cwlock Sep 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/templates/first-run/video-placemat/dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!--
This file shows how to design a pop-up dialog that holds an embedded video.
Expand Down
103 changes: 61 additions & 42 deletions src/templates/first-run/video-placemat/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!--
This file shows how to design a page that embeds a video about the add-in.
Expand All @@ -10,55 +10,74 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Welcome Screen - Video Placemat</title>
<title>Video Placemat</title>

<!-- For more info on Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="../../../../node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
<link rel="stylesheet" href="../../../../node_modules/office-ui-fabric-js/dist/css/fabric.components.min.css" />

<!-- Template CSS styles -->
<link href="video.placemat.css" rel="stylesheet" type="text/css" />

<!-- Required JS -->
<!-- Get started with Fabric JS, Use the CDN, Bower, NPM, or Nuget to get the components and core styling. -->
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

<!-- We reference Office.js on this page because we are using the display dialog. -->
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- For the Office UI Fabric, go to http://dev.office.com/fabric/ to learn more. -->
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
<!-- Template styles -->

<link href="video.placemat.css" rel="stylesheet" type="text/css" />
<!-- Video dialog code -->
<script src="video.placemat.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more.-->
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

</head>
<body class="ms-font-l">
<div class="ms-firstrun-video ms-bgColor-themePrimary">
<div class="ms-firstrun-video__header">
<div class="ms-firstrun-video__header--skip ms-font-m ms-fontColor-white">
Skip<i class="ms-Icon ms-Icon--chevronThickRight"></i>
</div>
<div class="ms-firstrun-video__welcome">
<div>
<h1 class="ms-font-xl ms-fontWeight-light ms-fontColor-white">WELCOME</h1>
<body>
<!-- Begin the Video Placemat Sample -->
<div class="dp-video-placemat">
<!-- Begin Message Bar -->
<div class="ms-MessageBar hidden">
<div class="ms-MessageBar-content">
<div class="ms-MessageBar-icon">
<i class="ms-Icon ms-Icon--Info"></i>
</div>
<div class="ms-font-m ms-fontWeight-light ms-fontColor-white">
<p>Learn the Basics</p>
<div class="ms-MessageBar-text">
Info - Please see video in dialog window.
</div>
</div>
</div>
<div id="videoimage" class="ms-firstrun-video__header--image">
</div>

<div class="ms-firstrun-video__content">
<div>
<div class="ms-font-mi ms-fontColor-white ms-firstrun-video__content--caption">
<p>Watch this video to learn how to use my add-in name.</p>
</div>
<div class="ms-firstrun-video__content--valuestatement ms-font-m ms-fontWeight-light ms-fontColor-white">
<p>Be productive at work with my add-in name.</p>
</div>
<div class="ms-firstrun-video__button">
<button id="buttonGetStarted" class="ms-Button ms-fontColor-white" disabled="true">
<span class="ms-Button-label">
Get Started!
</span>
</button>
</div>

<!-- End Message Bar -->
<!-- Use the skip button to move past the Video Placemat -->
<header class="dp-video-placemat--skip">
<button id="skip" class="ms-font-m">Skip <i class="ms-Icon ms-Icon--ChevronRight ms-fontSize-mi" aria-hidden="true"></i></button>
</header>
<section class="dp-video-placemat--content">
<div class="dp-video-placemat--content__intro">
<!-- Replace the h1 and p element text with your own value proposition text -->
<h1 class="ms-font-xl">Discover New Functionality</h1>
<p class="ms-font-m">Enhance the user experience in your Office Add-in with Office APIs!</p>
</div>
</div>
</div>
<div class="dp-video-placemat--content__video">
<!-- Replace the video Image placeholder with your own image -->
<img id="videoImage" src="../../../assets/video-placemat-image.png"/>
</div>
<div class="dp-video-placemat--content__caption">
<!--
Replace the caption text with your own to describe what the
user must do or what the video includes
-->
<p class="ms-font-xs">Default video-player and MP4 video with closed caption available</p>
</div>
<!-- Use the button to get started once the video has ran -->
<div class="dp-video-placemat--button">
<button id="buttonGetStarted" class="ms-Button ms-Button--primary" disabled="true">
<span class="ms-Button-label">Get started</span>
</button>
</div>
</section>
<!-- Begin Overlay element -->
<div class="ms-Overlay ms-Overlay--dark"></div>
<!-- End Overlay element -->
</div>
<!-- Video placemat JavaScript code -->
<script src="video.placemat.js"></script>
</body>
</html>
Loading