diff options
Diffstat (limited to 'web-ui')
28 files changed, 260 insertions, 466 deletions
diff --git a/web-ui/app/images/pixelated-logo-orange.svg b/web-ui/app/images/pixelated-logo-orange.svg deleted file mode 100644 index 7b141531..00000000 --- a/web-ui/app/images/pixelated-logo-orange.svg +++ /dev/null @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - viewBox="-50 325.561 509.707 142.439" enable-background="new -50 325.561 509.707 142.439" xml:space="preserve"> -<g> - <path fill="#F9A731" d="M-50,361.03v71.365L12.837,468l62.833-35.605V361.03l-62.857-35.469L-50,361.03z M10.262,442.178 - l-36.527-20.285v-43.872l36.586,20.999L10.262,442.178z M51.936,421.893l-36.148,20.285l0.067-43.123l36.081-21.034V421.893z - M51.936,372.001l-38.985,23.113l-39.218-23.113l39.218-21.131L51.936,372.001z"/> - <path fill="#F9A731" d="M119.505,367.893H99.537v59.328h13.52v-22.005h6.448c11.579,0,20.279-6.832,20.279-19.056 - C139.784,373.863,131.084,367.893,119.505,367.893z M116.866,394.429h-3.809v-15.75h3.809c5.323,0,10.357,1.798,10.357,7.91 - C127.224,392.631,122.189,394.429,116.866,394.429z"/> - <rect x="144.309" y="367.893" fill="#F9A731" width="13.52" height="59.328"/> - <polygon fill="#F9A731" points="216.516,367.893 199.689,367.893 188.759,384.075 177.827,367.893 161.721,367.893 - 180.417,395.291 160.228,427.221 176.982,427.221 188.759,407.014 200.534,427.221 218.01,427.221 197.099,395.291 "/> - <polygon fill="#F9A731" points="220.128,427.221 254.069,427.221 254.069,415.356 233.647,415.356 233.647,403.418 - 253.207,403.418 253.207,391.552 233.647,391.552 233.647,379.76 254.069,379.76 254.069,367.893 220.128,367.893 "/> - <path fill="#F9A731" d="M304.807,367.893l-19.156,47.463H272.33v-47.463h-13.52v59.328h22.053h11.888h2.636l4.386-11.865h22.578 - l4.391,11.865h14.524l-23.944-59.328C317.322,367.893,304.807,367.893,304.807,367.893z M304.377,403.489l6.614-17.257h0.145 - l6.615,17.257H304.377z"/> - <polygon fill="#F9A731" points="329.939,379.76 344.073,379.76 344.073,427.221 357.592,427.221 357.592,379.76 371.687,379.76 - 371.687,367.893 329.939,367.893 "/> - <polygon fill="#F9A731" points="376.265,427.221 410.207,427.221 410.207,415.356 389.785,415.356 389.785,403.418 - 409.344,403.418 409.344,391.552 389.785,391.552 389.785,379.76 410.207,379.76 410.207,367.893 376.265,367.893 "/> - <path fill="#F9A731" d="M429.792,367.893h-14.94v59.328h14.94c16.324,0,29.914-12.37,29.914-29.699 - C459.707,380.262,446.044,367.893,429.792,367.893z M430.457,415.138h-2.084v-35.163h2.084c10.067,0,16.9,7.695,16.9,17.619 - C447.285,407.516,440.455,415.138,430.457,415.138z"/> -</g> -</svg> diff --git a/web-ui/app/images/pixelated-logo_symbol_orange.png b/web-ui/app/images/pixelated-logo_symbol_orange.png Binary files differdeleted file mode 100644 index 5ee5cc2f..00000000 --- a/web-ui/app/images/pixelated-logo_symbol_orange.png +++ /dev/null diff --git a/web-ui/app/images/pixelated-screenshot.png b/web-ui/app/images/pixelated-screenshot.png Binary files differdeleted file mode 100644 index 8baa9ee6..00000000 --- a/web-ui/app/images/pixelated-screenshot.png +++ /dev/null diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 87ab000d..47116eb5 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -21,13 +21,36 @@ <div class="inner-wrap"> <section id="left-pane" class="left-off-canvas-menu"> <a class="left-off-canvas-logo" href="#"> - <img id="pixelated-logo" src="/assets/images/pixelated-logo-orange.svg" alt="Pixelated"> + <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="30.4 316.8 555.2 155.2" enable-background="new 30.4 316.8 555.2 155.2" xml:space="preserve"> + <g> + <path fill="#3E3B38" d="M30.4,355.5v77.8L98.9,472l68.5-38.7v-77.8l-68.5-38.7L30.4,355.5z M96,443.9l-39.9-22v-47.7L96,396.9 + V443.9z M141.2,421.8l-39.4,22v-47l39.4-23C141.2,373.8,141.2,421.8,141.2,421.8z M141.2,367.5l-42.4,25.2l-42.8-25.2l42.8-23 + L141.2,367.5z"/> + <path fill="#3E3B38" d="M214.9,363.1h-21.8v64.6h14.7v-24h7.1c12.7,0,22-7.3,22-20.8C237,369.7,227.4,363.1,214.9,363.1z M212,392 + h-4.2v-17.1h4.2c5.9,0,11.3,2,11.3,8.6S217.9,392,212,392z"/> + <rect x="241.9" y="363.1" fill="#3E3B38" width="14.7" height="64.6"/> + <polygon fill="#3E3B38" points="320.7,363.1 302.3,363.1 290.3,380.7 278.3,363.1 261,363.1 281.3,392.9 259.2,427.7 277.6,427.7 + 290.3,405.7 303.1,427.7 322.2,427.7 299.4,392.9 "/> + <polygon fill="#3E3B38" points="324.6,427.7 361.6,427.7 361.6,414.7 339.3,414.7 339.3,401.8 360.6,401.8 360.6,388.8 + 339.3,388.8 339.3,376 361.6,376 361.6,363.1 324.6,363.1 "/> + <path fill="#3E3B38" d="M416.6,363.1l-20.8,51.7h-14.4v-51.7h-14.7v64.6h24h13h2.9l4.9-13H436l4.9,13h15.9l-26.2-64.6H416.6z + M416.2,401.8l7.1-18.8h0.2l7.1,18.8H416.2z"/> + <polygon fill="#3E3B38" points="444.1,376 459.5,376 459.5,427.7 474.2,427.7 474.2,376 489.6,376 489.6,363.1 444.1,363.1 "/> + <polygon fill="#3E3B38" points="494.5,427.7 531.5,427.7 531.5,414.7 509.4,414.7 509.4,401.8 530.7,401.8 530.7,388.8 + 509.4,388.8 509.4,376 531.5,376 531.5,363.1 494.5,363.1 "/> + <path fill="#3E3B38" d="M553,363.1h-16.2v64.6H553c17.9,0,32.6-13.5,32.6-32.3C585.6,376.5,570.6,363.1,553,363.1z M553.5,414.5 + h-2.2v-38.2h2.2c11,0,18.4,8.3,18.4,19.1C571.9,406.2,564.5,414.5,553.5,414.5z"/> + </g> + </svg> </a> - <a class="fake-left-off-canvas-toggle" href="#"> - <i class=" toggle fa fa-navicon"></i> + <a class="side-nav-toggle side-nav-toggle-icon" href="#"> + <i class="toggle fa fa-navicon"></i> </a> <nav id="tag-list"></nav> - <nav id="logout"></nav> + <div class="side-nav-bottom"> + <nav id="logout"></nav> + </div> </section> </div> </div> @@ -39,9 +62,9 @@ </header> <div class="inner-wrap"> + <a class="left-off-canvas-toggle" href="#"> + </a> <article id='middle-pane-container' class="small-5 medium-5 large-5 columns no-padding"> - <a class="left-off-canvas-toggle" href="#"> - </a> <section id="top-pane" class="small-12 large-12 no-padding"> <div id="compose-search-trigger"> <div id="compose" class="column small-12 large-4 no-padding"> @@ -61,8 +84,7 @@ </article> <section id="right-pane" class="small-7 medium-7 large-7 columns"> - </section> - + </section> </div> </div> @@ -79,18 +101,8 @@ <script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script> <!--usemin_end--> - - <script> $(document).foundation(); </script> - -<script> -$('.fake-left-off-canvas-toggle').click(function (ev) { - ev.preventDefault(); - $('.left-off-canvas-toggle').click(); - }); -</script> - </body> </html> diff --git a/web-ui/app/js/foundation/off_canvas.js b/web-ui/app/js/foundation/off_canvas.js index 8dfd75ba..805dfab8 100644 --- a/web-ui/app/js/foundation/off_canvas.js +++ b/web-ui/app/js/foundation/off_canvas.js @@ -19,13 +19,29 @@ define(['flight/lib/component', 'page/events'], function (defineComponent, event return defineComponent(function() { - this.closeSlider = function (){ - $('.exit-off-canvas').click(); + this.closeSlider = function (ev){ + $('.off-canvas-wrap.content').removeClass('move-right'); + this.toggleTagsVisibility(); + }; + + this.toggleSlideContent = function (ev) { + ev.preventDefault(); + $('.left-off-canvas-toggle').click(); + this.toggleTagsVisibility(); + }; + + this.toggleTagsVisibility = function () { + if ($('.off-canvas-wrap.content').hasClass('move-right')) { + $('#custom-tag-list').addClass('expanded'); + } else { + $('#custom-tag-list').removeClass('expanded'); + } }; this.after('initialize', function () { this.on($('#middle-pane-container'), 'click', this.closeSlider); this.on($('#right-pane'), 'click', this.closeSlider); + this.on($('.side-nav-toggle'), 'click', this.toggleSlideContent); }); }); }); diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js index 69327a57..18d36049 100644 --- a/web-ui/app/js/mail_list/ui/mail_list.js +++ b/web-ui/app/js/mail_list/ui/mail_list.js @@ -93,7 +93,6 @@ define( this.showMails = function (event, data) { this.updateCurrentTagAndMail(data); this.refreshMailList(null, data); - this.triggerScrollReset(); this.triggerMailOpenForPopState(data); this.openMailFromUrl(); }; @@ -114,6 +113,7 @@ define( this.cleanSelected = function () { this.attr.currentMailIdent = ''; + this.triggerScrollReset(); }; this.respondWithCheckedMails = function (ev, caller) { 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 4faba468..578dcbb9 100644 --- a/web-ui/app/js/mail_view/ui/mail_view.js +++ b/web-ui/app/js/mail_view/ui/mail_view.js @@ -108,7 +108,7 @@ define( var status = ['encrypted']; if(_.any(mail.security_casing.locks, function (lock) { return lock.state === 'valid'; })) { status.push('encryption-valid'); } - else { status.push('encryption-failure'); } + else { status.push('encryption-error'); } return status.join(' '); }; diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js index 459c8b24..012d7fb9 100644 --- a/web-ui/app/js/mail_view/ui/recipients/recipients_input.js +++ b/web-ui/app/js/mail_view/ui/recipients/recipients_input.js @@ -136,7 +136,7 @@ define([ }; this.warnSendButtonOfInputState = function () { - var toTrigger = _.isEmpty(this.$node.val()) ? events.ui.recipients.inputHasNoMail : events.ui.recipients.inputHasMail; + var toTrigger = _.isEmpty(this.$node.val()) ? events.ui.recipients.inputFieldIsEmpty : events.ui.recipients.inputFieldHasCharacters; this.trigger(document, toTrigger, { name: this.attr.name }); }; diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js index 8f168ecc..5c1c3506 100644 --- a/web-ui/app/js/mail_view/ui/send_button.js +++ b/web-ui/app/js/mail_view/ui/send_button.js @@ -37,35 +37,37 @@ define([ this.$node.prop('disabled', true); }; - this.atLeastOneFieldHasRecipients = function () { + this.atLeastOneInputFieldHasRecipients = function () { return _.any(_.values(this.attr.recipients), function (e) { return !_.isEmpty(e); }); }; - this.atLeastOneInputHasMail = function () { - return _.any(_.values(this.attr.inputHasMail), function (e) { return e === true; }); + this.atLeastOneInputFieldHasCharacters = function () { + return _.any(_.values(this.attr.inputFieldHasCharacters), function (e) { return e === true; }); }; this.updateButton = function () { - if (this.atLeastOneInputHasMail() || this.atLeastOneFieldHasRecipients()) { - this.enableButton(); - } else { - this.disableButton(); + if (this.attr.sendingInProgress === false) { + if (this.atLeastOneInputFieldHasCharacters() || this.atLeastOneInputFieldHasRecipients()) { + this.enableButton(); + } else { + this.disableButton(); + } } }; - this.inputHasNoMail = function (ev, data) { - this.attr.inputHasMail[data.name] = false; + this.inputFieldIsEmpty = function (ev, data) { + this.attr.inputFieldHasCharacters[data.name] = false; this.updateButton(); }; - this.inputHasMail = function (ev, data) { - this.attr.inputHasMail[data.name] = true; + this.inputFieldHasCharacters = function (ev, data) { + this.attr.inputFieldHasCharacters[data.name] = true; this.updateButton(); }; this.updateRecipientsForField = function (ev, data) { this.attr.recipients[data.recipientsName] = data.newRecipients; - this.attr.inputHasMail[data.recipientsName] = false; + this.attr.inputFieldHasCharacters[data.recipientsName] = false; this.updateButton(); }; @@ -77,31 +79,34 @@ define([ this.off(document, events.ui.mail.recipientsUpdated); }.bind(this))); - this.trigger(document, events.ui.recipients.doCompleteInput); this.disableButton(); this.$node.text(viewHelper.i18n('sending-mail')); + this.attr.sendingInProgress = true; + + this.trigger(document, events.ui.recipients.doCompleteInput); }; - this.forceEnableButton = function () { - this.enableButton(); + this.resetButton = function () { + this.attr.sendingInProgress = false; this.$node.html(viewHelper.i18n('send-button')); + this.enableButton(); }; this.after('initialize', function () { this.attr.recipients = {}; - this.attr.inputHasMail = {}; - this.$node.html(viewHelper.i18n('send-button')); + this.attr.inputFieldHasCharacters = {}; + this.resetButton(); - this.on(document, events.ui.recipients.inputHasMail, this.inputHasMail); - this.on(document, events.ui.recipients.inputHasNoMail, this.inputHasNoMail); + this.on(document, events.ui.recipients.inputFieldHasCharacters, this.inputFieldHasCharacters); + this.on(document, events.ui.recipients.inputFieldIsEmpty, this.inputFieldIsEmpty); this.on(document, events.ui.recipients.updated, this.updateRecipientsForField); this.on(this.$node, 'click', this.updateRecipientsAndSendMail); this.on(document, events.dispatchers.rightPane.clear, this.teardown); - this.on(document, events.ui.sendbutton.enable, this.enableButton); - this.on(document, events.mail.send_failed, this.forceEnableButton); + this.on(document, events.ui.sendbutton.enable, this.resetButton); + this.on(document, events.mail.send_failed, this.resetButton); this.disableButton(); }); diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js index 3332da91..9942e747 100644 --- a/web-ui/app/js/mixins/with_mail_edit_base.js +++ b/web-ui/app/js/mixins/with_mail_edit_base.js @@ -136,6 +136,7 @@ define( events.ui.userAlerts.displayMessage, {message: i18n.get('One or more of the recipients are not valid emails')} ); + this.trigger(events.mail.send_failed); } }; diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index ff9ed10a..f7e626f8 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -85,8 +85,8 @@ define(function () { selectLast: 'ui:recipients:selectLast', unselectAll: 'ui:recipients:unselectAll', addressesExist: 'ui:recipients:addressesExist', - inputHasMail: 'ui:recipients:inputHasMail', - inputHasNoMail: 'ui:recipients:inputHasNoMail', + inputFieldHasCharacters: 'ui:recipients:inputFieldHasCharacters', + inputFieldIsEmpty: 'ui:recipients:inputFieldIsEmpty', doCompleteInput: 'ui:recipients:doCompleteInput', doCompleteRecipients: 'ui:recipients:doCompleteRecipients' } diff --git a/web-ui/app/locales/en-us/translation.json b/web-ui/app/locales/en-us/translation.json index 24eb2899..8cdb419e 100644 --- a/web-ui/app/locales/en-us/translation.json +++ b/web-ui/app/locales/en-us/translation.json @@ -44,6 +44,7 @@ "you": "you", "encrypted": "Encrypted", "encrypted encryption-failure": "You are not authorized to see this message.", + "encrypted encryption-error": "Message was encrypted but we couldn't decrypt it.", "encrypted encryption-valid": "Message was transmitted securely.", "not-encrypted": "Message was readable during transmission.", "signed": "Certified sender.", diff --git a/web-ui/app/locales/en/translation.json b/web-ui/app/locales/en/translation.json index 24eb2899..8cdb419e 100644 --- a/web-ui/app/locales/en/translation.json +++ b/web-ui/app/locales/en/translation.json @@ -44,6 +44,7 @@ "you": "you", "encrypted": "Encrypted", "encrypted encryption-failure": "You are not authorized to see this message.", + "encrypted encryption-error": "Message was encrypted but we couldn't decrypt it.", "encrypted encryption-valid": "Message was transmitted securely.", "not-encrypted": "Message was readable during transmission.", "signed": "Certified sender.", diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss index 22897ac0..da571405 100644 --- a/web-ui/app/scss/_colors.scss +++ b/web-ui/app/scss/_colors.scss @@ -1,19 +1,38 @@ -$warning: #F7E8AF; -$search-highlight: #FFEF29; +/* Pixelated Color Palette - don't change these! */ +$dark_slate_gray: #3E3A37; +$light_blue: #3DABC4; +$dark_blue: #178CA6; +$light_orange: #FF9C00; +$dark_orange: #FF7902; -$total_count_bg: #C0B9B9; -$error: #D72A25; -$attention: #F6A40A; -$success: #2DAB49; +/* Side nav background color */ +$navigation_background: $dark_slate_gray; + +/* Action buttons and links */ +$action_buttons: $light_blue; + +/* Primary Highlight*/ +$primary_highlight: $light_orange; + +/* Logo color*/ +$logo_color: $light_orange; +/* Unread count dialog bubble background color */ +$secondary_callout: darken($primary_highlight, 5); + +/* Grayscale */ $contrast: #EEE; $top_pane: #EAEAEA; -$secondary: #3E3A37; -$primary_color: #EF4E2F; -$action_buttons: #2ba6cb; +$total_count_bg: #C0B9B9; + +/* Feedback to Users */ +$warning: #F7E8AF; +$search-highlight: #FFEF29; -$secondary_callout: #FF7902; +$error: #D72A25; +$attention: #F6A40A; +$success: #2DAB49; $will_be_encrypted: #41cd60; $wont_be_encrypted: #F6A40A; diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 2d1f8f23..14a1679f 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -76,16 +76,17 @@ position: absolute; bottom: -2px; left: 1px; - color: $secondary; + color: $navigation_background; } } @mixin tags { ul.tags { li { - background: #DDD; + font-size: 0.6rem; + background-color: lighten($action_buttons, 12); + color: white; display: inline; - font-size: 0.55em; padding: 2px 3px; margin: 0 1px; position: relative; diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index bd30552c..7235df72 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -55,7 +55,7 @@ } .bodyArea { - padding: 35px 30px 0 30px; + padding: 15px 30px 0 30px; } .attachmentsAreaWrap { @@ -64,6 +64,16 @@ .attachmentsArea { border-top: 1px solid #DDD; padding: 10px 0 0; + + a { + color: $action_buttons; + text-decoration: none; + line-height: inherit; + &:hover, &:focus { + color: lighten($action_buttons, 10); + outline: none; + } + } } } diff --git a/web-ui/app/scss/_security.scss b/web-ui/app/scss/_security.scss index 6d68066b..2a6b60aa 100644 --- a/web-ui/app/scss/_security.scss +++ b/web-ui/app/scss/_security.scss @@ -20,6 +20,12 @@ content: "\f023 \f05e"; } } + &.encryption-error { + background: $attention; + &:before { + content: "\f023 \f12a"; + } + } } &.signed { &:before { diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss deleted file mode 100644 index 7370aac6..00000000 --- a/web-ui/app/scss/style-guide.scss +++ /dev/null @@ -1,142 +0,0 @@ -@import "compass/css3"; -@import "styles.scss"; - -body { - display: block; - overflow: scroll !important; -} - -div#style-guide-wrap { - font-size: 1rem; -} - -div#style-guide-wrap p { - font-size: 1rem; -} - -img.screenshot { - max-width: 60%; - margin: 0 auto; - display: block; -} - -nav { - position: fixed; - z-index: 10; - height: 50px; - width: 100%; - background-color: #3e3a37; - color: white; - opacity: 0.95; -} - -a.logo-anchor { - color: white; - - &:hover { - color: darken(white, 30); - } -} - -ul li { - display: inline; -} - -ul.typography li { - display: inline-block; - text-align: center; - margin: 20px 10px 0 0; - padding: 30px; - min-height: 125px; - min-width: 130px; - border: 1px solid #EEE; - background-color: white; - border-radius: 5px; -} - -ul.left, ul.right { - padding: 12px; - margin: 0px 25px; - font-weight: bold; -} - -ul.right { - li { - margin: 8px; - } -} - -section.guide-section { - display: block; - height: 100%; - overflow-y: auto; - padding: 66px 32px; - - &:nth-child(even) { - background-color: $top_pane; - } - - &:last-child { - min-height: 666px; - } -} - -.color-card { - width: 160px; - height: 230px; - border-radius: 5px; - display: inline-block; - margin-right: 15px; -} - -.color-label { - position: relative; - top: 173px; -} - -.color-label, .typeface-sample { - background-color: white; - border: 1px solid #eee; - text-align: center; - color: #344a5f; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - padding: 10px 0; -} - -.color-name { - font-size: small; -} - -/* Color Cards definition */ - -.color-grid { - margin-bottom: 25px; - #primary-color-card { background-color: $primary_color; } - #secondary-color-card { background-color: $secondary; } - #top-pane-card { background-color: $top_pane; } - #contrast-card { background-color: $contrast; } - #action-buttons-card { background-color: $action_buttons; } - #success-card { background-color: $success; } - #attention-card { background-color: $attention; } - #warning-card { background-color: $warning; } - #error-card { background-color: $error; } - #search-highlight-card { background-color: $search_highlight; } - #count-background-card { background-color: $total_count_bg; } -} -/* Typeface cards definition*/ -ul.typography li h2 { - &.bold-header { font-weight: bold; } - &.extra-bold-header { font-weight: 800; } - &.lighter-header { font-weight: lighter; } -} - -ul.headers-and-sizes { - margin: 20px 100px 0 0; - display: inline-block; -} - -section#icons i { - font-size: xx-large; - margin-right: 20px; -}
\ No newline at end of file diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 7292f029..56c9ebbd 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -1,3 +1,4 @@ + @import "compass/css3"; @import "colors"; @import "mixins"; @@ -37,7 +38,7 @@ vertical-align: top; input[type=checkbox] { @include check-box; - margin: 7px 8px; + margin: 7px 13px 7px; } select { padding: 1px 3px; @@ -80,9 +81,9 @@ ul#mail-list { clear: both; li { - height: 75px; + height: 66px; position: relative; - padding: 12px 10px; + padding: 8px 10px 10px 10px; background: $contrast; border-bottom: 1px solid white; cursor: pointer; @@ -100,6 +101,11 @@ } a { color: #333; + display: block; + height: 62px; + margin-top: -8px; + padding-top: 3px; + width: 106%; } } .subject-and-tags { @@ -114,8 +120,9 @@ line-height: 1.2; margin: -3px 0 0 0; li { - background-color: #DDD; - color: black; + font-size: 0.6rem; + background-color: lighten($action_buttons, 12); + color: white; display: inline-block; height: auto; font-weight: 400; @@ -156,6 +163,7 @@ } &.selected { background: #FFF; + z-index: 3; a { color: #333; } @@ -222,7 +230,7 @@ section { input { margin: 0; padding: 8px 30px; - color: $secondary; + color: $navigation_background; background: white; border: none; transition: background-color 150ms ease-out; @@ -245,10 +253,10 @@ section { } &#left-pane { - background-color: $secondary; + background-color: $navigation_background; color: white; nav { - border-right: 1px solid lighten($secondary, 10%); + border-right: 1px solid lighten($navigation_background, 10%); ul#default-tag-list, #custom-tag-list { li { transition: background-color 150ms ease-out; @@ -256,12 +264,12 @@ section { cursor: pointer; &:hover { background: #CCC; - color: $secondary; + color: $navigation_background; } &.selected { font-weight: bold; background: $contrast; - color: $secondary; + color: $navigation_background; } } } @@ -273,6 +281,7 @@ section { top: 1px; left: 0; border: 1px solid #FFF; + border-bottom: 1px solid white; position: absolute; opacity: 0.95; } @@ -283,18 +292,24 @@ section { padding-left: 2px; } li { - padding: 5px 10px 5px 16px; + padding: 5px 10px 5px 18px; position: relative; @include searching(4px, 19px, #333, 0.7em); &:before { font-size: 1.5em; font-family: "FontAwesome"; - margin-right: 13px; + margin-right: 16px; font-weight: normal; position: relative; top: 2px; + margin-left: -3px; + } + + &:after { + padding-left: 10px; } + &:nth-child(1) { &:before { content: "\f01c"; @@ -303,6 +318,7 @@ section { &:nth-child(2) { &:before { content: "\f1d8"; + margin-left: -5px; } } &:nth-child(3) { @@ -318,35 +334,72 @@ section { &:nth-child(5) { &:before { content: "\f187"; + margin-left: -5px; } } } } ul#custom-tag-list { + visibility: hidden; + opacity: 0; + transition-duration: 500ms; + height: 220px; + overflow: auto; + background-color: lighten($navigation_background,1); + li { white-space: nowrap; overflow: hidden; font-size: 0.8em; padding: 5px 10px 5px 15px; + &.custom-tag { + text-overflow: ellipsis; + } + span.tag-label { padding: 5px 20px 5px 38px; } } } + ul#custom-tag-list.expanded { + visibility: visible; + opacity: 1; + } + + div.tags-icon { + border-top: 1px solid white; + padding-top: 25px; + margin-bottom: 20px; + i { + font-size: 1.5em; + font-family: "FontAwesome"; + margin-right: 13px; + font-weight: normal; + position: relative; + top: 2px; + left: 16px; + } + span.tag-label { + font-size: 0.9rem; + padding-left: 16px; + margin-bottom: 10px; + } + } + ul#logout { li { color: $action_buttons; - background-color: $secondary; + background-color: $navigation_background; padding: 5px 10px; position: relative; @include searching(4px, 19px, #333, 0.7em); &:hover { background-color: $action_buttons; - color: $secondary; + color: $navigation_background; } div { @@ -370,7 +423,7 @@ section { padding: 5px; font-weight: 600; margin: 0 10px; - border-bottom: 1px dotted lighten($secondary, 10%); + border-bottom: 1px dotted lighten($navigation_background, 10%); } } } @@ -486,28 +539,36 @@ button { } } -.fake-left-off-canvas-toggle { +.side-nav-toggle, .side-nav-toggle-icon { color: white; + cursor: pointer; &:hover, &:focus { color: white; } + background: $navigation_background; + &.logout { + color: $action_buttons; + } +} - padding: 9px 0px 8px 19px; +.side-nav-toggle-icon { + padding: 6px 0px 8px 19px; display: block; left: 0; - background: $secondary; top: 0; position: relative; - &.logout { - color: $action_buttons; - } } .left-off-canvas-logo { - img { - padding: 9px 6px 6px 6px; - width: 163px; + svg { + width: 162px; + height: 56px; + padding-left: 6px; + padding-top: 2px; + path, polygon, rect { + fill: $logo_color; + } } } @@ -515,7 +576,7 @@ button { width: 50px; position: absolute; height: 100vh; - background: $secondary; + background: $navigation_background; ul.shortcuts { li { @@ -527,7 +588,7 @@ button { opacity: 1; cursor: default; a { - color: $secondary; + color: $navigation_background; } } @include searching(6px, 26px, #666, 0.9em); @@ -540,7 +601,7 @@ button { text-align: center; &:hover { background: darken($contrast, 10%); - color: $secondary; + color: $navigation_background; @include btn-transition; &.logout{ color: #000000; @@ -707,4 +768,11 @@ button { } } +div.side-nav-bottom { + width: 100%; + position: fixed; + bottom: 0; + background-color: $navigation_background; +} + @import "mascot.scss"; diff --git a/web-ui/app/style-guide.html b/web-ui/app/style-guide.html deleted file mode 100644 index 3c464ed6..00000000 --- a/web-ui/app/style-guide.html +++ /dev/null @@ -1,187 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -<title>Pixelated Style Guide</title> -<meta name="description" content=""> -<meta name="viewport" content="width=device-width"> -<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -<link href="css/opensans.css" rel="stylesheet" type="text/css"> -<link href="css/news-cycle.css" rel="stylesheet" type="text/css"/> -<link href="css/style-guide.css" rel="stylesheet" type="text/css"/> -<link rel="stylesheet" href="../css/main.css"> -</head> -<body> - <div id="style-guide-wrap" data-offcanvas> - <nav class="top-bar" data-topbar> - <ul class="left"> - <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li> - </ul> - - <ul class="right"> - <li><a href="#welcome">Home</a></li> - <li><a href="#colors">Colors</a></li> - <li><a href="#typography">Typography</a></li> - <li><a href="#icons">Icons</a></li> - </ul> - </nav> - <section id="welcome" class="guide-section" name="welcome"> - <h2>Welcome to the Pixelated Style Guide</h2> - <p> - Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components. - </p> - <p> - This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves. - </p> - <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" /> - </section> - <section id="colors" class="guide-section"> - <h2>Color Palette</h2> - </br> - <div class="color-grid"> - <div id="primary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">PRIMARY COLOR</span> - <br>#EF4E2F - </p> - </div> - <div id="secondary-color-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SECONDARY COLOR</span> - <br>#3E3A37 - </p> - </div> - <div id="top-pane-card" class="color-card"> - <p class="color-label"> - <span class="color-name">TOP PANE</span> - <br>#EAEAEA - </p> - </div> - <div id="contrast-card" class="color-card"> - <p class="color-label"> - <span class="color-name">CONTRAST</span> - <br>#F2F3ED - </p> - </div> - <div id="action-buttons-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ACTION BUTTONS</span> - <br>#2ba6cb - </p> - </div> - </div> - <br> - - <div class="color-grid"> - <div id="success-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SUCCESS</span> - <br>#2DAB49 - </p> - </div> - <div id="attention-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ATTENTION</span> - <br>#F6A40A - </p> - </div> - <div id="warning-card" class="color-card"> - <p class="color-label"> - <span class="color-name">WARNING</span> - <br>#F7E8AF - </p> - </div> - <div id="error-card" class="color-card"> - <p class="color-label"> - <span class="color-name">ERROR</span> - <br>#D72A25 - </p> - </div> - <div id="search-highlight-card" class="color-card"> - <p class="color-label"> - <span class="color-name">SEARCH HIGHLIGHT</span> - <br>#FFEF29 - </p> - </div> - <div id="count-background-card" class="color-card"> - <p class="color-label"> - <span class="color-name">COUNT BACKGROUND</span> - <br>#C0B9B9 - </p> - </div> - </div> - </section> - <section id="typography" class="guide-section"> - <h2>Typography</h2> - - </br> - Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson. - </br> - <ul class="typography"> - <li> - <h2>Aa</h2> - <span>Regular</span> - </li> - <li> - <h2 class="bold-header">Aa</h2> - <span>Bold</span> - </li> - <li> - <h2 class="extra-bold-header">Aa</h2> - <span>Extra Bold</span> - </li> - <li> - <h2 class="lighter-header">Aa</h2> - <span>Lighter</span> - </li> - </ul> - <ul class="headers-and-sizes"> - <li> - <h1>Header 1</h1> - </li> - <li> - <h2>Header 2</h2> - </li> - <li> - <h3>Header 3</h3> - </li> - <li> - <h4>Header 4</h4> - </li> - <li> - <h5>Header 5</h5> - </li> - <li> - <h6>Header 6</h6> - </li> - <li> - <i>Italics</i><br> - </li> - <li> - <strong>Strong / Emphasized</strong><br> - </li> - <li> - <small>Small Text</small> - </li> - </ul> - </section> - <section id="icons" class="guide-section" name="icons"> - <h2>Icons</h2> - <p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a> - <p>Here are some of the icons we're currently using on Pixelated</p> - <i class="fa fa-inbox"></i> - <i class="fa fa-send"></i> - <i class="fa fa-pencil"></i> - <i class="fa fa-trash-o"></i> - <i class="fa fa-archive"></i> - <i class="fa fa-tags"></i> - <i class="fa fa-navicon"></i> - <i class="fa fa-refresh"></i> - </section> - </div> - -<script src="/bower_components/jquery/dist/jquery.js"></script> -<script src="/js/style_guide/main.js"></script> -</body> -</html> diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs index 5df67513..ca397b9a 100644 --- a/web-ui/app/templates/tags/tag.hbs +++ b/web-ui/app/templates/tags/tag.hbs @@ -1,3 +1,3 @@ -<li id="tag-{{ ident }}" class="{{ selected }}"> +<li id="tag-{{ ident }}" class="custom-tag {{ selected }}"> <span class="tag-label">{{> tag_inner }}</span> </li> diff --git a/web-ui/app/templates/tags/tag_list.hbs b/web-ui/app/templates/tags/tag_list.hbs index e2e97833..e265354f 100644 --- a/web-ui/app/templates/tags/tag_list.hbs +++ b/web-ui/app/templates/tags/tag_list.hbs @@ -1,3 +1,6 @@ <ul id="default-tag-list"></ul> -<h3>{{t 'Tags'}}</h3> -<ul id="custom-tag-list"></ul> +<div class="tags-icon side-nav-toggle"> + <i class="fa fa-tags"></i> + <span class="tag-label">Tags</span> +</div> +<ul id="custom-tag-list"></ul>
\ No newline at end of file @@ -1,3 +1,3 @@ #!/bin/bash -npm run $* +LC_ALL=en_US.UTF-8 npm run $* diff --git a/web-ui/package.json b/web-ui/package.json index 4358ca5e..e0cae1f5 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -21,8 +21,8 @@ "watch": "^0.13.0" }, "scripts": { - "test": "npm run clean && npm run handlebars && node_modules/karma/bin/karma start --single-run --browsers PhantomJS $GRUNT_OPTS", - "debug": "npm run clean && npm run handlebars && node_modules/karma/bin/karma start --browsers Chrome $GRUNT_OPTS", + "test": "npm run build && node_modules/karma/bin/karma start --single-run --browsers PhantomJS $GRUNT_OPTS", + "debug": "npm run build && node_modules/karma/bin/karma start --browsers Chrome $GRUNT_OPTS", "watch": "npm run compass-watch & npm run handlebars-watch", "watch-test": "node_modules/karma/bin/karma start", "handlebars": "mkdir -p app/js/generated/hbs/ && node_modules/handlebars/bin/handlebars app/templates/**/*.hbs > app/js/generated/hbs/templates.js --namespace=window.Pixelated --root .", diff --git a/web-ui/test/spec/mail_list/ui/mail_list.spec.js b/web-ui/test/spec/mail_list/ui/mail_list.spec.js index 22a10a31..3e6c8344 100644 --- a/web-ui/test/spec/mail_list/ui/mail_list.spec.js +++ b/web-ui/test/spec/mail_list/ui/mail_list.spec.js @@ -152,7 +152,7 @@ describeComponent('mail_list/ui/mail_list', function () { it('resets scroll when opening a new tag or choosing a new tag', function () { var eventSpy = spyOnEvent(document, Pixelated.events.dispatchers.middlePane.resetScroll); - this.component.$node.trigger(Pixelated.events.mails.available, { mails: mailList }); + this.component.$node.trigger(Pixelated.events.ui.tag.select, { mails: mailList }); expect(eventSpy).toHaveBeenTriggeredOn(document); }); 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 86b40591..deb7fb88 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 @@ -117,7 +117,7 @@ describeComponent('mail_view/ui/mail_view', function () { 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-failure'); + expect(this.component.checkEncrypted(email)).toEqual('encrypted encryption-error'); }); it('assumes that the mail is not encrypted if it doesn\'t have any locks', function() { diff --git a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js index 70ae9301..24d57953 100644 --- a/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js +++ b/web-ui/test/spec/mail_view/ui/recipients/recipients_input.spec.js @@ -105,22 +105,22 @@ describeComponent('mail_view/ui/recipients/recipients_input',function () { }); describe('on keyup', function () { - it('triggers inputHasNoMail if input is empty', function () { - var inputHasNoMailEvent = spyOnEvent(document, Pixelated.events.ui.recipients.inputHasNoMail); + it('triggers inputFieldIsEmpty if input is empty', function () { + var inputFieldIsEmptyEvent = spyOnEvent(document, Pixelated.events.ui.recipients.inputFieldIsEmpty); this.$node.val(''); this.$node.trigger('keyup'); - expect(inputHasNoMailEvent).toHaveBeenTriggeredOn(document); + expect(inputFieldIsEmptyEvent).toHaveBeenTriggeredOn(document); }); - it('triggers inputHasMail if input is not empty', function () { - var inputHasMailEvent = spyOnEvent(document, Pixelated.events.ui.recipients.inputHasMail); + it('triggers inputFieldHasCharacters if input is not empty', function () { + var inputFieldHasCharactersEvent = spyOnEvent(document, Pixelated.events.ui.recipients.inputFieldHasCharacters); this.$node.val('lalala'); this.$node.trigger('keyup'); - expect(inputHasMailEvent).toHaveBeenTriggeredOn(document, { name: 'to' }); + expect(inputFieldHasCharactersEvent).toHaveBeenTriggeredOn(document, { name: 'to' }); }); }); diff --git a/web-ui/test/spec/mail_view/ui/send_button.spec.js b/web-ui/test/spec/mail_view/ui/send_button.spec.js index 4109e923..ff1eecde 100644 --- a/web-ui/test/spec/mail_view/ui/send_button.spec.js +++ b/web-ui/test/spec/mail_view/ui/send_button.spec.js @@ -14,8 +14,8 @@ describeComponent('mail_view/ui/send_button', function () { this.$node.prop('disabled', true); }); - it('gets enabled in a inputHasMail event', function () { - $(document).trigger(Pixelated.events.ui.recipients.inputHasMail, { name: 'to' }); + it('gets enabled in a inputFieldHasCharacters event', function () { + $(document).trigger(Pixelated.events.ui.recipients.inputFieldHasCharacters, { name: 'to' }); expect(this.$node).not.toBeDisabled(); }); @@ -28,20 +28,20 @@ describeComponent('mail_view/ui/send_button', function () { }); describe('multiple events', function () { - it('gets enabled and remains enabled when a inputHasMail is followed by a recipients:updated with NO new recipients', function () { + it('gets enabled and remains enabled when a inputFieldHasCharacters is followed by a recipients:updated with NO new recipients', function () { this.$node.prop('disabled', true); - $(document).trigger(Pixelated.events.ui.recipients.inputHasMail, { name: 'to' }); + $(document).trigger(Pixelated.events.ui.recipients.inputFieldHasCharacters, { name: 'to' }); $(document).trigger(Pixelated.events.ui.recipients.updated, { newRecipients: [] }); expect(this.$node).not.toBeDisabled(); }); - it('gets enabled and remains enabled when a recipients:updated with recipients is followed by a inputHasNoMail', function () { + it('gets enabled and remains enabled when a recipients:updated with recipients is followed by a inputFieldIsEmpty', function () { this.$node.prop('disabled', true); $(document).trigger(Pixelated.events.ui.recipients.updated, { newRecipients: ['a@b.c']}); - $(document).trigger(Pixelated.events.ui.recipients.inputHasNoMail, { name: 'to' }); + $(document).trigger(Pixelated.events.ui.recipients.inputFieldIsEmpty, { name: 'to' }); expect(this.$node).not.toBeDisabled(); }); @@ -52,8 +52,8 @@ describeComponent('mail_view/ui/send_button', function () { this.$node.prop('disabled', false); }); - it('gets disabled in a inputHasNoMail', function () { - $(document).trigger(Pixelated.events.ui.recipients.inputHasNoMail, { name: 'to' }); + it('gets disabled in a inputFieldIsEmpty', function () { + $(document).trigger(Pixelated.events.ui.recipients.inputFieldIsEmpty, { name: 'to' }); expect(this.$node).toBeDisabled(); }); @@ -63,6 +63,14 @@ describeComponent('mail_view/ui/send_button', function () { expect(this.$node).toBeDisabled(); }); + + it('gets disabled if recipients:updated with invalid email', function () { + $(document).trigger(Pixelated.events.ui.recipients.inputFieldHasCharacters, { name: 'to' }); + $(document).trigger(Pixelated.events.ui.recipients.updated, { newRecipients: ['InvalidEmail']}); + + expect(this.$node).not.toBeDisabled(); + expect(this.$node.text()).toBe('Send'); + }); }); describe('on click', function () { |