github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#41 The look and alignment of stroke size and stroke style should be consistent with the rest of the bottom bar.

Browse Source
This commit is contained in:
Agriya Dev5
2021-01-08 16:24:58 +05:30
parent a8034afdb4
commit 9139a70aa3
2 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/editor/components/seList.js
View File

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

6
src/editor/index.html
View File

@@ -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>