diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index 07b104cf..f26f829e 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -4,3 +4,4 @@ import './seExplorerButton.js';
import './seDropdown.js';
import './seInput.js';
import './seSpinInput.js';
+import './sePalette.js';
diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js
new file mode 100644
index 00000000..16ae9a1a
--- /dev/null
+++ b/src/editor/components/sePalette.js
@@ -0,0 +1,110 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/CenteredStrip.js';
+
+const palette = [
+ // Todo: Make into configuration item?
+ '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
+ '#ff0000', '#ff7f00', '#ffff00', '#7fff00',
+ '#00ff00', '#00ff7f', '#00ffff', '#007fff',
+ '#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
+ '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00',
+ '#007f00', '#007f3f', '#007f7f', '#003f7f',
+ '#00007f', '#3f007f', '#7f007f', '#7f003f',
+ '#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa',
+ '#aaffaa', '#aaffd4', '#aaffff', '#aad4ff',
+ '#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'
+];
+
+const template = document.createElement('template');
+template.innerHTML = `
+
+
+
+
+
+`;
+
+/**
+ * @class SEPalette
+ */
+export class SEPalette extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this._shadowRoot.appendChild(template.content.cloneNode(true));
+ this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
+ palette.forEach((rgb) => {
+ const newDiv = document.createElement('div');
+ newDiv.classList.add('square');
+ newDiv.style.backgroundColor = rgb;
+ newDiv.dataset.rgb = rgb;
+ this.$strip.appendChild(newDiv);
+ });
+ }
+
+ /**
+ * @function connectedCallback
+ * @returns {void}
+ */
+ connectedCallback () {
+ this.$strip.addEventListener('click', (e) => {
+ e.preventDefault();
+ console.log(e);
+ this.dispatchEvent(this.$event);
+ });
+ }
+}
+
+// Register
+customElements.define('se-palette', SEPalette);
+
+/* #palette_holder {
+ overflow: hidden;
+ margin-top: 5px;
+ padding: 5px;
+ position: absolute;
+ right: 15px;
+ height: 16px;
+ background: #f0f0f0;
+ border-radius: 3px;
+ z-index: 2;
+
+ #palette {
+ float: left;
+ width: 632px;
+ height: 16px;
+}
+
+ $('.palette_item').mousedown(function (evt) {
+ // shift key or right click for stroke
+ const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
+ let color = $(this).data('rgb');
+ let paint;
+
+ // Webkit-based browsers returned 'initial' here for no stroke
+ if (color === 'none' || color === 'transparent' || color === 'initial') {
+ color = 'none';
+ paint = new $.jGraduate.Paint();
+ } else {
+ paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+ }
+
+ paintBox[picker].setPaint(paint);
+ svgCanvas.setColor(picker, color);
+
+ if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
+ svgCanvas.setPaintOpacity(picker, 1.0);
+ }
+ updateToolButtonState();
+ }).bind('contextmenu', function (e) { e.preventDefault(); });
+
+*/
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index e04e8ed1..9f7ed67b 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -60,7 +60,6 @@ export class SESpinInput extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
- console.log(name, newValue);
if (oldValue === newValue) return;
switch (name) {
case 'src':
@@ -177,27 +176,3 @@ export class SESpinInput extends HTMLElement {
// Register
customElements.define('se-spin-input', SESpinInput);
-
-/* TO DO
- Call back for fontsize
- function stepFontSize (elem, step) {
- const origVal = Number(elem.value);
- const sugVal = origVal + step;
- const increasing = sugVal >= origVal;
- if (step === 0) { return origVal; }
-
- if (origVal >= 24) {
- if (increasing) {
- return Math.round(origVal * 1.1);
- }
- return Math.round(origVal / 1.1);
- }
- if (origVal <= 1) {
- if (increasing) {
- return origVal * 2;
- }
- return origVal / 2;
- }
- return sugVal;
- }
- */
diff --git a/src/editor/images/fill.png b/src/editor/images/fill.png
deleted file mode 100644
index c785879d..00000000
Binary files a/src/editor/images/fill.png and /dev/null differ
diff --git a/src/editor/images/fill.svg b/src/editor/images/fill.svg
new file mode 100644
index 00000000..5a8b3760
--- /dev/null
+++ b/src/editor/images/fill.svg
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg
index d50deaf6..b548fe06 100644
--- a/src/editor/images/svg_edit_icons.svg
+++ b/src/editor/images/svg_edit_icons.svg
@@ -75,17 +75,6 @@
-
-
-
-