Jihan Kim 2014-07-08
ui.Select2: add 'branch' format and apply to code browser, history.
@7ea1ef8697b3ecd079af74c4400002c6f9dadaa2
app/assets/stylesheets/less/_override.less
--- app/assets/stylesheets/less/_override.less
+++ app/assets/stylesheets/less/_override.less
@@ -287,3 +287,13 @@
 .select2-without-searchbox .select2-search {
     display: none;
 }
+.select2-drop.branches {
+    width:auto !important;
+    border-top:1px solid rgba(0,0,0,0.15);
+    .box-shadow(2px 2px 0 rgba(0,0,0,0.05));
+    .border-radius(3px);
+
+    .select2-results {
+        width: auto;
+    }
+}
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -3756,12 +3756,21 @@
     }
 
 }
-.branches {
-    text-align:left;
 
-    .label {
-        margin:0; padding:0 5px; margin-right:3px;
-        &.branch { background-color:@orange; }
+.branch-label {
+    color:#fff;
+    text-shadow: none;
+    .border-radius(2px);
+
+    &.branch {
+        padding: 2px 4px;
+        margin: 0 3px 0 0;
+        background-color: @yobi-yello-dark;
+    }
+    &.tag {
+        padding: 2px 4px;
+        margin: 0 3px 0 0;
+        background-color: @yobi-cyan;
     }
 }
 
@@ -3816,7 +3825,7 @@
         display:inline-block;
         padding:0; padding-right:10px;
         color:#555;
-        line-height:34px;
+        line-height:30px;
         font-size: 15px;
         font-weight:bold;
 
app/views/code/diff.scala.html
--- app/views/code/diff.scala.html
+++ app/views/code/diff.scala.html
@@ -25,7 +25,6 @@
 @import playRepository.RepositoryService
 @import java.net.URLEncoder
 @import utils.TemplateHelper._
-@import utils.TemplateHelper.Branches._
 @import utils.TemplateHelper.DiffRenderer._
 @import utils.JodaDateUtil
 @import utils.AccessControl._
@@ -37,20 +36,16 @@
 <div class="page-wrap-outer">
     <div class="project-page-wrap">
         <div id="code-browse-wrap" class="code-browse-wrap">
-            <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
-                <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                    <span class="d-label">@selectedBranch</span>
-                    <span class="d-caret"><span class="caret"></span></span>
-                </button>
-                <ul class="dropdown-menu">
+            <select id="branches" data-toggle="select2" data-format="branch" data-dropdown-css-class="branches" class="pull-right">
                 @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
-                    @for(branch <- branches){
-                        @common.branchItem("history", project, branch, null,
-                            utils.TemplateHelper.equals(branch, selectedBranch))
+                    @for(branchName <- branches){
+                        <option value="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(branchName, "UTF-8"), null)"
+                                @if(selectedBranch){ @if(branchItemName(branchName) == branchItemName(selectedBranch)){ selected } }>
+                                @branchName
+                        </option>
                     }
                 }
-                </ul>
-            </div>
+            </select>
 
             <ul class="nav nav-tabs" style="margin-bottom:20px;">
                 <li>
@@ -199,7 +194,7 @@
 </div>
 @common.markdown(project)
 @common.commentDeleteModal("#code-browse-wrap")
-
+@common.select2()
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.caret.min.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.js")"></script>
app/views/code/history.scala.html
--- app/views/code/history.scala.html
+++ app/views/code/history.scala.html
@@ -94,20 +94,16 @@
                 }
 
                 @if(path == null){
-                <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
-                    <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                        <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
-                        <span class="d-caret"><span class="caret"></span></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
-                            @for(branch <- branches){
-                                @common.branchItem("history", project, branch, null,
-                                    utils.TemplateHelper.equals(branch, selectedBranch))
-                            }
+                <select id="branches" data-toggle="select2" data-format="branch" data-dropdown-css-class="branches" class="pull-right">
+                    @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
+                        @for(branchName <- branches){
+                            <option value="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(branchName, "UTF-8"), null)"
+                                    @if(selectedBranch){ @if(branchItemName(branchName) == branchItemName(selectedBranch)){ selected } }>
+                                    @branchName
+                            </option>
                         }
-                    </ul>
-                </div>
+                    }
+                </select>
 
                 <ul class="nav nav-tabs" style="margin-bottom:20px;">
                     <li>
@@ -222,12 +218,19 @@
         </div>
     </div>
 </div>
+
+@common.select2()
+
 <script type="text/javascript">
 $(document).ready(function(){
     $("button.moreBtn").on("click", function(){
         $(this).next("pre.commitMsg.desc").toggleClass("hidden");
     });
 
+    $("#branches").on("change", function(evt){
+        location.href = evt.val;
+    });
+
     // Copy CommitId
     $("#history").find(".btn-copy-commitId").each(function(i, el){
         var welBtnCopy = $(el);
app/views/code/view.scala.html
--- app/views/code/view.scala.html
+++ app/views/code/view.scala.html
@@ -76,18 +76,15 @@
             }
 
             <div class="code-browse-header">
-                <div id="branches" class="btn-group branches pull-left @if(fieldText(recursiveData{0}, "type").eq("file")){mb10}" data-name="branch" data-activate="manual">
-                    <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                        <span class="d-label">@branch</span>
-                        <span class="d-caret"><span class="caret"></span></span>
-                    </button>
-                    <ul class="dropdown-menu">
-                    @for(branchName <- branches){
-                        @common.branchItem("code", project, branchName, path,
-                            utils.TemplateHelper.equals(branchName, branch))
-                    }
-                    </ul>
-                </div>
+                <select id="branches" data-toggle="select2" data-format="branch" data-dropdown-css-class="branches"
+                        class="pull-left @if(fieldText(recursiveData{0}, "type").eq("file")){mb10}">
+                @for(branchName <- branches){
+                    <option value="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branchName, "UTF-8"), path)"
+                            @if(branchItemName(branchName) == branchItemName(branch)){ selected }>
+                        @branchName
+                    </option>
+                }
+                </select>
                 <div id="breadcrumbs" class="code-breadcrumb-wrap ml10 pull-left">
                     <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), "")">@project.name</a>
                     @makeBreadCrumbs(path)
@@ -104,6 +101,8 @@
     </div>
 </div>
 
+@common.select2()
+
 <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/dynatree/skin/ui.dynatree.css")" />
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/moment-with-langs.min.js")"></script>
 <script type="text/javascript">
app/views/project/setting.scala.html
--- app/views/project/setting.scala.html
+++ app/views/project/setting.scala.html
@@ -131,6 +131,9 @@
         </form>
     </div>
 </div>
+
+@common.select2()
+
 <script type="text/javascript">
     $(document).ready(function(){
         $yobi.loadModule("project.Setting");
public/javascripts/common/yobi.ui.Select2.js
--- public/javascripts/common/yobi.ui.Select2.js
+++ public/javascripts/common/yobi.ui.Select2.js
@@ -93,6 +93,35 @@
                 }
 
                 return '<a class="label issue-label active static" data-labelid="' + sLabelId + '">' + oItem.text.trim() + '</a>';
+            },
+            "branch": function(oItem){
+                var sBranchType = "";
+                var sBranchName = oItem.text.trim();
+                var rxBranchName = /refs\/(.[a-z]+)\/(.+)/i;
+
+                // parse sBranchName with regular expression rxBranchName
+                // e.g.'refs/heads/feature/review-10'
+                // -> ["refs/heads/feature/review-10", "heads", "feature/review-10"]
+                var aParsedBranchName = sBranchName.match(rxBranchName);
+                var htBranchTypeMapByName = {
+                    "heads": "branch",
+                    "tags" : "tag"
+                };
+
+                if(aParsedBranchName){
+                    sBranchType = htBranchTypeMapByName[aParsedBranchName[1]] || aParsedBranchName[1];
+                    sBranchName = aParsedBranchName[2];
+                }
+
+                var sTplBranchItem = $("#tplSelect2FormatBranch").text()
+                                  || '<strong class="branch-label ${branchType}">${branchType}</strong> ${branchName}';
+
+                var sBranchNameHTMLWithLabel = $yobi.tmpl(sTplBranchItem, {
+                    "branchType": sBranchType,
+                    "branchName": sBranchName
+                });
+
+                return sBranchNameHTMLWithLabel;
             }
         };
 
public/javascripts/service/yobi.code.Browser.js
--- public/javascripts/service/yobi.code.Browser.js
+++ public/javascripts/service/yobi.code.Browser.js
@@ -73,6 +73,7 @@
             htElement.welShowCode = $("#showCode"); // aceEditor
             htElement.welCodeVal  = $("#codeVal");
             htElement.welBreadCrumbs = $("#breadcrumbs");
+            htElement.welBranches = $("#branches");
         }
 
         function _initDepthedList(){
@@ -98,6 +99,11 @@
         function _attachEvent(){
             $('.code-viewer-wrap').click(_onClickWrap);
             $(window).on("hashchange", _onHashChange);
+            htElement.welBranches.on("change", _onChangeBranch);
+        }
+
+        function _onChangeBranch(weEvt){
+            location.href = weEvt.val;
         }
 
         /**
public/javascripts/service/yobi.code.Diff.js
--- public/javascripts/service/yobi.code.Diff.js
+++ public/javascripts/service/yobi.code.Diff.js
@@ -149,6 +149,10 @@
             _setReviewWrapAffixed();
 
             $(window).on('resize scroll', _setReviewListHeight);
+
+            $("#branches").on("change", function(weEvt){
+                location.href = weEvt.val;
+            });
         }
 
         /**
Add a comment
List