Added Template Selection Functionality

3 files changed, 68 insertions, 2 deletions

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