GlobalHeader: Change global header design

- remove help menu - add my issue and notification menu on top menu - remove my issue menu in user dropdown menu - avatar resize to smaller
naver · Apr 23, 2015 · 51de4da · 51de4da
1 parent 15757b8
commit 51de4da
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/app/assets/stylesheets/less/_common.less b/app/assets/stylesheets/less/_common.less
@@ -132,10 +132,11 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .avatar-wrap {
     width:32px; height:32px;
-    vertical-align:middle;
+    vertical-align:top;
     overflow:hidden; display:inline-block;
 
     &.small { width:24px; height:24px;   }
+    &.smaller { width:20px; height:20px;   }
     &.mid   { width:64px; height:64px;   }
     &.large { width:128px; height:128px; }
 }

diff --git a/app/assets/stylesheets/less/_page.less b/app/assets/stylesheets/less/_page.less
@@ -99,6 +99,15 @@
             float:left;
             position: relative;
 
+            &:after {
+                content: "|";
+                color: #788ba7;
+            }
+
+            &:last-child:after {
+                content: "";
+            }
+
             a {
                 padding:10px;
                 float: none;
@@ -139,11 +148,25 @@
         padding:0;
         list-style: none;
 
-        li {
+        > li {
             float:left;
-            margin:5px 0 5px 10px;
+            margin:5px 0;
             position: relative;
 
+            &:after {
+                content: "|";
+                color: #788ba7;
+            }
+
+            &:last-child {
+                margin-left:10px;
+
+                &:after {
+                    content: "";
+                }
+
+            }
+
             form {
               margin:0;
             }
@@ -173,11 +196,19 @@
                 font-size: 14px;
                 color:#788ba7;
 
+                > a {
+                    padding:0 10px;
+                }
+
                 .gnb-dropdown-toggle {
                     display:inline-block;
                     line-height: 30px;
                     .transition(all 0.15s ease);
 
+                    .caret-text {
+                        padding:0 2px;
+                    }
+
                     .caret {
                         margin-left: 5px;
                         vertical-align: middle;
@@ -213,11 +244,6 @@
                         }
                     }
 
-                    .avatar-wrap {
-                        width:30px;
-                        height: 30px;
-                        vertical-align: top;
-                    }
                 }
             }
         }

diff --git a/app/views/common/navbar.scala.html b/app/views/common/navbar.scala.html
@@ -55,9 +55,6 @@
             <li class="@isActiveMenu(MenuType.PROJECTS)">
                 <a href="@routes.ProjectApp.projects()">@Messages("title.projectList")</a>
             </li>
-            <li class="@isActiveMenu(MenuType.HELP)">
-                <a href="@routes.HelpApp.help()">@Messages("title.help")</a>
-            </li>
             @if(appFeedbackUrl){
             <li>
                 <a href="@appFeedbackUrl" target="_blank">@Messages("title.yobi.feedback")</a>

diff --git a/app/views/common/usermenu.scala.html b/app/views/common/usermenu.scala.html
@@ -24,23 +24,11 @@
 <ul class="gnb-usermenu">
     @requestHeader.session.get("loginId") match {
       case Some(loginId) => {
-        <li class="gnb-usermenu-dropdown">
-            <a href="javascript:void(0);" class="gnb-dropdown-toggle dropdwon-box-btn" data-toggle="dropdown">
-                <i class="yobicon-plus"></i>
-                <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu flat right">
-                <li>
-                    <a href="@routes.ProjectApp.newProjectForm()">
-                        @Messages("button.newProject")
-                    </a>
-                </li>
-                <li>
-                    <a href="@routes.OrganizationApp.newForm()">
-                        @Messages("title.newOrganization")
-                    </a>
-                </li>
-            </ul>
+        <li class="gnb-usermenu-item">
+          <a href="@routes.Application.index()" class="user-item-btn">@Messages("notification")</a>
+        </li>
+        <li class="gnb-usermenu-item">
+          <a href="@routes.IssueApp.userIssues()" class="user-item-btn">@Messages("issue.myIssue")</a>
         </li>
         @if(UserApp.currentUser.isSiteManager) {
         <li class="gnb-usermenu-item">
@@ -54,15 +42,13 @@
                 <span class="avatar-wrap smaller">
                     <img src="@User.findByLoginId(loginId).avatarUrl" />
                 </span>
+                <span class="caret-text">@User.findByLoginId(loginId).name</span>
                 <span class="caret"></span>
             </a>
             <ul class="dropdown-menu flat right">
                 <li class="title">
                     @User.findByLoginId(loginId).name <span class="disabled">@{"@"}@loginId</span>
                 </li>
-                <li>
-                    <a href="@routes.IssueApp.userIssues()">@Messages("issue.myIssue")</a>
-                </li>
                 <li>
                     <a href="@routes.UserApp.userInfo(loginId)">@Messages("userinfo.profile")</a>
                 </li>
@@ -112,18 +98,36 @@
                 }
             </ul>
         </li>
+          <li class="gnb-usermenu-dropdown">
+              <a href="javascript:void(0);" class="gnb-dropdown-toggle dropdwon-box-btn" data-toggle="dropdown">
+                  <i class="yobicon-plus"></i>
+                  <span class="caret"></span>
+              </a>
+              <ul class="dropdown-menu flat right">
+                  <li>
+                      <a href="@routes.ProjectApp.newProjectForm()">
+                      @Messages("button.newProject")
+                      </a>
+                  </li>
+                  <li>
+                      <a href="@routes.OrganizationApp.newForm()">
+                      @Messages("title.newOrganization")
+                      </a>
+                  </li>
+              </ul>
+          </li>
       }
       case None => {
+        <li class="gnb-usermenu-item">
+          <a href="@routes.UserApp.loginForm()" class="user-item-btn" data-login="required">
+          @Messages("title.login")
+          </a>
+        </li>
         <li>
             <a href="@routes.UserApp.signupForm()" class="ybtn ybtn-success">
                 @Messages("title.signup")
             </a>
         </li>
-        <li class="gnb-usermenu-item">
-            <a href="@routes.UserApp.loginForm()" class="user-item-btn" data-login="required">
-                @Messages("title.login")
-            </a>
-        </li>
       }
     }
 </ul>