diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 5e8103a..130fec7 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -154,7 +154,7 @@ body { .noScroll input, .noScroll textarea { font-family: 'Raleway'; background-color: #EBEBEB; - border: 3px solid #EBEBEB; + border: 3px solid #CECECE; border-radius: 3px; resize: none; } @@ -662,7 +662,7 @@ textarea.clickModify { .clickModify.dropdown { font-size: 2.5vh; width: 100%; - border: 1px solid #666; + border: 1px solid #999797; background-color: rgba(0,0,0,0.07); cursor: pointer; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 3f3e7de..62816c1 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -69,6 +69,15 @@ Template.main.rendered = function() { Template.profile.rendered = function() { Accounts._loginButtonsSession.set('dropdownVisible', true); + $(".optionText").hover( + function() { + console.log("hi"); + $(this).addClass("selectedOption"); + }, + function() { + $(this).removeClass("selectedOption"); + } + ); }; Template.registerHelper('userProfile', () => { @@ -243,7 +252,23 @@ Template.registerHelper('restrict', (input) => { // Returns characters left for }); Template.registerHelper('selectOptions', (val) => { - return options[val] + if(val === "grade") { + var grade = []; + for(var i = 0; i < 5; i++) { + var year = (new Date).getFullYear() + i; + grade.push( { "val": year, "alias": year.toString() } ); + } + return grade; + } else if(val === "school") { + var school = []; + var schoolList = schools.find().fetch(); + for(var i = 0; i < schoolList.length; i++) { + school.push( { "val": schoolList[i].name, "alias": schoolList[i].name } ); + } + return school; + } else { + return options[val]; + } }); Template.registerHelper('work', (value) => {// Returns the specified work value. @@ -254,7 +279,7 @@ Template.registerHelper('work', (value) => {// Returns the specified work value. } else { return formReadable(thisWork,value); } -}) +}); Template.main.helpers({ /*themeName() { diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 614119f..1f570cf 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -1,9 +1,3 @@ -.change { - font-size: 150%; - color: #BEBEBE; - cursor: pointer; -} - #profWrapper { width: 100%; height: 100%; @@ -11,21 +5,6 @@ overflow-y: hidden; } -#profPage .change { - font-size: 2.5vh; -} - -.radio { - cursor: pointer; -} - -.changeInput { - font-size: 100%; - padding: 0; - color: #BEBEBE; - position: relative; -} - .profTitle { font-size: 3vh; font-weight: 400; @@ -40,11 +19,6 @@ padding: 6% 6% 0 8%; } -#motda { - font-size: 100%; - width: 30% !important; -} - #profPage { width: 100%; height: 100%; @@ -102,6 +76,10 @@ color: #FFF; } +#motdBox input { + width: 50% !important; +} + .username { margin-left: 20% !important; } @@ -126,25 +104,6 @@ transition: opacity 0.4s ease; } -.profOptionText { - font-size: 150%; - min-width: 10%; - padding: 20px; - margin: 0; - - text-align: center; - cursor: pointer; - - -webkit-transition: box-shadow 0.4s ease; - -moz-transition: box-shadow 0.4s ease; - -ms-transition: box-shadow 0.4s ease; - transition: box-shadow 0.4s ease; -} - -.profOptions p:hover { - box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1); -} - #profCards { width: 100%; height: 100%; @@ -179,6 +138,15 @@ text-align: left; } +#profWrapper .clickModify span { + width: 80%; + padding: 3.5% 5% 3.5% 5%; +} + +#profWrapper .clickModify, #profWrapper .optionHolder { + width: 90%; +} + #profInfo { margin-left: 0; border-top: 5px solid #CC4444; @@ -188,10 +156,6 @@ padding: 3% 5% 7% 14%; } -.radioContainer { - position: relative; -} - #classes { padding: 3% 5% 7% 7%; } @@ -242,11 +206,11 @@ } .profFunction i, .profFunction h4 { - padding: 1%; + padding: 1% !important; } .profFunction h4 { - font-size: 120%; + font-size: 120% !important; } #searchBar { @@ -404,19 +368,37 @@ position: relative; } +#formContainer .clickModify { + background-color: #EBEBEB; + border: 1px solid #CECECE; +} + +#formContainer .optionText:hover { + box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2); +} + .formDiv { margin: 3% 6% 5% 6%; width: 35%; + position: relative; display: inline-block; } +.formDiv input { + width: 90%; +} + +#formContainer .optionHolder { + width: 96%; +} + .creInput { font-size: 2vh; padding: 3%; } -.creOp { - margin: 0 !important; +.classDropdown { + cursor: pointer; } .formDiv .-autocomplete-container { @@ -499,7 +481,7 @@ } #createdClasses { - width: 500px; + width: 600px; height: 73vh; padding: 30px 0 30px 30px; diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index d2b904e..d95160d 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -11,8 +11,10 @@ Avatar
{{username}} - - {{motd}} - {{commentLength}} + + {{restrict 'description'}} +
@@ -21,87 +23,98 @@

About

-
+

School Name:

- {{school}} -
+ +
+ {{#each selectOptions 'school'}} + {{> option}} + {{/each}} +
+

-
-
+

Grade:

- {{grade}} -
-
-

9th

-

10th

-

11th

-

12th

-
-
+ +
+ {{#each selectOptions 'grade'}} + {{> option}} + {{/each}} +
+

Preferences

-
-
-

Theme:

- {{themeName}} -
-
-

Light

-

Dark

-
-
-
-
-
-

Default Mode:

- {{pref 'mode'}} -
-
-

Classes

-

Calendar

-
-
-
-
-
-

Hide Homework:

- {{pref 'timeHide'}} -
-
-

1 Day

-

2 Days

-

1 Week

-

1 Month

-

Never

-
-
-
-
-
-

Hide Done:

- {{pref 'done'}} -
-
-

Yes

-

No

-
-
-
-
-
-

Hide Reported:

- {{pref 'hideReport'}} -
-
-

Yes

-

No

-
-
-
+
+

Theme:

+ +
+ {{#each selectOptions 'theme'}} + {{> option}} + {{/each}} +
+
+
+

Default Mode:

+ +
+ {{#each selectOptions 'mode'}} + {{> option}} + {{/each}} +
+
+
+

Hide Homework:

+ +
+ {{#each selectOptions 'timeHide'}} + {{> option}} + {{/each}} +
+
+
+

Hide Done:

+ +
+ {{#each selectOptions 'done'}} + {{> option}} + {{/each}} +
+
+
+

Hide Reported:

+ +
+ {{#each selectOptions 'hideReport'}} + {{> option}} + {{/each}} +
+
+
@@ -182,7 +195,7 @@

Hour:

- +

Teacher:

@@ -190,40 +203,25 @@

Class Name:

- +
-

Privacy:

- - - - - - - - - - - - - - - - - -
-

Public

-

Private

-
+

Privacy:

+ +
+ {{#each selectOptions 'privacy'}} + {{> option}} + {{/each}} +

Category:

- -
-

Class

-

Club

-

Other

-
+ +
+ {{#each selectOptions 'category'}} + {{> option}} + {{/each}} +

Submit Request

@@ -321,3 +319,4 @@ + diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index a59a763..8631f23 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -4,7 +4,7 @@ import { } from 'meteor/templating'; var openValues = { - "owned": "-540px", + "owned": "-650px", "priv": "-160px" }; @@ -25,7 +25,7 @@ Session.set("noclass", null); // If user doesn't have classes. Session.set("notfound", null); // If no results for autocomplete. Template.profile.helpers({ - themeName() { +/* themeName() { var vals = _.values(themeColors); var curtheme = Session.get("user").preferences.theme; for (var i = 0; i < vals.length; i++) { @@ -35,7 +35,7 @@ Template.profile.helpers({ } } return "Custom"; - }, + },*/ classSettings() { // Returns autocomplete array for classes. return { position: "bottom", @@ -86,7 +86,7 @@ Template.profile.helpers({ username() { //Returns current user's username return Session.get("user").name; }, - motd() { // Returns the current user's description + description() { // Returns the current user's description if (Session.get("user").description !== undefined && Session.get("user").description !== null && Session.get("user").description !== "") return Session.get("user").description; return "Say something about yourself!"; }, @@ -95,10 +95,10 @@ Template.profile.helpers({ return "Click here to edit..."; }, grade() { // Returns the current user's grade - if (Session.get("user").grade !== undefined && Session.get("user").grade !== null && Session.get("user").grade !== "") return Session.get("user").grade + "th"; + if (Session.get("user").grade !== undefined && Session.get("user").grade !== null && Session.get("user").grade !== "") return Session.get("user").grade; return "Click here to edit..."; }, - classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) + classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) ( Only your school) var array = classes.find({ status: { $eq: true @@ -107,7 +107,10 @@ Template.profile.helpers({ $eq: false }, _id: { - $nin: Meteor.user().profile.classes + $nin: Session.get("user").classes + }, + school: { + $eq: Session.get("user").school } }, { sort: { @@ -136,12 +139,12 @@ Template.profile.helpers({ return "0px"; }, profClassTabColor(status) {  // Change this [Supposed to show the current mode that's selected via color]     - if (Session.equals("profClassTab", status)) { - return Meteor.user().profile.preferences.theme.modeHighlight; - } else { - return; - } - }, + if (Session.equals("profClassTab", status)) { + return Meteor.user().profile.preferences.theme.modeHighlight; + } else { + return; + } + }, profClassTab(tab) { // Tells current class if (Session.equals("profClassTab", tab)) { return true; @@ -174,23 +177,29 @@ Template.profile.helpers({ }); Template.profile.events({ - 'click' (event) { // Whenever a click happens - var modifyingInput = Session.get("modifying"); - if (event.target.id !== modifyingInput && - event.target.id !== modifyingInput + "a" && - !Session.equals("modifying", null) && - !event.target.parentNode.className.includes("profOptions")) { - closeInput(modifyingInput); - } - if (!event.target.className.includes("radio") && - !event.target.parentNode.className.includes("profOptions") && - event.target.readOnly !== true) { - for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { - try { - closeDivFade(document.getElementsByClassName("profOptions")[i]); - } catch (err) {} + 'click' (event) { // Whenever a click happens' + var e = event.target.className; + if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) { + if (!(e.includes("optionHolder") || e.includes("optionText"))) { + if(document.getElementById(modifyingInput).className.includes("dropdown")) { + $(".optionHolder") + .fadeOut(250, "linear"); + + $(".selectedOption").removeClass("selectedOption"); + } else { + if(modifyingInput === "description") { + Session.set("restrictText", {}); + $("#"+modifyingInput).css('cursor','pointer'); + var newSetting = Session.get("user"); + newSetting[modifyingInput] = document.getElementById(modifyingInput).value; + serverData = newSetting; + sendData("editProfile"); + } + } + modifyingInput = null; } } + if (!document.getElementById("createdClasses").contains(event.target) && !Session.equals("code", null) && !event.target.className.includes("fa-times-circle-o")) { @@ -219,39 +228,39 @@ Template.profile.events({ } }, 'click .addClass' () {  - if (Session.equals("profClassTab", "addClass")) return;          - var functionHolder = document.getElementById("profClassInfoHolder"); - closeDivFade(functionHolder); - var div = document.getElementById("profClasses"); - div.style.height = "50%"; - setTimeout(function() {             - Session.set("profClassTab", "addClass"); - div.style.height = "90%";           - openDivFade(functionHolder);         - }, 400); - }, -     'click .manageClass' () {  - if (Session.equals("profClassTab", "manClass")) return;       - var functionHolder = document.getElementById("profClassInfoHolder"); - closeDivFade(functionHolder); - var div = document.getElementById("profClasses"); - div.style.height = "50%";      - setTimeout(function() {             - Session.set("profClassTab", "manClass");  - div.style.height = "90%";            - openDivFade(functionHolder);         - }, 400); - }, -     'click .createClass' () { + if (Session.equals("profClassTab", "addClass")) return;          + var functionHolder = document.getElementById("profClassInfoHolder"); + closeDivFade(functionHolder); + var div = document.getElementById("profClasses"); + div.style.height = "50%"; + setTimeout(function() {             + Session.set("profClassTab", "addClass"); + div.style.height = "70%";           + openDivFade(functionHolder);         + }, 400); + }, +    'click .manageClass' () {  + if (Session.equals("profClassTab", "manClass")) return;       + var functionHolder = document.getElementById("profClassInfoHolder"); + closeDivFade(functionHolder); + var div = document.getElementById("profClasses"); + div.style.height = "50%";      + setTimeout(function() {             + Session.set("profClassTab", "manClass");  + div.style.height = "70%";            + openDivFade(functionHolder);         + }, 400); + }, +    'click .createClass' () { if (Session.equals("profClassTab", "creClass")) return; var functionHolder = document.getElementById("profClassInfoHolder");         closeDivFade(functionHolder); var div = document.getElementById("profClasses"); div.style.height = "50%"; setTimeout(function() { - Session.set("profClassTab", "creClass"); - div.style.height = "90%"; - openDivFade(functionHolder); + Session.set("profClassTab", "creClass"); + div.style.height = "70%"; + openDivFade(functionHolder); }, 400); }, 'click .classBox' (event) { // When you click on a box that holds class @@ -281,6 +290,7 @@ Template.profile.events({ } else { var attribute = event.target.getAttribute("classid"); } + if(attribute === Meteor.userId()) return; Session.set("selectedClass", null); var usertype = ["moderators", "banned"]; var array = classes.findOne({ @@ -364,7 +374,7 @@ Template.profile.events({ input.className.replace(" formInvalid", ""); var value = input.value; var classid = document.getElementById("createdClasses").getAttribute("classid"); - input.value = ""; + input.value = " "; if (checkUser(value, classid)) { input.className += " formInvalid"; input.placeholder = "Not a valid user"; @@ -446,102 +456,105 @@ Template.profile.events({ confirm = null; }, // INPUT HANDLING - 'click .change' (event) { // Click changable inputs. Creates an input where the span is. - var ele = event.target; - var modifyingInput = Session.get("modifying"); - if (ele.id !== modifyingInput && modifyingInput !== null) closeInput(modifyingInput); + 'focus .clickModify' (event) { + $(".optionHolder") + .fadeOut(250, "linear"); - Session.set("modifying", ele.id); - var dim = ele.getBoundingClientRect(); - ele.style.display = "none"; - var input = document.createElement("input"); - - if (ele.getAttribute("type") !== null) { - input.type = ele.getAttribute("type"); - } else { - input.type = "text"; - } - input.value = ele.childNodes[0].nodeValue; - input.className = "changeInput"; - input.style.height = 0.9 * dim.height.toString() + "px"; - input.style.width = "55%"; - input.style.padding = "0.1%"; - input.id = ele.id + "a"; - input.setAttribute("opc", ele.getAttribute("opc")); - ele.parentNode.appendChild(input); - if (ele.getAttribute("re") == "readonly") { - input.readOnly = true; - input.className += " op"; - input.style.cursor = "pointer"; - } else { - input.select(); - } - input.focus(); - var restrict = ele.getAttribute("restrict"); - if (restrict !== null) { - input.maxLength = restrict; - input.className += " restrict"; - Session.set("commentRestrict", restrict - input.value.length.toString() + " characters left"); - var text = document.getElementById(Session.get("modifying") + "restrict"); - text.style.display = "inherit"; - text.style.color = "#7E7E7E"; + if(modifyingInput !== null) { + if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput); + } + modifyingInput = event.target.id; + if(!$("#"+modifyingInput)[0].className.includes("dropdown")) { + event.target.select(); + event.target.style.cursor = "text"; } }, - 'click .radio' (event) { // Click dropdown input. Opens the dropdown menu. - var op = event.target; - try { - for (var i = 0; i < document.getElementsByClassName("profOptions").length; i++) { - var curr = document.getElementsByClassName("profOptions")[i]; - if (curr.childNodes[1] !== op.nextSibling.nextSibling.childNodes[1] && - curr.childNodes[1] !== op.parentNode.parentNode.childNodes[3].childNodes[1]) { - closeDivFade(document.getElementsByClassName("profOptions")[i]); + 'keydown .dropdown' (event) { + var first = $("#"+modifyingInput).next().children("p:first-child"); + var last = $("#"+modifyingInput).next().children("p:last-child"); + var next = $(".selectedOption").next(); + var prev = $(".selectedOption").prev(); + var lastSel = $(".selectedOption"); + + if (event.keyCode === 38) { + if (lastSel === undefined) { + last.addClass("selectedOption"); + } else { + if (prev.length === 0) { + last.addClass("selectedOption"); + lastSel.removeClass("selectedOption"); + } else { + prev.addClass("selectedOption"); + lastSel.removeClass("selectedOption"); } } - } catch (err) {} - - if (event.target.className.includes("op")) { - openDivFade(op.nextSibling.nextSibling); - } else { - openDivFade(op.parentNode.parentNode.childNodes[3]); + } else if (event.keyCode === 40) { + if (lastSel === undefined) { + first.addClass("selectedOption"); + last.removeClass("selectedOption"); + } else { + if (next.length === 0) { + first.addClass("selectedOption"); + lastSel.removeClass("selectedOption"); + } else { + next.addClass("selectedOption"); + lastSel.removeClass("selectedOption"); + } + } + } else if (event.keyCode === 13) { + lastSel[0].click(); } }, - 'keydown input' (event) { // Restricts characters for certain inputs. - var modifyingInput = Session.get("modifying"); - if (event.keyCode == 13) { - try { - closeInput(modifyingInput); - } catch (err) {} + 'focus .dropdown' (event) { + $(".selectedOption").removeClass("selectedOption"); + + $("#" + modifyingInput).next() + .css('opacity',0) + .slideDown(300) + .animate( + { opacity: 1 }, + { queue: false, duration: 100 } + ); + }, + 'click .optionText' (event) { // Click each preferences setting. + var option = event.target.childNodes[0].nodeValue; + var userSettings = ["description","school","grade"]; + var newSetting = Session.get("user"); + + if(modifyingInput === "privacy" || modifyingInput === "category") { + document.getElementById(modifyingInput).value = option; + $("#" + modifyingInput).next() + .fadeOut(250, "linear"); + $(".selectedOption").removeClass("selectedOption"); + return; } + + if(_.contains(userSettings, modifyingInput)) { + newSetting[modifyingInput] = (modifyingInput === "grade") ? parseInt(option) : option; + } else { + newSetting.preferences[modifyingInput] = (function() { + var value = options[modifyingInput].filter(function(entry) { + return option === entry.alias; + })[0].val; + return (modifyingInput === 'theme') ? themeColors[value] : value; + })(); + } + Session.set("user", newSetting); + serverData = Session.get("user"); + sendData("editProfile"); + + $("#" + modifyingInput).next() + .fadeOut(250, "linear"); + + $(".selectedOption").removeClass("selectedOption"); }, 'input .restrict' (event) { var restrict = event.target.maxLength; var chars = restrict - event.target.value.length; - var text = document.getElementById(Session.get("modifying") + "restrict"); - text.style.color = "#7E7E7E"; - if (chars === restrict) { // Don't display if nothing in comment. - Session.set("commentRestrict", ""); - return; - } else if (chars === 0) { - text.style.color = "#FF1A1A"; // Make text red if 0 characters left. - text.style.opacity = "0"; - } - Session.set("commentRestrict", chars.toString() + " characters left"); - }, - 'click .profOptionText' (event) { // Click each profile option setting. - var modifyingInput = Session.get("modifying"); - var p = event.target; - if (p.className.includes("cre")) { - var input = p.parentNode.parentNode.childNodes[3]; - } else { - var input = p.parentNode.parentNode.childNodes[1].childNodes[5]; - } - input.value = p.childNodes[0].nodeValue; - try { - closeInput(modifyingInput); - } catch (err) {} - - closeDivFade(p.parentNode); - input.focus(); + var newSetting = Session.get("restrictText"); + newSetting[event.target.id] = (chars === restrict) ? "" : (chars.toString() + ((chars === 1) ? " character " : " characters ") + "left"); + newSetting.selected = event.target.id; + Session.set("restrictText", newSetting); }, // AUTOCOMPLETE HANDLING 'keyup #profClassSearch' (event) { // Auto-complete updater @@ -572,10 +585,7 @@ Template.profile.events({ Session.set("autocompleteDivs", divs); } } catch (err) {} - }, - 'focus .op' (event) { // Selects input for next tabbing. - event.target.click(); - }, + } }); function openDivFade(div) { @@ -593,27 +603,6 @@ function closeDivFade(div) { }, 100); } -function closeInput(modifyingInput) { // Closes current modifying input. - var input = document.getElementById(modifyingInput + "a"); - var span = document.getElementById(modifyingInput); - input.parentNode.removeChild(input); - Session.set("commentRestrict", ""); - try { - document.getElementById("modifyingInput" + "restrict").style.display = "none"; - } catch (err) {} - - if (input.value === "") { - span.childNodes[0].nodeValue = "Click here to edit..."; - } else { - span.childNodes[0].nodeValue = input.value; - } - span.style.display = "initial"; - Session.set("modifying", null); - Session.set("user", getProfileData()); - serverData = Session.get("user"); - sendData("editProfile"); -} - function sendData(funcName) { Meteor.call(funcName, serverData, function(err, result) { if (funcName === "trackUserInClass") { diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js index 0a68cce..58c694d 100644 --- a/hourglass/lib/constants.js +++ b/hourglass/lib/constants.js @@ -1,7 +1,7 @@ themeColors = { "light": { "background": "White.jpg", - "mainColor": "#EBEBEB", + "mainColor": "#D9D9D9", "secondaryColor": "#E8E8E8", "sidebarColor": "#65839A", "userDropdownColor": "#E6E6E6", @@ -97,6 +97,15 @@ options = { {"val": "test", "alias": "Test"}, {"val": "project", "alias": "Project"}, {"val": "other", "alias": "Other"}, + ], + "privacy": [ + {"val": true, "alias": "Private"}, + {"val": false, "alias": "Public"} + ], + "category": [ + {"val": "class", "alias": "Class"}, + {"val": "club", "alias": "Club"}, + {"val": "other", "alias": "Other"} ] }