Adding nav and settings components, bug fixes

OfficeDev · Jul 19, 2016 · 454cb92 · 454cb92
1 parent 640bdf5
commit 454cb92
Show file tree

Hide file tree

Showing 53 changed files with 3,266 additions and 665 deletions.
diff --git a/templates/dialog/alert/DialogHelper.js b/templates/dialog/alert/DialogHelper.js
@@ -11,17 +11,17 @@
             console.log(asyncResult.error.message);
         }
         else {
-            dialog = asyncResult.value;
+            app.dialog = asyncResult.value;
             /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
-            dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.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(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
         }
     }
 
     function messageHandler(arg) {
-        dialog.close();
+        app.dialog.close();
     }
 
     function eventHandler(arg) {

diff --git a/templates/dialog/alert/alert.taskpane.html b/templates/dialog/alert/alert.taskpane.html
@@ -8,7 +8,7 @@
     <title>Alert Dialog Example</title>
 
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
+    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
 
     <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
     <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">

diff --git a/templates/dialog/navigation/DialogHelper.js b/templates/dialog/navigation/DialogHelper.js
@@ -11,17 +11,17 @@
             console.log(asyncResult.error.message);
         }
         else {
-            dialog = asyncResult.value;
+            app.dialog = asyncResult.value;
             /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
-            dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.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(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
         }
     }
 
     function messageHandler(arg) {
-        dialog.close();
+        app.dialog.close();
     }
 
     function eventHandler(arg) {

diff --git a/templates/dialog/navigation/navigation.css b/templates/dialog/navigation/navigation.css
@@ -87,13 +87,13 @@ ul {
       background: #F4F4F4;
       -webkit-transform: scale3d(0.98, 0.98, 1);
               transform: scale3d(0.98, 0.98, 1); }
-    .ms-navigation-dialog__tab-link.disabled {
+    .ms-navigation-dialog__tab-link--disabled {
       opacity: 0.6;
       pointer-events: none;
       cursor: not-allowed; }
-      .ms-navigation-dialog__tab-link.disabled:active, .ms-navigation-dialog__tab-link.disabled:hover {
+      .ms-navigation-dialog__tab-link--disabled:active, .ms-navigation-dialog__tab-link--disabled:hover {
         background: transparent; }
-      .ms-navigation-dialog__tab-link.disabled:active {
+      .ms-navigation-dialog__tab-link--disabled:active {
         -webkit-transform: none;
                 transform: none; }
     .ms-navigation-dialog__tab-link:focus:before {

diff --git a/templates/dialog/navigation/navigation.taskpane.html b/templates/dialog/navigation/navigation.taskpane.html
@@ -8,7 +8,7 @@
     <title>Navigation Dialog Example</title>
 
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
+    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
 
     <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
     <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">

diff --git a/templates/dialog/typeramp/DialogHelper.js b/templates/dialog/typeramp/DialogHelper.js
@@ -11,17 +11,17 @@
             console.log(asyncResult.error.message);
         }
         else {
-            dialog = asyncResult.value;
+            app.dialog = asyncResult.value;
             /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
-            dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.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(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
+            app.dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);
         }
     }
 
     function messageHandler(arg) {
-        dialog.close();
+        app.dialog.close();
     }
 
     function eventHandler(arg) {

diff --git a/templates/dialog/typeramp/typeramp.taskpane.html b/templates/dialog/typeramp/typeramp.taskpane.html
@@ -8,7 +8,7 @@
     <title>Typeramp Dialog Example</title>
 
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
-    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
+    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
 
     <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
     <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">

diff --git a/templates/feedback/office-store/feedback.css b/templates/feedback/office-store/feedback.css
@@ -46,33 +46,32 @@ ul {
   top: 4px; }
 
 .ms-landing-page {
-  display: -webkit-box;
+  display: -webkit-flex;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
           flex-direction: column;
-  flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+          flex-wrap: nowrap;
   height: 100%; }
   .ms-landing-page__main {
-    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
             flex-direction: column;
-    flex-wrap: nowrap;
-    -webkit-box-flex: 1;
+    -webkit-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+    -webkit-flex: 1 1 0;
             flex: 1 1 0;
     height: 100%; }
   .ms-landing-page__header {
     border-bottom: solid 2px #0078d7;
-    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: inline-flex; }
     .ms-landing-page__header--left {
       margin-right: 20px;
       cursor: pointer; }
     .ms-landing-page__header--right {
       padding: 10px 20px;
-      -webkit-transition: background ease 0.1s, color ease 0.1s;
       transition: background ease 0.1s, color ease 0.1s;
       cursor: pointer; }
       .ms-landing-page__header--right:active, .ms-landing-page__header--right:hover {
@@ -83,34 +82,33 @@ ul {
         background: #c7e0f4;
         -webkit-transform: scale3d(0.98, 0.98, 1);
                 transform: scale3d(0.98, 0.98, 1); }
-      .ms-landing-page__header--right.disabled {
+      .ms-landing-page__header--right--disabled {
         opacity: 0.6;
         pointer-events: none;
         cursor: not-allowed; }
-        .ms-landing-page__header--right.disabled:active, .ms-landing-page__header--right.disabled:hover {
+        .ms-landing-page__header--right--disabled:active, .ms-landing-page__header--right--disabled:hover {
           background: transparent; }
-        .ms-landing-page__header--right.disabled:active {
+        .ms-landing-page__header--right--disabled:active {
           -webkit-transform: none;
                   transform: none; }
     .ms-landing-page__header--center {
-      -webkit-box-flex: 1;
+      -webkit-flex: 1 1 auto;
               flex: 1 1 auto;
-      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
       display: inline-flex;
-      -webkit-box-pack: start;
+      -webkit-justify-content: flex-start;
               justify-content: flex-start;
-      -webkit-box-align: center;
+      -webkit-align-items: center;
               align-items: center; }
       .ms-landing-page__header--center p {
         padding: 0 10px;
-        -webkit-box-flex: 1;
+        -webkit-flex: 1 0 0px;
                 flex: 1 0 0px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         text-align: left;
         cursor: pointer;
-        -webkit-transition: background ease 0.1s, color ease 0.1s;
         transition: background ease 0.1s, color ease 0.1s;
         padding: 10px; }
         .ms-landing-page__header--center p:active, .ms-landing-page__header--center p:hover {
@@ -121,65 +119,64 @@ ul {
           background: #c7e0f4;
           -webkit-transform: scale3d(0.98, 0.98, 1);
                   transform: scale3d(0.98, 0.98, 1); }
-        .ms-landing-page__header--center p.disabled {
+        .ms-landing-page__header--center p--disabled {
           opacity: 0.6;
           pointer-events: none;
           cursor: not-allowed; }
-          .ms-landing-page__header--center p.disabled:active, .ms-landing-page__header--center p.disabled:hover {
+          .ms-landing-page__header--center p--disabled:active, .ms-landing-page__header--center p--disabled:hover {
             background: transparent; }
-          .ms-landing-page__header--center p.disabled:active {
+          .ms-landing-page__header--center p--disabled:active {
             -webkit-transform: none;
                     transform: none; }
   .ms-landing-page__action--primary.ms-Button {
     border: solid 1px #0078d7; }
   .ms-landing-page__content {
-    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
             flex-direction: column;
-    flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+            flex-wrap: nowrap;
     height: 100%;
-    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 0;
             flex: 1 1 0;
     padding: 20px; }
     .ms-landing-page__content h2 {
       margin-bottom: 20px; }
   .ms-landing-page__footer {
-    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: inline-flex;
-    -webkit-box-pack: center;
+    -webkit-justify-content: center;
             justify-content: center;
-    -webkit-box-align: center;
+    -webkit-align-items: center;
             align-items: center; }
     .ms-landing-page__footer--left {
-      -webkit-transition: background ease 0.1s, color ease 0.1s;
       transition: background ease 0.1s, color ease 0.1s;
-      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
       display: inline-flex;
-      -webkit-box-pack: start;
+      -webkit-justify-content: flex-start;
               justify-content: flex-start;
-      -webkit-box-align: center;
+      -webkit-align-items: center;
               align-items: center;
-      -webkit-box-flex: 1;
+      -webkit-flex: 1 0 0px;
               flex: 1 0 0px;
       padding: 20px; }
       .ms-landing-page__footer--left:active, .ms-landing-page__footer--left:hover {
         background: #005ca4;
         cursor: pointer; }
       .ms-landing-page__footer--left:active {
         background: #005ca4; }
-      .ms-landing-page__footer--left.disabled {
+      .ms-landing-page__footer--left--disabled {
         opacity: 0.6;
         pointer-events: none;
         cursor: not-allowed; }
-        .ms-landing-page__footer--left.disabled:active, .ms-landing-page__footer--left.disabled:hover {
+        .ms-landing-page__footer--left--disabled:active, .ms-landing-page__footer--left--disabled:hover {
           background: transparent; }
       .ms-landing-page__footer--left img {
         width: 40px;
         height: 40px; }
       .ms-landing-page__footer--left h1 {
-        -webkit-box-flex: 1;
+        -webkit-flex: 1 0 0px;
                 flex: 1 0 0px;
         margin-left: 15px;
         text-align: left;
@@ -189,19 +186,18 @@ ul {
         white-space: nowrap;
         text-overflow: ellipsis; }
     .ms-landing-page__footer--right {
-      -webkit-transition: background ease 0.1s, color ease 0.1s;
       transition: background ease 0.1s, color ease 0.1s;
       padding: 29px 20px; }
       .ms-landing-page__footer--right:active, .ms-landing-page__footer--right:hover {
         background: #005ca4;
         cursor: pointer; }
       .ms-landing-page__footer--right:active {
         background: #005ca4; }
-      .ms-landing-page__footer--right.disabled {
+      .ms-landing-page__footer--right--disabled {
         opacity: 0.6;
         pointer-events: none;
         cursor: not-allowed; }
-        .ms-landing-page__footer--right.disabled:active, .ms-landing-page__footer--right.disabled:hover {
+        .ms-landing-page__footer--right--disabled:active, .ms-landing-page__footer--right--disabled:hover {
           background: transparent; }
 
 .demo-placeholder {