Added notifications to the demo-application (electron#304)

* added notifications to the demo-application

* fixed tests

* fixed some minor details with syntax + moved section to native-ui

* Fixed a issue with last commit

* color now represent native-ui

* well well well, .DS_Store, you made it in a repo again

* Fixed some issues with last commit

* .ds_store

* fixed image-path

Author: simonkaspersen

assets/img/icons.svg

@@ -18,6 +18,7 @@
   <link rel="import" href="sections/menus/menus.html">
   <link rel="import" href="sections/menus/shortcuts.html">
   <link rel="import" href="sections/native-ui/ex-links-file-manager.html">
+  <link rel="import" href="sections/native-ui/notifications.html">
   <link rel="import" href="sections/native-ui/dialogs.html">
   <link rel="import" href="sections/native-ui/tray.html">
   <link rel="import" href="sections/communication/ipc.html">
@@ -58,6 +59,7 @@ <h5 class="nav-category">
         <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
         Native User Interface</h5>
       <button type="button" id="button-ex-links-file-manager" data-section="ex-links-file-manager" class="nav-button">Open <em>external links</em> or system <em>file manager</em></button>
+      <button type="button" id="button-notifications" data-section="notifications" class="nav-button"> Notifications with and without custom <em>image</em></button>
       <button type="button" id="button-dialogs" data-section="dialogs" class="nav-button">Use system <em>dialogs</em></button>
       <button type="button" id="button-tray" data-section="tray" class="nav-button">Put your app in the <em>tray</em></button>
     </div>

assets/img/programming.png

@@ -0,0 +1,16 @@
+const path = require('path')
+
+const notification = {
+  title: 'Notification with image',
+  body: 'Short message plus a custom image',
+  icon: path.join(__dirname, '../../../assets/img/programming.png')
+}
+const notificationButton = document.getElementById('advanced-noti')
+
+notificationButton.addEventListener('click', function () {
+  const myNotification = new window.Notification(notification.title, notification)
+
+  myNotification.onclick = () => {
+    console.log('Notification clicked')
+  }
+})

index.html

@@ -0,0 +1,13 @@
+const notification = {
+  title: 'Basic Notification',
+  body: 'Short message part'
+}
+const notificationButton = document.getElementById('basic-noti')
+
+notificationButton.addEventListener('click', function () {
+  const myNotification = new window.Notification(notification.title, notification)
+
+  myNotification.onclick = () => {
+    console.log('Notification clicked')
+  }
+})

renderer-process/native-ui/notifications/advanced-notification.js

@@ -0,0 +1,57 @@
+<template class="task-template">
+  <section id="notifications-section" class="section js-section u-category-native-ui">
+    <header class="notifications">
+      <div class="section-wrapper">
+        <h1>
+          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-notification"></use></svg>
+          Desktop notifications
+        </h1>
+        <h3>The <code>notification</code> module in Electron allows you to add basic desktop notifications.</h3>
+
+        <p>Electron conveniently allows developers to send notifications with the <a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>, using the currently running operating system’s native notification APIs to display it.</p>
+
+        <p><b>Note:</b> Since this is an HTML5 API it is only available in the renderer process.</p>
+
+        <p>Open the <a href="https://electron.atom.io/docs/all/#notifications-windows-linux-macos">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
+      </div>
+    </header>
+
+    <div class="demo">
+      <div class="demo-wrapper">
+        <button id="basic-notification-demo-toggle" class="js-container-target demo-toggle-button">Basic notification
+          <div class="demo-meta u-avoid-clicks">Supports: Win 7+, macOS, Linux (that supports libnotify)<span class="demo-meta-divider">|</span> Process: Renderer</div>
+        </button>
+        <div class="demo-box">
+          <div class="demo-controls">
+            <button class="demo-button" id="basic-noti">View demo</button>
+          </div>
+          <p>This demo demonstrates a basic notification. Text only.</p>
+          <h5>Renderer Process</h5>
+          <pre><code data-path="renderer-process/native-ui/notifications/basic-notification.js"></pre></code>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo">
+      <div class="demo-wrapper">
+        <button id="advanced-notification-demo-toggle" class="js-container-target demo-toggle-button">Notification with image
+          <div class="demo-meta u-avoid-clicks">Supports: Win 7+, macOS, Linux (that supports libnotify) <span class="demo-meta-divider">|</span> Process: Renderer</div>
+        </button>
+        <div class="demo-box">
+          <div class="demo-controls">
+            <button class="demo-button" id="advanced-noti">View demo</button>
+          </div>
+          <p>This demo demonstrates a basic notification. Both text and a image</p>
+          <h5>Renderer Process</h5>
+          <pre><code data-path="renderer-process/native-ui/notifications/advanced-notification.js"></pre></code>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript">
+      require('./renderer-process/native-ui/notifications/basic-notification')
+      require('./renderer-process/native-ui/notifications/advanced-notification')
+    </script>
+
+  </section>
+</template>

renderer-process/native-ui/notifications/basic-notification.js

@@ -155,7 +155,7 @@ describe('demo app', function () {
 
   describe('when a demo title is clicked', function () {
     it('it expands the demo content', function () {
-      let onlyFirstVisible = Array(28).fill(false)
+      let onlyFirstVisible = Array(30).fill(false)
       onlyFirstVisible[0] = true
 
       return app.client.dismissAboutPage()
@@ -169,7 +169,7 @@ describe('demo app', function () {
 
   describe('when the app is restarted after use', function () {
     it('it launches at last visted section & demo', function () {
-      let onlyFirstVisible = Array(28).fill(false)
+      let onlyFirstVisible = Array(30).fill(false)
       onlyFirstVisible[0] = true
 
       return app.client.waitForVisible('#windows-section')
@@ -189,6 +189,7 @@ describe('demo app', function () {
       .auditSectionAccessibility('menus')
       .auditSectionAccessibility('shortcuts')
       .auditSectionAccessibility('ex-links-file-manager')
+      .auditSectionAccessibility('notifications')
       .auditSectionAccessibility('dialogs')
       .auditSectionAccessibility('tray')
       .auditSectionAccessibility('ipc')