doortts doortts 2014-01-13
issue-search: apply enhanced select2 dropdown box
 - applied to author, assignee, milestone filter at issue list page
@9187b9b9ca162fee4aa2626da7a7ee91af5fd036
 
app/assets/stylesheets/less/_override.less (added)
+++ app/assets/stylesheets/less/_override.less
@@ -0,0 +1,4 @@
+.select2-results .select2-highlighted {
+  background: #5abee2 ;
+  color: #fff;
+}(No newline at end of file)
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -3035,6 +3035,9 @@
        dd {
            margin:0;
            .btn-group { width:100%; }
+           select {
+             width: 100%;
+           }
        }
 }
 .label-editor {
app/assets/stylesheets/yobi.less
--- app/assets/stylesheets/yobi.less
+++ app/assets/stylesheets/yobi.less
@@ -7,3 +7,4 @@
 @import "less/_yobiUI.less";
 @import "less/_temporary.less";
 @import "less/_markdown.less";
+@import "less/_override.less";
app/views/issue/list.scala.html
--- app/views/issue/list.scala.html
+++ app/views/issue/list.scala.html
@@ -8,6 +8,7 @@
     	@views.html.issue.partial_search(title, currentPage, param, project)
     </div>
 </div>
+<script src="/assets/javascripts/lib/select2/select2.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
         var htPjaxOptions = {
app/views/issue/partial_search.scala.html
--- app/views/issue/partial_search.scala.html
+++ app/views/issue/partial_search.scala.html
@@ -78,82 +78,68 @@
                     <dl class="issue-option">
                         <dt>@Messages("issue.author")</dt>
                         <dd>
-                            <div class="btn-group" data-name="authorId">
-                                <button class="btn dropdown-toggle auto" data-toggle="dropdown">
-                                    <span class="d-label">@Messages("common.order.all")</span>
-                                    <span class="d-caret"><span class="caret"></span></span>
-                                </button>
-                                <ul class="dropdown-menu">
-                                    <li data-value=""><a>@Messages("common.order.all")</a></li>
-                                    @if(ProjectUser.isMember(UserApp.currentUser().id, project.id)){
-                                        <li data-value="@UserApp.currentUser().id"><a>@Messages("issue.list.authoredByMe")</a></li>
+                            <select id="authorId" name="authorId">
+                                <option value="">@Messages("common.order.all")</option>
+                                @if(ProjectUser.isMember(UserApp.currentUser().id, project.id)){
+                                <option value="@UserApp.currentUser().id">@Messages("issue.list.authoredByMe")</option>
+                                }
+                                @for(author <- User.findIssueAuthorsByProjectId(project.id)) {
+                                    <option value="@author.id"
+                                    @if(param.authorId != null && param.authorId == author.id){
+                                        selected
                                     }
-                                    <li class="divider"></li>
-                                    @for(author <- User.findIssueAuthorsByProjectId(project.id)) {
-                                    <li data-value="@author.id" @if(param.authorId != null && param.authorId == author.id){data-selected="true" class="active"}>
-                                        <a class="usf-group">
-                                            <span class="avatar-wrap smaller">
-                                                <img src="@author.avatarUrl" width="20" height="20">
-                                            </span>
-
-                                            <strong class="name">@author.name</strong>
-                                            <span class="loginid"> <strong>@{"@"}</strong>@author.loginId</span>
-                                        </a>
-                                    </li>
-                                    }
-                                </ul>
-                            </div>
+                                    data-avatar-url="@author.avatarUrl"
+                                    data-login-id="@author.loginId">
+                                    @author.name
+                                    </option>
+                                }
+                            </select>
                         </dd>
                     </dl>
 
                     <dl class="issue-option">
                         <dt>@Messages("issue.assignee")</dt>
                         <dd>
-                            <div class="btn-group" data-name="assigneeId">
-                                <button class="btn dropdown-toggle auto" data-toggle="dropdown">
-                                    <span class="d-label">@Messages("common.order.all")</span>
-                                    <span class="d-caret"><span class="caret"></span></span>
-                                </button>
-                                <ul class="dropdown-menu">
-                                    <li data-value=""><a>@Messages("common.order.all")</a></li>
-                                    <li data-value="@User.anonymous.id" @if(param.assigneeId != null && param.assigneeId == User.anonymous.id){data-selected="true" class="active"}><a>@Messages("issue.noAssignee")</a></li>
-                                    @if(ProjectUser.isMember(UserApp.currentUser().id, project.id)){
-                                        <li data-value="@UserApp.currentUser().id"><a>@Messages("issue.list.assignedToMe")</a></li>
+                            <select id="assigneeId" name="assigneeId">
+                                <option value="">@Messages("common.order.all")</option>
+                                <option value="@User.anonymous.id" @if(param.assigneeId != null && param.assigneeId == User.anonymous.id){ selected }>@Messages("issue.noAssignee")</option>
+                                @if(ProjectUser.isMember(UserApp.currentUser().id, project.id)){
+                                <option value="@UserApp.currentUser().id">@Messages("issue.list.assignedToMe")</a></option>}
+                                @for(member <- project.members) {
+                                    <option value="@member.user.id"
+                                    @if(param.assigneeId != null
+                                        && param.assigneeId == member.user.id){
+                                        selected
                                     }
-                                    <li class="divider"></li>
-                                    @for(member <- project.members) {
-                                    <li data-value="@member.user.id" @if(param.assigneeId != null && param.assigneeId == member.user.id){data-selected="true" class="active"}>
-                                        <a class="usf-group">
-                                            <span class="avatar-wrap smaller">
-                                                <img src="@member.user.avatarUrl" width="20" height="20">
-                                            </span>
-
-                                            <strong class="name">@member.user.name</strong>
-                                            <span class="loginid"> <strong>@{"@"}</strong>@member.user.loginId</span>
-                                        </a>
-                                    </li>
-                                    }
-                                </ul>
-                            </div>
+                                    data-avatar-url="@member.user.avatarUrl"
+                                    data-login-id="@member.user.loginId">
+                                        @member.user.name
+                                    </option>
+                                }
+                            </select>
                         </dd>
                     </dl>
+
                     <dl class="issue-option">
                         <dt>@Messages("milestone")</dt>
                         <dd>
-                            <div class="btn-group" data-name="milestoneId">
-                                <button class="btn dropdown-toggle auto" data-toggle="dropdown">
-                                    <span class="d-label">@Messages("milestone.state.all")</span>
-                                    <span class="d-caret"><span class="caret"></span></span>
-                                </button>
-                                <ul class="dropdown-menu">
-                                    <li data-value=""><a>@Messages("milestone.state.all")</a></li>
-                                    <li data-value="@Milestone.NULL_MILESTONE_ID" @if(param.milestoneId != null && param.milestoneId == Milestone.NULL_MILESTONE_ID){data-selected="true" class="active"}><a>@Messages("issue.noMilestone")</a></li>
-                                    <li class="divider"></li>
-                                    @for(milestone <- Milestone.findByProjectId(project.id)) {
-                                    <li data-value="@milestone.id" @if(param.milestoneId != null && param.milestoneId == milestone.id){data-selected="true" class="active"}><a>@milestone.title</a></li>
-                                    }
-                                </ul>
-                            </div>
+                            <select id="milestoneId" name="milestoneId">
+                                <option value="">@Messages("milestone.state.all")</option>
+                                @if(param.milestoneId != null
+                                    && param.milestoneId == Milestone.NULL_MILESTONE_ID){
+                                    <option value="@Milestone.NULL_MILESTONE_ID">
+                                        @Messages("issue.noMilestone")
+                                    </option>
+                                }
+                                @for(milestone <- Milestone.findByProjectId(project.id)) {
+                                    <option value="@milestone.id"
+                                    @if(param.milestoneId != null && param.milestoneId == milestone.id){
+                                        selected
+                                    }>
+                                        @milestone.title
+                                    </option>
+                                }
+                            </select>
                         </dd>
                     </dl>
                 </div>
@@ -222,28 +208,62 @@
 
         <script type="text/javascript">
             $(document).ready(function(){
-                yobi.Label.init({
-                    "sURLLabels"   : "@routes.IssueLabelApp.labels(project.owner, project.name)",
-                    "sURLPost"     : "@routes.IssueLabelApp.newLabel(project.owner, project.name)",
-                    "bRefresh"     : true
-                    @if(param.labelIds != null){
-                    , "aSelectedLabels" : [@StringUtils.join(param.labelIds, ",")]
-                    } else {
-                    , "aSelectedLabels" : []
-                    }
-                });
+                $("#assigneeId, #authorId")
+                    .select2({
+                        formatResult: format,
+                        formatSelection: format,
+                        width: "resolve"
+                    })
+                    .on("change", function(e){
+                        $("form[name='search']" ).submit();
+                    });
 
-                $yobi.loadModule("issue.List", {
-                    "welSearchOrder": $("a[orderBy]"),
-                    "welSearchState": $("a[state]"),
-                    "welSearchAuthor": $("div[data-name='authorId']"),
-                    "welSearchAssignee": $("div[data-name='assigneeId']"),
-                    "welSearchMilestone": $("div[data-name='milestoneId']"),
-                    "welSearchForm":$("form[name='search']"),
-                    "welFilter": $("a[pjax-filter]"),
-                    "elPagination": $("#pagination"),
-                    "nTotalPages" : @currentPage.getTotalPageCount()
-                });
+                $("#milestoneId")
+                    .select2({
+                        width: "resolve"
+                    })
+                    .on("change", function(e){
+                        $("form[name='search']").submit();
+                    });
+
+                /**
+                 * select box list customization using select2
+                 *
+                 */
+                function format(state) {
+                    var originalOption = state.element;
+                    if($(originalOption).data('avatar-url')){
+                        return "<img src='"+$(originalOption).data('avatar-url') +"'  width='20' height='20'>"
+                            + "<span style='font-weight: bold'>" + state.text + "</span>"
+                            +"<span style='color: gray'>@{"@"}" + $(originalOption).data('login-id') + "</span>";
+                    } else {
+                        return state.text;
+                    }
+                }
+            });
+        </script>
+        <script type="text/javascript">
+            $(document).ready(function(){
+				yobi.Label.init({
+				    "sURLLabels"   : "@routes.IssueLabelApp.labels(project.owner, project.name)",
+				    "sURLPost"     : "@routes.IssueLabelApp.newLabel(project.owner, project.name)",
+				    "bRefresh"     : true
+				    @if(param.labelIds != null){
+				    , "aSelectedLabels" : [@StringUtils.join(param.labelIds, ",")]
+				    } else {
+				    , "aSelectedLabels" : []
+				    }
+				});
+
+				$yobi.loadModule("issue.List", {
+				"welSearchOrder": $("a[orderBy]"),
+		   	        "welSearchState": $("a[state]"),
+		   	        "welSearchMilestone": $("div[data-name='milestoneId']"),
+		   	        "welSearchForm":$("form[name='search']"),
+		   	        "welFilter": $("a[pjax-filter]"),
+		   		    "elPagination": $("#pagination"),
+		   		    "nTotalPages" : @currentPage.getTotalPageCount()
+			   	});
 
                 yobi.ShortcutKey.setKeymapLink({
                    "N": "@routes.IssueApp.newIssueForm(project.owner, project.name)"
app/views/layout.scala.html
--- app/views/layout.scala.html
+++ app/views/layout.scala.html
@@ -13,6 +13,7 @@
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/yobi.css")">
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/yobicon/style.css")">
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/zenform/zen-form.css")">
+<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/select2/select2.css")"/>
 
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery-1.9.0.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery.pjax.js")"></script>
public/javascripts/service/yobi.issue.List.js
--- public/javascripts/service/yobi.issue.List.js
+++ public/javascripts/service/yobi.issue.List.js
@@ -31,7 +31,7 @@
          */
         function _initVar(htOptions){
             htVar.nTotalPages = htOptions.nTotalPages || 1;
-            
+
             htVar.oSearchAuthor    = new yobi.ui.Dropdown({"elContainer": htOptions.welSearchAuthor});
             htVar.oSearchAssignee  = new yobi.ui.Dropdown({"elContainer": htOptions.welSearchAssignee});
             htVar.oSearchMilestone = new yobi.ui.Dropdown({"elContainer": htOptions.welSearchMilestone});
@@ -115,16 +115,16 @@
             yobi.Label.resetLabel($(this).attr('data-labelId'));
             htElement.welSearchForm.submit();
         }
-        
+
         function _onChangeSearchField() {
             htElement.welSearchForm.submit();
         }
 
         function _onClickSearchFilter(event) {
             event.preventDefault();
-            htVar.oSearchAuthor.selectByValue($(this).attr("authorId"));
-            htVar.oSearchAssignee.selectByValue($(this).attr("assigneeId"));
-            htVar.oSearchMilestone.selectByValue($(this).attr("milestoneId"));
+            $("#authorId").val($(this).attr("authorId"));
+            $("#assigneeId").val($(this).attr("assigneeId"));
+            $("#milestoneId").val($(this).attr("milestoneId"));
             htElement.welSearchForm.submit();
         }
 
Add a comment
List