From dc9a38cc7d5a183c0ce78bad842ce22f30b98cfe Mon Sep 17 00:00:00 2001 From: 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 = ` `; + this.loadingElm = this.shadowRoot.querySelector("lingo-loading"); + this.translationElm = this.shadowRoot.querySelector("lingo-translation"); } render = () => { - this.shadowRoot.innerHTML = ""; + 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 = ` +
+ - +
+ + `; + + 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%; +}