Added preferences, and dark theme

hourglass/client/main/main.css

@@ -36,6 +36,11 @@ html {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+
+	-webkit-transition: color 0.5s ease  
+	-moz-transition: color 0.5s ease 
+	-ms-transition: color 0.5s ease
+	transition: color 0.5s ease 
 }
 
 ::-webkit-input-placeholder {
@@ -83,6 +88,11 @@ header {
 	display: inline-block;
 	position: relative;
 	z-index: 50;
+
+	-webkit-transition: background-color 0.5s ease;  
+	-moz-transition: background-color 0.5s ease; 
+	-ms-transition: background-color 0.5s ease;
+	transition: background-color 0.5s ease; 
 }
 
 h1,h2,h3,h4,h5 {
@@ -135,7 +145,6 @@ input, textarea {
 	padding-right: 0.8%;
 
 	float: left;
-	color: #333;
 
 	-webkit-transition: color 0.5s ease, background-color 0.5s ease;  
 	-moz-transition: color 0.5s ease, background-color 0.5s ease; 
@@ -151,7 +160,7 @@ input, textarea {
 }
 
 .fa-bars:hover, .fa-cog:hover {
-	background-color: #CCC;
+	background-color: rgba(0,0,0,0.2);
 }
 
 #loadBar, #progress {
@@ -205,39 +214,49 @@ input, textarea {
 
 #optionsContainer {
 	width: 12%;
+	padding: 1.5%;
 	right: 0;
 }
 
+#optionsContainer .change {
+	color: #000;
+}
+
+#optionsContainer h3 {
+	font-size: 175%;
+}
+
 .mode, .function {
 	width: 100%;
 	position: relative;
 	background-color: #849CAE;
 
-	-webkit-transition: background-color 0.5s ease;  
+	-webkit-transition: background-color 0.5s ease, box-shadow 0.5s ease;  
-	-moz-transition: background-color 0.5s ease; 
+	-moz-transition: background-color 0.5s ease, box-shadow 0.5s ease; 
-	-ms-transition: background-color 0.5s ease;
+	-ms-transition: background-color 0.5s ease, box-shadow 0.5s ease;
-	transition: background-color 0.5s ease; 
+	transition: background-color 0.5s ease, box-shadow 0.5s ease; 
 
 	cursor: pointer;
 }
 
 .mode:hover, .function:hover {
-	background-color: #A2B5C3;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
 }
 
 .mode:active, .function:active {
-	background-color: #EFF3F5;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.3);
 
-	-webkit-transition: background-color 0.2s ease;  
+	-webkit-transition: box-shadow 0.2s ease;  
-	-moz-transition: background-color 0.2s ease; 
+	-moz-transition: box-shadow 0.2s ease; 
-	-ms-transition: background-color 0.2s ease;
+	-ms-transition: box-shadow 0.2s ease;
-	transition: background-color 0.2s ease; 
+	transition: box-shadow 0.2s ease; 
 }
 
 .fa-university, .fa-calendar {
 	font-size: 175%;
 	width: 12%;
 	padding: 10%;
+
 	-webkit-filter: drop-shadow(2px 2px 5px #666);
 	filter: drop-shadow(2px 2px 5px #666);
 }
@@ -245,6 +264,7 @@ input, textarea {
 .fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap, .fa-exchange {
 	font-size: 130%;
 	padding: 5%;
+
 	-webkit-filter: drop-shadow(2px 2px 5px #666);
 	filter: drop-shadow(2px 2px 5px #666);
 }
@@ -412,7 +432,7 @@ input, textarea {
 	font-weight: 400;
 }
 
-.workTitle {
+.workTitle, .prefTitle {
 	font-size: 150%;
 	font-weight: 400;
 	margin: 0;
@@ -420,7 +440,11 @@ input, textarea {
 	margin-bottom: 1%;
 }
 
-.workOptions {
+.prefTitle {
+	margin-top: 5%;
+}
+
+.workOptions, .prefOptions {
 	box-shadow: 2px 2px 5px 3px #666;
 
 	position: absolute;
@@ -435,7 +459,7 @@ input, textarea {
 	transition: opacity 0.4s ease; 
 }
 
-.workOptionText {
+.workOptionText, .prefOptionText {
 	font-size: 150%;
 	min-width: 10%;
 	padding: 20px;
@@ -450,7 +474,7 @@ input, textarea {
 	transition: box-shadow 0.4s ease;
 }
 
-.workOptions p:hover {
+.workOptions p:hover, .prefOptions p:hover {
 	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
 }
 
@@ -722,3 +746,11 @@ input, textarea {
 .fc-day:not(.fc-past):not(.fc-other-month):hover {
 	background-color: rgba(0,0,0,0.1);
 }
+
+#prefCont {
+	padding: 5%;
+}
+
+.inputRadioPref {
+	margin-bottom: 6%;
+}

hourglass/client/main/main.html

@@ -5,7 +5,7 @@
 
 <template name="main">
     {{> loginButtons}}
-    <header style="background-color:{{divColor 'header'}}">
+    <header style="background-color:{{divColor 'header'}}{{textColor}}">
         <div id="aboveBar">
             <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
             <h1>Hourglass</h1><h2>{{schoolName}}</h2>
@@ -17,16 +17,18 @@
         </div>
     </header>
     <div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
-        <div class="mode classes">
+        <div id="modes">
+            <div class="mode classes" style="background-color:{{divColor 'funcButton'}}">
                 <i class="fa fa-university" aria-hidden="true"></i>
                 <h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
             </div>
-        <div class="mode calendar">
+            <div class="mode calendar" style="background-color:{{divColor 'funcButton'}}">
                 <i class="fa fa-calendar" aria-hidden="true"></i>
                 <h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
             </div>
+        </div>
         <div id="functions">
-            <div class="function manageClass" onclick="window.location='/profile'">
+            <div class="function manageClass" onclick="window.location='/profile'" style="background-color:{{divColor 'funcButton'}}">
                 <i class="fa fa-tasks" aria-hidden="true"></i>
                 <h4>Manage Classes</h4>
             </div>
@@ -41,6 +43,39 @@
         </div>
     </div>
     <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
+        <h3>Preferences</h3>
+        <div id="prefCont">
+            <div>
+                <div class="inputRadioPref">
+                <span class="prefTitle">Theme:</span><br>
+                <span class="change radio" opc="0" op="0" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
+                </div>
+                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
+                    <p class="prefOptionText">Light</p>
+                    <p class="prefOptionText">Dark</p>
+                </div>
+            </div>
+            <div>
+                <div class="inputRadioPref">
+                <span class="prefTitle">Default Mode:</span><br>
+                <span class="change radio" opc="1" op="1" re="readonly" id="prefMode">{{pref 'mode'}}</span>
+                </div>
+                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
+                    <p class="prefOptionText">Classes</p>
+                    <p class="prefOptionText">Calendar</p>
+                </div>
+            </div>
+<!--             <div>
+                <div  class="inputRadio">
+                <span class="prefTitle">Default Mode:</span>
+                <span class="change radio" opc="2" op="2" re="readonly" id="prefBg">{{pref 'background'}}</span>
+                </div>
+                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
+                    <p class="prefOptionText">White</p>
+                    <p class="prefOptionText">Black</p>
+                </div>
+            </div> -->
+        </div>
     </div>
     <img id="bg" src={{bgSrc}}>
     <div id="mainBody">

hourglass/client/main/main.js

@@ -14,12 +14,21 @@ var themeColors = {
         "background": "White.jpg",
         "header": "#EBEBEB",
         "sidebar": "#65839A",
+        "funcButton": "#849CAE",
         "statusIcons": "#33ADFF",
         "highlightText": "#FF1A1A",
-        "cards": "#FEFEFE"
+        "cards": "#FEFEFE",
+        "text": "#000"
     },
     "dark": {
-
+        "background": "Black.jpg",
+        "header": "#373A56",
+        "sidebar": "#35435D",
+        "funcButton": "#5d75A2",
+        "statusIcons": "#33ADFF",
+        "highlightText": "#FF1A1A",
+        "cards": "#050505",
+        "text": "#F6F6F6" 
     }
 };
 
@@ -31,9 +40,11 @@ var workColors = {
     "other": "#852E6D"
 };
 
-// Preference settings.
+var defaults = {
-Session.set("mode", null);
+    "theme":"light",
-Session.set("timeHide",null);
+    "mode":"classes"
+    //"timeHide":7
+}
 
 // Reactive variables.
 Session.set("calendarclasses", null);
@@ -50,7 +61,12 @@ Session.set("creCalWork",null);
 Session.set("calWorkDate",null);
 
 Template.registerHelper('divColor', (div) => {
-    return themeColors[Cookie.get("theme")][div];
+    return themeColors[Meteor.user().profile.preferences.theme][div];
+});
+
+Template.registerHelper("textColor", () => {
+    document.getElementsByTagName("html")[0].style.color = themeColors[Meteor.user().profile.preferences.theme].text;
+    return; 
 });
 
 Template.registerHelper('overlayDim', (part) => {
@@ -71,7 +87,7 @@ Template.registerHelper('myClasses', () => {
         var courses = Meteor.user().profile.classes;
         for(var i = 0; i < courses.length; i++) {
             found = classes.findOne({_id:courses[i]});
-            found.subscribers = found.subscribers.length;
+            found.subscribers = found.subscribers.length/17;
 
             if(found.admin === Meteor.userId()) found.box = " owned";
             found.mine = true;
@@ -94,7 +110,7 @@ Template.registerHelper('myClasses', () => {
         }
         Session.set("noclass",false);
         Session.set("calendarclasses", Meteor.user().profile.classes);
-        var hide = Session.get("timeHide");
+        var hide = Meteor.user().profile.preferences.timeHide;
         return array;
     }
 });
@@ -105,16 +121,16 @@ Template.main.helpers({
     },
     iconColor(icon) {
         if (Session.get("sidebar") === icon + "Container") {
-            return themeColors[Cookie.get("theme")].statusIcons;
+            return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
         } else if (Session.get("sidebar") === "both") {
-            return themeColors[Cookie.get("theme")].statusIcons;
+            return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
         } else {
             return;
         }
     },
     bgSrc() {
         var dim = [window.innerWidth, window.innerHeight];
-        var pic = "Backgrounds/"+themeColors[Cookie.get("theme")].background;
+        var pic = "Backgrounds/"+themeColors[Meteor.user().profile.preferences.theme].background;
         return pic;
     },
     menuStatus() {
@@ -265,6 +281,18 @@ Template.main.helpers({
                classes.findOne({_id: Session.get("currentWork")._id}).banned.indexOf(Meteor.userId()) !== -1
               ) return true;
         }
+    },
+    pref(val) {
+        if(Meteor.user().profile.preferences === null) {
+            var array = Meteor.user().profile;
+            array.preferences = defaults;
+            Session.set("serverData",array);
+            sendData("editProfile");
+            return defaults[val].charAt(0).toUpperCase() + defaults[val].slice(1);
+        } else {
+            var preferences = Meteor.user().profile.preferences;
+            return preferences[val].charAt(0).toUpperCase() + preferences[val].slice(1);
+        }
     }
 });
 
@@ -340,18 +368,25 @@ Template.main.events({
         if (event.target.id !== sessval &&
             event.target.id !== sessval + "a" &&
             !Session.equals("modifying", null) &&
-            !event.target.parentNode.className.includes("workOptions")) {
+            !event.target.parentNode.className.includes("workOptions") &&
+            !event.target.parentNode.className.includes("prefOptions")) {
             closeInput(sessval);
         }
 
         if (!event.target.className.includes("radio") &&
             !Session.equals("radioDiv", null) &&
             !event.target.parentNode.className.includes("workOptions") &&
+            !event.target.parentNode.className.includes("prefOptions") &&
             event.target.readOnly !== true) {
+            if(Session.equals("sidebar","optionsContainer")) {
+                var radio = "prefOptions";
+            } else {
+                var radio = "workOptions";
+            }
             var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
-            for (var i = 0; i < document.getElementsByClassName("workOptions").length; i++) {
+            for (var i = 0; i < document.getElementsByClassName(radio).length; i++) {
                 try {
-                    closeDivFade(document.getElementsByClassName("workOptions")[i]);
+                    closeDivFade(document.getElementsByClassName(radio)[i]);
                 } catch (err) {}
             }
             Session.set("radioDiv", null);
@@ -377,7 +412,7 @@ Template.main.events({
         openDivFade(document.getElementsByClassName("overlay")[0]);
     },
     'click .change' (event) {
-        if(!Session.get("newWork")) {
+        if(!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
             if(!(Meteor.userId() === Session.get("currentWork").creator || 
             Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) ||
             classes.findOne({_id: Session.get("currentWork")._id}).moderators.indexOf(Meteor.userId()) !== -1 ||
@@ -443,20 +478,40 @@ Template.main.events({
         var op = event.target;
         Session.set("radioDiv", op.getAttribute("op"));
         Session.set("radioOffset", op.getAttribute("opc"));
+        if(Session.equals("sidebar","optionsContainer")) {
+            var radio = "prefOptions";
+        } else {
+            var radio = "workOptions";
+        }
         try {
-            for (var i = 0; i < document.getElementsByClassName("workOptions").length; i++) {
+            for (var i = 0; i < document.getElementsByClassName(radio).length; i++) {
-                var curr = document.getElementsByClassName("workOptions")[i];
+                var curr = document.getElementsByClassName(radio)[i];
                 if (Session.get("radioDiv") !== i.toString()) {
-                    closeDivFade(document.getElementsByClassName("workOptions")[i]);
+                    closeDivFade(document.getElementsByClassName(radio)[i]);
                 }
             }
         } catch (err) {}
-        openDivFade(document.getElementsByClassName("workOptions")[op.getAttribute("op")]);
+        openDivFade(document.getElementsByClassName(radio)[op.getAttribute("op")]);
     },
     'click .workOptions p' (event) {
         var sessval = Session.get("modifying");
         var p = event.target;
-        var opnum = (parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset")));
+        var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
+        var input = document.getElementsByClassName("op")[opnum];
+        input.value = p.childNodes[0].nodeValue;
+        try {
+            closeInput(sessval);
+        } catch (err) {}
+
+        closeDivFade(p.parentNode);
+        input.focus();
+        Session.set("radioDiv", null);
+        Session.set("radioOffset", null);
+    },
+    'click .prefOptions p' (event) {
+        var sessval = Session.get("modifying");
+        var p = event.target;
+        var opnum = parseInt(Session.get("radioDiv")) - parseInt(Session.get("radioOffset"));
         var input = document.getElementsByClassName("op")[opnum];
         input.value = p.childNodes[0].nodeValue;
         try {
@@ -539,7 +594,7 @@ Template.main.events({
     },
     'click .sideClass' (event) {
         if(!Session.equals("mode","calendar")) return;
-        var div = event.target
+        var div = event.target;
         while(div.getAttribute("classid") === null) div = div.parentNode;
         var classid = div.getAttribute("classid");
 
@@ -590,7 +645,12 @@ function sendData(funcName) {
 function closeInput(sessval) {
     var input = document.getElementById(sessval + "a");
     var span = document.getElementById(sessval);
-    span.style.color = "#8C8C8C";
+    if(Session.equals("sidebar","optionsContainer")) {
+        var color = "#000";
+    } else {
+        var color = "#8C8C8C";
+    }
+    span.style.color = color;
     input.parentNode.removeChild(input);
     try {
         var restrict = document.getElementById("restrict");
@@ -601,12 +661,15 @@ function closeInput(sessval) {
     } else {
         span.childNodes[0].nodeValue = input.value;
     }
-span.style.display = "initial";
+    span.style.display = "initial";
     Session.set("modifying", null);
-    if(!Session.get("newWork")) {
+    if(!Session.get("newWork") && !Session.equals("sidebar","optionsContainer")) {
         if(getHomeworkFormData() === null) return;
         Session.set("serverData",Session.get("currentWork"));
         sendData("editWork");
+    } else if(Session.equals("sidebar","optionsContainer")) {
+        Session.set("serverData",getPreferencesData());
+        sendData("editProfile");
     }
 }
 
@@ -640,6 +703,16 @@ function getHomeworkFormData() {
     Session.set("currentReadableWork", readableData);
 }
 
+function getPreferencesData() {
+    var profile = Meteor.user().profile;
+    var options = {
+        "theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
+        "mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase()
+    };
+    profile.preferences = options;
+    return profile;
+}
+
 var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
 var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
 

hourglass/client/profile/profile.html

@@ -1,5 +1,5 @@
 <template name="profile">
-	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};">
+	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};{{textColor}}">
 		<div id="mainpage" onclick="window.location='/'"><h2>Main Page</h2></div>
 		<div id="profMainContainer" style="{{mainCenter}}">
 			<div id="profBanner" style="{{banner}};"></div>