Added user dropdown

hourglass/client/login/login.css

@@ -13,7 +13,7 @@
 	bottom: 0;
 	z-index: 51;
 }
-
+flogin
 #loginHeader {
 	font-weight: 600;
 	width: 100%;
@@ -148,7 +148,7 @@ p.text {
 	bottom: 0;
 }
 
-.login-buttons {
+.login-button {
 	display: none !important;
 }
 

hourglass/client/main/main.css

@@ -183,24 +183,36 @@ input, textarea {
 	display: none;
 }
 
-#logout {
+#dropdown {
-	padding: 1%;
+	width: 6.5vh;
-
+	height: 6.5vh;
-    background-color: rgba(0,0,0,0.05);
-
 	float: right;
-    text-align: center;
+	display: inline-block;
+	position: relative;
 
-    cursor: pointer;
+	-webkit-transition: background-color 0.5s ease;  
-
+	-moz-transition: background-color 0.5s ease; 
-
+	-ms-transition: background-color 0.5s ease;
-    -webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
+	transition: background-color 0.5s ease;
-	-moz-transition: margin 0.5s ease, background-color 0.5s ease; 
-	-ms-transition: margin 0.5s ease, background-color 0.5s ease;
-	transition: margin 0.5s ease, background-color 0.5s ease; 
 }
 
-#logout:hover {
+#dropdown img{
+	width: 5vh;
+	height: 5vh;
+	margin: -2.6vh 0 0 -2.7vh;
+
+	cursor: pointer;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+
+	border: 2px solid #222;
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+}
+
+#dropdown:hover {
 	background-color: rgba(0,0,0,0.1);
 }
 
@@ -1025,3 +1037,93 @@ input, textarea {
 #markDone:hover, #markConfirm:hover, #markReport:hover {
 	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.15);
 }
+
+#userTab {
+	width: 0; 
+	height: 0; 
+
+	-webkit-filter: drop-shadow(2px 2px 5px #666);
+	filter: drop-shadow(2px 2px 5px #666);
+
+	border-left: 2.5vh solid transparent;
+	border-right: 2.5vh solid transparent;
+
+	position: absolute;
+	top: -3vh;
+	right: 2vw;
+	z-index: 19;
+}
+
+#userDropdown {
+	width: 15vw;
+	margin-top: 10vh;
+
+	box-shadow: 2px 2px 5px 3px #666;	
+	display: none;
+
+	position: absolute;
+	top: 1vh;
+	right: 4vw;
+	z-index: 20;
+
+	opacity: 0;
+
+	-webkit-transition: opacity 0.4s ease;  
+	-moz-transition: opacity 0.4s ease;
+	-ms-transition: opacity 0.4s ease;
+	transition: opacity 0.4s ease; 
+}
+
+#userDropdownAvatar {
+	width: 100%;
+	height: 16vh;
+	background-color: rgba(255,255,255,0.3);
+	position: relative;
+}
+
+#userDropdownAvatar img {
+	width: 9vh;
+	height: 9vh;
+	margin: -6.5vh 0 0 -5vh;
+
+	border: 3px solid #0D0D0D;
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+
+#userDropdownAvatar p {
+	width: 9vh;
+	margin: 0 auto 0 auto;
+	padding-top: 12vh;
+}
+
+#userFunctions {
+	margin-bottom: 1%;
+	border-bottom: 2px solid #666;
+}
+
+.userFunction {
+	font-size: 2.5vh;
+	width: 100%;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+.userFunction:hover {
+	background-color: rgba(255,255,255,0.2);
+}
+
+.userFunction i, .userFunction p {
+	margin: 0;
+	padding: 7% 0 7% 10%;
+	display: inline-block;
+}

hourglass/client/main/main.html

@@ -9,7 +9,9 @@
             <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
             <h1>Hourglass</h1><h2>{{schoolName}}</h2>
             <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
-            <div id="logout" onclick='document.getElementById("login-buttons-logout").click();'>Logout</div>
+            <div id="dropdown">
+                <img src="{{avatar}}">
+            </div>
         </div>
         <div id="loadBar">
             <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
@@ -202,6 +204,30 @@
             </div>
         </div>
     </div>
+
+    <div id="userDropdown" style="background-color:{{divColor 'cards'}}">
+        <div id="userTab" style="border-bottom: 3vh solid {{divColor 'header'}}"></div>
+        <div id="userDropdownAvatar">
+            <img src="{{avatar}}">
+            <p>ksjdragon</p>
+        </div>
+        <div id="userFunctions">
+            <div id="myprofile" class="userFunction" onclick="window.location='/profile';">
+                <i class="fa fa-user" aria-hidden="true"></i>
+                <p>My Profile</p>
+            </div>
+            {{#if admin}}
+                <div id="myprofile" class="userFunction" onclick="window.location='/admin';">
+                    <i class="fa fa-cogs" aria-hidden="true"></i>
+                    <p>Admin Panel</p>
+                </div>
+            {{/if}}
+        </div>
+        <div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'>
+            <i class="fa fa-sign-out" aria-hidden="true"></i>
+            <p>Sign out</p>
+        </div>
+    </div>
     {{> loginButtons}}
 </template>
 

hourglass/client/main/main.js

@@ -37,7 +37,7 @@ var ref = {
 
 // Reactive variables.
 Session.set("user",{}); // Stores user preferences.
-Session.set("calendarClasses", null);
+Session.set("calendarClasses", []); // Stores calendar classes.
 Session.set("sidebar", null); // Status of sidebar
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWork", null); // Stores current selected work info.
@@ -190,6 +190,12 @@ Template.main.helpers({
             return;
         }
     },
+    avatar() { // Returns avatar.
+        return Session.get("user").avatar;
+    },
+    username() { // Returns user name.
+        return Session.get("user").name;
+    },
     defaultMode() { //Loads the default display mode for user.
         if(load) Session.set("mode",Session.get("user").preferences.mode);
         return;
@@ -373,6 +379,9 @@ Template.main.helpers({
             ) return true;
         }
     },
+    admin() {
+        return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']);
+    },
     refetchEvents() {
         if (Session.get("refetchEvents")) {
             $("#fullcalendar").fullCalendar('refetchEvents');
@@ -441,6 +450,8 @@ Template.main.events({
                 } catch (err) {}
             }
         }
+
+        if(!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
     },
     // MAIN MENU BUTTONS
     'click .fa-bars' () { // Click menu button.
@@ -508,6 +519,12 @@ Template.main.events({
         });
         openDivFade(document.getElementsByClassName("overlay")[0]);
     },
+    'click #dropdown' (event) {
+        if(document.getElementById("userDropdown").style.display === "block") return;
+        setTimeout(function() {
+            openDivFade(document.getElementById("userDropdown"));
+        }, 300);
+    },
     'click .workCard' (event) { // Display work information on work card click.
         var dom = event.target;
         while (event.target.className !== "workCard") event.target = event.target.parentNode;

hourglass/lib/router.js

@@ -58,25 +58,6 @@ Router.route('/user/:email', {
     }
 });
 
-/*Router.route('/admin', {
-    waitOn: function() {
-        if (Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin'])) {
-            return [
-                Meteor.subscribe('classes', this.params._id),
-                Meteor.subscribe('schools', this.params._id),
-                Meteor.subscribe('work', this.params._id),
-                Meteor.subscribe('requests', this.params._id),
-                Meteor.subscribe('users', this.params._id)
-            ];
-        } else {
-            this.render('NotFound');
-        }
-    },
-    action: function() {
-        this.render("admin");
-    }
-});*/
-
 Router.route('/admin', {
     waitOn: function() {
         return [