diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js
index 1272a7c2..66844a1a 100644
--- a/src/editor/components/sePalette.js
+++ b/src/editor/components/sePalette.js
@@ -1,5 +1,4 @@
/* eslint-disable max-len */
-/* gl#bals svgEditor */
const palette = [
// Todo: Make into configuration item?
'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
@@ -78,8 +77,7 @@ template.innerHTML = `
}
}
-
+
@@ -127,6 +125,35 @@ export class SEPalette extends HTMLElement {
});
}
+ /**
+ * @function init
+ * @param {any} name
+ * @returns {void}
+ */
+ init (i18next) {
+ this.setAttribute('ui-palette_info', i18next.t('ui.palette_info'));
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return [ 'ui-palette_info' ];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ let node;
+ if (name === 'ui-palette_info') {
+ node = this._shadowRoot.querySelector('#palette_holder');
+ node.setAttribute('title', newValue);
+ }
+ }
/**
* @function connectedCallback
* @returns {void}
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 34191440..0e46d1be 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -215,6 +215,7 @@ class BottomPanel {
`;
this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('palette').addEventListener('change', this.handlePalette.bind(this));
+ $id('palette').init(i18next);
const { curConfig } = this.editor.configObj;
$id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color }));
$id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color }));