diff options
Diffstat (limited to 'web-ui')
-rw-r--r-- | web-ui/app/index.html | 14 | ||||
-rw-r--r-- | web-ui/app/js/page/default.js | 4 | ||||
-rw-r--r-- | web-ui/app/js/page/events.js | 6 | ||||
-rw-r--r-- | web-ui/app/js/page/pix_logo.js | 47 | ||||
-rw-r--r-- | web-ui/app/scss/_mixins.scss | 52 |
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; |