kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added preferences, and dark theme

Browse Source
This commit is contained in:
Kenneth Jao 2016-08-22 23:44:48 -04:00
parent db85d38145
commit f09532438e
5 changed files with 190 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
hourglass/client/main/main.css
View File

@ -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;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
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, box-shadow 0.5s ease;
-ms-transition: background-color 0.5s ease, box-shadow 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;
-moz-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
-webkit-transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
-ms-transition: box-shadow 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);
}
@ -721,4 +745,12 @@ 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%;
}

53
hourglass/client/main/main.html
View File

@ -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">
<i class="fa fa-university" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
</div>
<div class="mode calendar">
<i class="fa fa-calendar" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
<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" 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">

121
hourglass/client/main/main.js
View File

@ -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.
Session.set("mode", null);
Session.set("timeHide",null);
var defaults = {
"theme":"light",
"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++) {
var curr = document.getElementsByClassName("workOptions")[i];
for (var i = 0; i < document.getElementsByClassName(radio).length; 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"];

2
hourglass/client/profile/profile.html
View File

@ -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>

BIN
hourglass/public/Backgrounds/Black.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB