Skip to content

Commit 6fe1e7d

Browse files
parloughparlough
authored
Add a feedback widget to end of each page (#11759)
Resolves #11755
1 parent 90c5838 commit 6fe1e7d

File tree

9 files changed

+164
-25
lines changed

9 files changed

+164
-25
lines changed

‎src/_includes/page-github-links.html

-11
This file was deleted.

‎src/_includes/trailing.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% assign repo = repo | default: site.repo.this -%}
2+
{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%}
3+
{% assign url = site.url | append: page.url -%}
4+
5+
<div id="trailing-content">
6+
<div id="page-feedback">
7+
<div class="feedback initial-feedback">
8+
<div>Was this page's content helpful?</div>
9+
<div class="feedback-buttons">
10+
<button id="feedback-up-button" class="icon-button" aria-label="Yes, this page was helpful" title="Helpful">
11+
<span class="material-symbols" aria-hidden="true">thumb_up</span>
12+
</button>
13+
<button id="feedback-down-button" class="icon-button" aria-label="No, this page was not helpful or had an issue" title="Not helpful or had issue">
14+
<span class="material-symbols" aria-hidden="true">thumb_down</span>
15+
</button>
16+
</div>
17+
</div>
18+
<div class="feedback good-feedback">
19+
<div>Thank you for your feedback!</div>
20+
<a href="{{repo}}/issues/new?labels=from.page-feedback" class="text-button" aria-label="Provide feedback">
21+
<span class="material-symbols" aria-hidden="true">feedback</span>
22+
<span>Provide details</span>
23+
</a>
24+
</div>
25+
<div class="feedback bad-feedback">
26+
<div>Thank you for your feedback! Please let us know what we can do to improve.</div>
27+
<a href="{{repo}}/issues/new?labels=from.page-feedback" class="text-button" aria-label="Provide feedback or report an issue">
28+
<span class="material-symbols" aria-hidden="true">bug_report</span>
29+
<span>Provide details</span>
30+
</a>
31+
</div>
32+
</div>
33+
34+
<p id="page-github-links">
35+
<span>Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}.</span>
36+
<a href="{{pageSource}}" target="_blank" rel="noopener">View source</a>
37+
<span> or </span>
38+
<a href="{{repo}}/issues/new?template=1_page_issue.yml&&page-url={{url}}&page-source={{pageSource}}" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.
39+
</p>
40+
</div>

‎src/_layouts/base.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818

1919
{%- if isProduction == true -%}
2020
<meta name="google-site-verification" content="{{ site.google_site_verification }}">
21+
{% endif -%}
22+
<script>
23+
window.dataLayer = window.dataLayer || [];
24+
</script>
2125
<script>
2226
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
2327
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -33,7 +37,6 @@
3337
ga('create', '{{ site.google_analytics_id }}', 'auto');
3438
ga('send', 'pageview');
3539
</script>
36-
{% endif -%}
3740

3841
{% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%}
3942
{% unless desc and desc != '' -%}

‎src/_layouts/default.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h1 id="document-title">{{ title }}</h1>
3232

3333
{% include next-prev-nav.html prev=prev, next=next %}
3434

35-
{% include page-github-links.html %}
35+
{% include trailing.html %}
3636
</article>
3737
</main>
3838
</div>

‎src/_sass/components/_button.scss

+19-3
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,24 @@ a, button {
2424
background: none;
2525
cursor: pointer;
2626

27-
&.filled-button {
27+
&.filled-button, &.text-button {
2828
display: flex;
2929
align-items: center;
3030
width: fit-content;
3131
white-space: nowrap;
3232
outline-offset: 2px;
3333
border-radius: 24px;
3434
font-weight: 500;
35+
gap: 0.3rem;
3536
padding: 0.5rem 1rem;
36-
background-color: $site-color-primary;
37-
color: $site-color-white;
3837
text-decoration: none;
3938
cursor: pointer;
4039
user-select: none;
40+
}
41+
42+
&.filled-button {
43+
background-color: $site-color-primary;
44+
color: $site-color-white;
4145

4246
&:hover {
4347
@include mixins.interaction-style(8%);
@@ -48,6 +52,18 @@ a, button {
4852
}
4953
}
5054

55+
&.text-button {
56+
color: $site-color-primary;
57+
58+
&:hover {
59+
@include mixins.interaction-style(4%);
60+
}
61+
62+
&:active {
63+
@include mixins.interaction-style(8%);
64+
}
65+
}
66+
5167
&.icon-button {
5268
border-radius: 0.25rem;
5369
padding: 0.25rem;

‎src/_sass/components/_misc.scss

-9
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,6 @@
3232
}
3333
}
3434

35-
#page-github-links {
36-
font-style: italic;
37-
font-size: 0.75rem;
38-
padding-top: 0.5rem;
39-
margin-bottom: 0;
40-
41-
border-top: 0.05rem solid $site-color-light-grey;
42-
}
43-
4435
// A big button centered on top of an image.
4536
//
4637
// The container is typically a <div> element. The div has only 2 children:

‎src/_sass/components/_trailing.scss

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
@use '../base/variables' as *;
2+
3+
#trailing-content {
4+
font-size: 0.875rem;
5+
margin: 0;
6+
margin-block-start: 1rem;
7+
font-family: $site-font-family-ui;
8+
9+
border-top: 0.05rem solid $site-color-light-grey;
10+
}
11+
12+
#page-feedback {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
margin-block: 0.25rem 0;
17+
padding: 0.25rem;
18+
height: 4.25rem;
19+
20+
> .feedback {
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
gap: 0.2rem;
25+
26+
.text-button {
27+
padding: 0.25rem 0.5rem;
28+
29+
span.material-symbols {
30+
font-size: 18px;
31+
}
32+
}
33+
}
34+
35+
.initial-feedback {
36+
.feedback-buttons {
37+
display: flex;
38+
flex-direction: row;
39+
gap: 0.5rem;
40+
41+
span.material-symbols {
42+
font-size: 20px;
43+
}
44+
}
45+
}
46+
47+
.good-feedback, .bad-feedback {
48+
display: none;
49+
}
50+
51+
&.feedback-up {
52+
.initial-feedback {
53+
display: none;
54+
}
55+
56+
.good-feedback {
57+
display: flex;
58+
}
59+
}
60+
61+
&.feedback-down {
62+
.initial-feedback {
63+
display: none;
64+
}
65+
66+
.bad-feedback {
67+
display: flex;
68+
}
69+
}
70+
}
71+
72+
#page-github-links {
73+
font-style: italic;
74+
font-size: 0.75rem;
75+
margin-bottom: 0;
76+
}

‎src/_sass/site.scss

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
@use 'components/site-switcher';
2828
@use 'components/tabs';
2929
@use 'components/toc';
30+
@use 'components/trailing';
3031

3132
// Styles for specific pages, alphabetically ordered.
3233
@use 'pages/not-found';

‎src/content/assets/js/main.js

+23
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,28 @@ function setupSiteSwitcher() {
389389
});
390390
}
391391

392+
function setupFeedback() {
393+
const feedbackContainer =
394+
document.getElementById('page-feedback');
395+
if (!feedbackContainer) return;
396+
397+
const feedbackUpButton = feedbackContainer.querySelector('#feedback-up-button');
398+
const feedbackDownButton = feedbackContainer.querySelector('#feedback-down-button');
399+
if (!feedbackUpButton || !feedbackDownButton) return;
400+
401+
feedbackUpButton.addEventListener('click', (_) => {
402+
window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'up'});
403+
404+
feedbackContainer.classList.add('feedback-up');
405+
}, { once: true });
406+
407+
feedbackDownButton.addEventListener('click', (_) => {
408+
window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'down'});
409+
410+
feedbackContainer.classList.add('feedback-down');
411+
}, { once: true });
412+
}
413+
392414
function setupSite() {
393415
scrollSidenavIntoView();
394416
initCookieNotice();
@@ -401,6 +423,7 @@ function setupSite() {
401423
setupTabs();
402424

403425
setupToc();
426+
setupFeedback();
404427
}
405428

406429
if (document.readyState === 'loading') {

0 commit comments

Comments
 (0)