new repo options UI

README.md

@@ -109,7 +109,6 @@ There are 5 ways to install Gogs:
 
 ## Contributors
 
-- The [core team](http://gogs.io/team) of this project.
 - Ex-team members [@lunny](https://github.com/lunny) and [@fuxiaohei](https://github.com/fuxiaohei).
 - See [contributors page](https://github.com/gogits/gogs/graphs/contributors) for full list of contributors.
 - See [TRANSLATORS](conf/locale/TRANSLATORS) for full list of translators.

README_ZH.md

@@ -64,7 +64,6 @@ Gogs 的目标是打造一个最简单、最快速和最轻松的方式搭建自
 
 ## 贡献成员
 
-- 本项目的 [开发团队](http://gogs.io/team)。
 - 前团队成员 [@lunny](https://github.com/lunny) 和 [@fuxiaohei](https://github.com/fuxiaohei)。
 - 您可以通过查看 [贡献者页面](https://github.com/gogits/gogs/graphs/contributors) 获取完整的贡献者列表。
 - 您可以通过查看 [TRANSLATORS](conf/locale/TRANSLATORS) 文件获取完整的翻译人员列表。

conf/locale/locale_en-US.ini

@@ -503,7 +503,9 @@ settings.transfer_desc = Transfer this repository to another user or to an organ
 settings.new_owner_has_same_repo = The new owner already has a repository with same name. Please choose another name.
 settings.delete = Delete This Repository
 settings.delete_desc = Once you delete a repository, there is no going back. Please be certain.
-settings.transfer_notices = <p>- You will lose access if new owner is a individual user.</p><p>- You will conserve access if new owner is an organization and if you're one of the owners.</p>
+settings.transfer_notices = - You will lose access if new owner is a individual user.<br>- You will conserve access if new owner is an organization and if you're one of the owners.
+settings.transfer_form_title = Please enter following information to confirm your operation: 
+settings.delete_notices = - This operation <strong>CANNOT</strong> be undone.<br>- This operation will permanently delete the everything of this repository, including Git data, issues, comments and accesses of collaborators.
 settings.update_settings_success = Repository options has been updated successfully.
 settings.transfer_owner = New Owner
 settings.make_transfer = Make Transfer

modules/auth/repo_form.go

@@ -47,12 +47,12 @@ func (f *MigrateRepoForm) Validate(ctx *macaron.Context, errs binding.Errors) bi
 }
 
 type RepoSettingForm struct {
-	RepoName    string `form:"repo_name" binding:"Required;AlphaDashDot;MaxSize(100)"`
-	Description string `form:"desc" binding:"MaxSize(255)"`
-	Website     string `form:"site" binding:"Url;MaxSize(100)"`
-	Branch      string `form:"branch"`
-	Interval    int    `form:"interval"`
-	Private     bool   `form:"private"`
+	RepoName    string `binding:"Required;AlphaDashDot;MaxSize(100)"`
+	Description string `binding:"MaxSize(255)"`
+	Website     string `binding:"Url;MaxSize(100)"`
+	Branch      string
+	Interval    int
+	Private     bool
 }
 
 func (f *RepoSettingForm) Validate(ctx *macaron.Context, errs binding.Errors) binding.Errors {

public/js/gogs.js

@@ -492,6 +492,9 @@ $(document).ready(function () {
     $('.show-panel.button').click(function () {
         $($(this).data('panel')).show();
     });
+    $('.show-modal.button').click(function () {
+        $($(this).data('modal')).modal('show');
+    });
 
     initCommentForm();
     initInstall();

public/less/_repository.less

@@ -78,6 +78,25 @@
 	 		padding-right: 0;
 	 	}
 	}
+	
+	&.options {
+		input {
+			width: 50%!important;
+			min-width: 300px;
+		}
+		#interval {
+			width: 100px!important;
+			min-width: 100px;
+		}
+		.danger {
+			.item {
+				padding: 20px 15px;
+			}
+			.ui.divider {
+				margin: 0;
+			}
+		}
+	}
 
 	@comment-avatar-width: 3em;
 	&.new.issue {
@@ -732,4 +751,11 @@
 			}
 		}
 	}
+}
+
+#transfer-repo-modal,
+#delete-repo-modal {
+	.ui.message {
+		width: 100%!important;
+	}
 }

templates/repo/settings/githook_edit.tmpl

@@ -24,8 +24,7 @@
 					  </div>
 
 	          <div class="inline field">
-	            <label></label>
-	             <button class="ui green button" id="change-reponame-btn" href="#change-reponame-modal">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
+	             <button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
 	          </div>
 	          {{end}}
 	      	</form>

templates/repo/settings/options.tmpl

@@ -1,144 +1,157 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="repo-wrapper">
-    {{template "repo/header_old" .}}
-	<div id="setting-wrapper" class="main-wrapper">
-	    <div id="repo-setting" class="container clear">
-	        {{template "repo/settings/nav" .}}
-	        <div class="grid-4-5 left">
-	            <div class="setting-content">
-	                {{template "ng/base/alert" .}}
-	                <div id="setting-content">
-	                    <div class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.basic_settings"}}</strong>
-	                        </div>
-	                        <form class="form form-align panel-body" id="repo-setting-form" action="{{.RepoLink}}/settings" method="post">
-	                            {{.CsrfTokenHtml}}
-                    			<input type="hidden" name="action" value="update">
-	                            <div class="field">
-	                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
-	                                <input class="ipt ipt-large ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" required />
-	                            </div>
-	                            <div class="white-popup-block mfp-hide" id="change-reponame-modal">
-	                                <h1 class="text-red">{{.i18n.Tr "repo.settings.change_reponame"}}</h1>
-	                                <p>{{.i18n.Tr "repo.settings.change_reponame_desc"}}</p>
-	                                <br>
-	                                <button class="btn btn-red btn-large btn-radius" id="change-reponame-submit">{{.i18n.Tr "settings.continue"}}</button>
-	                                <button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
-	                            </div>
-					            <div class="field clear">
-					                <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
-					                <textarea class="ipt ipt-large ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.Repository.Description}}</textarea>
-					            </div>
-	                            <div class="field">
-	                                <label for="website">{{.i18n.Tr "repo.settings.site"}}</label>
-	                                <input class="ipt ipt-large ipt-radius {{if .Err_Website}}ipt-error{{end}}" id="website" name="site" type="url" value="{{.Repository.Website}}" />
-	                            </div>
-	                            <hr>	
-	                            <br>
-	                           	{{if not .Repository.IsBare}}
-					            <div class="field">
-					                <label>{{.i18n.Tr "repo.default_branch"}}</label>
-					                <select name="branch">
-		                                {{if .Repository.DefaultBranch}}<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>{{end}}
-		                                {{range .Branches}}
-		                                	{{if not (eq . $.Repository.DefaultBranch)}}<option value="{{.}}">{{.}}</option>{{end}}
-		                                {{end}}
-					                </select>
-					            </div>
-					            {{end}}
-					            {{if .Repository.IsMirror}}
-	                            <div class="field">
-	                                <label for="interval">{{.i18n.Tr "repo.mirror_interval"}}</label>
-	                                <input class="ipt ipt-large ipt-radius {{if .Err_Interval}}ipt-error{{end}}" id="interval" name="interval" type="number" value="{{.MirrorInterval}}" />
-	                            </div>
-	                            {{end}}
-					            <div class="field">
-					                <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
-					                <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .Repository.IsPrivate}}checked{{end}} />
-					                <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
-					            </div>
-	                            <div class="field">
-	                                <span class="form-label"></span>
-	                                <button class="btn btn-green btn-large btn-radius" id="change-reponame-btn" href="#change-reponame-modal">{{.i18n.Tr "repo.settings.update_settings"}}</button>
-	                            </div>
-	                        </form>
-	                    </div>
-	                </div>
+{{template "base/head" .}}
+<div class="repository settings options">
+	{{template "repo/header" .}}
+	<div class="ui container">
+		<div class="ui grid">
+			{{template "repo/settings/navbar" .}}
+			<div class="twelve wide column content">
+				{{template "base/alert" .}}
+				<h4 class="ui top attached header">
+				  {{.i18n.Tr "repo.settings.basic_settings"}}
+				</h4>
+				<div class="ui attached segment">
+					<form class="ui form" action="{{.Link}}" method="post">
+						{{.CsrfTokenHtml}}
+      			<input type="hidden" name="action" value="update">
+					  <div class="required field {{if .Err_RepoName}}error{{end}}">
+					    <label for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+					    <input id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" autofocus required>
+					  </div>
+					  <div class="field {{if .Err_Description}}error{{end}}">
+					    <label for="description">{{$.i18n.Tr "repo.repo_desc"}}</label>
+					    <textarea id="description" name="description" rows="2">{{.Repository.Description}}</textarea>
+					  </div>
+					  <div class="field {{if .Err_Website}}error{{end}}">
+					    <label for="website">{{.i18n.Tr "repo.settings.site"}}</label>
+					    <input id="website" name="website" type="url" value="{{.Repository.Website}}">
+					  </div>
+
+					  <div class="ui divider"></div>
+					  {{if not .Repository.IsBare}}
+					  <div class="required inline field">
+					    <label>{{.i18n.Tr "repo.default_branch"}}</label>
+					    <div class="ui selection dropdown">
+					      <input type="hidden" id="branch" name="branch" value="{{.Repository.DefaultBranch}}">
+					      <div class="default text">{{.Repository.DefaultBranch}}</div>
+					      <i class="dropdown icon"></i>
+					      <div class="menu">
+                  {{range .Branches}}
+					        <div class="item" data-value="{{.}}">{{.}}</div>
+                  {{end}}
+					      </div>
+					    </div>
+					  </div>
+					  {{end}}
+					  {{if not .Repository.IsFork}}
+	          <div class="inline field">
+	            <label>{{.i18n.Tr "repo.visibility"}}</label>
+	            <div class="ui checkbox">
+	              <input name="private" type="checkbox" {{if .private}}checked{{end}}>
+	              <label>{{.i18n.Tr "repo.visiblity_helper" | Safe}}</label>
 	            </div>
-	            <br>
-	            <div class="setting-content">
-	                <div id="setting-content">
-	                    <div id="user-profile-setting-content" class="panel panel-warning panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.danger_zone"}}</strong>
-	                        </div>
-	                        <div class="panel-body">
-	                        	<div class="repo-setting-zone">
-	                        	    <button class="btn btn-gray btn-large btn-radius right" id="transfer-repo-btn" href="#transfer-repo-modal">{{.i18n.Tr "repo.settings.transfer"}}</button>
-	                        	    <dt>{{.i18n.Tr "repo.settings.transfer"}}</dt>
-	                        	    <dl>{{.i18n.Tr "repo.settings.transfer_desc"}}</dl>
-				                    <div class="white-popup-block mfp-hide" id="transfer-repo-modal">
-				                        <h1 class="text-red">{{.i18n.Tr "repo.settings.transfer"}}</h1>
-				                        {{.i18n.Tr "repo.settings.transfer_notices" | Str2html}}
-				                        <br>
-									    <form class="form-align form panel container panel-radius" id="transfer-repo-form" action="{{.RepoLink}}/settings" method="post">
-									        {{.CsrfTokenHtml}}
-	                    					<input type="hidden" name="action" value="transfer">
-									        <div class="panel-content">
-					                            <div class="field">
-					                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
-					                                <input class="ipt ipt-large ipt-radius" id="repo_name" name="repo_name" required />
-					                            </div>
-					                            <div class="field">
-									                <label class="req" for="new_owner_name">{{.i18n.Tr "repo.settings.transfer_owner"}}</label>
-									                <input class="ipt ipt-large ipt-radius" id="new_owner_name" name="new_owner_name" required/>
-					                            </div>
-					                            <div class="field">
-									                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
-									                <input class="ipt ipt-large ipt-radius" id="password" name="password" type="password" required/>
-					                            </div>
-									        </div>
-									    </form>
-				                        <br>
-								        <button class="btn btn-large btn-red btn-radius" id="transfer-repo-submit">{{.i18n.Tr "repo.settings.make_transfer"}}</button>
-				                        <button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
-				                    </div>
-	                        	</div>
-	                        	<hr>
-	                        	<div class="repo-setting-zone">
-	                        	    <button class="btn btn-gray btn-large btn-radius pull-right" id="delete-repo-btn" href="#delete-repo-modal">{{.i18n.Tr "repo.settings.delete"}}</button>
-	                        	    <dt>{{.i18n.Tr "repo.settings.delete"}}</dt>
-	                        	    <dl>{{.i18n.Tr "repo.settings.delete_desc"}}</dl>
-				                    <div class="white-popup-block mfp-hide" id="delete-repo-modal">
-				                        <h1 class="text-red">{{.i18n.Tr "repo.settings.delete"}}</h1>
-				                        <br>
-									    <form class="form-align form panel container panel-radius" id="delete-repo-form" action="{{.RepoLink}}/settings" method="post">
-									        {{.CsrfTokenHtml}}
-	                    					<input type="hidden" name="action" value="delete">
-									        <div class="panel-content">
-					                            <div class="field">
-					                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
-					                                <input class="ipt ipt-large ipt-radius" id="repo_name" name="repo_name" required />
-					                            </div>
-					                            <div class="field">
-									                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
-									                <input class="ipt ipt-large ipt-radius" id="password" name="password" type="password" required/>
-					                            </div>
-									        </div>
-									    </form>
-				                        <br>
-								        <button class="btn btn-large btn-red btn-radius" id="delete-repo-submit">{{.i18n.Tr "repo.settings.confirm_delete"}}</button>
-				                        <button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
-				                    </div>
-	                        	</div>
-	                        </div>
-	                    </div>
-	                </div>
-	            </div>
-	        </div>
-	    </div>
+	          </div>
+	          {{end}}
+	          {{if .Repository.IsMirror}}
+					  <div class="inline field {{if .Err_Interval}}error{{end}}">
+					    <label for="interval">{{.i18n.Tr "repo.mirror_interval"}}</label>
+					    <input id="interval" name="interval" type="number" value="{{.MirrorInterval}}">
+					  </div>
+					  {{end}}
+
+					  <div class="field">
+					     <button class="ui green button">{{$.i18n.Tr "repo.settings.update_settings"}}</button>
+					  </div>
+					</form>
+        </div>
+
+        <h4 class="ui top attached warning header">
+          {{.i18n.Tr "repo.settings.danger_zone"}}
+        </h4>
+        <div class="ui attached warning table danger segment">
+					<div class="item">
+						<div class="ui right">
+							<button class="ui basic red show-modal button" data-modal="#transfer-repo-modal">{{.i18n.Tr "repo.settings.transfer"}}</button>
+						</div>
+						<div>
+							<h5>{{.i18n.Tr "repo.settings.transfer"}}</h5>
+							<p>{{.i18n.Tr "repo.settings.transfer_desc"}}</p>
+						</div>
+					</div>
+					
+					<div class="ui divider"></div>
+
+					<div class="item">
+						<div class="ui right">
+							<button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{.i18n.Tr "repo.settings.delete"}}</button>
+						</div>
+						<div>
+							<h5>{{.i18n.Tr "repo.settings.delete"}}</h5>
+							<p>{{.i18n.Tr "repo.settings.delete_desc"}}</p>
+						</div>
+					</div>
+        </div>
+      </div>
     </div>
+  </div>
+</div>
+
+<div class="ui small modal" id="transfer-repo-modal">
+  <div class="header">
+    {{.i18n.Tr "repo.settings.transfer"}}
+  </div>
+  <div class="content">
+		<div class="ui warning message text left">{{.i18n.Tr "repo.settings.transfer_notices" | Str2html}}</div>
+  	<form class="ui form" action="{{.Link}}" method="post">
+      {{.CsrfTokenHtml}}
+			<input type="hidden" name="action" value="transfer">
+			<div class="field">
+				<label>
+					{{.i18n.Tr "repo.settings.transfer_form_title"}}
+					<span class="text red">{{.Repository.Name}}</span>
+				</label>
+			</div>
+		  <div class="required field">
+		    <label for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+		    <input id="repo_name" name="repo_name" required>
+		  </div>
+		  <div class="required field">
+		    <label for="new_owner_name">{{.i18n.Tr "repo.settings.transfer_owner"}}</label>
+		    <input id="new_owner_name" name="new_owner_name" required>
+		  </div>
+			
+			<div class="text right actions">
+				<div class="ui cancel button">{{.i18n.Tr "settings.cancel"}}</div>
+				<button class="ui red button">{{.i18n.Tr "repo.settings.make_transfer"}}</button>
+			</div>
+  	</form>
+  </div>
+</div>
+
+<div class="ui small modal" id="delete-repo-modal">
+  <div class="header">
+    {{.i18n.Tr "repo.settings.delete"}}
+  </div>
+  <div class="content">
+		<div class="ui warning message text left">{{.i18n.Tr "repo.settings.delete_notices" | Str2html}}</div>
+  	<form class="ui form" action="{{.Link}}" method="post">
+      {{.CsrfTokenHtml}}
+			<input type="hidden" name="action" value="delete">
+			<div class="field">
+				<label>
+					{{.i18n.Tr "repo.settings.transfer_form_title"}}
+					<span class="text red">{{.Repository.Name}}</span>
+				</label>
+			</div>
+		  <div class="required field">
+		    <label for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+		    <input id="repo_name" name="repo_name" required>
+		  </div>
+			
+			<div class="text right actions">
+				<div class="ui cancel button">{{.i18n.Tr "settings.cancel"}}</div>
+				<button class="ui red button">{{.i18n.Tr "repo.settings.confirm_delete"}}</button>
+			</div>
+  	</form>
+  </div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}