From dc9a38cc7d5a183c0ce78bad842ce22f30b98cfe Mon Sep 17 00:00:00 2001
From: a <a@a>
Date: Fri, 7 Aug 2020 18:09:20 +0200
Subject: [PATCH] Style the translation custom element

---
 .../content_script/custom_elements.ts         | 47 ++++++++++++-------
 src/frontend/content_script/translation.scss  |  4 ++
 2 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/content_script/translation.scss

diff --git a/src/frontend/content_script/custom_elements.ts b/src/frontend/content_script/custom_elements.ts
index 44dbfcc..0d647ad 100644
--- a/src/frontend/content_script/custom_elements.ts
+++ b/src/frontend/content_script/custom_elements.ts
@@ -1,25 +1,32 @@
 import { Communicator } from "../../communication";
-import contents from "./spinner.scss?raw";
+import spinnerCSS from "./spinner.scss?raw";
+import translationCSS from "./translation.scss?raw";
 
 class LingoTranslate extends HTMLElement {
+	loadingElm: LingoLoading;
+	translationElm: LingoTranslation;
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `<lingo-loading></lingo-loading> <lingo-translation></lingo-translation>`;
+		this.loadingElm = this.shadowRoot.querySelector("lingo-loading");
+		this.translationElm = this.shadowRoot.querySelector("lingo-translation");
 	}
 
 	render = () => {
-		this.shadowRoot.innerHTML = "<lingo-loading></lingo-loading>";
+		this.loadingElm.hidden = false;
+		this.translationElm.hidden = true;
+
 		const toTranslate = this.getAttribute("translate");
 		if (toTranslate) {
 			const translation = Communicator.translate(toTranslate);
 			translation.then((t: Translation) => {
 				if (t.src == this.getAttribute("translate")) {
-					this.shadowRoot.innerHTML = "";
+					this.loadingElm.hidden = true;
+					this.translationElm.hidden = false;
 
-					let translationElement = document.createElement("lingo-translation");
-					translationElement.setAttribute("src", t.src);
-					translationElement.setAttribute("translation", t.result);
-					this.shadowRoot.appendChild(translationElement);
+					this.translationElm.setAttribute("src", t.src);
+					this.translationElm.setAttribute("translation", t.result);
 					this.dispatchEvent(new Event("translationFinished"));
 				}
 			});
@@ -44,7 +51,7 @@ class LingoLoading extends HTMLElement {
 		spinner.id = "spinner";
 
 		const style = document.createElement("style");
-		style.textContent = contents;
+		style.textContent = spinnerCSS;
 		shadow.appendChild(style);
 		shadow.appendChild(spinner);
 	}
@@ -57,21 +64,29 @@ class LingoTranslation extends HTMLElement {
 	addToCollection: HTMLButtonElement;
 	constructor() {
 		super();
-		const shadow = this.attachShadow({ mode: "open" });
+		this.attachShadow({ mode: "open" });
 
-		this.translateElm = document.createElement("span");
-		this.srcElm = document.createElement("span");
-		this.addToCollection = document.createElement("button");
+		let style = document.createElement("style");
+		style.textContent = translationCSS;
+		this.shadowRoot.appendChild(style);
+
+		this.shadowRoot.innerHTML = `
+		<div id="translation"> 
+			<span id="src"></span> - <span id="translated"></span> 
+		</div>
+		<button is="toggleButton"> Add to collection </button>
+		`;
+
+		this.srcElm = this.shadowRoot.querySelector("#src");
+		this.translateElm = this.shadowRoot.querySelector("#translated");
+
+		this.addToCollection = this.shadowRoot.querySelector("button");
 		this.addToCollection.addEventListener("click", () =>
 			Communicator.addFlashcard({
 				src: this.getAttribute("src"),
 				result: this.getAttribute("translation"),
 			})
 		);
-
-		shadow.appendChild(this.translateElm);
-		shadow.appendChild(this.srcElm);
-		shadow.appendChild(this.addToCollection);
 	}
 
 	render = () => {
diff --git a/src/frontend/content_script/translation.scss b/src/frontend/content_script/translation.scss
new file mode 100644
index 0000000..4d0481f
--- /dev/null
+++ b/src/frontend/content_script/translation.scss
@@ -0,0 +1,4 @@
+lingo-translation {
+	display: flex;
+	width: 100%;
+}