Jihan Kim 2014-06-12
Project: improve new project form style
@95dcc19e3d18c9faf013222f5ab510b099d4b6af
app/assets/stylesheets/less/_override.less
--- app/assets/stylesheets/less/_override.less
+++ app/assets/stylesheets/less/_override.less
@@ -284,3 +284,6 @@
 .label {
   border-radius: 1px;
 }
+.select2-without-searchbox .select2-search {
+    display: none;
+}
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -564,20 +564,10 @@
     label { cursor:pointer; .inline-block; }
 }
 
-/*.user-thumb-wrap {
-    border: 1px solid #B4B4B4;
-    .border-radius(3px);
-    .inline-block;
-}*/
-
 .checkbox {
     .inline-block;
     vertical-align:top;
     margin:2px !important;
-}
-
-.label-public, .label-private, .label-agreement {
-   .form-label;
 }
 
 .forked-from {
@@ -1415,51 +1405,14 @@
 //-- new project
 .form-wrap {
     &.new-project {
-        margin: 30px 19px 0px 19px;
+        width:700px;
+        margin: 30px auto;
 
         .text {
-            width: 99%;/*866px;*/
+            width: 99%;
             &.textarea {
                 height: 78px;
-                resize: none;
-            }
-        }
-        .options {
-            background-color: #F7F7F7;
-            margin-bottom: 20px;
-            .border-radius(10px);
-
-            .option {
-                padding: 15px 20px;
-                border-bottom: 1px solid #E9E9E9;
-                &:first-child {
-                    padding-top:24px;
-                }
-                &:last-child {
-                    border-bottom: 0 none;
-                    padding-bottom:24px;
-                }
-                .option-label {
-                    float: left;
-                    width: 125px;
-                    line-height:29px;
-                }
-                .option-desc {
-                    margin-left: 125px;
-                    label {
-                        display: inline;
-                        color: #777;
-                    }
-                    .note {
-                        margin-left: 10px;
-                        color: #777; /*BDBDBD;*/
-                        font-size: 12px;
-                    }
-                }
-            }
-
-            .d-label, .dropdown-menu {
-                width:182px;
+                resize: vertical;
             }
         }
 
@@ -1467,6 +1420,25 @@
             text-align: center;
             position: relative;
         }
+
+        .project-scopes {
+            .icon-scope {
+                font-size:18px;
+                margin:0 10px 20px 7px;
+            }
+            .note {
+                color:#777;
+                font-size:11px;
+                margin-left:22px;
+            }
+            label { display: block; }
+        }
+
+        .advanced-options {
+            padding:10px 0;
+            background:#fafafa;
+            .border-radius(10px);
+        }
     }
 }
 
app/assets/stylesheets/less/_yobiUI.less
--- app/assets/stylesheets/less/_yobiUI.less
+++ app/assets/stylesheets/less/_yobiUI.less
@@ -40,7 +40,7 @@
 
     &:focus {
         .box-shadow(none);
-        border-color:@primary;
+        border-color:@primary !important;
     }
 }
 
app/views/project/create.scala.html
--- app/views/project/create.scala.html
+++ app/views/project/create.scala.html
@@ -30,79 +30,153 @@
     <div class="form-wrap new-project">
       <form action="@routes.ProjectApp.newProject()" method="post" name="newproject" class="frm-wrap">
         <legend>
-          @Messages("title.newProject") <span> <small>@Messages("project.import.or") &nbsp </small><a href="@routes.ImportApp.importForm()" class="btn btn-small"><strong>@Messages("project.import.from.git")</strong></a>
+          @Messages("title.newProject")
+          <span>
+            <small>@Messages("project.import.or") &nbsp; </small>
+            <a href="@routes.ImportApp.importForm()?owner=@newProjectForm.field("owner").value" class="ybtn ybtn-small nm">
+              <strong>@Messages("project.import.from.git")</strong>
+            </a>
           </span>
         </legend>
+
         <dl>
+          <!-- ProjectOwner -->
           <dt>
+            <label for="project-owner">
+              @Messages("project.owner")
+              <strong class="orange-txt">*</strong>
+            </label>
+          </dt>
+          <dd>
+            <select id="project-owner" name="owner" data-toggle="select2" data-format="user" class="mb10">
+                <option data-type="user"
+                        data-avatar-url="@UserApp.currentUser().avatarUrl"
+                        value="@UserApp.currentUser().loginId">
+                  @UserApp.currentUser().loginId
+                </option>
+
+                @for(orgUser <- orgUserList) {
+                    <option data-type="group"
+                            data-avatar-url="@urlToOrganizationLogo(orgUser.organization)"
+                            value="@orgUser.organization.name"
+                            @if(newProjectForm.field("owner").value == orgUser.organization.name) { selected }>
+                      @orgUser.organization.name
+                    </option>
+                }
+            </select>
             <div class="n-alert" data-errType="owner">
               <div class="orange-txt">
                 @if(newProjectForm.error("owner") != null) { <span class="warning">@Messages(newProjectForm.error("owner").message())</span> }
               </div>
             </div>
-            <label for="project-owner">@Messages("project.owner.placeholder")</label>
+          </dd>
+          <!-- // -->
+
+          <!-- ProjectName -->
+          <dt>
+            <label for="project-name">
+              @Messages("project.name")
+              <strong class="orange-txt">*</strong>
+            </label>
           </dt>
           <dd>
-            <select id="project-owner" name="owner">
-                <option data-type="user" value="@UserApp.currentUser().loginId">@UserApp.currentUser().loginId</option>
-                @for(orgUser <- orgUserList) {
-                    <option data-type="group" value="@orgUser.organization.name" @if(newProjectForm.field("owner").value == orgUser.organization.name) { selected }>@orgUser.organization.name</option>
-                }
-            </select>
-          </dd>
-          <dt>
+            <input id="project-name" type="text" name="name" class="text" maxlength="250" pattern="[a-zA-Z0-9-]+"
+                   value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.alert")"  >
             <div class="n-alert" data-errType="name">
               <div class="orange-txt">
                 @if(newProjectForm.error("name") != null) { <span class="warning">@Messages(newProjectForm.error("name").message())</span> }
                 <span class="msg wrongName" style="display: none;"></span>
               </div>
             </div>
-            <label for="project-name">@Messages("project.name.placeholder")</label>
-          </dt>
-          <dd>
-            <input id="project-name" type="text" name="name" class="text" placeholder="" maxlength="250" value="@newProjectForm.field("name").value">
           </dd>
+          <!-- // -->
 
+          <!-- Description -->
           <dt>
-            <label for="description">@Messages("project.description.placeholder")</label>
+            <label for="description">@Messages("project.description")</label>
           </dt>
           <dd>
-            <textarea id="description" name="overview" class="text textarea.span4" style="resize: vertical;">@newProjectForm.field("overview").value</textarea>
+            <textarea id="description" name="overview" class="text textarea.span4">@newProjectForm.field("overview").value</textarea>
           </dd>
+          <!-- // -->
         </dl>
 
-        <ul class="options unstyled">
-          <li class="option">
-            <div class="option-label">@Messages("project.shareOption")</div>
-            <div class="option-desc">
-              <input name="projectScope" type="radio" id="public" value="PUBLIC"@if(newProjectForm.field("projectScope").value == "PUBLIC" || newProjectForm.field("projectScope").value == null){ checked="checked" } class="radio-btn">
-              <label for="public" class="bg-radiobtn label-public">@Messages("project.public")</label>
-              <input name="projectScope" type="radio" id="protected" value="PROTECTED"@if(newProjectForm.field("projectScope").value == "PROTECTED"){ checked="checked" } class="radio-btn"@if(!Organization.isNameExist(newProjectForm.field("owner").value)){ style="display:none;"}>
-              <label for="protected" class="bg-radiobtn label-protected"@if(!Organization.isNameExist(newProjectForm.field("owner").value)){ style="display:none;"}>@Messages("project.protected")</label>
-              <input name="projectScope" type="radio" id="private" value="PRIVATE"@if(newProjectForm.field("projectScope").value == "PRIVATE"){ checked="checked" } class="radio-btn">
-              <label for="private" class="bg-radiobtn label-private">@Messages("project.private")</label>
+        <div class="advanced-options">
+          <!-- Access Scope -->
+          <div class="row-fluid">
+            <div class="span2 right-txt mt10">
+              @Messages("project.shareOption")
             </div>
-          </li>
-          <li id="vcs_dropdown" class="option">
-            <div class="option-label">@Messages("project.vcs")</div>
-            <div class="option-desc">
-              <div class="btn-group" data-name="vcs">
-                <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                  <span class="d-label"></span> <span class="d-caret"><span class="caret"></span></span>
-                </button>
-                <ul class="dropdown-menu">
-                  @RepositoryService.vcsTypes.map{ v =>
-                  <li data-value="@v._1" @if(newProjectForm.field("vcs").value == null && v._1== "GIT"){ data-selected="true" class="active"} @if(newProjectForm.field("vcs").value == v._1){ data-selected="true" class="active" }><a href="javascript:void(0)">@Messages(v._2)</a></li> }
-                </ul>
-              </div>
+            <div class="span10">
+              <ul class="unstyled project-scopes mt10">
+                <li>
+                  <input type="radio" id="public" name="projectScope" value="PUBLIC" class="radio-btn pull-left" @if(newProjectForm.field("projectScope").value == "PUBLIC" || newProjectForm.field("projectScope").value == null){ checked="checked" }>
+                  <label for="public">
+                    <strong class="ml5">@Messages("project.public")</strong>
+                    <p class="note">
+                      @Html(Messages("project.public.notice"))
+                    </p>
+                  </label>
+                </li>
 
-              <span id="svn" class="note" @if(newProjectForm.field("vcs").value == "GIT"){style="display: none;"}>@Messages("project.svn.warning")</span>
+                <li id="opt-protected" class="mt10" @if(!Organization.isNameExist(newProjectForm.field("owner").value)){ style="display:none;"}>
+                  <input type="radio" id="protected" name="projectScope" value="PROTECTED" class="radio-btn pull-left" @if(newProjectForm.field("projectScope").value == "PROTECTED"){ checked="checked" }>
+                  <label for="protected">
+                    <strong class="ml5">@Messages("project.protected")</strong>
+                    <p class="note">
+                      @Html(Messages("project.protected.notice"))
+                    </p>
+                  </label>
+                </li>
+
+                <li class="mt10">
+                  <input type="radio" id="private" name="projectScope" value="PRIVATE" class="radio-btn pull-left" @if(newProjectForm.field("projectScope").value == "PRIVATE"){ checked="checked" }>
+                  <label for="private">
+                    <strong class="ml5">@Messages("project.private")</strong>
+                    <p class="note">
+                      @Html(Messages("project.private.notice"))
+                    </p>
+                  </label>
+                </li>
+              </ul>
             </div>
-          </li>
-        </ul>
-        <div class="actions">
+          </div>
+          <!-- // -->
+          <hr>
+          <!-- VCS -->
+          <div class="row-fluid">
+            <div class="span2 right-txt mt10">
+              <label for="vcs">
+                @Messages("project.vcs")
+              </label>
+            </div>
+            <div class="span10 cu-desc">
+              @defining(newProjectForm.field("vcs").value){ vcsFormField =>
+              <select id="vcs" name="vcs" data-toggle="select2" data-dropdown-css-class="select2-without-searchbox" class="mb10 mt5">
+                @RepositoryService.vcsTypes.map{ v =>
+                <option value="@v._1"
+                @if((vcsFormField == null && v._1 == "GIT") || (vcsFormField == v._1)){
+                selected
+                }>
+                @Messages(v._2)
+                </option>
+                }
+              </select>
+
+              <span id="svn" class="ml10 notice"
+              @if(vcsFormField == null || vcsFormField == "GIT"){style="display: none;"}
+              >
+              @Messages("project.svn.warning")
+              </span>
+              }
+            </div>
+          </div>
+          <!-- // -->
+        </div>
+
+        <div class="actions mt20">
           <button class="ybtn ybtn-success">
-            <i class="yobicon-database-add"></i> @Messages("project.create")
+            @Messages("project.create")
           </button>
           <a href="/" class="ybtn">@Messages("button.cancel")</a>
         </div>
@@ -110,6 +184,8 @@
     </div>
   </div>
 </div>
+
+@common.select2()
 <script type="text/javascript">
     $(document).ready(function() {
         $yobi.loadModule("project.New", {
conf/messages
--- conf/messages
+++ conf/messages
@@ -470,7 +470,7 @@
 project.members = Project members
 project.members.addMember = Add new member ID.
 project.name = Project name
-project.name.alert = Wrong project name. (Characters that can be used in URL are allowed)
+project.name.alert = Characters that can be used in URL are allowed
 project.name.duplicate = Same project name already exists.
 project.name.placeholder = Enter project name
 project.name.reserved.alert = You can''t use reserved names.
@@ -484,10 +484,12 @@
 project.owner.invalidate = Owner information is not valid.
 project.owner.placeholder = Please select project ownership
 project.private = PRIVATE
-project.private.notice = The basic information of private projects including name, description, and logo is open to all users.
-project.projects = Projects
+project.private.notice = Project access must be granted explicitly for each user. but basic information (name, description, etc.) can be exposed to public.
+project.projects = projects
 project.protected = GROUP PUBLIC
+project.protected.notice = Users in the group and also explicitly granted users are available to access the project.
 project.public = PUBLIC
+project.public.notice = Anonymous users are available to access the project.
 project.readme = README.md will be shown here if you add it into the code repository''s root directory.
 project.recently.visited = Recently visited
 project.reviewer.count = Reviewer
conf/messages.ko
--- conf/messages.ko
+++ conf/messages.ko
@@ -478,14 +478,16 @@
 project.new.vcsType.subversion = Subversion
 project.onmember = <i class="yobicon-friends yobicon-middle"></i><strong>{0}</strong>
 project.onwatching = <strong>{0}</strong>
-project.owner = 소유자 이름
+project.owner = 프로젝트 소유자
 project.owner.placeholder = 프로젝트 소유자를 선택해주세요
 project.owner.invalidate = 소유자 정보가 유효하지 않습니다
 project.private = 비공개
-project.private.notice = 비공개 프로젝트도 프로젝트 이름,설명,로고 등은 모든 사용자가 볼 수 있습니다
+project.private.notice = 멤버로 등록한 사람만 접근할 수 있습니다. 단, 프로젝트 이름, 설명, 로고 등은 모든 사용자가 볼 수 있습니다.
 project.projects = 프로젝트
 project.protected = 그룹 공개
+project.protected.notice = 그룹에 속한 사람들과 프로젝트 멤버로 등록한 사람들만 접근할 수 있습니다.
 project.public = 공개
+project.public.notice = 모든 사람이 인증절차 없이 접근할 수 있습니다. 일부 기능은 로그인이 필요할 수 있습니다.
 project.readme = 프로젝트에 대한 설명을 README.md 파일로 작성해서 코드저장소 루트 디렉토리에 추가하면 이 곳에 나타납니다.
 project.recently.visited = 최근 방문한 프로젝트
 project.reviewer.count.description = 명이 리뷰를 완료하면 코드를 받을 수 있습니다.
@@ -498,7 +500,7 @@
 project.siteurl = 사이트 주소
 project.siteurl.alert = 사이트 URL은 http://로 시작해야 합니다.
 project.svn.readme = 프로젝트에 대한 설명을 README.md 파일로 작성해서 코드저장소 루트 디렉토리나 /trunk 디렉토리에 추가하면 이 곳에 나타납니다.
-project.svn.warning = Subversion은 코드주고받기 기능을 사용할 수 없습니다.
+project.svn.warning = Subversion 사용시 코드주고받기 기능을 사용할 수 없습니다.
 project.tags = 태그
 project.transfer = 프로젝트 이관
 project.transfer.accept = 프로젝트를 이관하는데 동의합니다.
public/javascripts/service/yobi.project.New.js
--- public/javascripts/service/yobi.project.New.js
+++ public/javascripts/service/yobi.project.New.js
@@ -28,10 +28,12 @@
 
         function _init(htOptions){
             _initVar(htOptions);
-            _initElement(htOptions);
+            _initElement();
             _attachEvent();
 
             _initFormValidator();
+
+            htElement.welInputProjectName.focus();
         }
 
         /**
@@ -46,34 +48,24 @@
         /**
          * initialize element
          */
-        function _initElement(htOptions){
-            htElement.welInputVCS = $("#vcs"); // input type="hidden"
-            htElement.welBtnVCSSelected = $("#vcs_msg"); // <button data-toggle="dropdown">
-            htElement.aVCSItems = $("#vcs_dropdown li a");
+        function _initElement(){
+            htElement.vcsSelect = $("#vcs");
             htElement.svnWarning = $("#svn");
             htElement.welInputProjectName = $("#project-name");
             htElement.welInputProjectOwner = $("#project-owner");
-            htElement.welProtected = $("#protected, .label-protected");
-
-            htElement.welInputProjectName.focus();
+            htElement.welProtected = $("#opt-protected");
         }
 
         /**
          * attach event handler
          */
         function _attachEvent(){
-            htElement.aVCSItems.click(_onSelectVCSItem);
+            htElement.vcsSelect.on("change", _onChangeVCSItem);
             htElement.welInputProjectOwner.on("change", _onChangeProjectOwner);
         }
 
-        function _onSelectVCSItem(){
-            var sText = $(this).text();
-            var sValue = $(this).attr("data-value");
-
-            htElement.welInputVCS.val(sValue);
-            htElement.welBtnVCSSelected.text(sText);
-
-            if(sText == "Subversion") {
+        function _onChangeVCSItem(evt){
+            if(evt.val.toUpperCase() === "SUBVERSION"){
                 htElement.svnWarning.show();
             } else {
                 htElement.svnWarning.hide();
Add a comment
List