From 3efa1a15e2cef39e53868adbe2de73b53603ab75 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Tue, 1 Nov 2016 22:34:11 -0400
Subject: [PATCH 1/3] Added calendar creating work for new UI

---
 hourglass/client/main/main.css  | 75 +++------------------------
 hourglass/client/main/main.html | 17 ++++--
 hourglass/client/main/main.js   | 92 ++++++++++++++-------------------
 3 files changed, 59 insertions(+), 125 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 32d5db0..9bef164 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -391,6 +391,14 @@ a
 	display: table-cell;
 }
 
+.sidebarDesc {
+	font-size: 1.8vh;
+	margin-left: 5%;
+	width: 90%;
+
+	text-align: center;
+}
+
 #classesMode {
 	height: 94vh;
 
@@ -1053,65 +1061,6 @@ textarea.clickModify {
 	display: inline-block;
 }
 
-#calCreWork {
-	margin-left: 0 !important;
-	color: #fff;
-
-	-webkit-animation: neonglow 1.5s ease-in-out infinite alternate;
-    -moz-animation: neonglow 1.5s ease-in-out infinite alternate;
-  	animation: neonglow 1.5s ease-in-out infinite alternate;
-}
-
-@-webkit-keyframes neonglow {
-  from {
-    text-shadow: 
-    0 0 10px #fff, 
-    0 0 20px #fff, 
-    0 0 30px #fff, 
-    0 0 40px #228DFF, 
-    0 0 70px #228DFF, 
-    0 0 80px #228DFF, 
-    0 0 100px #228DFF, 
-    0 0 150px #228DFF;
-  }
-  to {
-    text-shadow: 
-    0 0 5px #fff, 
-    0 0 10px #fff, 
-    0 0 15px #fff, 
-    0 0 20px #228DFF, 
-    0 0 35px #228DFF, 
-    0 0 40px #228DFF, 
-    0 0 50px #228DFF, 
-    0 0 75px #228DFF;
-  }
-}
-
-@keyframes neonglow {
-	from {
-    text-shadow: 
-    0 0 10px #fff, 
-    0 0 20px #fff, 
-    0 0 30px #fff, 
-    0 0 40px #228DFF, 
-    0 0 70px #228DFF, 
-    0 0 80px #228DFF, 
-    0 0 100px #228DFF, 
-    0 0 150px #228DFF;
-  }
-  to {
-    text-shadow: 
-    0 0 5px #fff, 
-    0 0 10px #fff, 
-    0 0 15px #fff, 
-    0 0 20px #228DFF, 
-    0 0 35px #228DFF, 
-    0 0 40px #228DFF, 
-    0 0 50px #228DFF, 
-    0 0 75px #228DFF;
-  }
-}
-
 .fc-past {
 	background-color: rgba(0,0,0,0.2);
 }
@@ -1416,14 +1365,6 @@ textarea.clickModify {
 	display: inline-block;
 }
 
-#requestDesc {
-	font-size: 1.8vh;
-	margin-left: 5%;
-	width: 90%;
-
-	text-align: center;
-}
-
 #requestArea {
 	font-size: 1.8vh;
 	width: 85%;
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index 6672e99..6715be3 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -24,6 +24,9 @@
                     {{#if sidebarStatus 'requests'}}
                         {{> sidebarRequestPlate}}
                     {{/if}}
+                    {{#if sidebarStatus 'create'}}
+                        {{> sidebarCreatePlate}}
+                    {{/if}}
                 </div>
             </div>
         </div>
@@ -254,7 +257,7 @@
 
 <template name="sidebarRequestPlate">
     <h3 class="sectionTitle option">Requests</h3>
-    <p id="requestDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
+    <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
     <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
     <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
     <span style="opacity:0">.</span>
@@ -265,11 +268,17 @@
     </div>
 </template>
 
+<template name="sidebarCreatePlate">
+    <h3 class="sectionTitle option">Classes</h3>
+    <p class="sidebarDesc">Pick a class to create work for.</p>
+    {{#each myClasses}}
+        {{> sidebarClasses}}
+    {{/each}}
+</template>
+
 <template name="sidebarClasses">
     <div class="sideClass" classid="{{_id}}">
-        {{#unless calCreWork}}
-            <div class="status" style="background-color:{{selected}}"></div>
-        {{/unless}}
+        <div class="status" style="background-color:{{selected}}"></div>
         <span class="sideClassName">{{name}}</span>
         <span class="sideClassHour">{{hour}}</span>
     </div>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 0f4cf20..48756cb 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -42,8 +42,6 @@ Session.set("requests", false); // Status of requests.
 Session.set("sidebarMode", ""); // Status of sidebars.
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWork",null); // Current stored work.
-Session.set("noclass", null); // If user does not have classes.
-Session.set("calCreWork", null); // If user is creating a work from calendar.
 Session.set("classDisp", []); // Stores current filter for classes.
 Session.set("typeFilter", []); // Stores type filters for classes.
 Session.set("typeFilterHover", null); // Stores current hovered type filter.
@@ -51,6 +49,7 @@ Session.set("classDispHover", null); // Stores current hovered class filter.
 Session.set("refetchEvents", null); // Stores whether to get calendar events again.
 Session.set("restrictText", {}); // Stores text for comment character restriction.
 
+// On render actions
 
 Template.login.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
@@ -91,6 +90,18 @@ Template.sidebarMenuPlate.rendered = function() {
 Template.sidebarMenuPlate.helpers({
     modeStatus(status) { // Color status of display modes.
         return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
+    },
+    types() {
+        var types = Object.keys(workColors);
+        var array = [];
+        for (var i = 0; i < types.length; i++) {
+            array.push({
+                "type": types[i],
+                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
+                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
+            });
+        }
+        return array;
     }
 });
 
@@ -102,6 +113,12 @@ Template.sidebarRequestPlate.rendered = function() {
     $(".menuWrapper").slideDown(300);
 }
 
+Template.sidebarCreatePlate.rendered = function() {
+    $(".menuWrapper").slideDown(300);
+}
+
+// Global Helpers
+
 Template.registerHelper('adminPage', () => {
     return window.location.pathname.includes("/");
 });
@@ -132,7 +149,6 @@ Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay co
 
 Template.registerHelper('myClasses', () => { // Gets all classes and respective works.
     if (Session.get("user").classes.length === 0) { // Null checking.
-        Session.set("noclass", true); // Makes sure to display nothing.
         return [];
     } else {
         var array = [];
@@ -245,7 +261,6 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
                 return Date.parse(a.realDate) - Date.parse(b.realDate);
             });
         }
-        Session.set("noclass", false);
         Session.set("calendarClasses", array);
         Session.set("refetchEvents", refetch);
         return array;
@@ -298,6 +313,8 @@ Template.registerHelper('work', (value) => {// Returns the specified work value.
     }
 });
 
+// Main template helpers and events
+
 Template.main.helpers({
     /*themeName() {
      var vals = _.values(themeColors);
@@ -410,12 +427,12 @@ Template.main.helpers({
                 this.style.boxShadow = "";
             },
             dayClick: function(date, jsEvent, view) { // On-click for each day.
-                if (jsEvent.target.className.includes("fc-past") || Session.get("noclass")) return;
-                Session.set("calCreWork", true);
-                calWorkDate = date.format();
-                calWorkOpen = true;
+                if (jsEvent.target.className.includes("fc-past")) return;
+                var realDate = date.format();
+                realDate = new Date(realDate[0], parseInt(realDate[1]) - 1, realDate[2], 11, 59, 59);
                 Session.set("newWork", true);
-                Session.set("sidebar", "menuContainer");
+                Session.set("currentWork", {dueDate: realDate});
+                if(!Session.equals("sidebarMode", "create")) toggleToSidebar("create");
             }
         };
     },
@@ -423,9 +440,6 @@ Template.main.helpers({
         var width = window.innerWidth * 0.85;
         return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
     },
-    calCreWork() { // Display instructions for creating a work.
-        return Session.get("calCreWork");
-    },
     filterOn() {
         return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
     },
@@ -450,18 +464,6 @@ Template.main.helpers({
     newWork() { // If user is creating a new work.
         return Session.get("newWork");
     },
-    types() {
-        var types = Object.keys(workColors);
-        var array = [];
-        for (var i = 0; i < types.length; i++) {
-            array.push({
-                "type": types[i],
-                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
-                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
-            });
-        }
-        return array;
-    },
     inRole() { // Checks correct permissions.
         if(Session.equals("currentWork",null)) return;
         var thisWork = work.findOne({
@@ -499,10 +501,7 @@ Template.main.events({
         if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
             if (!(e.includes("optionHolder") || e.includes("optionText"))) {
                 if(document.getElementById(modifyingInput).className.includes("dropdown")) {
-                    $(".optionHolder").fadeOut(100);
-                    optionOpen = [null,false];
-
-                    $(".selectedOption").removeClass("selectedOption");
+                    toggleOptionMenu(false, modifyingInput);
                 } else {
                     closeInput(modifyingInput);
                 }
@@ -515,14 +514,10 @@ Template.main.events({
             !e.includes("fa-question") &&
             !document.getElementById("menuContainer").contains(event.target) &&
             !document.getElementById("menuBar").contains(event.target)) {
-            if (Session.get("calCreWork")) {
-                if (!calWorkOpen) {
-                    Session.set("calCreWork", false);
+                if(!(e.includes("fc-day") && !e.includes("fc-past"))) {
+                    toggleToSidebar(false);
                 }
-                calWorkOpen = false;
-            } else {
-                toggleToSidebar(false);
-            }
+                
         }
 
         if (e === "overlay") { // Overlay closing.
@@ -584,7 +579,6 @@ Template.main.events({
         Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
         toggleToSidebar(false);
         Session.set("sidebarMode", [null,null]);
-        Session.set("calCreWork", null);
     },
     'click .calendar' () { // Click calendar mode button.
         if (Session.equals("mode", "calendar")) return;
@@ -597,7 +591,6 @@ Template.main.events({
         Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
         toggleToSidebar(false);
         Session.set("sidebarMode", [null,null]);
-        Session.set("calCreWork", null);
     },
     'click .creWork' (event) { // Cick add work button.
         var attr;
@@ -658,7 +651,7 @@ Template.main.events({
                 $("#requestSubmit span:nth-child(2)").fadeOut(200, function() {
                     $("#requestSubmit span:first-child").fadeIn(200);
                 })
-            }, 750);
+            }, 1250);
         });
     },
     'click #exportDiv' (event) {
@@ -771,10 +764,7 @@ Template.main.events({
             Session.set("currentWork", newSetting);
             serverData = Session.get("currentWork");
 
-            $("#" + modifyingInput).next()
-            .fadeOut(100);
-            optionOpen = [null,false];
-            $(".selectedOption").removeClass("selectedOption");
+            toggleOptionMenu(false, modifyingInput);
             if(Session.get("newWork")) return;
             if(checkMissing()) return;
             sendData("editWork");
@@ -791,9 +781,7 @@ Template.main.events({
             sendData("editProfile");
         }
 
-        $("#" + modifyingInput).next()
-        .fadeOut(100);
-        optionOpen = [null,false];
+        toggleOptionMenu(false, modifyingInput);
 
         $(".selectedOption").removeClass("selectedOption");
     },
@@ -857,14 +845,10 @@ Template.main.events({
         while (div.getAttribute("classid") === null) div = div.parentNode;
         var classid = div.getAttribute("classid");
 
-        if (Session.get("calCreWork")) { // If creating work from calendar.
-            Session.get("calCreWork", null);
-            Session.set("sidebar", null);
-
-            var date = calWorkDate.split("-");
-            date = new Date(date[0], parseInt(date[1]) - 1, date[2], 11, 59, 59);
-            Session.set("newWork", true);
-            Session.set("currentWork", {class: classid, dueDate: date});
+        if (Session.equals("sidebarMode","create")) { // If creating work from calendar.
+            var newSetting = Session.get("currentWork");
+            newSetting.class = classid;
+            Session.set("currentWork", newSetting);
             openDivFade(document.getElementsByClassName("overlay")[0]);
         } else { // Normal clicking turns on filter.
             var array = Session.get("classDisp");
@@ -934,7 +918,7 @@ Template.main.events({
 // Other Functions
 
 function toggleToSidebar(sidebar) {
-    if(Session.get("sidebarMode") === sidebar || !sidebar) {
+    if(Session.equals("sidebarMode", sidebar) || !sidebar) {
         $("#menuContainer").hide("slide",  {direction: "left"}, 250);
         $("#divCenter").stop().animate({left: '6vh'}, 250, function() {
             Session.set("sidebarMode", "");

From 88beb191c9f7251445c44e0626536ef7a9a1eaa0 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Tue, 1 Nov 2016 23:07:09 -0400
Subject: [PATCH 2/3] Slight reorganization

---
 hourglass/client/main/main.css    |  17 +++--
 hourglass/client/main/main.html   | 121 -----------------------------
 hourglass/client/main/main.js     |  82 +-------------------
 hourglass/client/menus/menus.html | 123 ++++++++++++++++++++++++++++++
 hourglass/client/menus/menus.js   |  57 ++++++++++++++
 hourglass/lib/constants.js        |   8 ++
 hourglass/lib/router.js           |   1 -
 7 files changed, 202 insertions(+), 207 deletions(-)
 create mode 100644 hourglass/client/menus/menus.html
 create mode 100644 hourglass/client/menus/menus.js

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 9bef164..6bfb37f 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -411,7 +411,7 @@ a
 	width: 100%;
 }
 
-#filterHead, #filterWrapper .sectionTitle {
+.openable {
 	font-weight: 200;
 	padding: 0;
 
@@ -423,24 +423,31 @@ a
 	transition: background-color 0.4s ease; 
 }
 
-#filterHead:hover, #filterWrapper .sectionTitle:hover {
+.openable:hover {
 	background-color: rgba(255,255,255,0.2);
 }
 
-#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
+.openable h3:first-child {
 	font-weight: 200;
 	padding: 5%;
 	display: inline-block;
 	pointer-events: none;
 }
 
-#filterHead .fa, #filterWrapper .sectionTitle .fa {
+.openable .fa {
 	padding: 5%;
 	float: right;
 	display: inline-block;
 	pointer-events: none;
 }
 
+#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
+	font-weight: 200;
+	padding: 5%;
+	display: inline-block;
+	pointer-events: none;
+}
+
 #disableFilter {
 	font-weight: 200;
 	font-size: 90%;
@@ -497,7 +504,7 @@ a
 	cursor: pointer;
 }
 
-.sectionTitle.option {
+.sectionTitle.downOffset {
 	margin-top: 6vh;
 }
 
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index 6715be3..e445b60 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -155,127 +155,6 @@
     </div>
 </template>
 
-<template name="sidebarMenuPlate">
-    <div id="modes">
-        <h3 class="sectionTitle">Main</h3>
-        <div class="mode classes">
-            <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
-            <i class="fa fa-university" aria-hidden="true"></i>
-            <h4>Classes</h4>
-        </div>
-        <div class="mode calendar">
-            <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
-            <i class="fa fa-calendar" aria-hidden="true"></i>
-            <h4>Calendar</h4>
-        </div>
-        <div class="mode manageClass" onclick="window.location='/profile'">
-            <div class="status"></div>
-            <i class="fa fa-tasks" aria-hidden="true"></i>
-            <h4>Manage Classes</h4>
-        </div>
-    </div>
-    <div id="filters">
-        <div id="filterHead" class="sectionTitle">
-            <h3>Filters</h3>
-            {{#if filterOn}}
-                <h3 id="disableFilter">Disable All</h3>
-            {{/if}}
-            <i class="fa fa-angle-down" aria-hidden="true"></i>
-        </div>
-        <div id="filterWrapper">
-            <div id="typeFilterWrapper" class="sectionTitle">
-                <h3>By Type</h3>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            <div id="classFilterHolder">
-                {{#each types}}
-                    {{> sideTypeFilter}}
-                {{/each}}
-            </div>
-            <div id="classFilterWrapper" class="sectionTitle">
-                    <h3>By Class</h3>
-                    <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div> 
-            <div id="classListHolder">    
-                {{#each myClasses}}
-                    {{> sidebarClasses}}
-                {{/each}}
-            </div>
-        </div>
-    </div>
-    <div id="exportDiv" class="mode">
-        <i class="fa fa-download" aria-hidden="true"></i>
-        <h4>Export</h4>
-    </div>
-</template>
-
-<template name="sidebarOptionPlate">
-    <h3 class="sectionTitle option">Preferences</h3>
-    <div id="prefCont">
-        <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Theme:</h3>
-            <div id="theme" class="clickModify dropdown" tabindex="1">
-                <span>{{pref 'theme'}}</span>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            {{> selectOptionMenu optionName="theme"}}
-        </div>
-        <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Default Mode:</h3>
-            <div id="mode" class="clickModify dropdown" tabindex="2">
-                <span>{{pref 'mode'}}</span>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            {{> selectOptionMenu optionName="mode"}}
-        </div>
-        <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Homework:</h3>
-            <div id="timeHide" class="clickModify dropdown" tabindex="3">
-                <span>{{pref 'timeHide'}}</span>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            {{> selectOptionMenu optionName="timeHide"}}
-        </div>
-        <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Done:</h3>
-            <div id="done" class="clickModify dropdown" tabindex="4">
-                <span>{{pref 'done'}}</span>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            {{> selectOptionMenu optionName="done"}}
-        </div>
-        <div class="prefWrapper">
-            <h3 class="sectionTitle prefText">Hide Reported:</h3>
-            <div id="hideReport" class="clickModify dropdown" tabindex="5">
-                <span>{{pref 'hideReport'}}</span>
-                <i class="fa fa-angle-down" aria-hidden="true"></i>
-            </div>
-            {{> selectOptionMenu optionName="hideReport"}}
-        </div>
-    </div>
-</template>
-
-<template name="sidebarRequestPlate">
-    <h3 class="sectionTitle option">Requests</h3>
-    <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
-    <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
-    <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
-    <span style="opacity:0">.</span>
-    <div id="requestSubmit">
-        <span>Send</span>
-        <span style="display:none">Request sent!</span>
-        <i class="fa fa-paper-plane" aria-hidden="true"></i>
-    </div>
-</template>
-
-<template name="sidebarCreatePlate">
-    <h3 class="sectionTitle option">Classes</h3>
-    <p class="sidebarDesc">Pick a class to create work for.</p>
-    {{#each myClasses}}
-        {{> sidebarClasses}}
-    {{/each}}
-</template>
-
 <template name="sidebarClasses">
     <div class="sideClass" classid="{{_id}}">
         <div class="status" style="background-color:{{selected}}"></div>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 48756cb..54c4f2b 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -10,24 +10,8 @@ var calWorkOpen = null;
 var calWorkDate = null;
 modifyingInput = null;
 var clickDisabled = false;
-var filterOpen =  [false,true,true];
-var sidebarMode = [null,null];
 var optionOpen = false;
 
-
-var openValues = {
-    "requests": "-235px"
-};
-
-// Sets colors for different assignment statuses
-var workColors = {
-    "normal": "#2E4F74",
-    "quiz": "#409333",
-    "test": "#AD3C44",
-    "project": "#D8831A",
-    "other": "#852E6D"
-};
-
 var defaultWork = {
     name: "Name | Click here to edit...",
     dueDate: "Click here to edit...",
@@ -83,40 +67,6 @@ Template.selectOptionMenu.rendered = function() {
     );   
 }
 
-Template.sidebarMenuPlate.rendered = function() {
-    $(".menuWrapper").slideDown(300);
-}
-
-Template.sidebarMenuPlate.helpers({
-    modeStatus(status) { // Color status of display modes.
-        return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
-    },
-    types() {
-        var types = Object.keys(workColors);
-        var array = [];
-        for (var i = 0; i < types.length; i++) {
-            array.push({
-                "type": types[i],
-                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
-                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
-            });
-        }
-        return array;
-    }
-});
-
-Template.sidebarOptionPlate.rendered = function() {
-    $(".menuWrapper").slideDown(300);
-}
-
-Template.sidebarRequestPlate.rendered = function() {
-    $(".menuWrapper").slideDown(300);
-}
-
-Template.sidebarCreatePlate.rendered = function() {
-    $(".menuWrapper").slideDown(300);
-}
-
 // Global Helpers
 
 Template.registerHelper('adminPage', () => {
@@ -338,7 +288,7 @@ Template.main.helpers({
         return Session.get("user").name;
     },
     defaultMode() { //Loads the default display mode for user.
-        if (load) Session.set("mode", Session.get("user").preferences.mode);
+        if (load) 
         load = false;
         return;
     },
@@ -536,37 +486,9 @@ Template.main.events({
     'click .fa-cog' (event) { // Click settings button.
         toggleToSidebar("option");
     },
-    'click .fa-question' (event) {
+    'click .fa-question' (event) { // Click requests button.
         toggleToSidebar("requests");
     },
-    'click #filterHead' (event) {
-        if(event.target.id === "disableFilter") return;
-        if(!filterOpen[0]) {
-            $("#filterWrapper").slideDown(300);
-        } else {
-            $("#filterWrapper").slideUp(300);
-        }
-        filterOpen[0] = !filterOpen[0];
-    },
-    'click #typeFilterWrapper' () {
-        if(!filterOpen[1]) {
-            $("#classFilterHolder").slideDown(300);
-        } else {
-            $("#classFilterHolder").slideUp(300);
-        }
-        filterOpen[1] = !filterOpen[1];
-    },
-    'click #classFilterWrapper' () {
-        if(!filterOpen[2]) {
-            $("#classListHolder").slideDown(300);
-        } else {
-            $("#classListHolder").slideUp(300);
-        }
-        filterOpen[2] = !filterOpen[2];
-    },
-    'click #requests .fa-question' () {
-        Session.set("requests", !Session.get("requests"));
-    },
     'click .classes' () { // Click classes mode button.
         if (Session.equals("mode", "classes")) return;
         var modeHolder = document.getElementById("mainBody");
diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html
new file mode 100644
index 0000000..79a30e1
--- /dev/null
+++ b/hourglass/client/menus/menus.html
@@ -0,0 +1,123 @@
+<template name="sidebarMenuPlate">
+    <div id="modes">
+        <h3 class="sectionTitle">Main</h3>
+        <div class="mode classes">
+            <div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
+            <i class="fa fa-university" aria-hidden="true"></i>
+            <h4>Classes</h4>
+        </div>
+        <div class="mode calendar">
+            <div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
+            <i class="fa fa-calendar" aria-hidden="true"></i>
+            <h4>Calendar</h4>
+        </div>
+        <div class="mode manageClass" onclick="window.location='/profile'">
+            <div class="status"></div>
+            <i class="fa fa-tasks" aria-hidden="true"></i>
+            <h4>Manage Classes</h4>
+        </div>
+    </div>
+    <div id="filters">
+        <div id="filterHead" class="sectionTitle openable">
+            <h3>Filters</h3>
+            {{#if filterOn}}
+                <h3 id="disableFilter">Disable All</h3>
+            {{/if}}
+            <i class="fa fa-angle-down" aria-hidden="true"></i>
+        </div>
+        <div id="filterWrapper">
+            <div id="typeFilterWrapper" class="sectionTitle openable">
+                <h3>By Type</h3>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            <div id="classFilterHolder">
+                {{#each types}}
+                    {{> sideTypeFilter}}
+                {{/each}}
+            </div>
+            <div id="classFilterWrapper" class="sectionTitle openable">
+                    <h3>By Class</h3>
+                    <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div> 
+            <div id="classListHolder">    
+                {{#each myClasses}}
+                    {{> sidebarClasses}}
+                {{/each}}
+            </div>
+        </div>
+    </div>
+    <div id="exportDiv" class="mode">
+        <i class="fa fa-download" aria-hidden="true"></i>
+        <h4>Export</h4>
+    </div>
+</template>
+
+<template name="sidebarOptionPlate">
+    <div id="preferencesWrapper" class="sectionTitle openable downOffset">
+        <h3>Preferences</h3>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
+    </div>
+    <div id="prefCont">
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Theme:</h3>
+            <div id="theme" class="clickModify dropdown" tabindex="1">
+                <span>{{pref 'theme'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="theme"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Default Mode:</h3>
+            <div id="mode" class="clickModify dropdown" tabindex="2">
+                <span>{{pref 'mode'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="mode"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Homework:</h3>
+            <div id="timeHide" class="clickModify dropdown" tabindex="3">
+                <span>{{pref 'timeHide'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="timeHide"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Done:</h3>
+            <div id="done" class="clickModify dropdown" tabindex="4">
+                <span>{{pref 'done'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="done"}}
+        </div>
+        <div class="prefWrapper">
+            <h3 class="sectionTitle prefText">Hide Reported:</h3>
+            <div id="hideReport" class="clickModify dropdown" tabindex="5">
+                <span>{{pref 'hideReport'}}</span>
+                <i class="fa fa-angle-down" aria-hidden="true"></i>
+            </div>
+            {{> selectOptionMenu optionName="hideReport"}}
+        </div>
+    </div>
+</template>
+
+<template name="sidebarRequestPlate">
+    <h3 class="sectionTitle downOffset">Requests</h3>
+    <p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
+    <textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
+    <span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
+    <span style="opacity:0">.</span>
+    <div id="requestSubmit">
+        <span>Send</span>
+        <span style="display:none">Request sent!</span>
+        <i class="fa fa-paper-plane" aria-hidden="true"></i>
+    </div>
+</template>
+
+<template name="sidebarCreatePlate">
+    <h3 class="sectionTitle downOffset">Classes</h3>
+    <p class="sidebarDesc">Pick a class to create work for.</p>
+    {{#each myClasses}}
+        {{> sidebarClasses}}
+    {{/each}}
+</template>
\ No newline at end of file
diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js
new file mode 100644
index 0000000..0ce7261
--- /dev/null
+++ b/hourglass/client/menus/menus.js
@@ -0,0 +1,57 @@
+var filterOpen =  [false,true,true];
+var sidebarMode = [null,null];
+
+Template.sidebarMenuPlate.rendered = function(){$(".menuWrapper").slideDown(300);}
+Template.sidebarOptionPlate.rendered = function(){$(".menuWrapper").slideDown(300);}
+Template.sidebarRequestPlate.rendered = function(){$(".menuWrapper").slideDown(300);}
+Template.sidebarCreatePlate.rendered = function(){$(".menuWrapper").slideDown(300);}
+
+Template.sidebarMenuPlate.helpers({
+    modeStatus(status) { // Color status of display modes.
+        return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
+    },
+    types() {
+        var types = Object.keys(workColors);
+        var array = [];
+        for (var i = 0; i < types.length; i++) {
+            array.push({
+                "type": types[i],
+                "typeName": types[i][0].toUpperCase() + types[i].slice(1),
+                "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
+            });
+        }
+        return array;
+    }
+});
+
+Template.sidebarMenuPlate.events({
+    'click #filterHead' (event) {
+        if(event.target.id === "disableFilter") return;
+        if(!filterOpen[0]) {
+            $("#filterWrapper").slideDown(300);
+        } else {
+            $("#filterWrapper").slideUp(300);
+        }
+        filterOpen[0] = !filterOpen[0];
+    },
+    'click #typeFilterWrapper' () {
+        if(!filterOpen[1]) {
+            $("#classFilterHolder").slideDown(300);
+        } else {
+            $("#classFilterHolder").slideUp(300);
+        }
+        filterOpen[1] = !filterOpen[1];
+    },
+    'click #classFilterWrapper' () {
+        if(!filterOpen[2]) {
+            $("#classListHolder").slideDown(300);
+        } else {
+            $("#classListHolder").slideUp(300);
+        }
+        filterOpen[2] = !filterOpen[2];
+    }
+});
+
+Template.sidebarOptionPlate.events({
+
+});
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index be7ec48..79ecb6e 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -67,6 +67,14 @@ themeColors =  {
     }
 };
 
+workColors = {
+    "normal": "#2E4F74",
+    "quiz": "#409333",
+    "test": "#AD3C44",
+    "project": "#D8831A",
+    "other": "#852E6D"
+};
+
 options = {
     "theme": [
         {"val": "lux", "alias": "Lux"},
diff --git a/hourglass/lib/router.js b/hourglass/lib/router.js
index 1365662..ebaf3b2 100644
--- a/hourglass/lib/router.js
+++ b/hourglass/lib/router.js
@@ -14,7 +14,6 @@ Router.route('/', {
     },
     action: function() {
         if(_.contains([null, undefined, ""], Meteor.user().profile.school)) {
-            Session.set("user", Meteor.user().profile);
             this.redirect('/login');
         } else {
             Session.set("user", Meteor.user().profile);

From 043a453b2d2bb8e79d90d8d4049c07d6b490e45d Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Wed, 2 Nov 2016 19:18:36 -0400
Subject: [PATCH 3/3] Minor changes, small fixes

---
 hourglass/client/main/main.html |  2 +-
 hourglass/client/main/main.js   | 43 ++++++++++++---------------------
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index e445b60..e3eb7ca 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -31,7 +31,7 @@
             </div>
         </div>
         <div id="divCenter">
-            <header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
+            <header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{refetchEvents}}">
                 <h1>Hourglass</h1><h2>{{schoolName}}</h2>
                 <div id="dropdown">
                     <img src="{{avatar}}">
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 54c4f2b..53f9a4e 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -39,6 +39,10 @@ Template.login.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
 };
 
+Template.main.created = function() {
+    Session.set("mode", Session.get("user").preferences.mode); 
+}
+
 Template.main.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
     setTimeout(startDragula, 300);
@@ -50,10 +54,12 @@ Template.main.rendered = function() {
         railColor: '#222',
         railOpacity: 0.1,
     });*/
+    document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 };
 
 Template.profile.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
+    document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 };
 
 Template.selectOptionMenu.rendered = function() {
@@ -83,11 +89,6 @@ Template.registerHelper('divColor', (div) => { // Reactive color changing based
     return Session.get("user").preferences.theme[div];
 });
 
-Template.registerHelper('textColor', () => { // Reactive color for text.
-    document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
-    return;
-});
-
 Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
     var dim = [window.innerWidth * 0.25, window.innerHeight * 0.2];
     var width = "width:" + dim[0].toString() + "px;";
@@ -287,11 +288,6 @@ Template.main.helpers({
     username() { // Returns user name.
         return Session.get("user").name;
     },
-    defaultMode() { //Loads the default display mode for user.
-        if (load) 
-        load = false;
-        return;
-    },
     bgSrc() { // Returns background.
         return "Backgrounds/" + Session.get("user").preferences.theme.background;
     },
@@ -491,28 +487,14 @@ Template.main.events({
     },
     'click .classes' () { // Click classes mode button.
         if (Session.equals("mode", "classes")) return;
-        var modeHolder = document.getElementById("mainBody");
-        closeDivFade(modeHolder);
-        setTimeout(function() {
-            Session.set("mode", "classes");
-            openDivFade(modeHolder);
-        }, 300);
+        toggleToMode("classes")
         setTimeout(startDragula, 500);
-        Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
         toggleToSidebar(false);
-        Session.set("sidebarMode", [null,null]);
     },
     'click .calendar' () { // Click calendar mode button.
-        if (Session.equals("mode", "calendar")) return;
-        var modeHolder = document.getElementById("mainBody");
-        closeDivFade(modeHolder);
-        setTimeout(function() {
-            Session.set("mode", "calendar");
-            openDivFade(modeHolder);
-        }, 300);
-        Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
+         if (Session.equals("mode", "calendar")) return;
+        toggleToMode("calendar");
         toggleToSidebar(false);
-        Session.set("sidebarMode", [null,null]);
     },
     'click .creWork' (event) { // Cick add work button.
         var attr;
@@ -873,6 +855,13 @@ function toggleOptionMenu(toggle, menu) {
     }
 }
 
+function toggleToMode(mode) {
+    $("#mainBody").fadeOut(250, function() {
+        Session.set("mode",mode);
+        $("#mainBody").fadeIn(250);
+    });
+}
+
 function openDivFade(div) {
     div.style.display = "block";
     div.style.opacity = "0";