Update the fork account selector dialog to list style

src/main/scala/gitbucket/core/controller/AccountController.scala

@@ -713,7 +713,7 @@ trait AccountControllerBase extends AccountManagementControllerBase {
           }
           helper.html.forkrepository(
             repository,
-            (groups zip managerPermissions).toMap
+            (groups zip managerPermissions).sortBy(_._1)
           )
         case _ => redirect(s"/${loginUserName}")
       }

src/main/twirl/gitbucket/core/helper/forkrepository.scala.html

@@ -1,18 +1,23 @@
 @(repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
-  groupAndPerm: Map[String, Boolean])(implicit context: gitbucket.core.controller.Context)
+  groupAndPerm: Seq[(String, Boolean)])(implicit context: gitbucket.core.controller.Context)
 @import gitbucket.core.view.helpers
 <h2 class="facebox-header">Where should we fork this repository?</h2>
 <form action="@helpers.url(repository)/fork" id="fork" method="post">
-  <div class="owner-select-grid">
-    <div class="owner-select-target js-fork-owner-select-target enabled">@helpers.avatar(context.loginAccount.get.userName, 100)<span class="owner css-truncate" title="@@@context.loginAccount.get.userName">@@@context.loginAccount.get.userName</span></div>
+  <div class="content">
+    <div class="block">
+      @helpers.avatar(context.loginAccount.get.userName, 24) <a href="javascript:void(0);" class="js-fork-owner-select-target">@@@context.loginAccount.get.userName</a>
+    </div>
     @for((groupName, isManager) <- groupAndPerm) {
       @if(isManager) {
-        <div class="owner-select-target js-fork-owner-select-target enabled">@helpers.avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
+        <div class="block js-fork-owner-select-target">
+          @helpers.avatar(groupName, 24) <a href="javascript:void(0);" class="js-fork-owner-select-target">@@@groupName</a>
+        </div>
       } else {
-        <div title="You don't have permission to fork here."  class="owner-select-target js-fork-owner-select-target disabled">@helpers.avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
+        <div class="block" title="You don't have permission to fork here.">
+          @helpers.avatar(groupName, 24) <span class="muted">@@@groupName</span>
+        </div>
       }
     }
-    </div>
   </div>
   <input id="account" name="account" type="hidden" />
-</form>
+</form>

src/main/twirl/gitbucket/core/repo/forked.scala.html

@@ -54,11 +54,9 @@ $(function(){
   });
 
   $(document).on("click", ".js-fork-owner-select-target", function() {
-    if (!$(this).hasClass("disabled")) {
-      var account = $(this).text().replace("@@", "");
-      $("#account").val(account);
-      $("#fork").submit();
-    }
+    var account = $(this).text().replace("@@", "");
+    $("#account").val(account);
+    $("#fork").submit();
   });
 
   @if(context.loginAccount.isDefined){

src/main/webapp/assets/vendors/facebox/facebox.css

@@ -80,63 +80,9 @@
 }
 
 .facebox-header {
-  margin: -15px -15px 15px;
+  margin: -15px -15px 0px -15px;
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
   font-size: 18px;
   font-weight: normal;
 }
-
-.owner-select-grid {
-  margin-left: -8px;
-  overflow: hidden;
-}
-
-.owner-select-target {
-  float: left;
-  padding: 10px;
-  margin: 0 8px 10px;
-  text-align: center;
-  background-color: #f2f2f2;
-  border-radius: 3px;
-}
-
-.owner-select-target.enabled {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.owner-select-target.disabled {
-  color: #999;
-  cursor: not-allowed;
-}
-
-.owner-select-grid .avatar {
-  display: block;
-  overflow: hidden;
-  line-height: 1;
-  vertical-align: middle;
-  border-radius: 3px;
-}
-
-.owner-select-target.enabled .avatar {
-  opacity: 1;
-}
-
-.owner-select-target.disabled .avatar {
-  margin-bottom: 9px;
-  opacity: 0.3;
-}
-
-.css-truncate {
-  display: inline-block;
-  max-width: 125px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.owner-select-target .css-truncate {
-  max-width: 90px;
-}