Merge pull request #147 from mozilla/add-feedback-button

add feedback and button hover
mozilla · Jul 18, 2017 · 4fc35bc · 4fc35bc
2 parents 08781a1 + 10ad2f9
commit 4fc35bc
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/src/sidebar/feedback.svg b/src/sidebar/feedback.svg
diff --git a/src/sidebar/panel.html b/src/sidebar/panel.html
@@ -38,9 +38,10 @@
       <img src="close.svg" id="close-button"/>
       <p id="sync-note-dialog"></p>
     </div>
-    
-    <div id="sync-container">
+
+    <div id="footer-buttons">
       <button id="enable-sync"></button>
+      <a target="_blank" id="give-feedback"></a>
     </div>
   </footer>
 

diff --git a/src/sidebar/panel.js b/src/sidebar/panel.js
@@ -13,6 +13,7 @@ const UI_LANG = browser.i18n.getUILanguage();
 const RTL_LANGS = ['ar', 'fa', 'he'];
 const LANG_DIR = RTL_LANGS.includes(UI_LANG) ? 'rtl' : 'ltr';
 const TEXT_ALIGN_DIR = LANG_DIR === 'rtl' ? 'right' : 'left';
+const SURVEY_PATH = 'https://qsurvey.mozilla.com/s3/txp-firefox-notes';
 
 // Additional keyboard shortcuts for non-default toolbar buttons
 const bindings = {
@@ -139,11 +140,14 @@ quill.on('text-change', () => {
 });
 
 const enableSync = document.getElementById('enable-sync');
+const giveFeedback = document.getElementById('give-feedback');
 const noteDiv = document.getElementById('sync-note');
 const syncNoteBody = document.getElementById('sync-note-dialog');
 const closeButton = document.getElementById('close-button');
 enableSync.textContent = browser.i18n.getMessage('syncNotes');
 syncNoteBody.textContent = browser.i18n.getMessage('syncNotReady2');
+giveFeedback.setAttribute('title', browser.i18n.getMessage('giveFeedback'));
+giveFeedback.setAttribute('href', SURVEY_PATH);
 
 closeButton.addEventListener('click', () => {
   noteDiv.classList.toggle('visible');

diff --git a/src/sidebar/styles.css b/src/sidebar/styles.css
@@ -3,6 +3,7 @@ html {
   font-family: sans-serif;
   line-height: 1.2em;
   overflow: hidden;
+  margin: 0;
 }
 
 body {
@@ -15,7 +16,7 @@ body {
 }
 
 div#toolbar {
-  min-height: 40px;
+  flex: 40px;
   width: 500px;
 }
 
@@ -63,33 +64,55 @@ button {
 
 footer {
   position: relative;
+  flex: 40px;
 }
 
-#sync-container {
-  padding: 5px 5px;
-  border-top: 1px solid #ccc;
-  background-color: #fff;
-  max-width: 100%;
+#footer-buttons {
+  align-items: stretch;
+  border-top: 1px solid #d7d7db;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 40px;
 }
 
 #enable-sync {
+  background-image: url('sync-16-inactive.svg');
+  background-position: 10px 12px;
+  background-repeat: no-repeat;
+  display: flex;
+  flex: 1 0;
+  padding: 0 10px 0 32px;
   text-align: left;
-  background: url('sync-16-inactive.svg') no-repeat;
-  background-position: 8px 8px;
-  padding: 5px 0 6px 30px;
-  width: 100%;
-  border-radius: 3px;
-  background-color: #fff;
 }
 
-#enable-sync:hover {
-  background-color: rgba(12, 12, 13, 0.10);
+#give-feedback {
+  background-image: url('feedback.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  border-left: 1px solid #d7d7db;
+  display: flex;
+  flex: 0 0 40px;
 }
 
-#enable-sync:active {
-  background-color: rgba(12, 12, 13, 0.15);
+#footer-buttons button,
+#footer-buttons a {
+  background-color: #f9f9fa;
+  transition: background 50ms;
 }
 
+#footer-buttons button:hover,
+#footer-buttons a:hover {
+  background-color: #ebebee;
+}
+
+#footer-buttons button:active,
+#footer-buttons a:active {
+  background-color: #d7d7db;
+}
+
+
 #menu {
   position: absolute;
   bottom: 10px;