From 3a085e7b4d201be6b70ad0aec9e11dba717c775b Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Thu, 7 Jan 2021 21:40:04 +0530
Subject: [PATCH 1/2] Fixes #41: Alignment fixes in bottom bar

---
 src/editor/components/seList.js      | 5 ++++-
 src/editor/components/sePalette.js   | 2 +-
 src/editor/components/seSpinInput.js | 5 ++---
 src/editor/svgedit.css               | 7 ++++++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 66bbfd17..2b340c48 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -16,7 +16,7 @@ template.innerHTML = `
 }
 </style>
   <label>Label</label>
-  <elix-dropdown-list>
+  <elix-dropdown-list style="height:22px; width:22px">
     <slot></slot>
   </elix-dropdown-list>
   
@@ -35,6 +35,9 @@ export class SeList extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
     this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
     this.$label = this._shadowRoot.querySelector('label');
+    if(this.getAttribute('id') === 'tool_font_family') {
+      this.$dropdown.style.width = '66px';
+      }
   }
   /**
    * @function observedAttributes
diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js
index 4c1097ed..b51f4e59 100644
--- a/src/editor/components/sePalette.js
+++ b/src/editor/components/sePalette.js
@@ -24,7 +24,7 @@ template.innerHTML = `
   }
   </style>
   <div title="Click to change fill color, shift-click to change stroke color">
-    <elix-centered-strip style="width:300px">
+    <elix-centered-strip style="width:300px;padding:5px;background: #fff; border-radius: 5px;">
     </elix-centered-strip>
   </div>
 `;
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index d59c214b..1782865c 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -5,9 +5,8 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>
   img {
-    top: 2px;
-    left: 1px;
     position: relative;
+    margin:0 2px 0 0;
   }
   span {
     bottom: 1px;
@@ -19,7 +18,7 @@ template.innerHTML = `
   }
   elix-number-spin-box{
     width: 54px;
-    height: 25px;
+    height: 24px;
   }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" aria-labelledby="label" />
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 850421a3..1fe0e805 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -389,6 +389,7 @@ hr {
   min-height: 40px;
   border-bottom: none;
   overflow: auto;
+  right:2px;
 }
 
 #tools_top .tool_sep {
@@ -646,8 +647,12 @@ input[type=text] {
 #tools_bottom se-spin-input {
   float: left;
   vertical-align: middle;
+  display:flex;
+  align-items: center;
+}
+#tools_bottom elix-dropdown-list{
+  width:22px;
 }
-
 .bottom-icon {
   width: 22px;
 }

From 9139a70aa336ea4efe8c4a2f3a37ace8b634580b Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Fri, 8 Jan 2021 16:24:58 +0530
Subject: [PATCH 2/2] #41 The look and alignment of stroke size and stroke
 style should be consistent with the rest of the bottom bar.

---
 src/editor/components/seList.js | 43 +++++++++++++++++++++++++++++----
 src/editor/index.html           |  6 ++---
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 2b340c48..e305e6cd 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -16,7 +16,7 @@ template.innerHTML = `
 }
 </style>
   <label>Label</label>
-  <elix-dropdown-list style="height:22px; width:22px">
+  <elix-dropdown-list>
     <slot></slot>
   </elix-dropdown-list>
   
@@ -35,16 +35,13 @@ export class SeList extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
     this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
     this.$label = this._shadowRoot.querySelector('label');
-    if(this.getAttribute('id') === 'tool_font_family') {
-      this.$dropdown.style.width = '66px';
-      }
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['label'];
+    return ['label', 'width', 'height'];
   }
 
   /**
@@ -60,6 +57,12 @@ export class SeList extends HTMLElement {
     case 'label':
       this.$label.textContent = newValue;
       break;
+    case 'height':
+      this.$dropdown.style.height = newValue;
+      break;
+    case 'width':
+      this.$dropdown.style.width = newValue;
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -81,6 +84,36 @@ export class SeList extends HTMLElement {
   set label (value) {
     this.setAttribute('label', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get width () {
+    return this.getAttribute('width');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set width (value) {
+    this.setAttribute('width', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get height () {
+    return this.getAttribute('height');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set height (value) {
+    this.setAttribute('height', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}
diff --git a/src/editor/index.html b/src/editor/index.html
index 5592933f..89861a57 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -348,19 +348,19 @@
         <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
         <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
-        <se-list id="stroke_style" title="Change stroke dash style" label="">
+        <se-list id="stroke_style" title="Change stroke dash style" label="" width="22px" height="24px">
             <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="Linejoin: Miter" label="">
+        <se-list id="stroke_linejoin" title="Linejoin: Miter" label="" width="22px" height="24px">
           <se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
           <se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
           <se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>  
         </se-list>
-        <se-list id="stroke_linecap" title="Linecap: Butt" label="">
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="" width="22px" height="24px">
           <se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
           <se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
           <se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>