Finish new hooks list page

7 files changed, 92 insertions, 36 deletions

diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 244d6531d6..e3eb4c8807 100644
--- a/public/ng/css/gogs.css
+++ b/public/ng/css/gogs.css
@@ -214,6 +214,15 @@ img.avatar-48 {
   cursor: pointer;
   font-weight: bold;
 }
+.text-success {
+  color: #3c763d;
+}
+.text-blue {
+  color: #15c;
+}
+.text-red {
+  color: #DD4B39;
+}
 .markdown {
   background-color: white;
   font-size: 16px;
@@ -1297,6 +1306,10 @@ The register and sign-in page style
   position: relative;
   top: 5px;
 }
+.setting-list {
+  width: 100%;
+  list-style: none;
+}
 #setting-wrapper {
   padding-bottom: 100px;
 }
@@ -1347,18 +1360,28 @@ The register and sign-in page style
 #user-profile-form .field {
   margin-bottom: 24px;
 }
+#repo-hooks-panel,
 #user-ssh-panel {
   margin-bottom: 20px;
 }
-#user-ssh-panel .switching-list {
+#repo-hooks-panel .setting-list,
+#user-ssh-panel .setting-list {
   background-color: #FFF;
 }
-#user-ssh-panel .switching-list li {
+#repo-hooks-panel .setting-list li,
+#user-ssh-panel .setting-list li {
   padding: 8px 20px;
+  border-bottom: 1px solid #eaeaea;
 }
-#user-ssh-panel .switching-list li.ssh:hover {
+#repo-hooks-panel .setting-list li.ssh:hover,
+#user-ssh-panel .setting-list li.ssh:hover {
   background-color: #ffffEE;
 }
+#repo-hooks-panel .setting-list li i,
+#user-ssh-panel .setting-list li i {
+  padding-right: 5px;
+}
+#repo-hooks-panel .active-icon,
 #user-ssh-panel .active-icon {
   width: 10px;
   height: 10px;
@@ -1367,16 +1390,21 @@ The register and sign-in page style
   margin-right: 20px;
   margin-top: 10px;
 }
+#repo-hooks-panel .ssh-content,
 #user-ssh-panel .ssh-content {
   margin-left: 24px;
 }
+#repo-hooks-panel .ssh-content .octicon,
 #user-ssh-panel .ssh-content .octicon {
   margin-right: 4px;
 }
+#repo-hooks-panel .ssh-content .print,
 #user-ssh-panel .ssh-content .print,
+#repo-hooks-panel .ssh-content .activity,
 #user-ssh-panel .ssh-content .activity {
   color: #888;
 }
+#repo-hooks-panel .ssh-delete-btn,
 #user-ssh-panel .ssh-delete-btn {
   margin-top: 6px;
 }
diff --git a/public/ng/css/ui.css b/public/ng/css/ui.css
index d30e137dbc..df03818b71 100644
--- a/public/ng/css/ui.css
+++ b/public/ng/css/ui.css
@@ -427,6 +427,11 @@ dt {
 .btn-active {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.15) inset;
 }
+.btn-header {
+  margin-top: -1px;
+  color: white;
+  padding: 0 10px;
+}
 .btn-radius {
   border-radius: .25em;
 }
diff --git a/public/ng/less/gogs/base.less b/public/ng/less/gogs/base.less
index 0cadabe869..8d22557a66 100644
--- a/public/ng/less/gogs/base.less
+++ b/public/ng/less/gogs/base.less
@@ -230,4 +230,13 @@ clear: both;
         cursor: pointer;
         font-weight: bold;
     }
+}
+.text-success {
+    color: #3c763d;
+}
+.text-blue {
+    color: #15c;
+}
+.text-red {
+    color: #DD4B39;
 }
\ No newline at end of file
diff --git a/public/ng/less/gogs/repository.less b/public/ng/less/gogs/repository.less
index 1847c44e53..abc2f93874 100644
--- a/public/ng/less/gogs/repository.less
+++ b/public/ng/less/gogs/repository.less
@@ -469,4 +469,8 @@
 .repo-user-list-block {
     position: relative;
     top: 5px;
+}
+.setting-list {
+    width: 100%;
+    list-style: none;
 }
\ No newline at end of file
diff --git a/public/ng/less/gogs/settings.less b/public/ng/less/gogs/settings.less
index 076c30bb6b..c908af3b63 100644
--- a/public/ng/less/gogs/settings.less
+++ b/public/ng/less/gogs/settings.less
@@ -51,38 +51,43 @@
     }
 }
 
+#repo-hooks-panel,
 #user-ssh-panel {
-  margin-bottom: 20px;
-  .switching-list {
-    background-color: #FFF;
-    li {
-      padding: 8px 20px;
-      &.ssh:hover {
-        background-color: #ffffEE;
-      }
+    margin-bottom: 20px;
+    .setting-list {
+        background-color: #FFF;
+        li {
+            padding: 8px 20px;
+            border-bottom: 1px solid #eaeaea;
+            &.ssh:hover {
+                background-color: #ffffEE;
+            }
+            i {
+                padding-right: 5px;
+            }
+        }
     }
-  }
-  .active-icon {
-    width: 10px;
-    height: 10px;
-    border-radius: 6px;
-    padding: 0;
-    margin-right: 20px;
-    margin-top: 10px;
-  }
-  .ssh-content {
-    margin-left: 24px;
-    .octicon {
-      margin-right: 4px;
+    .active-icon {
+        width: 10px;
+        height: 10px;
+        border-radius: 6px;
+        padding: 0;
+        margin-right: 20px;
+        margin-top: 10px;
     }
-    .print,
-    .activity {
-      color: #888;
+    .ssh-content {
+        margin-left: 24px;
+        .octicon {
+            margin-right: 4px;
+        }
+        .print,
+        .activity {
+            color: #888;
+        }
+    }
+    .ssh-delete-btn {
+        margin-top: 6px;
     }
-  }
-  .ssh-delete-btn {
-    margin-top: 6px;
-  }
 }
 
 #user-ssh-add-form {
diff --git a/public/ng/less/ui/form.less b/public/ng/less/ui/form.less
index 017432935f..268baea882 100644
--- a/public/ng/less/ui/form.less
+++ b/public/ng/less/ui/form.less
@@ -75,6 +75,11 @@
 .btn-active {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
 }
+.btn-header {
+    margin-top: -1px;
+    color: white;
+    padding: 0 10px;
+}
 
 .btn-radius {
   border-radius: .25em;
diff --git a/public/ng/less/ui/reset.less b/public/ng/less/ui/reset.less
index 04d1198969..af497ca14d 100644
--- a/public/ng/less/ui/reset.less
+++ b/public/ng/less/ui/reset.less
@@ -360,11 +360,11 @@ p {
 // truncate element
 
 .text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  vertical-align: top;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: top;
 }
 
 // code elements