From 74e9a6ac698d798c6f02d1c934862529866ed42e Mon Sep 17 00:00:00 2001 From: Caio Carrara Date: Tue, 22 Mar 2016 16:08:07 -0300 Subject: 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. --- web-ui/app/js/mail_view/ui/mail_view.js | 47 ++++++++++++++------ web-ui/app/scss/style.scss | 2 +- web-ui/app/scss/views/_security-labels.scss | 67 +++++++++++++++++++++++++++++ web-ui/app/templates/mails/full_view.hbs | 11 ++--- 4 files changed, 109 insertions(+), 18 deletions(-) create mode 100644 web-ui/app/scss/views/_security-labels.scss 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 @@
{{#if signatureStatus}} - - {{t signatureStatus }} + + {{t signatureStatus.label }} - {{/if}} {{#if encryptionStatus}} - - {{t encryptionStatus }} + {{/if}} + {{#if encryptionStatus}} + + {{t encryptionStatus.label }} {{/if}}
-- cgit v1.2.3 From bcef41ec649157e68b619ee78b249db12e86043e Mon Sep 17 00:00:00 2001 From: Caio Carrara Date: Tue, 22 Mar 2016 16:08:07 -0300 Subject: 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. --- web-ui/app/js/mail_view/ui/mail_view.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 d1fba8c4..6f21b96c 100644 --- a/web-ui/app/js/mail_view/ui/mail_view.js +++ b/web-ui/app/js/mail_view/ui/mail_view.js @@ -146,7 +146,7 @@ define( return { cssClass: 'security-status__label--not-encrypted', label: 'not-encrypted' - } + }; } var statusClass = ['security-status__label--encrypted']; @@ -166,7 +166,7 @@ define( return { cssClass: statusClass.join(''), label: statusLabel.join(' ') - } + }; }; this.checkSigned = function(mail) { @@ -187,7 +187,7 @@ define( return statusNotSigned; } - var statusClass = ['security-status__label--signed'] + var statusClass = ['security-status__label--signed']; var statusLabel = ['signed']; if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) { @@ -208,7 +208,7 @@ define( return { cssClass: statusClass.join(''), label: statusLabel.join(' ') - } + }; }; this.isNotTrusted = function(mail){ -- cgit v1.2.3 From 0ab2b5d73f42536ca410485bf7e8b86f9e1d9df7 Mon Sep 17 00:00:00 2001 From: Caio Carrara Date: Wed, 23 Mar 2016 16:14:34 -0300 Subject: Issue #647: fix css class names on tests --- web-ui/test/spec/mail_view/ui/mail_view.spec.js | 36 ++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js index 093eddb8..850687be 100644 --- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js +++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js @@ -121,85 +121,85 @@ describeComponent('mail_view/ui/mail_view', function () { it('assumes that the mail is encrypted and valid if at least one of the locks are valid', function() { var email = testData; email.security_casing = {locks: [{state: 'valid'}, {state: 'failure'}]}; - expect(this.component.checkEncrypted(email)).toEqual('encrypted encryption-valid'); + expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--encrypted'); }); it('assumes that the mail is encrypted and failure if all the locks are failed', function() { var email = testData; email.security_casing = {locks: [{state: 'failure'}, {state: 'failure'}]}; - expect(this.component.checkEncrypted(email)).toEqual('encrypted encryption-error'); + expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--encrypted--with-error'); }); it('assumes that the mail is not encrypted if it doesn\'t have any locks', function() { var email = testData; email.security_casing = {locks: []}; - expect(this.component.checkEncrypted(email)).toEqual('not-encrypted'); + expect(this.component.checkEncrypted(email).cssClass).toEqual('security-status__label--not-encrypted'); }); it('assumes that the mail is signed only if all imprints are valid', function() { var email = testData; email.security_casing = {imprints: [{state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}, {state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}]}; - expect(this.component.checkSigned(email)).toEqual('signed'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed'); }); it('assumes that the mail is signed with failures if there is a revoke or expire', function() { var email = testData; email.security_casing = {imprints: [{state: 'valid', seal: {trust: 'marginal', validity: 'marginal'}}, {state: 'from_revoked', seal: {trust: 'marginal', validity: 'marginal'}}]}; - expect(this.component.checkSigned(email)).toEqual('signed signature-revoked'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--revoked'); }); it('assumes that mail is not trusted if its signature contains no_trust from the user', function() { var email = testData; email.security_casing = {imprints: [{seal: {trust: 'no_trust', validity: 'ultimate'}}]}; - expect(this.component.checkSigned(email)).toEqual('signed signature-not-trusted'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted'); }); it('uses validity when trust is not present', function() { var email = testData; email.security_casing = {imprints: [{seal: { validity: 'no_trust'}}]}; - expect(this.component.checkSigned(email)).toEqual('signed signature-not-trusted'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted'); }); it('assumes not trusted when the signature is not found', function(){ var email = testData; email.security_casing = {imprints: [{seal: null}]}; - expect(this.component.checkSigned(email)).toEqual('signed signature-not-trusted'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--signed--not-trusted'); }); it('assumes that the mail is not signed if there are no imprints', function() { var email = testData; email.security_casing = {imprints: []}; - expect(this.component.checkSigned(email)).toEqual('not-signed'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed'); }); it('assumes that there is no signature info to show', function() { var email = testData; email.security_casing = {imprints: [{state: 'no_signature_information'}]}; - expect(this.component.checkSigned(email)).toEqual('not-signed'); + expect(this.component.checkSigned(email).cssClass).toEqual('security-status__label--not-signed'); }); it('shows that mail is encrypted if it is', function() { - spyOn(this.component, 'checkEncrypted').and.returnValue('encrypted'); + spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'security-status__label--encrypted'}); this.component.displayMail({}, testData); - expect(this.component.$node.find('.encrypted')).toExist(); + expect(this.component.$node.find('.security-status__label--encrypted')).toExist(); }); it('shows that mail is signed if it is', function() { - spyOn(this.component, 'checkSigned').and.returnValue('signed'); + spyOn(this.component, 'checkSigned').and.returnValue({cssClass: 'security-status__label--signed'}); this.component.displayMail({}, testData); - expect(this.component.$node.find('.signed')).toExist(); + expect(this.component.$node.find('.security-status__label--signed')).toExist(); }); it('shows that mail is not encrypted if it isn\'t', function() { - spyOn(this.component, 'checkEncrypted').and.returnValue('not-encrypted'); + spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'security-status__label--not-encrypted'}); this.component.displayMail({}, testData); - expect(this.component.$node.find('.not-encrypted')).toExist(); + expect(this.component.$node.find('.security-status__label--not-encrypted')).toExist(); }); it('shows that mail is not signed if it isn\'t', function() { - spyOn(this.component, 'checkEncrypted').and.returnValue('not-signed'); + spyOn(this.component, 'checkEncrypted').and.returnValue({cssClass: 'securty-status__label--not-signed'}); this.component.displayMail({}, testData); - expect(this.component.$node.find('.not-signed')).toExist(); + expect(this.component.$node.find('.security-status__label--not-signed')).toExist(); }); it('creates new tag when pressing Enter key on new tag input', function(){ -- cgit v1.2.3