Minimal implementation example of buttons

gsouf · Oct 24, 2015 · 0313ccc · 0313ccc
1 parent 39bc69d
commit 0313ccc
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 1 deletion.
diff --git a/dist/css/photon.css b/dist/css/photon.css
@@ -519,9 +519,22 @@ h6 {
 
 .toolbar-header {
   border-bottom: 1px solid #c2c0c2;
+  display: inline-flex;
 }
 .toolbar-header .title {
   margin-top: 1px;
+  flex-grow: 1;
+  text-align: center;
+}
+.toolbar-header .action-group {
+  list-style: none;
+  margin: 0 0 0 auto;
+  padding: 1px 5px 0 2px;
+}
+.toolbar-header .action-group .action-button {
+  display: inline-block;
+  padding: 0 5px;
+  -webkit-app-region: no-drag;
 }
 
 .toolbar-footer {

diff --git a/dist/css/photon.min.css b/dist/css/photon.min.css
diff --git a/dist/template-app/index.html b/dist/template-app/index.html
@@ -7,14 +7,28 @@
     <link rel="stylesheet" href="../css/photon.min.css">
 
     <!-- Javascript -->
+    <script src="js/photon.js" charset="utf-8"></script>
     <script src="js/menu.js" charset="utf-8"></script>
+    <script src="js/app.js" charset="utf-8"></script>
   </head>
   <body>
     <div class="window">
 
       <!-- .toolbar-header sits at the top of your app -->
       <header class="toolbar toolbar-header">
         <h1 class="title">Photon</h1>
+
+        <ul class="action-group">
+          <li class="action-button" action-maximize-window>
+            <span class="icon icon-plus"></span>
+          </li>
+          <li class="action-button" action-minimize-window>
+            <span class="icon icon-minus"></span>
+          </li>
+          <li class="action-button" action-close-window>
+            <span class="icon icon-cancel"></span>
+          </li>
+        </ul>
       </header>
 
       <!-- Your app's content goes inside .window-content -->

diff --git a/dist/template-app/js/app.js b/dist/template-app/js/app.js
@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  photon.start(document);
+
+})
diff --git a/dist/template-app/js/photon.js b/dist/template-app/js/photon.js
@@ -0,0 +1,49 @@
+var photon = (function(){
+
+    var photon = {};
+
+    photon.start = function(section){
+
+        section = section || document;
+
+        // helper to iterate over selector
+        var _foreachElement = function(selector, callback){
+            var nodeList = section.querySelectorAll(selector);
+            Array.prototype.forEach.call(nodeList, function (item) {
+                callback(item);
+            })
+        };
+
+        var remoteWindow = require('remote').getCurrentWindow();
+
+        // Close window
+        _foreachElement("[action-close-window]", function(item){
+            item.addEventListener("click", function(){
+                remoteWindow.close();
+            });
+        });
+
+        // Minimize window
+        _foreachElement("[action-minimize-window]", function(item){
+            item.addEventListener("click", function(){
+                remoteWindow.minimize();
+            });
+        });
+
+        // (un)Maximize window
+        _foreachElement("[action-maximize-window]", function(item){
+            item.addEventListener("click", function(){
+                if (remoteWindow.isMaximized()) {
+                    remoteWindow.unmaximize();
+                } else {
+                    remoteWindow.maximize();
+                }
+            });
+        });
+
+
+    };
+
+    return photon;
+
+})();
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "grunt-contrib-copy": "~0.8.0",
     "grunt-contrib-cssmin": "~0.13.0",
     "grunt-contrib-sass": "~0.9.2",
+    "grunt-contrib-uglify": "~0.9.2",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-html": "~5.0.0",
     "grunt-jekyll": "~0.4.2",

diff --git a/sass/bars.scss b/sass/bars.scss
@@ -11,9 +11,25 @@
 
 .toolbar-header {
   border-bottom: 1px solid $dark-border-color;
+  display: inline-flex;
 
   .title {
     margin-top: 1px;
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  .action-group{
+    list-style: none;
+    margin: 0 0 0 auto;
+    padding: 1px 5px 0 2px;
+
+    .action-button{
+      display: inline-block;
+      padding: 0 5px;
+      -webkit-app-region: no-drag;
+    }
+
   }
 }