new webhooks list UI

7 files changed, 70 insertions, 50 deletions

diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index 520ebdb2d4..40334d271c 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="repository settings edit hook">
+<div class="repository settings edit githook">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="ui grid">
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 6c0af1f2ff..8120b80e17 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="repository settings hooks">
+<div class="repository settings githooks">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="ui grid">
@@ -16,13 +16,9 @@
             </div>
 						{{range .Hooks}}
 						<div class="item">
-							{{if .IsActive}}
-							<span class="text success"><i class="octicon octicon-check"></i></span>
-							{{else}}
-							<span class="text grey"><i class="octicon octicon-primitive-dot"></i></span>
-							{{end}}
+							<span class="text {{if .IsActive}}green{{else}}grey{{end}}"><i class="octicon octicon-primitive-dot"></i></span>
 							<span>{{.Name}}</span>
-              <a href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}" class="text blue ui right"><i class="fa fa-pencil"></i></a>
+              <a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}"><i class="fa fa-pencil"></i></a>
 						</div>
             {{end}}
           </div>
diff --git a/templates/repo/settings/hook_gogs.tmpl b/templates/repo/settings/hook_gogs.tmpl
index 39e612b9f4..e4ece412b9 100644
--- a/templates/repo/settings/hook_gogs.tmpl
+++ b/templates/repo/settings/hook_gogs.tmpl
@@ -1,11 +1,11 @@
 <div id="gogs" class="{{if (and .PageIsSettingsHooksEdit (not (eq .HookType "Gogs")))}}hidden{{end}}">
-  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-gogs" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/gogs/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.Id}}{{end}}" method="post">
+  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-gogs" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/gogs/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.ID}}{{end}}" method="post">
     {{.CsrfTokenHtml}}
     <input type="hidden" name="hook_type" value="gogs">
     <div class="text-center panel-desc">{{.i18n.Tr "repo.settings.add_webhook_desc" "http://gogs.io/docs/features/webhook.html" | Str2html}}</div>
     <div class="field">
         <label class="req" for="payload-url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.Url}}" required />
+        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.URL}}" required />
     </div>
     <div class="field">
       <label class="req">{{.i18n.Tr "repo.settings.content_type"}}</label>
diff --git a/templates/repo/settings/hook_list.tmpl b/templates/repo/settings/hook_list.tmpl
new file mode 100644
index 0000000000..b04d86367e
--- /dev/null
+++ b/templates/repo/settings/hook_list.tmpl
@@ -0,0 +1,52 @@
+<div class="twelve wide column content">
+	{{template "base/alert" .}}
+	<h4 class="ui top attached header">
+	  {{.i18n.Tr "repo.settings.hooks"}}
+	  <div class="ui right">
+	  	<a class="ui blue tiny button" href="{{.BaseLink}}/settings/hooks/new">{{.i18n.Tr "repo.settings.add_webhook"}}</a>
+	  </div>
+	</h4>
+	<div class="ui attached table segment">
+    <div class="ui hook list">
+      <div class="item">
+      	{{.Description | Str2html}}
+      </div>
+      {{range .Webhooks}}
+			<div class="item">
+				{{if eq .LastStatus 1}}
+				<span class="text green"><i class="octicon octicon-check"></i></span>
+				{{else if eq .LastStatus 2}}
+				<span class="text red"><i class="octicon octicon-alert"></i></span>
+				{{else}}
+				<span class="text grey"><i class="octicon octicon-primitive-dot"></i></span>
+				{{end}}
+				<a href="{{$.BaseLink}}/settings/hooks/{{.ID}}">{{.URL}}</a>
+				<div class="ui right">
+					<span class="text blue"><a href="{{$.BaseLink}}/settings/hooks/{{.ID}}"><i class="fa fa-pencil"></i></a></span>
+					<span class="text red"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"><i class="fa fa-times"></i></a></span>
+				</div>
+			</div>
+      {{end}}
+    </div>
+  </div>
+</div>
+
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+    <i class="trash icon"></i>
+    {{.i18n.Tr "repo.settings.webhook_deletion"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "repo.settings.webhook_deletion_desc"}}</p>
+  </div>
+  <div class="actions">
+    <div class="ui red basic inverted cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui green basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/settings/hook_settings.tmpl b/templates/repo/settings/hook_settings.tmpl
index 7bf4e2a36c..bf465c8305 100644
--- a/templates/repo/settings/hook_settings.tmpl
+++ b/templates/repo/settings/hook_settings.tmpl
@@ -11,5 +11,5 @@
 <div class="field">
     <label></label>
     <button class="btn btn-green btn-large btn-radius">{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}</button>
-    {{if .PageIsSettingsHooksEdit}}<a class="btn btn-red btn-large btn-link btn-radius" href="{{.RepoLink}}/settings/hooks?remove={{.Webhook.Id}}"><strong>{{.i18n.Tr "repo.settings.delete_webhook"}}</strong></a>{{end}}
+    {{if .PageIsSettingsHooksEdit}}<a class="btn btn-red btn-large btn-link btn-radius" href="{{.RepoLink}}/settings/hooks?remove={{.Webhook.ID}}"><strong>{{.i18n.Tr "repo.settings.delete_webhook"}}</strong></a>{{end}}
 </div>
diff --git a/templates/repo/settings/hook_slack.tmpl b/templates/repo/settings/hook_slack.tmpl
index bc307ec850..82439c4323 100644
--- a/templates/repo/settings/hook_slack.tmpl
+++ b/templates/repo/settings/hook_slack.tmpl
@@ -1,11 +1,11 @@
 <div id="slack" class="{{if or .PageIsSettingsHooksNew (and .PageIsSettingsHooksEdit (not (eq .HookType "Slack")))}}hidden{{end}}">
-  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-slack" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/slack/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.Id}}{{end}}" method="post">
+  <form class="form form-align panel-body repo-setting-form" id="repo-setting-form-slack" action="{{if .RepoLink}}{{.RepoLink}}{{else if .OrgLink}}{{.OrgLink}}{{end}}/settings/hooks/slack/{{if .PageIsSettingsHooksNew}}new{{else}}{{.Webhook.ID}}{{end}}" method="post">
     {{.CsrfTokenHtml}}
     <input type="hidden" name="hook_type" value="slack">
     <div class="text-center panel-desc">{{.i18n.Tr "repo.settings.add_slack_hook_desc" "http://slack.com" | Str2html}}</div>
     <div class="field">
         <label class="req" for="payload-url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.Url}}" required />
+        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="payload-url" name="payload_url" type="url" value="{{.Webhook.URL}}" required />
     </div>
     <div class="field">
         <label class="req" for="channel">{{.i18n.Tr "repo.settings.slack_channel"}}</label>
diff --git a/templates/repo/settings/hooks.tmpl b/templates/repo/settings/hooks.tmpl
index e23c0ccd63..e3f6f4ddae 100644
--- a/templates/repo/settings/hooks.tmpl
+++ b/templates/repo/settings/hooks.tmpl
@@ -1,39 +1,11 @@
-{{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">
-                            	<a class="btn btn-small btn-black btn-header btn-radius right" href="{{.RepoLink}}/settings/hooks/new">{{.i18n.Tr "repo.settings.add_webhook"}}</a>
-	                        	<strong>{{.i18n.Tr "repo.settings.hooks"}}</strong>
-	                        </div>
-	                        <ul class="panel-body setting-list">
-                            	<li>{{.i18n.Tr "repo.settings.hooks_desc" "http://gogs.io/docs/features/webhook.html" | Str2html}}</li>
-                            	{{range .Webhooks}}
-								<li>
-									{{if .IsActive}}
-									<span class="left text-success"><i class="octicon octicon-check"></i></span>
-									{{else}}
-									<span class="left text-grey"><i class="octicon octicon-primitive-dot"></i></span>
-									{{end}}
-									<a class="link" href="{{$.RepoLink}}/settings/hooks/{{.Id}}">{{.Url}}</a>
-									<a href="{{$.RepoLink}}/settings/hooks?remove={{.Id}}" class="text-red right"><i class="fa fa-times"></i></a>
-                        			<a href="{{$.RepoLink}}/settings/hooks/{{.Id}}" class="text-blue right"><i class="fa fa-pencil"></i></a>
-								</li>
-                            	{{end}}
-	                       	</ul>
-	                    </div>
-	                </div>
-	            </div>
-	        </div>
-	    </div>
+{{template "base/head" .}}
+<div class="repository settings webhooks">
+	{{template "repo/header" .}}
+	<div class="ui container">
+		<div class="ui grid">
+			{{template "repo/settings/navbar" .}}
+			{{template "repo/settings/hook_list" .}}
+	  </div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file