DeokHong Kim (a.k.a insanehong) DeokHong Kim (a.k.a insanehong) 2013-12-11
ProjectMenu: refectored project menu layout
@70715a41b0177b73ef6a5f61151bcd483b4a4f7d
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -315,126 +315,98 @@
     padding:0px 40px;
 }
 
+.project-menu-outer {
+    background-color:#ececec;
+    height:39px;
+    border-bottom: 1px solid #ddd;
 
-.project-menu {
-    position: absolute;
-    left:0;
+    .project-menu-inner {
+        height:39px;
+        width: 1170px;
+        margin:0 auto;
 
-    .resize-btn {
-        text-align:center;
+        .project-menu-nav {
+            list-style: none;
+            margin:0;
+            height:39px;
 
-        a {
-            background-color: #7F8C8D;
-            display:block;
-            padding:5px;
-            line-height:20px;
-            color:#fff;
-            .border-radius(0 6px 6px 0);
-
-            &:hover {
-                background-color:#95A5A6;
-            }
-        }
-
-    }
-
-    .project-menu-wrap {
-        list-style:none;
-        position:relative;
-
-        margin:0;
-        padding:0;
-
-        li {
-            margin-bottom:20px;
-            position:relative;
-            width:130px;
-            position: relative;
-            line-height: 30px;
-            background-color:transparent;
-
-            a {
-                background-color: #F1F1F1;
-                padding:5px 10px;
-                display:block;
-                .border-radius(0 6px 6px 0);
-                color:@yobi-gray;
-                font-size:14px;
-                line-height:30px;
-
-                &:hover {
-                    background-color:#cacfd2;
-                    color:#FFF;
-                    text-decoration:none;
-                }
-
-                .menu-title {
-                    margin-left:5px;
-                    display: inline-block;
-                }
-
-                .menu-count {
-                    position:absolute;
-                    top:-5px;
-                    right:-7px;
-                    z-index: 1;
-                    font-size:10px;
-                    border:2px solid #FFF;
-                    line-height:15px;
-                    padding:0 5px;
-                    background-color:@yobi-primary;
-                    color:#ECF0F1;
-                    .border-radius(10px);
-
-                    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-                    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-                    -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-                    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-                }
+            &.project-menu-gruop {
+                float:left;
+                margin-left:110px;
+                border-left:1px solid #ddd;
             }
 
-            &.active {
+            li {
+                float:left;
+                font-size: 14px;
+                position: relative;
+
                 a {
-                    background-color:#444444;
-                    color:#FFF;
-                    &:hover, &:focuse {
-                        background-color:@yobi-blue;
+                    display: inline-block;
+                    line-height: 30px;
+                    padding:5px 20px 4px;
 
+                    &:hover {
+                        text-decoration: none;
+                        color:#fc491e;
+                        background-color: #dadada;
+                    }
+                }
+
+                &.active {
+                    color : #fc491e;
+                    font-weight: bold;
+
+                    &:before {
+                        content:" ";
+                        position: absolute;
+                        bottom: 0;
+                        left: 50%;
+                        width: 0;
+                        height: 0;
+                        overflow: hidden;
+                        border: 8px solid transparent;
+                        border-style: outset outset solid outset;
+                        border-bottom-color: #ddd;
+                        margin-left: -8px;
+                    }
+
+                    &:after {
+                        content:" ";
+                        position: absolute;
+                        bottom: -1px;
+                        left: 50%;
+                        width: 0;
+                        height: 0;
+                        overflow: hidden;
+                        border: 8px solid transparent;
+                        border-style: outset outset solid outset;
+                        border-bottom-color: #FFF;
+                        margin-left: -8px;
                     }
                 }
             }
+        }
 
-
+        .project-setting {
+            float: right;
         }
     }
 }
 
-.project-page-wrap {
-    margin:30px 0;
-    padding:0 40px 0 160px;
-    position: relative;
-    min-height:580px;
+.project-menu-count {
+    font-size:12px;
+    border:2px solid #FFF;
+    line-height:20px;
+    padding:0 5px;
+    background-color:@yobi-primary;
+    color:#ECF0F1;
+    .border-radius(10px);
 
-    &.mini {
-        padding-left : 70px;
-
-        .project-menu {
-
-            li {
-                width:40px;
-                a {
-                    .menu-title {
-                        display:none;
-                    }
-                }
-
-            }
-        }
-    }
-
-    .tab-content {
-        overflow:visible;
-    }
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
+    -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
+    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
 }
 
 .page-footer-outer {
app/views/project/overview.scala.html
--- app/views/project/overview.scala.html
+++ app/views/project/overview.scala.html
@@ -35,7 +35,6 @@
 @projectLayout(message, project, utils.MenuType.PROJECT_HOME) {
 <div class="page">
 	@projectMenu(project, utils.MenuType.PROJECT_HOME, "")
-
     <div class="row-fluid">
         <div class="span9">
 	        <ul id="homeTabs" class="nav nav-tabs">
app/views/projectLayout.scala.html
--- app/views/projectLayout.scala.html
+++ app/views/projectLayout.scala.html
@@ -6,10 +6,8 @@
     @views.html.project.navbar(project)
     @views.html.project.header(project)
 
-    <div class="project-page-wrap mini">
     @content
-    </div>
-
+    
     <footer class="page-footer-outer">
         <div class="page-footer">
             <span class="provider">Copyright © <a href="http://navercorp.com/" target="_blank">NAVER Corp.</a> Supported by <a href="http://developer.naver.com/wiki/pages/techSupport" target="_blank" class="d2-program"><span class="d2">D2</span><span class="program"> Program</span></a></span>
app/views/projectMenu.scala.html
--- app/views/projectMenu.scala.html
+++ app/views/projectMenu.scala.html
@@ -16,76 +16,63 @@
         routes.PullRequestApp.pullRequests(project.owner, project.name)
     }
 }
-
-<div class="project-menu">
-    <ul class="nav project-menu-wrap">
-        <li class="@isActiveMenu(MenuType.PROJECT_HOME)">
-            <a href="@routes.ProjectApp.project(project.owner, project.name)" data-toggle="tooltip" title="@Messages("menu.home")" data-placement="right">
-                <i class="yobicon-home"></i>
-                <span class="menu-title">@Messages("title.projectHome")</span>
-            </a>
-        </li>
-
-        <li class="@isActiveMenu(MenuType.BOARD)">
-            <a href="@routes.BoardApp.posts(project.owner, project.name)" data-toggle="tooltip" title="@Messages("menu.board")" data-placement="right" >
-                <i class="yobicon-notes"></i>
-                <span class="menu-title">@Messages("menu.board")</span>
-                @if(Posting.countPostings(project) > 0){
-                <span class="menu-count">@Posting.countPostings(project)</span>
-                }
-            </a>
-        </li>
-        <li class="@isActiveMenu(MenuType.CODE)">
-            <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)" data-toggle="tooltip" title="@Messages("menu.code")" data-placement="right">
-                <i class="yobicon-code"></i>
-                <span class="menu-title">@Messages("menu.code")</span>
-            </a>
-        </li>
-         @if(project.vcs.equals("GIT")){
-        <li class="@isActiveMenu(MenuType.PULL_REQUEST)">
-            <a href="@getPullRequestURL(project)" data-toggle="tooltip" title="@Messages("menu.pullRequest")" data-placement="right">
-                <i class="yobicon-merge"></i>
-                <span class="menu-title">@Messages("menu.pullRequest")</span>
-                @if(PullRequest.countOpenedPullRequests(project) > 0){
-                <span class="menu-count">@PullRequest.countOpenedPullRequests(project)</span>
-                }
-            </a>
-        </li>
-        }
-        <li class="@isActiveMenu(MenuType.ISSUE)">
-            <a href="@routes.IssueApp.issues(project.owner, project.name, "open")" data-toggle="tooltip" title="@Messages("menu.issue")" data-placement="right">
-                <i class="yobicon-science"></i>
-                <span class="menu-title">@Messages("menu.issue")</span>
-                @if(Issue.countIssues(project.id, State.OPEN) > 0){
-                <span class="menu-count">@Issue.countIssues(project.id, State.OPEN)</span>
-                }
-            </a>
-        </li>
-        <li class="@isActiveMenu(MenuType.MILESTONE)">
-            <a href="@routes.MilestoneApp.milestones(project.owner, project.name)" data-toggle="tooltip" title="@Messages("milestone")" data-placement="right">
-                <i class="yobicon-tasks"></i>
-                <span class="menu-title">@Messages("milestone")</span>
-                @if(Milestone.countOpened(project) > 0){
-                    <span class="menu-count">@Milestone.countOpened(project)</span>
-                }
-            </a>
-        </li>
+<div class="project-menu-outer">
+    <div class="project-menu-inner">
+        <ul class="project-menu-nav project-menu-gruop">
+            <li class="@isActiveMenu(MenuType.PROJECT_HOME)">
+                <a href="@routes.ProjectApp.project(project.owner, project.name)">
+                    @Messages("title.projectHome")
+                </a>
+            </li>
+            <li class="@isActiveMenu(MenuType.CODE)">
+                <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)">
+                    @Messages("menu.code")
+                </a>
+            </li>
+            <li class="@isActiveMenu(MenuType.ISSUE)">
+                <a href="@routes.IssueApp.issues(project.owner, project.name, "open")">
+                    @Messages("menu.issue")
+                    @if(Issue.countIssues(project.id, State.OPEN) > 0){
+                    <span class="project-menu-count">@Issue.countIssues(project.id, State.OPEN)</span>
+                    }
+                </a>
+            </li>
+            @if(project.vcs.equals("GIT")){
+            <li class="@isActiveMenu(MenuType.PULL_REQUEST)">
+                <a href="@getPullRequestURL(project)">
+                    @Messages("menu.pullRequest")
+                    @if(PullRequest.countOpenedPullRequests(project) > 0){
+                    <span class="project-menu-count">@PullRequest.countOpenedPullRequests(project)</span>
+                    }
+                </a>
+            </li>
+            }
+            <li class="@isActiveMenu(MenuType.MILESTONE)">
+                <a href="@routes.MilestoneApp.milestones(project.owner, project.name)">
+                    @Messages("milestone")
+                </a>
+            </li>
+            <li class="@isActiveMenu(MenuType.BOARD)">
+                <a href="@routes.BoardApp.posts(project.owner, project.name)">
+                    @Messages("menu.board")
+                </a>
+            </li>
+        </ul>
         @if(AccessControl.isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)){
-        <li class="@isActiveMenu(MenuType.PROJECT_SETTING)">
-            <a href="@routes.ProjectApp.settingForm(project.owner, project.name)" data-toggle="tooltip" title="@Messages("menu.admin")" data-placement="right">
-                <i class="yobicon-websitebuilder"></i>
-                <span class="menu-title">@Messages("menu.admin")</span>
-                @if(project.enrolledUsers.size > 0){
-                <span class="menu-count">@project.enrolledUsers.size</span>
-                }
-            </a>
-        </li>
+        <div class="project-setting">
+            <ul class="project-menu-nav">
+                <li class="@isActiveMenu(MenuType.PROJECT_SETTING)">
+                    <a href="@routes.ProjectApp.settingForm(project.owner, project.name)">
+                        <i class="yobicon-cog"></i>
+                        <span class="blind">@Messages("menu.admin")</span>
+                        @if(project.enrolledUsers.size > 0){
+                        <span class="project-menu-count">@project.enrolledUsers.size</span>
+                        }
+                    </a>
+                <li>
+            </ul>
+        </div>
         }
-    </ul>
-    <div class="resize-btn">
-        <a href="javascript:void(0);" class="btn-transparent" id="btnMenuToggler">
-            <i class="yobicon-resizeh"></i>
-        </a>
     </div>
 </div>
 <script type="text/javascript">
@@ -110,4 +97,4 @@
         "sRepoURL": "@CodeApp.getURLWithLoginId(project)"
     });
 });
-</script>
+</script>
(No newline at end of file)
public/javascripts/service/yobi.project.Global.js
--- public/javascripts/service/yobi.project.Global.js
+++ public/javascripts/service/yobi.project.Global.js
@@ -50,7 +50,6 @@
             htElement.welProjectHeaher = $('.project-header')
             htElement.welBtnWatch   = $(".watchBtn, #btnWatch");
             htElement.welBtnEnroll  = $("#enrollBtn");
-            htElement.welBtnMenuToggle = $('#btnMenuToggler');
 
             htElement.welBtnClone   = $('[data-toggle="cloneURL"]');
             htElement.welInputCloneURL =$('#cloneURL');
@@ -69,7 +68,7 @@
         function _attachEvent() {
             htElement.welBtnWatch.on('click',_onClickBtnWatch);
             htElement.welBtnEnroll.on('click',_onClickBtnEnroll);
-            htElement.welBtnMenuToggle.on('click', _onClickBtnMenuToggle);
+
             // 내용은 data-content 속성으로 scala 파일 내에 있음.
             htElement.welForkedFrom.popover({
                 "html"   : true
@@ -128,20 +127,6 @@
 
             weEvt.preventDefault();
             return false;
-        }
-
-        /**
-         * MenuToggle 버튼 클릭시 이벤트 핸들러
-         * @param {Wrapped Event} weEvt
-         */
-        function _onClickBtnMenuToggle(weEvt){
-            if(htElement.welPageWrap.hasClass('mini')){
-                htElement.welPageWrap.removeClass('mini');
-                htElement.weSideMenu.tooltip('disable');
-            }else{
-                htElement.welPageWrap.addClass('mini');
-                htElement.weSideMenu.tooltip('enable');
-            }            
         }
 
         /**
Add a comment
List