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] #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>