From af2ce50d9fdcc2fc20794df7fe16161b7064d5d9 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 14 Feb 2022 15:23:24 +0530
Subject: [PATCH] Use chevron when chatterbox is loaded
---
src/parent-style.css | 7 +++++--
src/parent.ts | 13 ++++++++-----
src/ui/res/chevron-down-button.svg | 10 ++++++++++
3 files changed, 23 insertions(+), 7 deletions(-)
create mode 100644 src/ui/res/chevron-down-button.svg
diff --git a/src/parent-style.css b/src/parent-style.css
index ed205f2..87f19c5 100644
--- a/src/parent-style.css
+++ b/src/parent-style.css
@@ -24,13 +24,16 @@
bottom: 15px;
}
-.start button {
+.start-chat-btn {
width: 64px;
height: 64px;
border: none;
border-radius: 100%;
- background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
cursor: pointer;
background: no-repeat center url('./ui/res/chat-bubbles.svg'), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 12px 32px -2px rgba(0, 0, 0, 0.2);
}
+
+.start-background-minimized {
+ background: no-repeat center url("./ui/res/chevron-down-button.svg"), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%);
+}
diff --git a/src/parent.ts b/src/parent.ts
index b414418..af78fcf 100644
--- a/src/parent.ts
+++ b/src/parent.ts
@@ -37,7 +37,7 @@ function renderStartButton() {
const container = document.createElement("div");
container.className = "start";
const button = document.createElement("button");
- button.className = "StartChat";
+ button.className = "start-chat-btn";
button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe();
container.appendChild(button);
document.body.appendChild(container);
@@ -60,24 +60,27 @@ function loadChatterboxIframe() {
iframe.className = "chatterbox-iframe";
document.body.appendChild(iframe);
isIframeLoaded = true;
+ document.querySelector(".start-chat-btn").classList.add("start-background-minimized");
if (isMobile()) {
- (document.querySelector(".start") as HTMLButtonElement).style.display = "none";
+ (document.querySelector(".start") as HTMLDivElement).style.display = "none";
}
}
function minimizeIframe() {
const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement;
- const startButton = document.querySelector(".start") as HTMLButtonElement;
+ const startButtonDiv = document.querySelector(".start") as HTMLDivElement;
if (iframeElement.style.display !== "none") {
iframeElement.style.display = "none";
+ document.querySelector(".start-chat-btn").classList.remove("start-background-minimized");
if (isMobile()) {
- startButton.style.display = "block";
+ startButtonDiv.style.display = "block";
}
}
else {
iframeElement.style.display = "block";
+ document.querySelector(".start-chat-btn").classList.add("start-background-minimized");
if (isMobile()) {
- startButton.style.display = "none";
+ startButtonDiv.style.display = "none";
}
}
}
diff --git a/src/ui/res/chevron-down-button.svg b/src/ui/res/chevron-down-button.svg
new file mode 100644
index 0000000..777f2ef
--- /dev/null
+++ b/src/ui/res/chevron-down-button.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_4136)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56066 8.04481C3.14645 7.45902 4.09773 7.45748 4.68541 8.04137L12.134 15.4419L19.5586 8.01731C20.1444 7.43153 21.0957 7.42999 21.6834 8.01388C22.2711 8.59776 22.2726 9.54597 21.6868 10.1318L13.2015 18.617C12.6157 19.2028 11.6645 19.2044 11.0768 18.6205L2.56409 10.1627C1.97641 9.5788 1.97487 8.6306 2.56066 8.04481Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_102_4136">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--
GitLab