Merge pull request #648 from SVG-Edit/issue/631_1

#631 remove ${} from template

src/editor/components/seSelect.js

@@ -1,3 +1,4 @@
+import { t } from '../locale.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
@@ -16,7 +17,7 @@ label {
   width:100%;
 }
 </style>
-  <label>Label</label>
+  <label></label>
   <select>
   </select>
 
@@ -41,7 +42,7 @@ export class SeSelect extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height', 'options', 'values' ];
+    return [ 'label', 'width', 'height', 'options', 'values', 'title' ];
   }
 
   /**
@@ -56,7 +57,10 @@ export class SeSelect extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'label':
-      this.$label.textContent = newValue;
+      this.$label.textContent = t(newValue);
+      break;
+    case 'title':
+      this.$select.setAttribute("title", t(newValue));
       break;
     case 'height':
       this.$select.style.height = newValue;
@@ -68,7 +72,7 @@ export class SeSelect extends HTMLElement {
       options = newValue.split(',');
       options.forEach((option) => {
         const optionNode = document.createElement("OPTION");
-        const text = document.createTextNode(option);
+        const text = document.createTextNode(t(option));
         optionNode.appendChild(text);
         this.$select.appendChild(optionNode);
       });

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
@@ -39,13 +44,20 @@ export class SeText extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'text':
-      this.$div.setAttribute('title', t(newValue));
+      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);
       break;
     default:
       // eslint-disable-next-line no-console
@@ -58,7 +70,7 @@ export class SeText extends HTMLElement {
    * @returns {any}
    */
   get text () {
-    return this.getAttribute('text');
+    return this.$div.textContent;
   }
 
   /**
@@ -66,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
@@ -83,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}

src/editor/locale.js

@@ -83,7 +83,6 @@ export const putLocale = async function (givenParam, goodLangs) {
       }
     }
   });
-  console.info(`Lang: ${i18next.t('lang')}`);
   return { langParam, i18next };
 };
 

src/editor/locale/lang.af.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Verander teks inhoud',
+    font_family_label: 'Font:',
     font_family: 'Lettertipe verander Familie',
     font_size: 'Verandering Lettertipe Grootte',
     bold: 'Vetgedrukte teks',

src/editor/locale/lang.ar.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'تغيير محتويات النص',
+    font_family_label: 'Font:',
     font_family: 'تغيير الخط الأسرة',
     font_size: 'تغيير حجم الخط',
     bold: 'نص جريء',

src/editor/locale/lang.az.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',

src/editor/locale/lang.be.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Змяненне зместу тэксту',
+    font_family_label: 'Font:',
     font_family: 'Змены Сямейства шрыфтоў',
     font_size: 'Змяніць памер шрыфта',
     bold: 'Тоўсты тэкст',

src/editor/locale/lang.bg.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промяна на текст съдържание',
+    font_family_label: 'Font:',
     font_family: 'Промяна на шрифта Семейство',
     font_size: 'Промени размера на буквите',
     bold: 'Получер текст',

src/editor/locale/lang.ca.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Contingut del text',
+    font_family_label: 'Font:',
     font_family: 'Canviar la font Família',
     font_size: 'Change Font Size',
     bold: 'Text en negreta',

src/editor/locale/lang.cs.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'úsečka',
     curve_segments: 'křivka',
     text_contents: 'Změnit text',
+    font_family_label: 'Font:',
     font_family: 'Změnit font',
     font_size: 'Změnit velikost písma',
     bold: 'Tučně',

src/editor/locale/lang.cy.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Cynnwys testun Newid',
+    font_family_label: 'Font:',
     font_family: 'Newid Font Teulu',
     font_size: 'Newid Maint Ffont',
     bold: 'Testun Bras',

src/editor/locale/lang.de.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Gerade',
     curve_segments: 'Kurve',
     text_contents: 'Textinhalt erstellen und bearbeiten',
+    font_family_label: 'Font:',
     font_family: 'Schriftart wählen',
     font_size: 'Schriftgröße einstellen',
     bold: 'Fetter Text',

src/editor/locale/lang.el.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Αλλαγή περιεχόμενο κειμένου',
+    font_family_label: 'Font:',
     font_family: 'Αλλαγή γραμματοσειράς Οικογένεια',
     font_size: 'Αλλαγή μεγέθους γραμματοσειράς',
     bold: 'Bold Text',

src/editor/locale/lang.en.js

@@ -70,7 +70,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
-    font_family_label: 'Font',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',

src/editor/locale/lang.es.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Recta',
     curve_segments: 'Curva',
     text_contents: 'Modificar el texto',
+    font_family_label: 'Font:',
     font_family: 'Tipo de fuente',
     font_size: 'Tamaño de la fuente',
     bold: 'Texto en negrita',

src/editor/locale/lang.et.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Muuda teksti sisu',
+    font_family_label: 'Font:',
     font_family: 'Muutke Kirjasinperhe',
     font_size: 'Change font size',
     bold: 'Rasvane kiri',

src/editor/locale/lang.fa.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: '‫مستقیم‬',
     curve_segments: '‫منحنی‬',
     text_contents: '‫تغییر محتویات متن‬',
+    font_family_label: 'Font:',
     font_family: '‫تغییر خانواده قلم‬',
     font_size: '‫تغییر اندازه قلم‬',
     bold: '‫متن توپر ‬',

src/editor/locale/lang.fi.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Muuta tekstin sisältö',
+    font_family_label: 'Font:',
     font_family: 'Muuta Font Family',
     font_size: 'Muuta fontin kokoa',
     bold: 'Lihavoitu teksti',

src/editor/locale/lang.fr.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Droit',
     curve_segments: 'Courbe',
     text_contents: 'Changer le contenu du texte',
+    font_family_label: 'Font:',
     font_family: 'Changer la famille de police',
     font_size: 'Changer la taille de la police',
     bold: 'Texte en gras',

src/editor/locale/lang.fy.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Rjocht',
     curve_segments: 'Bûcht',
     text_contents: 'Tekst oanpasse',
+    font_family_label: 'Font:',
     font_family: 'Lettertype oanpasse',
     font_size: 'Lettergrutte oanpasse',
     bold: 'Fet',

src/editor/locale/lang.ga.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Inneachar Athraigh téacs',
+    font_family_label: 'Font:',
     font_family: 'Athraigh an Cló Teaghlaigh',
     font_size: 'Athraigh Clómhéid',
     bold: 'Trom Téacs',

src/editor/locale/lang.gl.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Cambiar o contido de texto',
+    font_family_label: 'Font:',
     font_family: 'Cambiar fonte Familia',
     font_size: 'Mudar tamaño de letra',
     bold: 'Bold Text',

src/editor/locale/lang.he.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'שינוי תוכן טקסט',
+    font_family_label: 'Font:',
     font_family: 'שינוי גופן משפחה',
     font_size: 'שנה גודל גופן',
     bold: 'טקסט מודגש',

src/editor/locale/lang.hi.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'सीधे वर्ग',
     curve_segments: 'घुमाव',
     text_contents: 'बदलें पाठ सामग्री',
+    font_family_label: 'Font:',
     font_family: 'बदलें फ़ॉन्ट परिवार',
     font_size: 'फ़ॉन्ट का आकार बदलें',
     bold: 'मोटा पाठ',

src/editor/locale/lang.hu.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'A szöveg tartalma',
+    font_family_label: 'Font:',
     font_family: 'Change Betűcsalád',
     font_size: 'Change font size',
     bold: 'Félkövér szöveg',

src/editor/locale/lang.hy.js

@@ -70,6 +70,7 @@ export default {
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
     font_family: 'Change Font Family',
+    font_family_label: 'Font:',
     font_size: 'Change Font Size',
     bold: 'Bold Text',
     italic: 'Italic Text',

src/editor/locale/lang.id.js

@@ -70,6 +70,7 @@ export default {
     curve_segments: 'Curve',
     text_contents: 'Ubah isi teks',
     font_family: 'Ubah Font Keluarga',
+    font_family_label: 'Font:',
     font_size: 'Ubah Ukuran Font',
     bold: 'Bold Teks',
     italic: 'Italic Teks',

src/editor/locale/lang.is.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Breyta texta innihald',
+    font_family_label: 'Font:',
     font_family: 'Change Leturfjölskylda',
     font_size: 'Breyta leturstærð',
     bold: 'Bold Text',

src/editor/locale/lang.it.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Linea retta',
     curve_segments: 'Curva',
     text_contents: 'Cambia il contenuto del testo',
+    font_family_label: 'Font:',
     font_family: 'Cambia il tipo di Font',
     font_size: 'Modifica dimensione carattere',
     bold: 'Grassetto',

src/editor/locale/lang.ja.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: '直線',
     curve_segments: 'カーブ',
     text_contents: 'テキストの内容の変更',
+    font_family_label: 'Font:',
     font_family: 'フォントファミリーの変更',
     font_size: '文字サイズの変更',
     bold: '太字',

src/editor/locale/lang.ko.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: '텍스트 변경 내용',
+    font_family_label: 'Font:',
     font_family: '글꼴 변경 패밀리',
     font_size: '글꼴 크기 변경',
     bold: '굵은 텍스트',

src/editor/locale/lang.lt.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Keisti teksto turinys',
+    font_family_label: 'Font:',
     font_family: 'Pakeistišriftą Šeima',
     font_size: 'Change font size',
     bold: 'Pusjuodis',

src/editor/locale/lang.lv.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Mainītu teksta saturs',
+    font_family_label: 'Font:',
     font_family: 'Mainīt fonta Family',
     font_size: 'Mainīt fonta izmēru',
     bold: 'Bold Text',

src/editor/locale/lang.mk.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промена текст содржина',
+    font_family_label: 'Font:',
     font_family: 'Смени фонт Фамилија',
     font_size: 'Изменифонт Големина',
     bold: 'Задебелен текст',

src/editor/locale/lang.ms.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Tukar isi teks',
+    font_family_label: 'Font:',
     font_family: 'Tukar Font Keluarga',
     font_size: 'Ubah Saiz Font',
     bold: 'Bold Teks',

src/editor/locale/lang.mt.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Test kontenut Bidla',
+    font_family_label: 'Font:',
     font_family: 'Bidla Font Familja',
     font_size: 'Change font size',
     bold: 'Bold Test',

src/editor/locale/lang.nl.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Recht',
     curve_segments: 'Gebogen',
     text_contents: 'Wijzig tekst',
+    font_family_label: 'Font:',
     font_family: 'Verander lettertype',
     font_size: 'Verander lettertype grootte',
     bold: 'Vet',

src/editor/locale/lang.no.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Endre tekst innholdet',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Endre skriftstørrelse',
     bold: 'Fet tekst',

src/editor/locale/lang.pl.js

@@ -70,6 +70,7 @@ export default {
     straight_segments: 'Prosty',
     curve_segments: 'Zaokrąglony',
     text_contents: 'Zmień text',
+    font_family_label: 'Font:',
     font_family: 'Zmień krój czcionki',
     font_size: 'Zmień rozmiar czcionki',
     bold: 'Pogrubienie textu',

src/editor/locale/lang.pt-BR.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Reto',
     curve_segments: 'Curvo',
     text_contents: 'Mudar conteúdo do texto',
+    font_family_label: 'Font:',
     font_family: 'Mudar o estilo da fonte',
     font_size: 'Mudar o tamanho da fonte',
     bold: 'Negrito',

src/editor/locale/lang.pt-PT.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Alterar o conteúdo de texto',
+    font_family_label: 'Font:',
     font_family: 'Alterar fonte Família',
     font_size: 'Alterar tamanho de letra',
     bold: 'Bold Text',

src/editor/locale/lang.ro.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Drept',
     curve_segments: 'Curb',
     text_contents: 'Schimbarea conţinutului textului',
+    font_family_label: 'Font:',
     font_family: 'Modificare familie de fonturi',
     font_size: 'Schimbă dimensiunea fontului',
     bold: 'Text Îngroşat',

src/editor/locale/lang.ru.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Отрезок',
     curve_segments: 'Сплайн',
     text_contents: 'Изменить содержание текста',
+    font_family_label: 'Font:',
     font_family: 'Изменить семейство шрифтов',
     font_size: 'Изменить размер шрифта',
     bold: 'Жирный',

src/editor/locale/lang.sk.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Rovný',
     curve_segments: 'Krivka',
     text_contents: 'Zmeniť text',
+    font_family_label: 'Font:',
     font_family: 'Zmeniť font',
     font_size: 'Zmeniť veľkosť písma',
     bold: 'Tučné',

src/editor/locale/lang.sl.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Raven odsek',
     curve_segments: 'Ukrivljen odsek',
     text_contents: 'Spremeni besedilo',
+    font_family_label: 'Font:',
     font_family: 'Spremeni tip pisave',
     font_size: 'Spremeni velikost pisave',
     bold: 'Krepko',

src/editor/locale/lang.sq.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Text contents Ndryshimi',
+    font_family_label: 'Font:',
     font_family: 'Ndryshimi Font Family',
     font_size: 'Ndryshimi Font Size',
     bold: 'Bold Text',

src/editor/locale/lang.sr.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Промена садржаја текстуалне',
+    font_family_label: 'Font:',
     font_family: 'Цханге фонт породицу',
     font_size: 'Цханге фонт сизе',
     bold: 'Подебљан текст',

src/editor/locale/lang.sv.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Ändra textinnehållet',
+    font_family_label: 'Font:',
     font_family: 'Ändra Typsnitt',
     font_size: 'Ändra textstorlek',
     bold: 'Fet text',

src/editor/locale/lang.sw.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change Nakala contents',
+    font_family_label: 'Font:',
     font_family: 'Change font Family',
     font_size: 'Change font Size',
     bold: 'Bold Nakala',

src/editor/locale/lang.test.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Change text contents',
+    font_family_label: 'Font:',
     font_family: 'Change Font Family',
     font_size: 'Change Font Size',
     bold: 'Bold Text',

src/editor/locale/lang.th.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'เปลี่ยนเนื้อหาข้อความ',
+    font_family_label: 'Font:',
     font_family: 'ครอบครัว Change Font',
     font_size: 'เปลี่ยนขนาดตัวอักษร',
     bold: 'ข้อความตัวหนา',

src/editor/locale/lang.tl.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Baguhin ang mga nilalaman ng teksto',
+    font_family_label: 'Font:',
     font_family: 'Baguhin ang Pamilya ng Font',
     font_size: 'Baguhin ang Laki ng Font',
     bold: 'Bold Text',

src/editor/locale/lang.tr.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Değiştirmek metin içeriği',
+    font_family_label: 'Font:',
     font_family: 'Font değiştir Aile',
     font_size: 'Change font size',
     bold: 'Kalın Yazı',

src/editor/locale/lang.uk.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Зміна змісту тексту',
+    font_family_label: 'Font:',
     font_family: 'Зміни Сімейство шрифтів',
     font_size: 'Змінити розмір шрифту',
     bold: 'Товстий текст',

src/editor/locale/lang.vi.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'Thay đổi nội dung văn bản',
+    font_family_label: 'Font:',
     font_family: 'Thay đổi Font Gia đình',
     font_size: 'Thay đổi cỡ chữ',
     bold: 'Bold Text',

src/editor/locale/lang.yi.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: 'ענדערן טעקסט אינהאַלט',
+    font_family_label: 'Font:',
     font_family: 'ענדערן פאָנט פאַמילי',
     font_size: 'בייטן פאָנט גרייס',
     bold: 'דרייסט טעקסט',

src/editor/locale/lang.zh-CN.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: '直线',
     curve_segments: '曲线',
     text_contents: '更改文本内容',
+    font_family_label: 'Font:',
     font_family: '更改字体样式',
     font_size: '更改字体大小',
     bold: '粗体',

src/editor/locale/lang.zh-HK.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: 'Straight',
     curve_segments: 'Curve',
     text_contents: '更改文字内容',
+    font_family_label: 'Font:',
     font_family: '更改字体家族',
     font_size: '更改字体大小',
     bold: '粗体',

src/editor/locale/lang.zh-TW.js

@@ -69,6 +69,7 @@ export default {
     straight_segments: '直線',
     curve_segments: '曲線',
     text_contents: '更改文字內容',
+    font_family_label: 'Font:',
     font_family: '更改字體',
     font_size: '更改字體大小',
     bold: '粗體',

src/editor/panels/BottomPanel.js

@@ -184,7 +184,7 @@ class BottomPanel {
         <se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
         <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
-        <se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
+        <se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
           options="&#8212;,...,- -,- .,- .."
           values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">     
         </se-select>

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>
+          <se-text id="selLayerLabel" text="layers.move_elems_to"></se-text>
-          <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
+          <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));

src/editor/panels/TopPanel.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* globals seAlert */
 
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";
@@ -894,11 +895,8 @@ class TopPanel {
           <se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
-          <se-select id="tool_align_relative" label="relative to:" 
+          <se-select id="tool_align_relative" label="tools.relativeTo" 
-            options="${i18next.t('tools.selected_objects')},
+            options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
-                ${i18next.t('tools.largest_object')},
-                ${i18next.t('tools.smallest_object')},
-                ${i18next.t('tools.page')}"
             values="selected largest smallest page"></se-list-item>
           </se-select>
         </div> <!-- multiselected_panel -->
@@ -938,18 +936,7 @@ class TopPanel {
         <div class="text_panel">
           <se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
           <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
-          <se-select id="tool_font_family" label="Font:"
+          <se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"></select>
-            options="${i18next.t('properties.serif')},
-                     ${i18next.t('properties.sans_serif')},
-                     ${i18next.t('properties.cursive')},
-                     ${i18next.t('properties.fantasy')},
-                     ${i18next.t('properties.monospace')},
-                     ${i18next.t('properties.courier')},
-                     ${i18next.t('properties.helvetica')},
-                     ${i18next.t('properties.times')}"
-            values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"
-          >
-          </select>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size" src="fontsize.svg"></se-spin-input>
         </div>
         <div class="text_panel">
@@ -971,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>
@@ -982,7 +969,7 @@ class TopPanel {
           <div class="tool_sep"></div>
           <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label"></se-spin-input>
           <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label"></se-spin-input>
-          <se-select id="seg_type" title="${i18next.t('tools.seg_type')}" label="" options="${i18next.t('properties.straight_segments')}, ${i18next.t('properties.curve_segments')}" values="4 6"></se-select>
+          <se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4 6"></se-select>
           <se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
           <se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
           <se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
@@ -999,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));