From 0830b75bf7529b88056e2082c0c86f2e3a7b51a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Mon, 2 Nov 2015 08:33:31 +0100
Subject: [PATCH] Refactor pending status in member page

---
 app/coffee/modules/admin/memberships.coffee         | 11 ++++++-----
 app/locales/locale-en.json                          |  1 +
 app/partials/admin/memberships-row-avatar.jade      |  4 +++-
 .../modules/admin/admin-membership-table.scss       | 13 ++++++++-----
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/coffee/modules/admin/memberships.coffee b/app/coffee/modules/admin/memberships.coffee
index 93b2bdde..98279a35 100644
--- a/app/coffee/modules/admin/memberships.coffee
+++ b/app/coffee/modules/admin/memberships.coffee
@@ -210,15 +210,17 @@ module.directive("tgMemberships", ["$tgTemplate", "$compile", MembershipsDirecti
 ## Member Avatar Directive
 #############################################################################
 
-MembershipsRowAvatarDirective = ($log, $template) ->
+MembershipsRowAvatarDirective = ($log, $template, $translate) ->
     template = $template.get("admin/memberships-row-avatar.html", true)
 
     link = ($scope, $el, $attrs) ->
+        pending = $translate.instant("ADMIN.MEMBERSHIP.STATUS_PENDING")
         render = (member) ->
             ctx = {
                 full_name: if member.full_name then member.full_name else ""
                 email: if member.user_email then member.user_email else member.email
                 imgurl: if member.photo then member.photo else "/images/unnamed.png"
+                pending: if !member.is_user_active then pending else ""
             }
 
             html = template(ctx)
@@ -236,7 +238,7 @@ MembershipsRowAvatarDirective = ($log, $template) ->
     return {link: link}
 
 
-module.directive("tgMembershipsRowAvatar", ["$log", "$tgTemplate", MembershipsRowAvatarDirective])
+module.directive("tgMembershipsRowAvatar", ["$log", "$tgTemplate", '$translate', MembershipsRowAvatarDirective])
 
 
 #############################################################################
@@ -357,9 +359,8 @@ MembershipsRowActionsDirective = ($log, $repo, $rs, $confirm, $compile, $transla
     """
 
     pendingTemplate = """
-    <a class="pending" href="">
-        {{'ADMIN.MEMBERSHIP.STATUS_PENDING' | translate}}
-        <span class="icon icon-reload"></span>
+    <a class="resend" href="">
+        {{'ADMIN.MEMBERSHIP.RESEND' | translate}}
     </a>
     <a class="delete" href="">
         <span class="icon icon-delete"></span>
diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json
index a580cb9d..c959212b 100644
--- a/app/locales/locale-en.json
+++ b/app/locales/locale-en.json
@@ -590,6 +590,7 @@
             "STATUS_ACTIVE": "Active",
             "STATUS_PENDING": "Pending",
             "DELETE_MEMBER": "Delete member",
+            "RESEND": "Resend",
             "SUCCESS_SEND_INVITATION": "We've sent the invitation again to '{{email}}'.",
             "ERROR_SEND_INVITATION": "We haven't sent the invitation.",
             "SUCCESS_DELETE": "We've deleted {{message}}.",
diff --git a/app/partials/admin/memberships-row-avatar.jade b/app/partials/admin/memberships-row-avatar.jade
index 97491394..838f44cc 100644
--- a/app/partials/admin/memberships-row-avatar.jade
+++ b/app/partials/admin/memberships-row-avatar.jade
@@ -2,4 +2,6 @@ figure.avatar
     img(src!="<%- imgurl %>", alt!="<%- full_name %>")
     figcaption
         span.name <%- full_name %>
-        span.email <%- email %>
+        div
+            span.pending <%- pending %>
+            span.email <%- email %>
diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss
index b3420b3c..93b42f1d 100644
--- a/app/styles/modules/admin/admin-membership-table.scss
+++ b/app/styles/modules/admin/admin-membership-table.scss
@@ -46,17 +46,17 @@
         justify-content: space-between;
     }
     .active,
-    .pending {
-        padding: 8px;
+    .resend {
+        padding: .4rem .5rem;
     }
     .active {
         background-color: $whitish;
     }
-    .pending {
-        background-color: $red-light;
+    .resend {
+        background-color: $primary;
         color: $white;
         &:hover {
-            background-color: $red;
+            background-color: $primary-light;
             color: $white;
             transition: background-color .3s linear;
         }
@@ -68,6 +68,9 @@
             color: $red;
         }
     }
+    .pending {
+        color: $red-light;
+    }
     .row-admin {
         input {
             vertical-align: middle;