From 8c25f0bad1f5226c6970ed5f560b7e80537e5121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 21 Jan 2015 14:16:39 +0100
Subject: [PATCH] webhooks form and single view

---
 .../admin/admin-third-parties-webhooks.jade   | 15 +++---
 .../admin/admin-third-parties-webhooks.scss   | 50 +++++++++++++++++++
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/app/partials/views/modules/admin/admin-third-parties-webhooks.jade b/app/partials/views/modules/admin/admin-third-parties-webhooks.jade
index e70dbcb8..c9596251 100644
--- a/app/partials/views/modules/admin/admin-third-parties-webhooks.jade
+++ b/app/partials/views/modules/admin/admin-third-parties-webhooks.jade
@@ -19,10 +19,8 @@ block content
             section.webhooks-table.basic-table
                 div.table-header
                     div.row
-                        div.webhook-service
-                            span Name
-                        div.webhook-url
-                            span URL
+                        div.webhook-service Name
+                        div.webhook-url URL
                         div.webhook-options
                 div.table-body
                     form.row
@@ -40,11 +38,12 @@ block content
                             span Slack
                         div.webhook-url
                             span http://slack.kjrw3543m/nwdlkw4m535/ffm
-                            a(href="", title="Test history") Test history
+                            a(href="", title="Test history") (See test history)
                         div.webhook-options
-                            a.icon.icon-floppy(href="", title="Save Webhook")
-                            a.icon.icon-edit(href="", title="Edit Webhook")
-                            a.icon.icon-cancel(href="", title="Cancel Webhook")
+                            div.webhook-options-wrapper
+                                a.icon.icon-floppy(href="", title="Save Webhook")
+                                a.icon.icon-edit(href="", title="Edit Webhook")
+                                a.icon.icon-delete(href="", title="Delete Webhook")
 
         //
             form
diff --git a/app/styles/modules/admin/admin-third-parties-webhooks.scss b/app/styles/modules/admin/admin-third-parties-webhooks.scss
index f7928beb..caa9de38 100644
--- a/app/styles/modules/admin/admin-third-parties-webhooks.scss
+++ b/app/styles/modules/admin/admin-third-parties-webhooks.scss
@@ -1,4 +1,26 @@
 .admin-webhooks {
+    .webhooks-table {
+        .row {
+            padding: .5rem 0;
+        }
+        .row:hover {
+            .webhook-options-wrapper {
+                opacity: 1;
+                transition: opacity .2s linear;
+            }
+        }
+    }
+
+    .table-header {
+        @extend %bold;
+        border-bottom: 1px solid $gray-light;
+    }
+    .table-body {
+        .webhook-service {
+            color: $gray;
+        }
+    }
+
     .webhooks-options {
         margin-bottom: 1rem;
         text-align: right;
@@ -16,12 +38,40 @@
     .webhook-url {
         flex-basis: 400px;
         flex-grow: 8;
+        span {
+            @include ellipsis($width: 65%);
+            color: $gray-light;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        a {
+            color: $green-taiga;
+            margin-left: .5rem;
+            &:hover {
+                color: $fresh-taiga;
+            }
+        }
     }
     .webhook-options {
         flex-basis: 100px;
         flex-grow: 0;
         min-width: 100px;
         text-align: center;
+        a {
+            color: $gray-light;
+            margin-right: .5rem;
+            transition: color .2s linear;
+            vertical-align: middle;
+            &:hover {
+                color: $green-taiga;
+                transition: color .2s linear;
+
+            }
+        }
+    }
+    .webhook-options-wrapper {
+        opacity: 0;
+        transition: opacity .3s linear;
     }
     .webhook-url-inputs {
         display: flex;