From f2e256d37d82224fd4427ef668b35f85b4814858 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Fri, 28 Feb 2025 19:05:57 -0600 Subject: [PATCH 1/7] Add feedback widget to each page --- src/_includes/page-github-links.html | 11 ---- src/_includes/trailing.html | 40 +++++++++++++++ src/_layouts/default.html | 2 +- src/_sass/components/_button.scss | 22 ++++++-- src/_sass/components/_misc.scss | 9 ---- src/_sass/components/_trailing.scss | 75 ++++++++++++++++++++++++++++ src/_sass/site.scss | 1 + src/content/assets/js/main.js | 19 +++++++ 8 files changed, 155 insertions(+), 24 deletions(-) delete mode 100644 src/_includes/page-github-links.html create mode 100644 src/_includes/trailing.html create mode 100644 src/_sass/components/_trailing.scss diff --git a/src/_includes/page-github-links.html b/src/_includes/page-github-links.html deleted file mode 100644 index 1e1b8b981e..0000000000 --- a/src/_includes/page-github-links.html +++ /dev/null @@ -1,11 +0,0 @@ -{% assign repo = repo | default: site.repo.this -%} -{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%} -{% assign siteTitle = title | default: page.url | escape -%} -{% assign url = site.url | append: page.url -%} - -

- Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}. - View source - or - report an issue. -

diff --git a/src/_includes/trailing.html b/src/_includes/trailing.html new file mode 100644 index 0000000000..b261182d3c --- /dev/null +++ b/src/_includes/trailing.html @@ -0,0 +1,40 @@ +{% assign repo = repo | default: site.repo.this -%} +{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%} +{% assign url = site.url | append: page.url -%} + +
+
+ + + +
+ +

+ Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}. + View source + or + report an issue. +

+
diff --git a/src/_layouts/default.html b/src/_layouts/default.html index 2724c3ecb3..991ea9ebd1 100644 --- a/src/_layouts/default.html +++ b/src/_layouts/default.html @@ -32,7 +32,7 @@

{{ title }}

{% include next-prev-nav.html prev=prev, next=next %} - {% include page-github-links.html %} + {% include trailing.html %} diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss index 2e2f661548..21a2375530 100644 --- a/src/_sass/components/_button.scss +++ b/src/_sass/components/_button.scss @@ -24,7 +24,7 @@ a, button { background: none; cursor: pointer; - &.filled-button { + &.filled-button, &.text-button { display: flex; align-items: center; width: fit-content; @@ -32,12 +32,16 @@ a, button { outline-offset: 2px; border-radius: 24px; font-weight: 500; + gap: 0.4rem; padding: 0.5rem 1rem; - background-color: $site-color-primary; - color: $site-color-white; text-decoration: none; cursor: pointer; user-select: none; + } + + &.filled-button { + background-color: $site-color-primary; + color: $site-color-white; &:hover { @include mixins.interaction-style(8%); @@ -48,6 +52,18 @@ a, button { } } + &.text-button { + color: $site-color-primary; + + &:hover { + @include mixins.interaction-style(4%); + } + + &:active { + @include mixins.interaction-style(8%); + } + } + &.icon-button { border-radius: 0.25rem; padding: 0.25rem; diff --git a/src/_sass/components/_misc.scss b/src/_sass/components/_misc.scss index d8d7479d61..4b889e88ea 100644 --- a/src/_sass/components/_misc.scss +++ b/src/_sass/components/_misc.scss @@ -32,15 +32,6 @@ } } -#page-github-links { - font-style: italic; - font-size: 0.75rem; - padding-top: 0.5rem; - margin-bottom: 0; - - border-top: 0.05rem solid $site-color-light-grey; -} - // A big button centered on top of an image. // // The container is typically a
element. The div has only 2 children: diff --git a/src/_sass/components/_trailing.scss b/src/_sass/components/_trailing.scss new file mode 100644 index 0000000000..76fbb847ba --- /dev/null +++ b/src/_sass/components/_trailing.scss @@ -0,0 +1,75 @@ +@use '../base/variables' as *; + +#trailing-content { + font-size: 0.875rem; + margin: 0; + margin-block-start: 1rem; + font-family: $site-font-family-ui; + //font-size: 0.875rem; + //line-height: 1.5; + //color: $site-color-light-grey; + + border-top: 0.05rem solid $site-color-light-grey; +} + +#page-feedback { + display: flex; + align-items: center; + justify-content: center; + margin-block: 0.25rem 0; + padding: 0.25rem; + height: 4.25rem; + + > .feedback { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.2rem; + + span.material-symbols { + font-size: 20px; + } + + .text-button { + padding: 0.25rem 0.5rem; + } + } + + .initial-feedback { + .feedback-buttons { + display: flex; + flex-direction: row; + gap: 0.5rem; + } + } + + .good-feedback, .bad-feedback { + display: none; + } + + &.feedback-up { + .initial-feedback { + display: none; + } + + .good-feedback { + display: flex; + } + } + + &.feedback-down { + .initial-feedback { + display: none; + } + + .bad-feedback { + display: flex; + } + } +} + +#page-github-links { + font-style: italic; + font-size: 0.75rem; + margin-bottom: 0; +} \ No newline at end of file diff --git a/src/_sass/site.scss b/src/_sass/site.scss index 5a2f73f72a..6841f05b6a 100644 --- a/src/_sass/site.scss +++ b/src/_sass/site.scss @@ -27,6 +27,7 @@ @use 'components/site-switcher'; @use 'components/tabs'; @use 'components/toc'; +@use 'components/trailing'; // Styles for specific pages, alphabetically ordered. @use 'pages/not-found'; diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index 4841df9711..62cfae38dd 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -389,6 +389,24 @@ function setupSiteSwitcher() { }); } +function setupFeedback() { + const feedbackContainer = + document.getElementById('page-feedback'); + if (!feedbackContainer) return; + + const feedbackUpButton = feedbackContainer.querySelector('#feedback-up-button'); + const feedbackDownButton = feedbackContainer.querySelector('#feedback-down-button'); + if (!feedbackUpButton || !feedbackDownButton) return; + + feedbackUpButton.addEventListener('click', (_) => { + feedbackContainer.classList.add('feedback-up'); + }, { once: true }); + + feedbackDownButton.addEventListener('click', (_) => { + feedbackContainer.classList.add('feedback-down'); + }, { once: true }); +} + function setupSite() { scrollSidenavIntoView(); initCookieNotice(); @@ -401,6 +419,7 @@ function setupSite() { setupTabs(); setupToc(); + setupFeedback(); } if (document.readyState === 'loading') { From 78f3edb590f830ec5a6e794183375922f0a8fcda Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Fri, 28 Feb 2025 19:10:57 -0600 Subject: [PATCH 2/7] Remove some old comments --- src/_sass/components/_trailing.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/_sass/components/_trailing.scss b/src/_sass/components/_trailing.scss index 76fbb847ba..5e02e31980 100644 --- a/src/_sass/components/_trailing.scss +++ b/src/_sass/components/_trailing.scss @@ -5,9 +5,6 @@ margin: 0; margin-block-start: 1rem; font-family: $site-font-family-ui; - //font-size: 0.875rem; - //line-height: 1.5; - //color: $site-color-light-grey; border-top: 0.05rem solid $site-color-light-grey; } From bc79c2fc361d3ee3180d5bcbb20b675e7b423306 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Fri, 28 Feb 2025 19:15:13 -0600 Subject: [PATCH 3/7] Improve sizing of buttons and their icons --- src/_sass/components/_button.scss | 2 +- src/_sass/components/_trailing.scss | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss index 21a2375530..47786ed7f6 100644 --- a/src/_sass/components/_button.scss +++ b/src/_sass/components/_button.scss @@ -32,7 +32,7 @@ a, button { outline-offset: 2px; border-radius: 24px; font-weight: 500; - gap: 0.4rem; + gap: 0.3rem; padding: 0.5rem 1rem; text-decoration: none; cursor: pointer; diff --git a/src/_sass/components/_trailing.scss b/src/_sass/components/_trailing.scss index 5e02e31980..ebc86333d9 100644 --- a/src/_sass/components/_trailing.scss +++ b/src/_sass/components/_trailing.scss @@ -23,12 +23,12 @@ align-items: center; gap: 0.2rem; - span.material-symbols { - font-size: 20px; - } - .text-button { padding: 0.25rem 0.5rem; + + span.material-symbols { + font-size: 18px; + } } } @@ -37,6 +37,10 @@ display: flex; flex-direction: row; gap: 0.5rem; + + span.material-symbols { + font-size: 20px; + } } } From d61ac0d88dda0f9446cf9b6ddd0ce6dab079cf3d Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 4 Mar 2025 11:14:55 -0600 Subject: [PATCH 4/7] Add page feedback label to created issues --- src/_includes/trailing.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_includes/trailing.html b/src/_includes/trailing.html index b261182d3c..9bf5593196 100644 --- a/src/_includes/trailing.html +++ b/src/_includes/trailing.html @@ -17,14 +17,14 @@
Thank you for your feedback!
- + Provide details
Thank you for your feedback! Please let us know what we can do to improve.
- + Provide details From 74a48f1cd687dd52a431bc307db8fe72cf59f0cc Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 4 Mar 2025 11:31:34 -0600 Subject: [PATCH 5/7] Send tag manager events on click --- src/_layouts/base.html | 3 +++ src/content/assets/js/main.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 8e79da9462..a4af02db3a 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -18,6 +18,9 @@ {%- if isProduction == true -%} + @@ -36,7 +37,6 @@ ga('create', '{{ site.google_analytics_id }}', 'auto'); ga('send', 'pageview'); - {% endif -%} {% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%} {% unless desc and desc != '' -%} From 31e500084a079295997b06fb319164569d2f5967 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 4 Mar 2025 12:57:34 -0600 Subject: [PATCH 7/7] Change event to use underscores --- src/_sass/components/_trailing.scss | 2 +- src/content/assets/js/main.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_sass/components/_trailing.scss b/src/_sass/components/_trailing.scss index ebc86333d9..8d732156e0 100644 --- a/src/_sass/components/_trailing.scss +++ b/src/_sass/components/_trailing.scss @@ -73,4 +73,4 @@ font-style: italic; font-size: 0.75rem; margin-bottom: 0; -} \ No newline at end of file +} diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index 38a64649f0..e7023fffec 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -399,13 +399,13 @@ function setupFeedback() { if (!feedbackUpButton || !feedbackDownButton) return; feedbackUpButton.addEventListener('click', (_) => { - window.dataLayer?.push({'event': 'feedback-up'}); + window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'up'}); feedbackContainer.classList.add('feedback-up'); }, { once: true }); feedbackDownButton.addEventListener('click', (_) => { - window.dataLayer?.push({'event': 'feedback-down'}); + window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'down'}); feedbackContainer.classList.add('feedback-down'); }, { once: true });