From ebe5f4a4d6e155fbf16f0f013fae1f688b6aed77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 23 Oct 2014 10:01:40 +0200
Subject: [PATCH] Admin roles design and UX

---
 app/partials/admin-roles.jade             |  3 +-
 app/styles/layout/base.scss               | 12 ++++++-
 app/styles/layout/wiki.scss               | 10 ------
 app/styles/modules/admin/admin-roles.scss | 44 ++++++++++++++++-------
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/app/partials/admin-roles.jade b/app/partials/admin-roles.jade
index acdb715c..2e7e8091 100644
--- a/app/partials/admin-roles.jade
+++ b/app/partials/admin-roles.jade
@@ -24,9 +24,8 @@ block content
                     a.save.icon.icon-floppy(href="", title="Save")
 
                 p.total
-                    | {{ role.name }}
+                    span.role-name(title="{{ role.members_count }} members with this role") {{ role.name }}
                     a.edit-value.icon.icon-edit
-                    span ({{ role.members_count }} members with this role)
 
             div.any-computable-role(ng-hide="anyComputableRole") Be careful, no role in your project will be able to estimate the point value for user stories
 
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index 9dc54351..f9c50732 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -129,7 +129,17 @@ body {
     margin-bottom: 1rem;
     .action-buttons {
         @include flex-shrink(0);
-        padding-left: 1rem;
+    }
+    .button {
+        color: $white;
+        float: right;
+        margin-left: 10px;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:hover {
+            color: $white;
+        }
     }
     h1 {
         margin-bottom: 0;
diff --git a/app/styles/layout/wiki.scss b/app/styles/layout/wiki.scss
index 743f82da..d8cfd8fb 100644
--- a/app/styles/layout/wiki.scss
+++ b/app/styles/layout/wiki.scss
@@ -1,13 +1,3 @@
 .wiki-content {
     margin-bottom: 2rem;
 }
-.action-buttons {
-    .button {
-        color: $white;
-        float: right;
-        margin-left: 10px;
-        &:hover {
-            color: $white;
-        }
-    }
-}
diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss
index 9bcbcb46..2907d0e7 100644
--- a/app/styles/modules/admin/admin-roles.scss
+++ b/app/styles/modules/admin/admin-roles.scss
@@ -1,36 +1,56 @@
 .admin-roles {
+    .total {
+        background-color: $whitish;
+        padding: 1rem;
+        &:hover {
+            .edit-value {
+                @include transition(opacity .3s linear);
+                opacity: 1;
+            }
+        }
+    }
+    .role-name {
+        @extend %xlarge;
+        @extend %title;
+        color: $grayer;
+    }
     .edit-value {
+        @include transition(opacity .3s linear);
+        @extend %medium;
+        color: $gray-light;
         cursor: pointer;
         margin-left: .5rem;
+        opacity: 0;
     }
     .edit-role {
         @include table-flex(stretch, left, center, row, wrap);
+<<<<<<< HEAD
 <<<<<<< HEAD
         margin-bottom: 1rem;
         input {
 =======
+=======
+>>>>>>> Admin roles design and UX
         background-color: $whitish;
         margin-bottom: 1rem;
         padding: .5rem;
         input {
             background-color: $white;
+<<<<<<< HEAD
 >>>>>>> fix #1397 - rename role
             width: auto;
+=======
+            width: 50%;
+>>>>>>> Admin roles design and UX
         }
         .icon-floppy {
+            @include transition(color.3s linear);
+            color: $gray-light;
             margin-left: .5rem;
-        }
-    }
-    .total {
-        @extend %large;
-        @extend %title;
-        background-color: $whitish;
-        color: $grayer;
-        padding: 1rem;
-        span {
-            @extend %medium;
-            @extend %text;
-            padding-left: .5rem;
+            &:hover {
+                @include transition(color.3s linear);
+                color: $green-taiga;
+            }
         }
     }
     .any-computable-role {