summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/js/dispatchers/right_pane_dispatcher.js9
-rw-r--r--web-ui/app/js/mail_view/ui/spinner.js38
-rw-r--r--web-ui/app/js/page/pix_logo.js2
-rw-r--r--web-ui/app/js/views/templates.js3
-rw-r--r--web-ui/app/scss/base/_colors.scss1
-rw-r--r--web-ui/app/scss/style.scss2
-rw-r--r--web-ui/app/scss/views/_spinner.scss44
-rw-r--r--web-ui/app/templates/mails/spinner.hbs5
-rw-r--r--web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js28
-rw-r--r--web-ui/test/spec/mail_view/ui/spinner.spec.js11
-rw-r--r--web-ui/test/spec/page/pix_logo.spec.js3
11 files changed, 140 insertions, 6 deletions
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 <http://www.gnu.org/licenses/>.
+ */
+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/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js
index ad17f3be..920b7af5 100644
--- a/web-ui/app/js/page/pix_logo.js
+++ b/web-ui/app/js/page/pix_logo.js
@@ -55,7 +55,7 @@ define(
this.on(document, events.ui.mail.open, this.triggerSpinLogo);
this.on(document, events.dispatchers.rightPane.openDraft, this.triggerSpinLogo);
this.on(document, events.search.perform, this.triggerSpinLogo);
- this.on(document, events.mail.want, this.triggerStopSpinningLogo);
+ this.on(document, events.mail.display, this.triggerStopSpinningLogo);
});
}
}
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 @@
+<div id="spinner-section">
+ <svg id="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+ <circle id="spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+ </svg>
+</div>
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('<svg id="spinner"');
+ });
+ });
+});
diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js
index 1700e77d..5d07a544 100644
--- a/web-ui/test/spec/page/pix_logo.spec.js
+++ b/web-ui/test/spec/page/pix_logo.spec.js
@@ -69,7 +69,7 @@ describeComponent('page/pix_logo', function () {
it('should stop spinning after mail message is loaded', function (done) {
this.setupComponent('<polygon id="clock1" class="logo-part-animation-on"></polygon>');
var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.stopSpinningLogo);
- $(document).trigger(Pixelated.events.mail.want);
+ $(document).trigger(Pixelated.events.mail.display);
var component = this.component;
@@ -90,4 +90,3 @@ describeComponent('page/pix_logo', function () {
});
});
});
-
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-20 07:07:12 +0000