Issue #647: Refactor security labels stylesheet

This change refactor the stylesheet of security labels. Now it's
following the BEM naming conventions. Also, as the code is pretty
coupled between css and js, it was necessary some changes on javascript
code to keep the previous i18n key and rename the css classes.

4 files changed, 109 insertions, 18 deletions

diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 85d536f9..d1fba8c4 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -142,26 +142,41 @@ define(
       };
 
       this.checkEncrypted = function(mail) {
-        if(_.isEmpty(mail.security_casing.locks)) { return 'not-encrypted'; }
+        if(_.isEmpty(mail.security_casing.locks)) {
+          return {
+            cssClass: 'security-status__label--not-encrypted',
+            label: 'not-encrypted'
+          }
+        }
 
-        var status = ['encrypted'];
+        var statusClass = ['security-status__label--encrypted'];
+        var statusLabel = ['encrypted'];
 
         var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
           return lock.state === 'valid';
         });
 
         if(hasAnyEncryptionInfo) {
-          status.push('encryption-valid');
+          statusLabel.push('encryption-valid');
         } else {
-          status.push('encryption-error');
+          statusClass.push('--with-error');
+          statusLabel.push('encryption-error');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        }
       };
 
       this.checkSigned = function(mail) {
+        var statusNotSigned = {
+          cssClass: 'security-status__label--not-signed',
+          label: 'not-signed'
+        };
+
         if(_.isEmpty(mail.security_casing.imprints)) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
         var hasNoSignatureInformation = _.any(mail.security_casing.imprints, function (imprint) {
@@ -169,23 +184,31 @@ define(
         });
 
         if(hasNoSignatureInformation) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
-        var status = ['signed'];
+        var statusClass = ['security-status__label--signed']
+        var statusLabel = ['signed'];
 
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
-          status.push('signature-revoked');
+          statusClass.push('--revoked');
+          statusLabel.push('signature-revoked');
         }
+
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
-          status.push('signature-expired');
+          statusClass.push('--expired');
+          statusLabel.push('signature-expired');
         }
 
         if(this.isNotTrusted(mail)) {
-          status.push('signature-not-trusted');
+          statusClass.push('--not-trusted');
+          statusLabel.push('signature-not-trusted');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        }
       };
 
       this.isNotTrusted = function(mail){
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index 05974efb..4dc79398 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -23,6 +23,7 @@
 @import "views/no-message-selected";
 @import "views/no-mails-available";
 @import "views/read-view";
+@import "views/security-labels";
 @import "views/compose-view";
 @import "views/compose-button";
 
@@ -31,6 +32,5 @@
 
 // TODO
 @import "reply";
-@import "security";
 @import "styles";
 
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
new file mode 100644
index 00000000..3a15d99b
--- /dev/null
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -0,0 +1,67 @@
+.security-status {
+  margin: 0 0 5px;
+
+  &__label {
+    display: inline-block;
+    padding: 2px 6px;
+    white-space: nowrap;
+    background: $success;
+    color: $white;
+    border-radius: 12px;
+
+    &:before {
+      font-family: FontAwesome;
+    }
+
+    &--encrypted {
+      &:before {
+        content: "\f023";
+      }
+
+      &--with-error {
+        background: $attention;
+        &:before {
+          content: "\f023 \f057";
+        }
+      }
+    }
+
+    &--not-encrypted {
+      background: $attention;
+
+      &:before {
+        content: "\f13e ";
+      }
+    }
+
+    &--signed {
+      &:before {
+        content: "\f00c";
+      }
+
+      &--revoked, &--expired {
+        background: $attention;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+
+      &--not-trusted {
+        background: $error;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+
+    &--not-signed {
+      background: $attention;
+
+      &:before {
+        content: "\f05e";
+      }
+    }
+  }
+}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 4c0863de..8c486275 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -8,12 +8,13 @@
         <!-- TODO -->
         <div class="column large-12 no-padding security-status">
             {{#if signatureStatus}}
-            <span class="{{signatureStatus}}">
-              {{t signatureStatus }}
+            <span class="security-status__label {{ signatureStatus.cssClass }}">
+              {{t signatureStatus.label }}
             </span>
-            {{/if}} {{#if encryptionStatus}}
-            <span class="{{encryptionStatus}}">
-              {{t encryptionStatus }}
+            {{/if}}
+            {{#if encryptionStatus}}
+            <span class="security-status__label {{ encryptionStatus.cssClass }}">
+              {{t encryptionStatus.label }}
             </span>
             {{/if}}
         </div>