-
@@ -38,6 +41,9 @@ export default {
props: {
query: {
default: ''
+ },
+ showPrompt: {
+ default: true
}
},
data () {
diff --git a/_widget/src/components/app/style.scss b/_widget/src/components/app/style.scss
index cecea5ae8..bcf45de43 100644
--- a/_widget/src/components/app/style.scss
+++ b/_widget/src/components/app/style.scss
@@ -1,13 +1,8 @@
#dnsimple-support {
- position: fixed;
- bottom: 0;
- right: 0;
- width: 480px;
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;
color: #222;
- z-index: 999;
@media (var(--dnsimple-support-widget-desktop-only)) {
display: none;
@@ -15,17 +10,41 @@
}
#dnsimple-support {
+ .modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ margin-top: 5vh;
+ z-index: 999;
+ max-width: 45rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .overlay {
+ position: fixed;
+ z-index: 998;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.8);
+ }
+
.relative {
position: relative;
box-shadow: var(--dnsimple-support-widget-box-shadow);
}
.route {
- height: 475px;
- border-left: 1px solid var(--dnsimple-support-widget-line-color);
+ border: 1px solid var(--dnsimple-support-widget-line-color);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--dnsimple-support-widget-padding);
background: var(--dnsimple-support-widget-white);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ height: 75vh;
}
}
diff --git a/_widget/src/components/header/style.scss b/_widget/src/components/header/style.scss
index 7ba89a4d0..021e0392e 100644
--- a/_widget/src/components/header/style.scss
+++ b/_widget/src/components/header/style.scss
@@ -4,6 +4,7 @@
text-align: center;
padding: var(--dnsimple-support-widget-padding);
border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
h1 {
color: var(--dnsimple-support-widget-white);
diff --git a/_widget/src/main.js b/_widget/src/main.js
index bbfa53d4d..5997e0ac1 100644
--- a/_widget/src/main.js
+++ b/_widget/src/main.js
@@ -1,4 +1,14 @@
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
+}).mount('#support-widget');
+
+$openers.forEach(($el) => {
+ $el.addEventListener('click', () => {
+ app.open();
+ app.focus();
+ });
+});
diff --git a/layouts/default.html b/layouts/default.html
index b3690ea99..b35719f62 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -30,7 +30,7 @@
diff --git a/_widget/src/components/app/component.vue b/_widget/src/components/app/component.vue
index 0f04b153e..3f43f32fc 100644
--- a/_widget/src/components/app/component.vue
+++ b/_widget/src/components/app/component.vue
@@ -1,10 +1,13 @@