summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web-ui/app/index.html48
-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.js62
-rw-r--r--web-ui/app/scss/_mixins.scss183
-rw-r--r--web-ui/test/spec/page/pix_logo.spec.js93
6 files changed, 373 insertions, 23 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 4d6f3037..4b6a81a0 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -18,27 +18,33 @@
<section id="left-pane" class="left-off-canvas-menu">
<a class="left-off-canvas-logo side-nav-toggle" href="#">
<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>
+ 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" 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"/>
+ <rect x="263.5" y="678.3" fill="#3E3B38" width="16.2" height="71.2"/>
+ <polygon fill="#3E3B38" points="350.4,678.3 330.1,678.3 316.9,697.7 303.7,678.3 284.6,678.3 307,711.1 282.6,749.5 302.9,749.5
+ 316.9,725.3 331,749.5 352.1,749.5 326.9,711.1 "/>
+ <polygon fill="#3E3B38" points="354.7,749.5 395.5,749.5 395.5,735.2 370.9,735.2 370.9,721 394.4,721 394.4,706.6 370.9,706.6
+ 370.9,692.5 395.5,692.5 395.5,678.3 354.7,678.3 "/>
+ <path fill="#3E3B38" d="M456.1,678.3l-22.9,57h-15.9v-57h-16.2v71.2h26.5h14.3h3.2l5.4-14.3h27l5.4,14.3h17.5l-28.9-71.2H456.1z
+ M455.7,721l7.8-20.7h0.2l7.8,20.7H455.7z"/>
+ <polygon fill="#3E3B38" points="486.4,692.5 503.4,692.5 503.4,749.5 519.6,749.5 519.6,692.5 536.6,692.5 536.6,678.3
+ 486.4,678.3 "/>
+ <polygon fill="#3E3B38" points="542,749.5 582.8,749.5 582.8,735.2 558.4,735.2 558.4,721 581.9,721 581.9,706.6 558.4,706.6
+ 558.4,692.5 582.8,692.5 582.8,678.3 542,678.3 "/>
+ <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-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="#">
<i class="toggle fa fa-navicon"></i>
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 19b28354..965fb577 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(document);
+
$.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 ad15e76e..68a6aad1 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..ad17f3be
--- /dev/null
+++ b/web-ui/app/js/page/pix_logo.js
@@ -0,0 +1,62 @@
+/*
+ * 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.turnAnimationOn = function () {
+ $('.logo-part-animation-off').attr('class', 'logo-part-animation-on');
+ };
+
+ this.turnAnimationOff = function () {
+ setTimeout(function(){
+ $('.logo-part-animation-on').attr('class', 'logo-part-animation-off');
+ }, 600);
+ };
+
+ this.triggerSpinLogo = function (ev, data) {
+ this.trigger(document, events.ui.page.spinLogo);
+ };
+
+ this.triggerStopSpinningLogo = function(ev, data) {
+ this.trigger(document, events.ui.page.stopSpinningLogo);
+ };
+
+ this.after('initialize', function () {
+ this.on(document, events.ui.page.spinLogo, this.turnAnimationOn);
+ this.on(document, events.ui.page.stopSpinningLogo, this.turnAnimationOff);
+
+ this.on(document, events.ui.tag.select, this.triggerSpinLogo);
+ this.on(document, events.mails.available, this.triggerStopSpinningLogo);
+ this.on(document, events.mail.saveDraft, this.triggerSpinLogo);
+ this.on(document, events.mail.draftSaved, this.triggerStopSpinningLogo);
+ 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);
+ });
+ }
+ }
+);
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 4e7b1fbb..13f90685 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -162,3 +162,186 @@
}
}
+@mixin recipients {
+
+ .recipients-area {
+ -webkit-appearance: none;
+ background-color: white;
+ font-family: inherit;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 0.898em;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ position: relative;
+
+ .compose-column-label {
+ width: 5%;
+ display: inline-block;
+ }
+
+ .compose-column-recipients {
+ width: 95%;
+ display: inline-block;
+ }
+
+ .recipients-label {
+ width: 100%;
+ height: 100%;
+ }
+
+ .recipients-navigation-handler {
+ z-index: -1;
+ position: absolute;
+ top: -200px;
+ }
+
+ .twitter-typeahead {
+ flex: 1 1 50px;
+ }
+
+ .invalid-format {
+ border-bottom: 1px dotted $error;
+ }
+
+ input[type=text] {
+ vertical-align: top;
+ height: 35px;
+ margin-left: 1px;
+ font-size: 0.9em;
+ width: 100%;
+ }
+
+ .fixed-recipient {
+ display: inline-block;
+ margin-right: -3px;
+ flex: none;
+ position: relative;
+
+ .recipient-value {
+ &.selected {
+ border: 1px solid $medium_dark_grey;
+ }
+ &:before {
+ font-family: FontAwesome;
+ padding-right: 4px;
+
+ }
+ &.encrypted {
+ border-bottom-color: $will_be_encrypted;
+
+ &:before {
+ color: $will_be_encrypted;
+ content: "\f023 ";
+ }
+ }
+ &.not-encrypted {
+ border-bottom-color: $wont_be_encrypted;
+
+ &:before {
+ color: $wont_be_encrypted;
+ content: "\f13e ";
+ }
+ }
+
+ &.deleting span {
+ text-decoration: line-through;
+ }
+ & span {
+ margin: 0px;
+ padding: 0px;
+ cursor: pointer;
+ }
+ margin: 3px;
+ padding: 5px;
+ background-color: $background_light_grey;
+ border: 1px solid $border_light_grey;
+ border-radius: 2px;
+ }
+
+ .recipient-del {
+ position: relative;
+ color: $recipients_font_color;
+ &:hover, &:focus {
+ color: $recipients_font_color;
+ }
+ &:before {
+ margin-left: 0.4em;
+ font-weight: bold;
+ content: "x";
+ }
+ &.deleteTooltip:hover:after {
+ position: absolute;
+ content: "Click to remove";
+ font-size: 0.5rem;
+ @include tooltip(25px, 0px);
+ }
+ }
+ }
+ input.recipients-input:focus {
+ background-color: $dark_white !important;
+ border-color: $medium_light_grey;
+ outline: none;
+ width: 270px;
+ }
+}
+
+ .collapse {
+ display:block;
+ position: absolute;
+ right: 10px;
+ padding-right: 15px;
+ padding-left: 15px;
+ font-family: 'FontAwesome';
+ font-weight: bolder;
+ font-size: larger;
+ cursor: pointer;
+ }
+
+ .collapse + input, .collapse + input + * {
+ display:none;
+ }
+
+ .collapse + input:checked + * {
+ display:block;
+ }
+}
+
+@mixin logo {
+ @keyframes hideshow {
+ 0% { fill: lighten($logo_color, 30); }
+ 25% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+
+ .logo-part-animation-off {
+ animation: none;
+ }
+
+ .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;
+@include logo;
diff --git a/web-ui/test/spec/page/pix_logo.spec.js b/web-ui/test/spec/page/pix_logo.spec.js
new file mode 100644
index 00000000..1700e77d
--- /dev/null
+++ b/web-ui/test/spec/page/pix_logo.spec.js
@@ -0,0 +1,93 @@
+describeComponent('page/pix_logo', function () {
+ 'use strict';
+
+ describe('pix logo', function () {
+ it('should spin when loading another mail box', function () {
+ this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+ var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+ $(document).trigger(Pixelated.events.ui.tag.select);
+
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+ });
+
+ it('should stop spinning after mail box 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.mails.available);
+
+ var component = this.component;
+
+ setTimeout(function() {
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+ done();
+ }, 600);
+ });
+
+ it('should spin when saving draft', function () {
+ this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+ var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+ $(document).trigger(Pixelated.events.mail.saveDraft);
+
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+ });
+
+ it('should stop spinning after draft is saved', 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.draftSaved);
+
+ var component = this.component;
+
+ setTimeout(function() {
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+ done();
+ }, 600);
+ });
+
+ it('should spin when opening a mail message', function () {
+ this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+ var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+ $(document).trigger(Pixelated.events.ui.mail.open);
+
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+ });
+
+ it('should spin when opening a draft', function () {
+ this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+ var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+ $(document).trigger(Pixelated.events.dispatchers.rightPane.openDraft);
+
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+ });
+
+ 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);
+
+ var component = this.component;
+
+ setTimeout(function() {
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(component.$node.hasClass('logo-part-animation-off')).toBe(true);
+ done();
+ }, 600);
+ });
+
+ it('should spin when doing a search', function () {
+ this.setupComponent('<polygon id="clock1" class="logo-part-animation-off"></polygon>');
+ var eventSpy = spyOnEvent(document, Pixelated.events.ui.page.spinLogo);
+ $(document).trigger(Pixelated.events.search.perform);
+
+ expect(eventSpy).toHaveBeenTriggeredOn(document);
+ expect(this.component.$node.hasClass('logo-part-animation-on')).toBe(true);
+ });
+ });
+});
+
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-16 07:39:51 +0000