new repo git hooks UI

cmd/web.go

@@ -446,9 +446,9 @@ func runWeb(ctx *cli.Context) {
 			m.Post("/hooks/slack/:id", bindIgnErr(auth.NewSlackHookForm{}), repo.SlackHooksEditPost)
 
 			m.Group("/hooks/git", func() {
-				m.Get("", repo.GitHooks)
-				m.Get("/:name", repo.GitHooksEdit)
-				m.Post("/:name", repo.GitHooksEditPost)
+				m.Get("", repo.SettingsGitHooks)
+				m.Combo("/:name").Get(repo.SettingsGitHooksEdit).
+					Post(repo.SettingsGitHooksEditPost)
 			}, middleware.GitHookService())
 
 			m.Group("/keys", func() {

modules/git/hooks.go

@@ -10,6 +10,8 @@ import (
 	"os"
 	"path"
 	"strings"
+
+	"github.com/Unknwon/com"
 )
 
 // hookNames is a list of Git hooks' name that are supported.
@@ -81,8 +83,11 @@ func (h *Hook) Name() string {
 // Update updates hook settings.
 func (h *Hook) Update() error {
 	if len(strings.TrimSpace(h.Content)) == 0 {
+		if com.IsExist(h.path) {
 			return os.Remove(h.path)
 		}
+		return nil
+	}
 	return ioutil.WriteFile(h.path, []byte(strings.Replace(h.Content, "\r", "", -1)), os.ModePerm)
 }
 

public/less/_base.less

@@ -86,8 +86,14 @@ img {
 	    	}
 	    }
 		}
+		&.green {
+			color: #6cc644!important;
+		}
+		&.left {
+			text-align: left!important;
+		}
 		&.right {
-			text-align: right;
+			text-align: right!important;
 		}
 		&.small {
 			font-size: 0.75em;

public/less/_form.less

@@ -16,6 +16,7 @@
 		}
 	}
 }
+
 .repository {
 	&.new.migrate,
 	&.new.fork {
@@ -58,3 +59,24 @@
 		}
 	}
 }
+.repository.edit.hook {
+	form {
+		@input-padding: 25%!important;
+		.inline.field > label {
+			text-align: right;
+			width: @input-padding;
+			word-wrap: break-word;
+		}
+		input,
+		textarea {
+			width: 50%!important;
+		}
+	}
+}
+.repository.edit.hook {
+	form {
+		textarea {
+			width: 70%!important;
+		}
+	}
+}

public/less/_repository.less

@@ -623,6 +623,17 @@
 			color: #666;
 		}
 	}
+	.hook.list {
+		.item:not(:first-child) {
+			border-top: 1px solid #eaeaea;
+		}
+		.item {
+			padding: 10px 20px;
+			i {
+				margin-right: 5px;
+			}
+		}
+	}
 }
 
 .ui.vertical.menu {

routers/repo/setting.go

@@ -608,7 +608,7 @@ func TriggerHook(ctx *middleware.Context) {
 	models.HookQueue.AddRepoID(repo.ID)
 }
 
-func GitHooks(ctx *middleware.Context) {
+func SettingsGitHooks(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.settings")
 	ctx.Data["PageIsSettingsGitHooks"] = true
 
@@ -622,7 +622,7 @@ func GitHooks(ctx *middleware.Context) {
 	ctx.HTML(200, GITHOOKS)
 }
 
-func GitHooksEdit(ctx *middleware.Context) {
+func SettingsGitHooksEdit(ctx *middleware.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.settings")
 	ctx.Data["PageIsSettingsGitHooks"] = true
 
@@ -640,7 +640,7 @@ func GitHooksEdit(ctx *middleware.Context) {
 	ctx.HTML(200, GITHOOK_EDIT)
 }
 
-func GitHooksEditPost(ctx *middleware.Context) {
+func SettingsGitHooksEditPost(ctx *middleware.Context) {
 	name := ctx.Params(":name")
 	hook, err := ctx.Repo.GitRepo.GetHook(name)
 	if err != nil {

templates/repo/settings/githook_edit.tmpl

@@ -1,33 +1,31 @@
-{{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 id="repo-hooks-panel" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.githooks"}}</strong>
-	                        </div>
-	                        <form class="form form-align panel-body" id="repo-setting-form" action="{{.RepoLink}}/settings/hooks/git/{{.Hook.Name}}" method="post">
+{{template "base/head" .}}
+<div class="repository settings edit hook">
+	{{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.githooks"}}
+				</h4>
+				<div class="ui attached segment">
+					<p class="center">{{.i18n.Tr "repo.settings.githook_edit_desc"}}</p>
+		      <form class="ui form" action="{{.Link}}" method="post">
 	          {{.CsrfTokenHtml}}
-                        		<div class="text-center panel-desc">{{.i18n.Tr "repo.settings.githook_edit_desc"}}</div>
 	          {{with .Hook}}
-	                            <div class="field">
+	          <div class="inline field">
               <label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
-	                                <label class="text-left">{{.Name}}</label>
+              <label class="text left">{{.Name}}</label>
 	          </div>
-					            <div class="field clear">
-					                <label class="left" for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
-					                <textarea class="ipt-textarea ipt-large ipt-radius" id="content" name="content" cols="60" rows="20" wrap="off">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
+					  <div class="inline field">
+					    <label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
+					    <textarea id="content" name="content" rows="20" wrap="off">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
 					  </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_githook"}}</button>
+
+	          <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>
 	          </div>
 	          {{end}}
 	      	</form>
@@ -36,6 +34,4 @@
     </div>
 	</div>
 </div>
-	</div>
-</div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}

templates/repo/settings/githooks.tmpl

@@ -1,37 +1,34 @@
-{{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 id="repo-hooks-panel" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.githooks"}}</strong>
-	                        </div>
-	                        <ul class="panel-body setting-list">
-                            	<li>{{.i18n.Tr "repo.settings.githooks_desc" | Str2html}}</li>
+{{template "base/head" .}}
+<div class="repository settings hooks">
+	{{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.githooks"}}
+				</h4>
+				<div class="ui attached table segment">
+          <div class="ui hook list">
+            <div class="item">
+              {{.i18n.Tr "repo.settings.githooks_desc" | Str2html}}
+            </div>
 						{{range .Hooks}}
-								<li>
+						<div class="item">
 							{{if .IsActive}}
-									<span class="left text-success"><i class="octicon octicon-check"></i></span>
+							<span class="text success"><i class="octicon octicon-check"></i></span>
 							{{else}}
-									<span class="left text-grey"><i class="octicon octicon-primitive-dot"></i></span>
+							<span class="text grey"><i class="octicon octicon-primitive-dot"></i></span>
 							{{end}}
 							<span>{{.Name}}</span>
-                        			<a href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}" class="text-blue right"><i class="fa fa-pencil"></i></a>
-								</li>
-                            	{{end}}
-	                       	</ul>
+              <a href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}" class="text blue ui right"><i class="fa fa-pencil"></i></a>
 						</div>
+            {{end}}
           </div>
         </div>
   		</div>
     </div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}