new repo git hooks UI

2 files changed, 67 insertions, 74 deletions

diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index 11915c767c..520ebdb2d4 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,41 +1,37 @@
-{{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">
-	                            {{.CsrfTokenHtml}}
-                        		<div class="text-center panel-desc">{{.i18n.Tr "repo.settings.githook_edit_desc"}}</div>
-	                            {{with .Hook}}
-	                            <div class="field">
-	                                <label>{{$.i18n.Tr "repo.settings.githook_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>
-	                            <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>
-	                            {{end}}
-	                        </form>
-	                    </div>
-	                </div>
-	            </div>
-	        </div>
-	    </div>
+{{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}}
+	          {{with .Hook}}
+	          <div class="inline field">
+              <label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
+              <label class="text left">{{.Name}}</label>
+	          </div>
+					  <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="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>
+				</div>
+  		</div>
+    </div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 3298d992ab..6c0af1f2ff 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/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>
-                            	{{range .Hooks}}
-								<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}}
-									<span>{{.Name}}</span>
-                        			<a href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}" 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 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}}
+						<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>{{.Name}}</span>
+              <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" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file