From f36c3a9207d898ec8e979524bd45acaab00049d9 Mon Sep 17 00:00:00 2001 From: Dallas Read Date: Thu, 19 Dec 2024 15:30:03 -0400 Subject: [PATCH 1/8] Support widget at full width --- _widget/src/components/app/component.vue | 9 +++++--- _widget/src/components/app/style.scss | 26 +++++++++++++++++++++--- _widget/src/components/header/style.scss | 1 + 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue index 0f04b153e..9ac53a6b7 100644 --- a/_widget/src/components/app/component.vue +++ b/_widget/src/components/app/component.vue @@ -1,8 +1,11 @@ @@ -41,6 +41,9 @@ export default { props: { query: { default: '' + }, + showPrompt: { + default: true } }, data () { diff --git a/_widget/src/main.js b/_widget/src/main.js index bbfa53d4d..638bac9bc 100644 --- a/_widget/src/main.js +++ b/_widget/src/main.js @@ -1,4 +1,15 @@ import { createApp } from 'vue'; import App from './components/app/component.vue'; -createApp(App).mount('#support-widget'); +const $openers = [...document.querySelectorAll('[data-open-support-widget]')]; +const app = createApp(App, { + showPrompt: $openers.length === 0 +}); + +app.mount('#support-widget'); + +$openers.forEach(($el) => { + $el.addEventListener('click', () => { + app.open(); + }); +}); diff --git a/layouts/default.html b/layouts/default.html index b3690ea99..b4a002102 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -30,7 +30,7 @@
- + @@ -121,6 +121,8 @@

Get Help From Developers

+
+ diff --git a/_widget/src/components/app/style.scss b/_widget/src/components/app/style.scss index 0a9ac416d..f6943f815 100644 --- a/_widget/src/components/app/style.scss +++ b/_widget/src/components/app/style.scss @@ -1,9 +1,4 @@ #dnsimple-support { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; font-size: var(--dnsimple-support-widget-rem); font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.6; @@ -17,6 +12,11 @@ #dnsimple-support { .modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; max-width: 45rem; margin-top: 5vh; margin-left: auto; diff --git a/_widget/src/main.js b/_widget/src/main.js index 638bac9bc..ea786defe 100644 --- a/_widget/src/main.js +++ b/_widget/src/main.js @@ -4,9 +4,7 @@ import App from './components/app/component.vue'; const $openers = [...document.querySelectorAll('[data-open-support-widget]')]; const app = createApp(App, { showPrompt: $openers.length === 0 -}); - -app.mount('#support-widget'); +}).mount('#support-widget'); $openers.forEach(($el) => { $el.addEventListener('click', () => { From e748150a780e7392acb19f411342d7e590d7b123 Mon Sep 17 00:00:00 2001 From: Dallas Read Date: Thu, 19 Dec 2024 16:33:24 -0400 Subject: [PATCH 4/8] Include the support widget in the layout --- layouts/default.html | 1 + 1 file changed, 1 insertion(+) diff --git a/layouts/default.html b/layouts/default.html index b4a002102..b35719f62 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -122,6 +122,7 @@

Get Help From Developers

+