User Feedback Widget (apache#18639)

* user feedback widget implementation * add user feedback widget to python docs site * update margin * add apache license * one more license * turn off feedback widget on python site * update copy * format * add event value field * turn on widget on Python site # Conflicts: # docs/static_site/src/_includes/head.html # docs/static_site/src/assets/main.scss
ys2843 · Sep 8, 2020 · 566e220 · 566e220
1 parent 180784e
commit 566e220
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 49 deletions.
diff --git a/docs/python_docs/_static/feedback.css b/docs/python_docs/_static/feedback.css
@@ -0,0 +1,37 @@
+.feedback-container {
+  text-align: center;
+}
+
+.feedback-answer-container {
+  display: inline-block;
+}
+
+.feedback-question {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-answer {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+  color: #048ccc;
+  cursor: pointer;
+}
+
+.feedback-answer:hover {
+  color: #ffffff;
+  background-color: #048ccc;
+}
+
+.feedback-thank-you {
+  display: none;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-hr-top {
+  margin-top: 50px;
+}
+
+.feedback-hr-bottom {
+  margin-bottom: 30px;
+}
diff --git a/docs/python_docs/_static/feedback.js b/docs/python_docs/_static/feedback.js
@@ -0,0 +1,33 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function() {
+  $(".feedback-answer").on("click", function () {
+    $(".feedback-question").remove();
+    $(".feedback-answer-container").remove();
+    $(".feedback-thank-you").show();
+    ga("send", {
+      hitType: "event",
+      eventCategory: "Did this page help you?",
+      eventAction: $(this).attr("data-response"),
+      eventLabel: window.location.pathname || "unknown",
+      eventValue: $(this).attr("data-response") === "yes" ? 1 : 0
+    });
+  });
+});
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/feedback.html b/docs/python_docs/themes/mx-theme/mxtheme/feedback.html
@@ -0,0 +1,10 @@
+<hr class="feedback-hr-top" />
+<div class="feedback-container">
+    <div class="feedback-question">Did this page help you?</div>
+    <div class="feedback-answer-container">
+        <div class="feedback-answer yes-link" data-response="yes">Yes</div>
+        <div class="feedback-answer no-link" data-response="no">No</div>
+    </div>
+    <div class="feedback-thank-you">Thanks for your feedback!</div>
+</div>
+<hr class="feedback-hr-bottom" />
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/layout.html b/docs/python_docs/themes/mx-theme/mxtheme/layout.html
@@ -64,10 +64,12 @@
     '_static/sphinx_materialdesign_theme.css',
     '_static/fontawesome/all.css',
     '_static/fonts.css',
+    '_static/feedback.css',
 ] %}
 
     {%- block header %}
-	<script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/feedback.js', 1) }}"></script>
     {% endblock %}
 {%- block relbar1 %}{% endblock %}
 {%- block relbar2 %}{% include "relations.html" %}{% endblock %}
@@ -85,6 +87,7 @@
 {%- block document %}
         <div class="page-content" role="main">
         {% block body %} {% endblock %}
+        {% include "feedback.html" %}
         </div>
         <div class="side-doc-outline">
             <div class="side-doc-outline--content">

diff --git a/docs/static_site/src/_includes/feedback.html b/docs/static_site/src/_includes/feedback.html
@@ -0,0 +1,10 @@
+<hr class="feedback-hr-top" />
+<div class="feedback-container">
+  <div class="feedback-question">Did this page help you?</div>
+  <div class="feedback-answer-container">
+    <div class="feedback-answer yes-link" data-response="yes">Yes</div>
+    <div class="feedback-answer no-link" data-response="no">No</div>
+  </div>
+  <div class="feedback-thank-you">Thanks for your feedback!</div>
+</div>
+<hr class="feedback-hr-bottom" />
diff --git a/docs/static_site/src/_includes/head.html b/docs/static_site/src/_includes/head.html
@@ -11,52 +11,16 @@
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-  <script src="{{'/assets/js/globalSearch.js'|relative_url}}"></script>
-  <script src="{{'/assets/js/clipboard.js'|relative_url}}"></script>
-  <script src="{{'/assets/js/copycode.js'|relative_url}}"></script>
-  <style>
-  .dropdown-option-active {
-      color: #FF4500 !important;
-      font-weight: lighter;
-  }
-
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    padding: 12px 16px;
-    z-index: 1;
-    text-align: left;
-  }
-
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
-
-  .dropdown-header {
-      color: #FFFFFF;
-      display: inline-flex;
-  }
-
-  .dropdown-caret {
-      width: 18px;
-  }
-
-  .trigger .dropdown-caret {
-      height: 57px;
-  }
-
-  .dropdown-caret-path {
-      fill: #FFFFFF;
-  }
-  </style>
+  {%- if jekyll.environment == 'production' -%}
+    <script src="{{'/assets/js/jquery-3.3.1.min.js'|relative_url}}"></script>
+  {%- else -%}
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  {%- endif -%}
+  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" defer></script>
+  <script src="{{'/assets/js/globalSearch.js'|relative_url}}" defer></script>
+  <script src="{{'/assets/js/clipboard.js'|relative_url}}" defer></script>
+  <script src="{{'/assets/js/copycode.js'|relative_url}}" defer></script>
+  {%- if page.feedback == true and jekyll.environment == "production" -%}
+    <script src="{{'/assets/js/feedback.js'|relative_url}}" defer></script>
+  {%- endif -%}
 </head>
diff --git a/docs/static_site/src/_layouts/page_api.html b/docs/static_site/src/_layouts/page_api.html
@@ -48,5 +48,8 @@ <h3>Tutorials</h3>
     </div>
     <div class="col-9">
         {{ content }}
+        {%- if page.feedback == true and jekyll.environment == "production" -%}
+            {%- include feedback.html -%}
+        {%- endif -%}
     </div>
 </div>
diff --git a/docs/static_site/src/_sass/feedback.scss b/docs/static_site/src/_sass/feedback.scss
@@ -0,0 +1,39 @@
+.feedback-container {
+  text-align: center;
+}
+
+.feedback-answer-container {
+  display: inline-block;
+}
+
+.feedback-question {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-answer {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+  color: #048ccc;
+  cursor: pointer;
+}
+
+.feedback-answer:hover {
+  color: #ffffff;
+  background-color: #048ccc;
+}
+
+.feedback-thank-you {
+  display: none;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-hr-top {
+  margin: 1em;
+  margin-top: 50px;
+}
+
+.feedback-hr-bottom {
+  margin: 1em;
+  margin-bottom: 30px;
+}
diff --git a/docs/static_site/src/assets/js/feedback.js b/docs/static_site/src/assets/js/feedback.js
@@ -0,0 +1,33 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function() {
+  $(".feedback-answer").on("click", function () {
+    $(".feedback-question").remove();
+    $(".feedback-answer-container").remove();
+    $(".feedback-thank-you").show();
+    ga("send", {
+      hitType: "event",
+      eventCategory: "Did this page help you?",
+      eventAction: $(this).attr("data-response"),
+      eventLabel: window.location.pathname || "unknown",
+      eventValue: $(this).attr("data-response") === "yes" ? 1 : 0
+    });
+  });
+});
diff --git a/docs/static_site/src/assets/main.scss b/docs/static_site/src/assets/main.scss
@@ -7,3 +7,5 @@ body {
 
 @import "minima";
 @import "globalSearch";
+@import "generalVersionDropdown";
+@import "feedback";