From c60c5847a0133a8e4f0a28cfc87865ef263246db Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Mon, 30 Aug 2021 20:06:59 +0530
Subject: [PATCH] #631 translate changes

---
 src/editor/components/seColorPicker.js        |  5 +-
 src/editor/components/seList.js               | 20 +++++++-
 .../extensions/ext-polystar/ext-polystar.js   | 16 +++---
 src/editor/locale/lang.en.js                  | 16 ++++++
 src/editor/panels/BottomPanel.js              | 14 +++---
 src/editor/panels/TopPanel.js                 | 50 +++++++++----------
 6 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 8aab6862..7f147c5a 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
 import PaintBox from './PaintBox.js';
+import { t } from '../locale.js';
 
 const template = document.createElement('template');
 // eslint-disable-next-line no-unsanitized/property
@@ -673,7 +674,7 @@ export class SeColorPicker extends HTMLElement {
    */
   init (i18next) {
     this.i18next = i18next;
-    this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
+    this.setAttribute('config-change_xxx_color', t('config.change_xxx_color'));
   }
   /**
    * @function observedAttributes
@@ -696,7 +697,7 @@ export class SeColorPicker extends HTMLElement {
       this.$logo.setAttribute('src', newValue);
       break;
     case 'label':
-      this.setAttribute('title', newValue);
+      this.setAttribute('title', t(newValue));
       break;
     case 'type':
       this.$label.setAttribute('title', 'config.pick_paint_opavity');
diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 7da9426b..e36a19ab 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -46,7 +46,7 @@ export class SeList extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'width', 'height' ];
+    return [ 'label', 'width', 'height', 'title' ];
   }
 
   /**
@@ -59,6 +59,9 @@ export class SeList extends HTMLElement {
   attributeChangedCallback (name, oldValue, newValue) {
     if (oldValue === newValue) return;
     switch (name) {
+    case 'title':
+      this.$dropdown.setAttribute('title', `${t(newValue)}`);
+      break;
     case 'label':
       this.$label.textContent = t(newValue);
       break;
@@ -74,6 +77,21 @@ export class SeList extends HTMLElement {
       break;
     }
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get title () {
+    return this.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set title (value) {
+    this.setAttribute('title', value);
+  }
   /**
    * @function get
    * @returns {any}
diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js
index 97a3eed4..f6d1ffd9 100644
--- a/src/editor/extensions/ext-polystar/ext-polystar.js
+++ b/src/editor/extensions/ext-polystar/ext-polystar.js
@@ -110,14 +110,14 @@ export default {
           }
         });
 
-        const label0 = svgEditor.i18next.t(`${name}:contextTools.0.label`);
-        const title0 = svgEditor.i18next.t(`${name}:contextTools.0.title`);
-        const label1 = svgEditor.i18next.t(`${name}:contextTools.1.label`);
-        const title1 = svgEditor.i18next.t(`${name}:contextTools.1.title`);
-        const label2 = svgEditor.i18next.t(`${name}:contextTools.2.label`);
-        const title2 = svgEditor.i18next.t(`${name}:contextTools.2.title`);
-        const label3 = svgEditor.i18next.t(`${name}:contextTools.3.label`);
-        const title3 = svgEditor.i18next.t(`${name}:contextTools.3.title`);
+        const label0 = `${name}:contextTools.0.label`;
+        const title0 = `${name}:contextTools.0.title`;
+        const label1 = `${name}:contextTools.1.label`;
+        const title1 = `${name}:contextTools.1.title`;
+        const label2 = `${name}:contextTools.2.label`;
+        const title2 = `${name}:contextTools.2.title`;
+        const label3 = `${name}:contextTools.3.label`;
+        const title3 = `${name}:contextTools.3.title`;
         // Add the context panel and its handler(s)
         const panelTemplate = document.createElement("template");
         // eslint-disable-next-line no-unsanitized/property
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js
index d996a40b..c9d05b41 100644
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -78,6 +78,22 @@ export default {
     text_anchor_start: 'Align the text in start',
     text_anchor_middle: 'Align the text in middle',
     text_anchor_end: 'Align the text in end',
+    r_label: 'r',
+    x_label: 'x',
+    y_label: 'y',
+    x1_label: 'x1',
+    y1_label: 'y1',
+    x2_label: 'x2',
+    y2_label: 'y2',
+    rx_label: 'rx',
+    ry_label: 'ry',
+    cx_label: 'cx',
+    cy_label: 'cy',
+    w_label: 'w',
+    h_label: 'h',
+    id_label: 'id',
+    class_label: 'class',
+    label: 'label',
     class: 'Element class',
     serif: 'Serif',
     sans_serif: 'Sans-serif',
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 4fd14c87..2ead1d6d 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -182,18 +182,18 @@ class BottomPanel {
           <div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
           <div value="content">${i18next.t('tools.fit_to_all')}</div>
         </se-zoom>
-        <se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
+        <se-colorpicker id="fill_color" src="${imgPath}/fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" label="properties.stroke_color" type="stroke">
         </se-colorpicker>
-        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
-        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
+        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
+        <se-list id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px">
           <se-list-item value="none">&#8212;</se-list-item>
           <se-list-item value="2,2">...</se-list-item>
           <se-list-item value="5,5">- -</se-list-item>
           <se-list-item value="5,2,2,2">- .</se-list-item>
           <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
         </se-list>
-        <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
+        <se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
           <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
               height="22px"></img></se-list-item>
           <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
@@ -201,7 +201,7 @@ class BottomPanel {
           <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
               height="22px"></img></se-list-item>
         </se-list>
-        <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="22px">
+        <se-list id="stroke_linecap" title="properties.linecap_butt" label="" width="22px" height="22px">
           <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
               height="22px"></img></se-list-item>
           <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
@@ -209,7 +209,7 @@ class BottomPanel {
           <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg"
               height="22px"></img></se-list-item>
         </se-list>
-        <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
+        <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity"
           src="${imgPath}/opacity.svg"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div>
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 73eddc51..4543fd56 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -867,10 +867,10 @@ class TopPanel {
         </div>
         <div class="selected_panel">
           <div class="tool_sep"></div>
-          <se-input id="elem_id" data-attr="id" size="10" label="id" title="properties.id"></se-input>
+          <se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
         </div>
         <div class="selected_panel">
-          <se-input id="elem_class" data-attr="class" size="10" label="class" title="properties.class"></se-input>
+          <se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class"></se-input>
           <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
             title="properties.angle"></se-spin-input>
           <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
@@ -897,9 +897,9 @@ class TopPanel {
           </se-list>
         </div>
         <div class="xy_panel">
-          <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="properties.pos_x">
+          <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label" title="properties.pos_x">
           </se-spin-input>
-          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="properties.pos_y">
+          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label" title="properties.pos_y">
           </se-spin-input>
         </div>
         <!-- Buttons when multiple elements are selected -->
@@ -920,7 +920,7 @@ class TopPanel {
           <se-button id="tool_align_top" title="tools.align_top" src="${imgPath}/align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button>
-          <se-list id="tool_align_relative" label="relative to:">
+          <se-list id="tool_align_relative" label="tools.relativeTo">
             <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
             <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
             <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
@@ -928,49 +928,49 @@ class TopPanel {
           </se-list>
         </div> <!-- multiselected_panel -->
         <div class="rect_panel">
-            <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="properties.rect_width">
+            <se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label" title="properties.rect_width">
             </se-spin-input>
-            <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="properties.rect_height">
+            <se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label" title="properties.rect_height">
             </se-spin-input>
-          <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
+            <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
             data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
         </div> <!-- rect_panel -->
         <div class="image_panel">
-            <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="properties.image_width">
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label" title="properties.image_width">
             </se-spin-input>
-            <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
+            <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
               title="properties.image_height"></se-spin-input>
         </div>
         <div class="image_panel">
-            <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> 
+            <se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input> 
         </div>
         <div class="circle_panel">
-            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
-            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input>
+            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
+            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
         </div>
         <div class="circle_panel">
-            <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
+            <se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
         </div>
         <div class="ellipse_panel">
-            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="cx">
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="properties.cx_label">
             </se-spin-input>
-            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="cy">
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="properties.cy_label">
             </se-spin-input>
         </div>
         <div class="ellipse_panel">
-            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="rx">
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="properties.rx_label">
             </se-spin-input>
-            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="ry">
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="properties.ry_label">
             </se-spin-input>
         </div>
         <div class="line_panel">
-            <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="x1">
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
             </se-spin-input>
-            <se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="y1">
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label">
             </se-spin-input>
-            <se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="x2">
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label">
             </se-spin-input>
-            <se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="y2">
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label">
             </se-spin-input>
         </div>
         <div class="text_panel">
@@ -998,7 +998,7 @@ class TopPanel {
         <input id="text" type="text" size="35" />
         <div class="container_panel">
           <div class="tool_sep"></div>
-          <se-input id="g_title" data-attr="title" size="8" label="label"></se-input> 
+          <se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input> 
         </div> <!-- container_panel -->
         <div class="use_panel">
           <se-button id="tool_unlink_use" title="tools.tool_unlink_use"
@@ -1021,9 +1021,9 @@ class TopPanel {
           <se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed>
           </se-button>
           <div class="tool_sep"></div>
-          <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="x:">
+          <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="y:">
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
           </se-spin-input>
           <select id="seg_type" title="${i18next.t('tools.seg_type')}">
             <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>