From 035f3ceb689e3d9905ec642b2526e8ec4f0b617f Mon Sep 17 00:00:00 2001
From: Giovane <giovaneliberato@gmail.com>
Date: Thu, 17 Sep 2015 16:15:35 -0300
Subject: #442 Improve feedback box UI and show message after clicking submit.

---
 web-ui/app/js/mail_view/ui/feedback_box.js    |  9 ++++++++-
 web-ui/app/js/page/events.js                  |  3 +++
 web-ui/app/locales/en/translation.json        |  2 ++
 web-ui/app/scss/_compose.scss                 | 13 +++++++------
 web-ui/app/templates/compose/feedback_box.hbs |  7 +++----
 5 files changed, 23 insertions(+), 11 deletions(-)

(limited to 'web-ui/app')

diff --git a/web-ui/app/js/mail_view/ui/feedback_box.js b/web-ui/app/js/mail_view/ui/feedback_box.js
index 4656a235..5a04e291 100644
--- a/web-ui/app/js/mail_view/ui/feedback_box.js
+++ b/web-ui/app/js/mail_view/ui/feedback_box.js
@@ -21,7 +21,8 @@ define(['flight/lib/component', 'views/templates', 'page/events', 'features'],
 
   return defineComponent(function () {
      this.defaultAttrs({
-       'closeButton': '.close-mail-button'
+       'closeButton': '.close-mail-button',
+       'submitButton': '#send-button',
      });
 
     this.render = function () {
@@ -39,11 +40,17 @@ define(['flight/lib/component', 'views/templates', 'page/events', 'features'],
       this.trigger(document, events.dispatchers.rightPane.openNoMessageSelected);
     };
 
+    this.showFeedbackSubmittedMessage = function() {
+      this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Thanks for your feedback!' });
+    };
+
     this.after('initialize', function () {
       if (features.isEnabled('feedback')) {
           this.render();
           this.on(document, events.dispatchers.rightPane.openFeedbackBox, this.openFeedbackBox);
           this.on(this.select('closeButton'), 'click', this.showNoMessageSelected);
+          this.on(this.select('submitButton'), 'click', this.showNoMessageSelected);
+          this.on(this.select('submitButton'), 'click', this.showFeedbackSubmittedMessage);
       }
     });
 
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index c54cc6d6..4d90fff9 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -99,6 +99,9 @@ define(function () {
       highlightResults: 'search:highlightResults',
       resetHighlight: 'search:resetHighlight'
     },
+    feedback: {
+      submitted: 'feedback:submitted'
+    },
     mail: {
       here: 'mail:here',
       want: 'mail:want',
diff --git a/web-ui/app/locales/en/translation.json b/web-ui/app/locales/en/translation.json
index a360cc02..5992216a 100644
--- a/web-ui/app/locales/en/translation.json
+++ b/web-ui/app/locales/en/translation.json
@@ -60,6 +60,8 @@
     "Search results for:": "Search results for:",
     "Tags": "Tags",
     "Forward": "Forward",
+    "Submit Feedback": "Submit Feedback",
+    "feedback-placeholder": "Tell us what you like, didn't like, what is missing and generally what you think about Pixelated.",
 
     "tags": {
         "inbox": "Inbox",
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index 55073b3d..6f3ae29e 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -33,7 +33,7 @@
     border-bottom: 1px solid #DDD;
     padding: 1px;
   }
-  label {
+  label, span {
     color: #AAA;
     padding: 0.5rem;
     cursor: text;
@@ -61,11 +61,12 @@
   input.showfloatlabel, textarea.showfloatlabel {
     padding-top: 1rem !important;
   }
-  input {
-    &#subject {
-      font-size: 1.6875rem;
-      line-height: 1.4;
-    }
+  input#subject, #feedback-subject {
+    font-size: 1.6875rem;
+    line-height: 1.4;
+  }
+  #feedback-subject {
+    color: #333;
   }
   textarea {
     border-bottom: 2px solid #DDD;
diff --git a/web-ui/app/templates/compose/feedback_box.hbs b/web-ui/app/templates/compose/feedback_box.hbs
index b10d0da3..ab5b3018 100644
--- a/web-ui/app/templates/compose/feedback_box.hbs
+++ b/web-ui/app/templates/compose/feedback_box.hbs
@@ -2,15 +2,14 @@
   <i class="fa fa-times"></i>
 </button>
 <div class="floatlabel">
-  <label class="floatlabel" for="subject">Subject</label>
-  <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="1"/>
+  <span id="feedback-subject">Feedback</span>
 </div>
 <div class="floatlabel">
   <label class="floatlabel" for="text-box">Body</label>
-  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
+  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'feedback-placeholder'}}" tabindex="2">{{body}}</textarea>
 </div>
 
 
 <div class="buttons-group columns">
-  <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
+  <button id="send-button" tabindex="6">{{t 'Submit Feedback'}} </button>
 </div>
-- 
cgit v1.2.3