new create webhook UI

8 files changed, 134 insertions, 115 deletions

diff --git a/templates/repo/settings/hook_delete_modal.tmpl b/templates/repo/settings/hook_delete_modal.tmpl
new file mode 100644
index 0000000000..bafd1ce93c
--- /dev/null
+++ b/templates/repo/settings/hook_delete_modal.tmpl
@@ -0,0 +1,19 @@
+<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_gogs.tmpl b/templates/repo/settings/hook_gogs.tmpl
index e4ece412b9..f172cabe95 100644
--- a/templates/repo/settings/hook_gogs.tmpl
+++ b/templates/repo/settings/hook_gogs.tmpl
@@ -1,23 +1,28 @@
-<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">
-    {{.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 />
+{{if eq .HookType "gogs"}}
+<p>{{.i18n.Tr "repo.settings.add_webhook_desc" "http://gogs.io/docs/features/webhook.html" | Str2html}}</p>
+<form class="ui form" action="{{.BaseLink}}/settings/hooks/{{if .PageIsSettingsHooksNew}}gogs/new{{else}}{{.Webhook.ID}}{{end}}" method="post">
+  {{.CsrfTokenHtml}}
+  <div class="required field {{if .Err_PayloadURL}}error{{end}}">
+    <label for="payload_url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
+    <input id="payload_url" name="payload_url" type="url" value="{{.Webhook.URL}}" autofocus required>
+  </div>
+  <div class="field">
+    <label>{{.i18n.Tr "repo.settings.content_type"}}</label>
+    <div class="ui selection dropdown">
+      <input type="hidden" id="content_type" name="content_type" value="{{if .Webhook.ContentType}}{{.Webhook.ContentType}}{{else}}application/json{{end}}">
+      <div class="default text"></div>
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item" data-value="1">application/json</div>
+        <div class="item" data-value="2">application/x-www-form-urlencoded</div>
+      </div>
     </div>
-    <div class="field">
-      <label class="req">{{.i18n.Tr "repo.settings.content_type"}}</label>
-      <select name="content_type">
-          <option value="1" {{if or .PageIsSettingsHooksNew (eq .Webhook.ContentType 1)}}selected{{end}}>application/json</option>
-          <option value="2" {{if eq .Webhook.ContentType 2}}selected{{end}}>application/x-www-form-urlencoded</option>
-      </select>
-    </div>
-    <div class="field">
-        <label for="secret">{{.i18n.Tr "repo.settings.secret"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="secret" name="secret" type="password" value="{{.Webhook.Secret}}" autocomplete="off" />
-    </div>
-    {{template "repo/settings/hook_settings" .}}
-  </form>
-</div>
+  </div>
+  <input class="fake" type="password">
+  <div class="field {{if .Err_Secret}}error{{end}}">
+    <label for="secret">{{.i18n.Tr "repo.settings.secret"}}</label>
+    <input id="secret" name="secret" type="password" value="{{.Webhook.Secret}}" autocomplete="off">
+  </div>
+  {{template "repo/settings/hook_settings" .}}
+</form>
+{{end}}
diff --git a/templates/repo/settings/hook_history.tmpl b/templates/repo/settings/hook_history.tmpl
new file mode 100644
index 0000000000..be837ccae6
--- /dev/null
+++ b/templates/repo/settings/hook_history.tmpl
@@ -0,0 +1,12 @@
+{{if .PageIsSettingsHooksEdit}}
+<div id="setting-content">
+      <div id="repo-hooks-history-panel" class="panel panel-radius">
+          <div class="panel-header">
+          	<strong>{{.i18n.Tr "repo.settings.recent_deliveries"}}</strong>
+          </div>
+          <ul class="panel-body setting-list">
+            	<li>Coming soon!</li>
+          </ul>
+      </div>
+</div>
+{{end}}
\ No newline at end of file
diff --git a/templates/repo/settings/hook_list.tmpl b/templates/repo/settings/hook_list.tmpl
index b04d86367e..b5c086bb84 100644
--- a/templates/repo/settings/hook_list.tmpl
+++ b/templates/repo/settings/hook_list.tmpl
@@ -3,7 +3,17 @@
 	<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 class="ui floating1 jump dropdown">
+        <div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
+        <div class="menu">
+          <a class="item" href="{{.BaseLink}}/settings/hooks/gogs/new">
+            <img class="img-10" src="{{AppSubUrl}}/img/favicon.png">Gogs
+          </a>
+          <a class="item" href="{{.BaseLink}}/settings/hooks/slack/new">
+            <img class="img-10" src="{{AppSubUrl}}/img/slack.png">Slack
+          </a>
+        </div>
+      </div>
 	  </div>
 	</h4>
 	<div class="ui attached table segment">
@@ -31,22 +41,4 @@
   </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
+{{template "repo/settings/hook_delete_modal" .}}
\ No newline at end of file
diff --git a/templates/repo/settings/hook_new.tmpl b/templates/repo/settings/hook_new.tmpl
index e4534a6468..7c9a5de1f0 100644
--- a/templates/repo/settings/hook_new.tmpl
+++ b/templates/repo/settings/hook_new.tmpl
@@ -1,39 +1,29 @@
-{{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>{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}</strong>
-	                        </div>
-                          {{template "repo/settings/hook_types" .}}
-                          {{template "repo/settings/hook_gogs" .}}
-                          {{template "repo/settings/hook_slack" .}}
-	                    </div>
-	                </div>
-	                {{if .PageIsSettingsHooksEdit}}
-		            <br>
-	                <div id="setting-content">
-	                    <div id="repo-hooks-history-panel" class="panel panel-radius">
-	                        <div class="panel-header">
-	                        	<strong>{{.i18n.Tr "repo.settings.recent_deliveries"}}</strong>
-	                        </div>
-	                        <ul class="panel-body setting-list">
-                            	<li>Coming soon!</li>
-	                        </ul>
-	                    </div>
-		            </div>
-		            {{end}}
-	            </div>
-	        </div>
+{{template "base/head" .}}
+<div class="repository settings new webhook">
+	{{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">
+				  {{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
+				  <div class="ui right">
+				  	{{if eq .HookType "gogs"}}
+				  	<img class="img-13" src="{{AppSubUrl}}/img/favicon.png">
+				  	{{else if eq .HookType "slack"}}
+				  	<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+				  	{{end}}
+				  </div>
+				</h4>
+				<div class="ui attached segment">
+          {{template "repo/settings/hook_gogs" .}}
+          {{template "repo/settings/hook_slack" .}}
+		    </div>
+
+				{{template "repo/settings/hook_history" .}}
+      </div>
 		</div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}
diff --git a/templates/repo/settings/hook_settings.tmpl b/templates/repo/settings/hook_settings.tmpl
index bf465c8305..c1435acca1 100644
--- a/templates/repo/settings/hook_settings.tmpl
+++ b/templates/repo/settings/hook_settings.tmpl
@@ -1,15 +1,28 @@
 <div class="field">
-  <h4 class="text-center">{{.i18n.Tr "repo.settings.event_desc"}}</h4>
-  <label></label>
-  <input name="push_only" type="radio" {{if or .PageIsSettingsHooksNew .Webhook.PushOnly}}checked{{end}}> {{.i18n.Tr "repo.settings.event_push_only" | Str2html}}
+  <h4>{{.i18n.Tr "repo.settings.event_desc"}}</h4>
+	<div class="grouped fields">
+		<div class="field">
+		  <div class="ui radio checkbox checked">
+		    <input class="hidden" name="push_only" type="radio" {{if or .PageIsSettingsHooksNew .Webhook.PushOnly}}checked{{end}}>
+		    <label>{{.i18n.Tr "repo.settings.event_push_only" | Str2html}}</label>
+		  </div>
+		</div>
+	</div>
 </div>
-<div class="field">
-  <label for="active">{{.i18n.Tr "repo.settings.active"}}</label>
-  <input class="ipt-chk" id="active" name="active" type="checkbox" {{if or .PageIsSettingsHooksNew .Webhook.IsActive}}checked{{end}} />
-<span>{{.i18n.Tr "repo.settings.active_helper"}}</span>
+<div class="inline field">
+  <div class="ui checkbox">
+    <input class="hidden" name="active" type="checkbox" tabindex="0" {{if or .PageIsSettingsHooksNew .Webhook.IsActive}}checked{{end}}>
+    <label>{{.i18n.Tr "repo.settings.active"}}</label>
+    <span class="help">{{.i18n.Tr "repo.settings.active_helper"}}</span>
+  </div>
 </div>
 <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 .PageIsSettingsHooksNew}}
+  <button class="ui green button">{{.i18n.Tr "repo.settings.add_webhook"}}</button>
+  {{else}}
+  <button class="ui green button">{{.i18n.Tr "repo.settings.update_webhook"}}</button>
+  <a class="ui red delete-button button" data-url="{{.BaseLink}}/settings/hooks/delete" data-id="{{.Webhook.ID}}">{{.i18n.Tr "repo.settings.delete_webhook"}}</a>
+  {{end}}
 </div>
+
+{{template "repo/settings/hook_delete_modal" .}}
diff --git a/templates/repo/settings/hook_slack.tmpl b/templates/repo/settings/hook_slack.tmpl
index 82439c4323..b787131bec 100644
--- a/templates/repo/settings/hook_slack.tmpl
+++ b/templates/repo/settings/hook_slack.tmpl
@@ -1,16 +1,15 @@
-<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">
-    {{.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 />
-    </div>
-    <div class="field">
-        <label class="req" for="channel">{{.i18n.Tr "repo.settings.slack_channel"}}</label>
-        <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="channel" name="channel" type="text" value="{{.SlackHook.Channel}}" placeholder="#general" required />
-    </div>
-    {{template "repo/settings/hook_settings" .}}
-  </form>
-</div>
+{{if eq .HookType "slack"}}
+<p>{{.i18n.Tr "repo.settings.add_slack_hook_desc" "http://slack.com" | Str2html}}</p>
+<form class="ui form" action="{{.BaseLink}}/settings/hooks/{{if .PageIsSettingsHooksNew}}slack/new{{else}}{{.Webhook.ID}}{{end}}" method="post">
+	{{.CsrfTokenHtml}}
+  <div class="required field {{if .Err_PayloadURL}}error{{end}}">
+    <label for="payload_url">{{.i18n.Tr "repo.settings.payload_url"}}</label>
+    <input id="payload_url" name="payload_url" type="url" value="{{.Webhook.URL}}" autofocus required>
+  </div>
+  <div class="required field {{if .Err_Channel}}error{{end}}">
+    <label for="channel">{{.i18n.Tr "repo.settings.slack_channel"}}</label>
+    <input id="channel" name="channel" value="{{.SlackHook.Channel}}" placeholder="#general" required>
+  </div>
+	{{template "repo/settings/hook_settings" .}}
+</form>
+{{end}}
diff --git a/templates/repo/settings/hook_types.tmpl b/templates/repo/settings/hook_types.tmpl
deleted file mode 100644
index 782e2a4e73..0000000000
--- a/templates/repo/settings/hook_types.tmpl
+++ /dev/null
@@ -1,11 +0,0 @@
-{{if .PageIsSettingsHooksNew}}
-<div id="hook-type" class="form-align">
-  <label class="req">{{.i18n.Tr "repo.settings.hook_type"}}</label>
-  <select name="hook_type" id="hook-type" class="form-control">
-    {{if .HookType}}<option value="{{.HookType}}">{{.HookType}}</option>{{end}}
-    {{range .HookTypes}}
-    {{if not (eq $.HookType .)}}<option value="{{.}}" >{{.}}</option>{{end}}
-    {{end}}
-  </select>
-</div>
-{{end}}