Merge pull request #61 from OptimistikSAS/issue/41

#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

@@ -40,7 +40,7 @@ export class SeList extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['label'];
+    return ['label', 'width', 'height'];
   }
 
   /**
@@ -56,6 +56,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}`);
@@ -77,6 +83,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}

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>
 `;

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" />

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>

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;
 }