From d85cf511ef300ccd76804446eec1b7338bd0301a Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Fri, 24 Sep 2021 13:55:56 +0530
Subject: [PATCH] #631 indeed to remove ${} from template

---
 src/editor/components/seText.js  | 31 ++++++++++++++++++++++++++++---
 src/editor/panels/LayersPanel.js |  9 +++++----
 src/editor/panels/TopPanel.js    |  3 ++-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/editor/components/seText.js b/src/editor/components/seText.js
index 48c15819..a7067ef9 100644
--- a/src/editor/components/seText.js
+++ b/src/editor/components/seText.js
@@ -3,6 +3,11 @@ const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
+  #layersLabel {
+    font-size: 13px;
+    line-height: normal;
+    font-weight: 700;
+  }
   </style>
   <div></div>
 `;
@@ -26,7 +31,7 @@ export class SeText extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'text', 'value', 'style' ];
+    return [ 'text', 'value', 'style', 'title', 'id' ];
   }
   /**
    * @function attributeChangedCallback
@@ -41,9 +46,15 @@ export class SeText extends HTMLElement {
     case 'text':
       this.$div.textContent = t(newValue);
       break;
+    case 'title':
+      this.$div.setAttribute("title", t(newValue));
+      break;
     case 'style':
       this.$div.style = newValue;
       break;
+    case 'id':
+      this.$div.id = newValue;
+      break;
     case 'value':
       this.$div.value = newValue;
       //this.$div.setAttribute("value", newValue);
@@ -59,7 +70,7 @@ export class SeText extends HTMLElement {
    * @returns {any}
    */
   get text () {
-    return this.getAttribute('text');
+    return this.$div.textContent;
   }
 
   /**
@@ -67,7 +78,7 @@ export class SeText extends HTMLElement {
    * @returns {void}
    */
   set text (value) {
-    this.setAttribute('text', value);
+    this.$div.setAttribute("title", t(value));
   }
   /**
    * @function get
@@ -84,7 +95,21 @@ export class SeText extends HTMLElement {
   set value (value) {
     this.value = value;
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
 
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index c12a2edf..141a89f9 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -48,10 +48,10 @@ class LayersPanel {
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
     <div id="sidepanels">
-      <div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
+      <se-text id="sidepanel_handle" title="ui.panel_action" text="ui.panel"></se-text>
       <div id="sidepanel_content">
         <div id="layerpanel">
-          <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
+          <se-text id="layersLabel" text="layers.layers"></se-text>
           <fieldset id="layerbuttons">
             <se-button id="layer_new" title="layers.new" size="small" src="new.svg"></se-button>
             <se-button id="layer_delete" title="layers.del" size="small" src="delete.svg"></se-button>
@@ -67,8 +67,8 @@ class LayersPanel {
               <td class="layername">Layer 1</td>
             </tr>
           </table>
-          <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
-          <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
+          <se-text id="selLayerLabel" text="layers.move_elems_to"></se-text>
+          <select id="selLayerNames" disabled="disabled">
             <option selected="selected" value="layer1">Layer 1</option>
           </select>
         </div>
@@ -89,6 +89,7 @@ class LayersPanel {
     menuLayerBox.setAttribute("leftclick", false);
     this.editor.$container.append(menuLayerBox);
     menuLayerBox.init(i18next);
+    $id("selLayerNames").setAttribute("title", i18next.t('layers.move_selected'));
     $id("layer_new").addEventListener("click", this.newLayer.bind(this));
     $id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
     $id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 42eebe76..f5a75fd0 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -958,7 +958,7 @@ class TopPanel {
         </div> <!-- g_panel -->
         <!-- For anchor elements -->
         <div class="a_panel">
-          <label id="tool_link_url" title="${i18next.t('tools.set_link_url')}">
+          <label id="tool_link_url">
             <span id="linkLabel" class="icon_label"></span>
             <input id="link_url" type="text" size="35" />
           </label>
@@ -986,6 +986,7 @@ class TopPanel {
     newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
     this.editor.$container.append(newSeEditorDialog);
     newSeEditorDialog.init(i18next);
+    $id("tool_link_url").setAttribute("title", i18next.t('tools.set_link_url'));
     // register action to top panel buttons
     $id("tool_source").addEventListener("click", this.showSourceEditor.bind(this));
     $id("tool_wireframe").addEventListener("click", this.clickWireframe.bind(this));