From 8592cc5634490c030c829e72d860fabd2540933c Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Mon, 30 Jan 2017 19:06:24 -0200 Subject: Add spinner before loading an email or draft related with #657 with @tuliocasagrande --- web-ui/app/js/dispatchers/right_pane_dispatcher.js | 9 ++++- web-ui/app/js/mail_view/ui/spinner.js | 38 +++++++++++++++++++ web-ui/app/js/views/templates.js | 3 +- web-ui/app/scss/base/_colors.scss | 1 + web-ui/app/scss/style.scss | 2 +- web-ui/app/scss/views/_spinner.scss | 44 ++++++++++++++++++++++ web-ui/app/templates/mails/spinner.hbs | 5 +++ .../spec/dispatchers/right_pane_dispatcher.spec.js | 28 ++++++++++++++ web-ui/test/spec/mail_view/ui/spinner.spec.js | 11 ++++++ web-ui/test/spec/page/pix_logo.spec.js | 1 - 10 files changed, 138 insertions(+), 4 deletions(-) create mode 100644 web-ui/app/js/mail_view/ui/spinner.js create mode 100644 web-ui/app/scss/views/_spinner.scss create mode 100644 web-ui/app/templates/mails/spinner.hbs create mode 100644 web-ui/test/spec/mail_view/ui/spinner.spec.js diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js index 870bcd92..37b65920 100644 --- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js +++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js @@ -24,10 +24,11 @@ define( 'mail_view/ui/draft_box', 'mail_view/ui/no_message_selected_pane', 'mail_view/ui/feedback_box', + 'mail_view/ui/spinner', 'page/events' ], - function(defineComponent, ComposeBox, MailView, ReplySection, DraftBox, NoMessageSelectedPane, FeedbackBox, events) { + function(defineComponent, ComposeBox, MailView, ReplySection, DraftBox, NoMessageSelectedPane, FeedbackBox, Spinner, events) { 'use strict'; return defineComponent(rightPaneDispatcher); @@ -67,8 +68,13 @@ define( FeedbackBox.attachTo(stage); }; + this.addSpinner = function(stage) { + Spinner.attachTo(stage); + }; + this.openMail = function(ev, data) { var stage = this.reset(this.attr.mailView); + this.addSpinner(stage); MailView.attachTo(stage, data); var replySectionContainer = this.createAndAttach(this.attr.replySection); @@ -89,6 +95,7 @@ define( this.openDraft = function (ev, data) { var stage = this.reset(this.attr.draftBox); + this.addSpinner(stage); DraftBox.attachTo(stage, { mailIdent: data.ident, currentTag: this.attr.currentTag }); }; diff --git a/web-ui/app/js/mail_view/ui/spinner.js b/web-ui/app/js/mail_view/ui/spinner.js new file mode 100644 index 00000000..53a24011 --- /dev/null +++ b/web-ui/app/js/mail_view/ui/spinner.js @@ -0,0 +1,38 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ +define( + [ + 'flight/lib/component', + 'views/templates' + ], + + function(defineComponent, templates) { + 'use strict'; + + return defineComponent(spinner); + + function spinner() { + this.render = function () { + this.$node.html(templates.mails.spinner()); + }; + + this.after('initialize', function () { + this.render(); + }); + } + } +); diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js index d983c911..05ecbbdd 100644 --- a/web-ui/app/js/views/templates.js +++ b/web-ui/app/js/views/templates.js @@ -47,7 +47,8 @@ define(['hbs/templates'], function (templates) { mailActions: window.Pixelated['app/templates/mails/mail_actions.hbs'], draft: window.Pixelated['app/templates/mails/draft.hbs'], sent: window.Pixelated['app/templates/mails/sent.hbs'], - trash: window.Pixelated['app/templates/mails/trash.hbs'] + trash: window.Pixelated['app/templates/mails/trash.hbs'], + spinner: window.Pixelated['app/templates/mails/spinner.hbs'] }, mailActions: { actionsBox: window.Pixelated['app/templates/mail_actions/actions_box.hbs'], diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss index 17333ff9..f3c245a9 100644 --- a/web-ui/app/scss/base/_colors.scss +++ b/web-ui/app/scss/base/_colors.scss @@ -5,6 +5,7 @@ $lighter_blue: #91C2D1; $light_blue: #3DABC4; $dark_blue: #178CA6; $bullet-blue: #5cacde; +$middle_blue: #83EAEA; $light_orange: #FF9C00; $dark_orange: #FF7902; diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss index e99ab194..215d28f1 100644 --- a/web-ui/app/scss/style.scss +++ b/web-ui/app/scss/style.scss @@ -33,7 +33,7 @@ @import "views/mail-list"; @import "views/_action-bar.scss"; @import "views/_navigation.scss"; +@import "views/_spinner.scss"; // misc stuff @import "others"; - diff --git a/web-ui/app/scss/views/_spinner.scss b/web-ui/app/scss/views/_spinner.scss new file mode 100644 index 00000000..1f8fb099 --- /dev/null +++ b/web-ui/app/scss/views/_spinner.scss @@ -0,0 +1,44 @@ +$offset: 187; +$duration: 1.4s; + +#spinner-section { + margin: auto; + width: 35px; + margin-top: 40%; +} + +#spinner { + animation: rotator $duration linear infinite; +} + +@keyframes rotator { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(270deg); } +} + +#spinner-path { + stroke-dasharray: $offset; + stroke-dashoffset: 0; + transform-origin: center; + animation: + dash $duration ease-in-out infinite, + colors ($duration*4) ease-in-out infinite; +} + +@keyframes colors { + 0% { stroke: $dark_blue; } + 50% { stroke: $middle_blue; } + 100% { stroke: $dark_blue; } +} + +@keyframes dash { + 0% { stroke-dashoffset: $offset; } + 50% { + stroke-dashoffset: $offset/4; + transform:rotate(135deg); + } + 100% { + stroke-dashoffset: $offset; + transform:rotate(450deg); + } +} diff --git a/web-ui/app/templates/mails/spinner.hbs b/web-ui/app/templates/mails/spinner.hbs new file mode 100644 index 00000000..78027c56 --- /dev/null +++ b/web-ui/app/templates/mails/spinner.hbs @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js index 9df1d557..bc634a4e 100644 --- a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js +++ b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js @@ -94,4 +94,32 @@ describeComponent('dispatchers/right_pane_dispatcher', function () { }); }); + describe('on message selected', function () { + beforeEach(function () { + this.setupComponent(); + }); + + it('addSpinner renders the spinner to the page', function () { + var spinner = require('mail_view/ui/spinner'); + spyOn(spinner, 'attachTo'); + var stage = {stage: 'mail-view'}; + this.component.addSpinner(stage); + + expect(spinner.attachTo).toHaveBeenCalledWith(stage); + }); + + it('should show the spinner when opening a mail message', function () { + spyOn(this.component, 'addSpinner'); + this.component.trigger(document, Pixelated.events.ui.mail.open, { ident: '1' }); + + expect(this.component.addSpinner).toHaveBeenCalled(); + }); + + it('should show the spinner when opening a draft message', function () { + spyOn(this.component, 'addSpinner'); + this.component.trigger(document, Pixelated.events.dispatchers.rightPane.openDraft, { ident: '1' }); + + expect(this.component.addSpinner).toHaveBeenCalled(); + }); + }); }); diff --git a/web-ui/test/spec/mail_view/ui/spinner.spec.js b/web-ui/test/spec/mail_view/ui/spinner.spec.js new file mode 100644 index 00000000..71e4d4a4 --- /dev/null +++ b/web-ui/test/spec/mail_view/ui/spinner.spec.js @@ -0,0 +1,11 @@ +describeComponent('mail_view/ui/spinner', function () { + 'use strict'; + + describe('spinner on initialization', function () { + + it('should render the spinner svg', function () { + this.setupComponent(); + expect(this.$node.html()).toMatch('