summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/index.html14
-rw-r--r--web-ui/app/js/page/default.js4
-rw-r--r--web-ui/app/js/page/events.js6
-rw-r--r--web-ui/app/js/page/pix_logo.js47
-rw-r--r--web-ui/app/scss/_mixins.scss52
5 files changed, 90 insertions, 33 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index d297b28c..c8a1abb5 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -21,7 +21,7 @@
<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 627.3 612 171.1" enable-background="new 30.4 627.3 612 171.1" xml:space="preserve">
<g>
- <path fill="#3E3B38" d="M30.4,669.9v85.8l75.5,42.7l75.5-42.7v-85.8l-75.5-42.7L30.4,669.9z M102.7,767.4l-44-24.3v-52.6l44,25
+ <path fill="#3E3B38" id="pix-logo" d="M30.4,669.9v85.8l75.5,42.7l75.5-42.7v-85.8l-75.5-42.7L30.4,669.9z M102.7,767.4l-44-24.3v-52.6l44,25
V767.4z M152.5,743l-43.4,24.3v-51.8l43.4-25.4V743z M152.5,683.1l-46.7,27.8l-47.2-27.8l47.2-25.4L152.5,683.1z"/>
<path fill="#3E3B38" d="M233.8,678.3h-24v71.2h16.2v-26.5h7.8c14,0,24.3-8,24.3-22.9C258.1,685.6,247.6,678.3,233.8,678.3z
M230.6,710.2h-4.6v-18.8h4.6c6.5,0,12.5,2.2,12.5,9.5C243,708.1,237.1,710.2,230.6,710.2z"/>
@@ -39,12 +39,12 @@
<path fill="#3E3B38" d="M606.5,678.3h-17.9v71.2h17.9c19.7,0,35.9-14.9,35.9-35.6C642.4,693.1,625.9,678.3,606.5,678.3z M607,735
h-2.4v-42.1h2.4c12.1,0,20.3,9.1,20.3,21.1C627.3,725.8,619.1,735,607,735z"/>
</g>
- <polygon id="clock1" class="logo-part" fill="#3E3B38" points="105.8,657.8 105.8,628 105.8,627.3 181.4,669.9 152.5,683.1 "/>
- <polygon id="clock2" class="logo-part" fill="#3E3B38" points="152.5,683.1 181.4,669.9 181.4,755.7 152.5,743 "/>
- <polygon id="clock3" class="logo-part" fill="#3E3B38" points="105.9,798.3 105.9,769 152.5,743 181.4,755.7 "/>
- <polygon id="clock4" class="logo-part" fill="#3E3B38" points="58.7,743.1 105.9,769 105.9,798.3 30.4,755.7 "/>
- <polygon id="clock5" class="logo-part" fill="#3E3B38" points="30.4,669.9 58.6,683.1 58.7,743.1 30.4,755.7 "/>
- <polygon id="clock6" class="logo-part" fill="#3E3B38" points="105.8,628 105.8,657.8 58.6,683.1 30.4,669.9 105.8,627.3 "/>
+ <polygon id="clock1" class="logo-part-animation-off" fill="#3E3B38" points="105.8,657.8 105.8,628 105.8,627.3 181.4,669.9 152.5,683.1 "/>
+ <polygon id="clock2" class="logo-part-animation-off" fill="#3E3B38" points="152.5,683.1 181.4,669.9 181.4,755.7 152.5,743 "/>
+ <polygon id="clock3" class="logo-part-animation-off" fill="#3E3B38" points="105.9,798.3 105.9,769 152.5,743 181.4,755.7 "/>
+ <polygon id="clock4" class="logo-part-animation-off" fill="#3E3B38" points="58.7,743.1 105.9,769 105.9,798.3 30.4,755.7 "/>
+ <polygon id="clock5" class="logo-part-animation-off" fill="#3E3B38" points="30.4,669.9 58.6,683.1 58.7,743.1 30.4,755.7 "/>
+ <polygon id="clock6" class="logo-part-animation-off" fill="#3E3B38" points="105.8,628 105.8,657.8 58.6,683.1 30.4,669.9 105.8,627.3 "/>
</svg>
</a>
<a class="side-nav-toggle side-nav-toggle-icon" href="#">
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 19b28354..e119672f 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -51,6 +51,7 @@ define(
'mail_view/data/feedback_sender',
'page/version',
'page/unread_count_title',
+ 'page/pix_logo',
'helpers/browser'
],
@@ -90,6 +91,7 @@ define(
feedbackSender,
version,
unreadCountTitle,
+ pixLogo,
browser) {
'use strict';
@@ -132,6 +134,8 @@ define(
unreadCountTitle.attachTo(document);
+ pixLogo.attachTo('#pix-logo');
+
$.ajaxSetup({headers: {'X-XSRF-TOKEN': browser.getCookie('XSRF-TOKEN')}});
}
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 1ec27c46..1f48173d 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -34,7 +34,7 @@ define(function () {
},
tag: {
selected: 'ui:tagSelected',
- select: 'ui:tagSelect'
+ select: 'ui:tagSelect',
},
tags: {
loaded: 'ui:tagsLoaded'
@@ -69,7 +69,9 @@ define(function () {
page: {
previous: 'ui:page:previous',
next: 'ui:page:next',
- changed: 'ui:page:changed'
+ changed: 'ui:page:changed',
+ spinLogo: 'ui:page:spinLogo',
+ stopSpinningLogo: 'ui:page:stopSpinningLogo'
},
composeBox: {
newMessage: 'ui:composeBox:newMessage',
diff --git a/web-ui/app/js/page/pix_logo.js b/web-ui/app/js/page/pix_logo.js
new file mode 100644
index 00000000..c03fe4ec
--- /dev/null
+++ b/web-ui/app/js/page/pix_logo.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2014 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',
+ 'page/events'
+ ],
+
+ function(defineComponent, events) {
+ 'use strict';
+
+ return defineComponent(pixLogo);
+
+ function pixLogo() {
+ this.defaultAttrs({
+ 'pixLogo': '#pix-logo'
+ });
+
+ this.spinLogo = function (ev, data) {
+ this.$node.parents().eq(1).find('.logo-part-animation-off').attr('class', 'logo-part-animation-on');
+ };
+
+ this.stopSpinningLogo = function (ev, data) {
+ this.$node.parents().eq(1).find('.logo-part-animation-on').attr('class', 'logo-part-animation-off');
+ };
+
+ this.after('initialize', function () {
+ this.on(document, events.ui.tag.select, this.spinLogo);
+ this.on(document, events.mails.available, this.stopSpinningLogo);
+ });
+ }
+ }
+);
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4360b886..6d0bb1a3 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -310,33 +310,37 @@
@mixin logo {
@keyframes hideshow {
- 0% { fill: lighten($logo_color, 30); }
- 25% { opacity: 1; }
- 100% { opacity: 0; }
-}
-
-.logo-part {
- animation: hideshow 0.6s ease infinite;
- opacity: 1;
-
- &:nth-child(2) {
- opacity: 0;
- animation-delay: 0.1s;
- }
+ 0% { fill: lighten($logo_color, 30); }
+ 25% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
- &:nth-child(3) {
- animation-delay: 0.2s;
- }
- &:nth-child(4) {
- animation-delay: 0.3s;
- }
- &:nth-child(5) {
- animation-delay: 0.4s;
+ .logo-part-animation-off {
+ animation: none;
}
- &:nth-child(6) {
- animation-delay: 0.5s;
+
+ .logo-part-animation-on {
+ animation: hideshow 0.6s ease infinite;
+ opacity: 1;
+
+ &:nth-child(2) {
+ opacity: 0;
+ animation-delay: 0.1s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.2s;
+ }
+ &:nth-child(4) {
+ animation-delay: 0.3s;
+ }
+ &:nth-child(5) {
+ animation-delay: 0.4s;
+ }
+ &:nth-child(6) {
+ animation-delay: 0.5s;
+ }
}
}
-}
@include tt-hint;