From 61957b7d4e375f7a62bf2df70be2efa8d4d031a5 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Sat, 22 May 2021 11:37:56 +0530
Subject: [PATCH] #102 components i18n new approach changes

---
 src/editor/components/seColorPicker.js | 16 +++++++++++++---
 src/editor/panels/BottomPanel.js       |  2 ++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 9fe6f888..10d2aad0 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-/* gl#bals svgEditor */
 import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
 import PaintBox from './PaintBox.js';
 
@@ -643,7 +642,7 @@ div.jGraduate_Slider img {
   </style>
   <div id="picker">
       <img src="./images/logo.svg" alt="icon" id="logo">
-      <label for="color" title="#svgEditor.i18next.t('config.change_xxx_color')}" id="label"></label>
+      <label for="color" title="" id="label"></label>
       <div id="block">
       </div>
   </div>
@@ -669,12 +668,20 @@ export class SeColorPicker extends HTMLElement {
     this.$picker = this._shadowRoot.getElementById('picker');
     this.$color_picker = this._shadowRoot.getElementById('color_picker');
   }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+   init (i18next) {
+    this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
+  }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'src', 'type' ];
+    return [ 'label', 'src', 'type', 'config-change_xxx_color' ];
   }
   /**
    * @function attributeChangedCallback
@@ -695,6 +702,9 @@ export class SeColorPicker extends HTMLElement {
     case 'type':
       this.$label.setAttribute('title', 'config.pick_paint_opavity');
       break;
+    case 'config-change_xxx_color':
+      this.$label.setAttribute('title', newValue);
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 0e46d1be..ad7e521b 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -227,6 +227,8 @@ class BottomPanel {
     $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
     $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
+    $id('fill_color').init(i18next);
+    $id('stroke_color').init(i18next);
   }
   /**
   * @type {module}