Added Template Selection Functionality

6 files changed, 78 insertions, 3 deletions

diff --git a/main.js b/main.js
index 40e1277..dada423 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,10 @@ function createWindow () {
     frame: false,
     // transparent: true,
     vibrancy: 'dark',
-    titleBarStyle: 'hidden'
+    titleBarStyle: 'hidden',
+    webPreferences: {
+      nodeIntegration: true
+    }
   })
 
   // and load the index.html of the app.
diff --git a/package-lock.json b/package-lock.json
index 9559e56..021615c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1370,6 +1370,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-yaml": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
diff --git a/package.json b/package.json
index f731bed..53e508e 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   "author": "Kumar Priyansh <[email protected]>",
   "license": "Apache-2.0",
   "dependencies": {
+    "jquery": "^3.4.1",
     "local-storage": "^2.0.0"
   },
   "devDependencies": {
diff --git a/src/index.html b/src/index.html
index c98dd07..f30f0a8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -42,9 +42,28 @@
                         </span>
                     </nav>
                 </div>
-                <div class="pane">...</div>
+                <div class="pane parentPane whiteText">
+                    <div class="padded-more">
+                        <div id="blank" class="template">
+                            <div class="templateIcon"></div>
+                            <p class="templateName"><span>Blank</span></p>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+        <footer class="toolbar toolbar-footer">
+            <div class="toolbar-actions">
+              <button class="btn btn-default">
+                Open Recent Document
+              </button>
+              <button class="btn btn-primary pull-right">
+                Open
+              </button>
+            </div>
+        </footer>
     </div>
+    <script>window.$ = window.jQuery = require('jquery');</script>
+    <script src="scripts/starterWindow.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/scripts/starterWindow.js b/src/scripts/starterWindow.js
index e69de29..03afd8b 100644
--- a/src/scripts/starterWindow.js
+++ b/src/scripts/starterWindow.js
@@ -0,0 +1,20 @@
+$(document).ready(function(){
+    $('.nav-group').on('click', 'span', function() {
+        $('.nav-group span.active').removeClass('active');
+        $(this).addClass('active');
+    });
+    $('.templateIcon').click(function(e){
+        $('.template .templateIcon').removeClass('clicked');
+        $('.template .templateName span').removeClass('clickedText');
+        $(this).addClass('clicked');
+        var parentId = ($(this).parent().attr('id'));
+        $('#'+parentId + ' .templateName span').addClass('clickedText')
+        e.stopPropagation()
+    })
+    $(document).on("click", function(e) {
+        if ($(e.target).is(".templateIcon, .templateName span") === false) {
+            $('.template .templateIcon').removeClass('clicked');
+            $('.template .templateName span').removeClass('clickedText');
+        }
+    });
+})
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 08e701c..d581c01 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -10,7 +10,7 @@
 }
 .pane {
     border-left: none !important;
-    background-color: #fff;
+    background-color: #333333;
 }
 .nav-group-item {
     padding: 10px 10px !important;
@@ -18,4 +18,31 @@
 }
 .nav-group-item.active {
     background-color: #156CD5 !important;
+}
+.whiteText {
+    color: white;
+}
+.template {
+    display: inline-block;
+}
+.templateIcon {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 105px;
+    height: 148.5px;
+    background-color: #fff;
+}
+.templateName {
+    text-align: center;
+}
+.templateName span {
+    padding: 3px 6px;
+    border-radius: 3px;
+}
+.clickedText {
+    background-color: #156CD5;
+}
+.clicked {
+    outline: solid 3px #156CD5;
 }
\ No newline at end of file