Merge pull request #912 from pixelated/tooltip-labels

[#828] Adds tooltips for encrypt and sign labels

6 files changed, 83 insertions, 44 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 4c9dce30..029707c1 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -96,73 +96,94 @@ define(
       };
 
       this.checkEncrypted = function(mail) {
+        var ENCRYPTED_FLAG = {
+          cssClass: 'security-status__label--encrypted',
+          label: 'encrypted',
+          tooltipText: 'encrypted-label-tooltip'
+        };
+
+        var ENCRYPTED_WITH_ERROR_FLAG = {
+          cssClass: 'security-status__label--encrypted--with-error',
+          label: 'encryption-error',
+          tooltipText: 'encryption-error-label-tooltip'
+        };
+
+        var NOT_ENCRYPTED_FLAG = {
+          cssClass: 'security-status__label--not-encrypted',
+          label: 'not-encrypted',
+          tooltipText: 'not-encrypted-label-tooltip'
+        };
+
         if(_.isEmpty(mail.security_casing.locks)) {
-          return {
-            cssClass: 'security-status__label--not-encrypted',
-            label: 'not-encrypted'
-          };
+          return NOT_ENCRYPTED_FLAG;
         }
 
-        var statusClass = ['security-status__label--encrypted'];
-        var statusLabel;
+        if(this.hasAnyEncryptionInfo(mail)) {
+          return ENCRYPTED_FLAG;
+        }
+
+        return ENCRYPTED_WITH_ERROR_FLAG;
+      };
 
-        var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
+      this.hasAnyEncryptionInfo = function(mail) {
+        return _.any(mail.security_casing.locks, function (lock) {
           return lock.state === 'valid';
         });
+      };
 
-        if(hasAnyEncryptionInfo) {
-          statusLabel = 'encrypted';
-        } else {
-          statusClass.push('--with-error');
-          statusLabel = 'encryption-error';
-        }
+      this.checkSigned = function(mail) {
 
-        return {
-          cssClass: statusClass.join(''),
-          label: statusLabel
+        var SIGNED_FLAG = {
+          cssClass: 'security-status__label--signed',
+          label: 'signed',
+          tooltipText: 'signed-label-tooltip'
         };
-      };
 
-      this.checkSigned = function(mail) {
-        var statusNotSigned = {
-          cssClass: 'security-status__label--not-signed',
-          label: 'not-signed'
+        var SIGNED_REVOKED_FLAG = {
+          cssClass: 'security-status__label--signed--revoked',
+          label: 'signature-revoked',
+          tooltipText: 'not-signed-label-tooltip'
         };
 
-        if(_.isEmpty(mail.security_casing.imprints)) {
-          return statusNotSigned;
-        }
+        var SIGNED_EXPIRED_FLAG = {
+          cssClass: 'security-status__label--signed--expired',
+          label: 'signature-expired',
+          tooltipText: 'not-signed-label-tooltip'
+        };
+
+        var SIGNED_NOT_TRUSTED_FLAG = {
+          cssClass: 'security-status__label--signed--not-trusted',
+          label: 'signature-not-trusted',
+          tooltipText: 'not-signed-label-tooltip'
+        };
+
+        var NOT_SIGNED_FLAG = {
+          cssClass: 'security-status__label--not-signed',
+          label: 'not-signed',
+          tooltipText: 'not-signed-label-tooltip'
+        };
 
         var hasNoSignatureInformation = _.any(mail.security_casing.imprints, function (imprint) {
           return imprint.state === 'no_signature_information';
         });
 
-        if(hasNoSignatureInformation) {
-          return statusNotSigned;
+        if(_.isEmpty(mail.security_casing.imprints) || hasNoSignatureInformation) {
+          return NOT_SIGNED_FLAG;
         }
 
-        var statusClass = ['security-status__label--signed'];
-        var statusLabel = ['signed'];
-
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
-          statusClass.push('--revoked');
-          statusLabel.push('signature-revoked');
+          return SIGNED_REVOKED_FLAG;
         }
 
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
-          statusClass.push('--expired');
-          statusLabel.push('signature-expired');
+          return SIGNED_EXPIRED_FLAG;
         }
 
         if(this.isNotTrusted(mail)) {
-          statusClass.push('--not-trusted');
-          statusLabel.push('signature-not-trusted');
+          return SIGNED_NOT_TRUSTED_FLAG;
         }
 
-        return {
-          cssClass: statusClass.join(''),
-          label: statusLabel.join(' ')
-        };
+        return SIGNED_FLAG;
       };
 
       this.isNotTrusted = function(mail){
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 873b4a56..6e2cef80 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -38,6 +38,11 @@
     "not-encrypted": "Not encrypted",
     "signed": "Verified sender",
     "not-signed": "Not signed",
+    "encrypted-label-tooltip": "This message was encrypted.",
+    "encryption-error-label-tooltip": "This message had an encryption error.",
+    "not-encrypted-label-tooltip": "This message is not encrypted.",
+    "not-signed-label-tooltip": "The sender could not be verified.",
+    "signed-label-tooltip": "You are communicating with the real sender.",
     "sending-mail": "Sending...",
     "trash-button": "Delete it",
     "search-placeholder" : "Search...",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index ff766a2b..d1ab7245 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -36,8 +36,13 @@
     "you": "você",
     "encrypted": "Criptografado",
     "not-encrypted": "Não criptografado",
-    "signed": "Rementente verificado",
+    "signed": "Remetente verificado",
     "not-signed": "Não assinado",
+    "encrypted-label-tooltip": "Esta mensagem foi criptografada.",
+    "encryption-error-label-tooltip": "Esta mensagem contém um erro de criptografia.",
+    "not-encrypted-label-tooltip": "Esta mensagem não foi criptografada.",
+    "not-signed-label-tooltip": "O remetente não pode ser verificado.",
+    "signed-label-tooltip": "Você está se comunicando com o remetente real.",
     "sending-mail": "Enviando...",
     "trash-button": "Deletar",
     "search-placeholder" : "Pesquisar...",
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index d3aa0220..6509bdcf 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -6,14 +6,14 @@
 }
 
 @mixin tooltip($top: 8px, $left: 40px) {
-  background: rgba(0, 0, 0, 0.7);
+  background: $dark_slate_gray;
   color: $white;
   position: absolute;
   z-index: 2;
   left: $left;
   top: $top;
   font-size: 0.8rem;
-  padding: 2px 10px;
+  padding: 4px 10px;
   white-space: nowrap;
   @include border-radius(2px);
 }
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
index ac966ded..5319eb1d 100644
--- a/web-ui/app/scss/views/_security-labels.scss
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -8,11 +8,19 @@
     background: $success;
     color: $white;
     border-radius: 12px;
+    position: relative;
 
     &:before {
       font-family: FontAwesome;
     }
 
+    &:hover:after {
+        content: attr(data-label);
+        font-size: 0.5rem;
+
+        @include tooltip(25px, 0px);
+    }
+
     &--encrypted {
       &:before {
         content: "\f023";
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 736bc854..0068b7f7 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -8,12 +8,12 @@
         <!-- TODO -->
         <div class="column large-12 no-padding security-status">
             {{#if signatureStatus}}
-            <span class="security-status__label {{ signatureStatus.cssClass }}">
+            <span class="security-status__label {{ signatureStatus.cssClass }}" data-label="{{t signatureStatus.tooltipText }}">
               {{t signatureStatus.label }}
             </span>
             {{/if}}
             {{#if encryptionStatus}}
-            <span class="security-status__label {{ encryptionStatus.cssClass }}">
+            <span class="security-status__label {{ encryptionStatus.cssClass }}" data-label="{{t encryptionStatus.tooltipText }}">
               {{t encryptionStatus.label }}
             </span>
             {{/if}}