created user-menu on top left of header

massiveart · Sep 30, 2013 · 7996501 · 7996501
1 parent 07f3462
commit 7996501
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 14 deletions.
diff --git a/assets/js/husky/dist/husky.js b/assets/js/husky/dist/husky.js
diff --git a/assets/js/husky/dist/husky.min.css b/assets/js/husky/dist/husky.min.css
diff --git a/demos/header/index.html b/demos/header/index.html
@@ -14,7 +14,7 @@
     </head>
     <body>
 
-        <div data-aura-component="header@husky" ></div>
+        <div data-aura-component="header@husky" data-aura-user-name="John Doe" data-aura-logout-url="logout" ></div>
 
         <script src="../js/sinon.js"></script>
         <script src="../js/jquery.js"></script>

diff --git a/dist/husky.js b/dist/husky.js
diff --git a/dist/husky.min.css b/dist/husky.min.css
diff --git a/husky_components/header/main.js b/husky_components/header/main.js
@@ -11,6 +11,9 @@
  *  marginMid: add 45px to navWidth
  *  marginRight: add 20px to margin mid part
  *  buttonType: type of button at start
+ *  userName:   username to be shown in left side of header
+ *  logoutURL: logout link
+ *  userIconURL: logout link
  *
  * Provided Events:
  *  husky.header.move-buttons: move middle part to match given navigation width
@@ -150,9 +153,13 @@ define([], function() {
             }
         },
         defaults = {
-            marginMid: 45,   // add 45px to navWidth
-            marginRight: 20, // add 20px to margin mid part
-            buttonType: null // type of button at start
+            marginMid:      45,   // add 45px to navWidth
+            marginRight:    20, // add 20px to margin mid part
+            buttonType:     null, // type of button at start
+            userName :      null,
+            logoutUrl:      null,
+            userIconUrl:    null
+
         };
 
     return {
@@ -203,7 +210,7 @@ define([], function() {
 
             // set default user
             if (!!this.options.userName) {
-
+                this.changeUser(this.options.userName, this.options.logoutUrl, this.options.userIconUrl);
             }
         },
 
@@ -272,9 +279,11 @@ define([], function() {
             }
         },
 
-        changeUser: function(username, logoutlink, usericon) {
-            var logout = '<a href="' + logoutlink + '">Logout</a>';
-            this.$left.html(username + ' ' + logout);
+        changeUser: function(username, logoutLink, usericon) {
+            var icon = usericon ? '<img src="' + usericon + '" />' : '';
+            var logout = logoutLink ? '<a href="' + logoutLink + '" class="logout">Log out</a>' : '';
+            var userSpan = username ? '<span class="username" >' + username + '</span>' : '';
+            this.$left.html(icon + userSpan + ' ' + logout);
         }
     };
 });
diff --git a/scss/modules/header.scss b/scss/modules/header.scss
@@ -39,10 +39,31 @@ $header-padding-top: 10px;
         z-index: 100;
     }
 
+
+
     .header-left {
         position: absolute;
 
         width: $header-left-width;
+
+
+        .username {
+            display: inline-block;
+            margin-top: $header-padding-top;
+            @extend %bold;
+        }
+
+        .logout {
+            margin-top: $header-padding-top;
+            margin-left: 5px;
+            text-decoration: none;
+            color: inherit;
+            font-size: 0.8em;
+
+            &:hover {
+              text-decoration: underline;
+            }
+        }
     }
 
     .header-right {

diff --git a/scss/typo.scss b/scss/typo.scss
@@ -3,6 +3,7 @@
 // --------------------------------------------------
 
 
+
 @font-face {
   font-family: 'MuseoSansCondensed300';
   src: url('fonts/MuseoSansCondensed 300/MuseoSansCnd-300.eot');
@@ -76,6 +77,11 @@ h5 {
 // Bold fonts
 // -------------------------
 
-.bold {
+%bold {
   font-family: 'MuseoSansCondensed700' !important;
-}
+
+}
+
+.bold {
+  @extend %bold;
+}