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

#631 translate changes

master
agriyadev5 2021-08-30 20:06:59 +05:30
parent 7fc2c93693
commit c60c5847a0
6 changed files with 78 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/editor/components/seColorPicker.js
View File

@ -1,6 +1,7 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js'; import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js'; import PaintBox from './PaintBox.js';
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
@ -673,7 +674,7 @@ export class SeColorPicker extends HTMLElement {
*/ */
init (i18next) { init (i18next) {
this.i18next = i18next; this.i18next = i18next;
this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color')); this.setAttribute('config-change_xxx_color', t('config.change_xxx_color'));
} }
/** /**
* @function observedAttributes * @function observedAttributes
@ -696,7 +697,7 @@ export class SeColorPicker extends HTMLElement {
this.$logo.setAttribute('src', newValue); this.$logo.setAttribute('src', newValue);
break; break;
case 'label': case 'label':
this.setAttribute('title', newValue); this.setAttribute('title', t(newValue));
break; break;
case 'type': case 'type':
this.$label.setAttribute('title', 'config.pick_paint_opavity'); this.$label.setAttribute('title', 'config.pick_paint_opavity');

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

@ -46,7 +46,7 @@ export class SeList extends HTMLElement {
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'label', 'width', 'height' ]; return [ 'label', 'width', 'height', 'title' ];
} }
/** /**
@ -59,6 +59,9 @@ export class SeList extends HTMLElement {
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'title':
this.$dropdown.setAttribute('title', `${t(newValue)}`);
break;
case 'label': case 'label':
this.$label.textContent = t(newValue); this.$label.textContent = t(newValue);
break; break;
@ -74,6 +77,21 @@ export class SeList extends HTMLElement {
break; break;
} }
} }
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
/** /**
* @function get * @function get
* @returns {any} * @returns {any}

16
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -110,14 +110,14 @@ export default {
} }
}); });
const label0 = svgEditor.i18next.t(`${name}:contextTools.0.label`); const label0 = `${name}:contextTools.0.label`;
const title0 = svgEditor.i18next.t(`${name}:contextTools.0.title`); const title0 = `${name}:contextTools.0.title`;
const label1 = svgEditor.i18next.t(`${name}:contextTools.1.label`); const label1 = `${name}:contextTools.1.label`;
const title1 = svgEditor.i18next.t(`${name}:contextTools.1.title`); const title1 = `${name}:contextTools.1.title`;
const label2 = svgEditor.i18next.t(`${name}:contextTools.2.label`); const label2 = `${name}:contextTools.2.label`;
const title2 = svgEditor.i18next.t(`${name}:contextTools.2.title`); const title2 = `${name}:contextTools.2.title`;
const label3 = svgEditor.i18next.t(`${name}:contextTools.3.label`); const label3 = `${name}:contextTools.3.label`;
const title3 = svgEditor.i18next.t(`${name}:contextTools.3.title`); const title3 = `${name}:contextTools.3.title`;
// Add the context panel and its handler(s) // Add the context panel and its handler(s)
const panelTemplate = document.createElement("template"); const panelTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property

16
src/editor/locale/lang.en.js
View File

@ -78,6 +78,22 @@ export default {
text_anchor_start: 'Align the text in start', text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle', text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end', text_anchor_end: 'Align the text in end',
r_label: 'r',
x_label: 'x',
y_label: 'y',
x1_label: 'x1',
y1_label: 'y1',
x2_label: 'x2',
y2_label: 'y2',
rx_label: 'rx',
ry_label: 'ry',
cx_label: 'cx',
cy_label: 'cy',
w_label: 'w',
h_label: 'h',
id_label: 'id',
class_label: 'class',
label: 'label',
class: 'Element class', class: 'Element class',
serif: 'Serif', serif: 'Serif',
sans_serif: 'Sans-serif', sans_serif: 'Sans-serif',

14
src/editor/panels/BottomPanel.js
View File

@ -182,18 +182,18 @@ class BottomPanel {
<div value="layer">${i18next.t('tools.fit_to_layer_content')}</div> <div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
<div value="content">${i18next.t('tools.fit_to_all')}</div> <div value="content">${i18next.t('tools.fit_to_all')}</div>
</se-zoom> </se-zoom>
<se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker> <se-colorpicker id="fill_color" src="${imgPath}/fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke"> <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" label="properties.stroke_color" type="stroke">
</se-colorpicker> </se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input> <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"> <se-list id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px">
<se-list-item value="none">&#8212;</se-list-item> <se-list-item value="none">&#8212;</se-list-item>
<se-list-item value="2,2">...</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,5">- -</se-list-item>
<se-list-item value="5,2,2,2">- .</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-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list> </se-list>
<se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px"> <se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
<se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg" <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
height="22px"></img></se-list-item> height="22px"></img></se-list-item>
<se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg" <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
@ -201,7 +201,7 @@ class BottomPanel {
<se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg" <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
height="22px"></img></se-list-item> height="22px"></img></se-list-item>
</se-list> </se-list>
<se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="22px"> <se-list id="stroke_linecap" title="properties.linecap_butt" label="" width="22px" height="22px">
<se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg" <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
height="22px"></img></se-list-item> height="22px"></img></se-list-item>
<se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg" <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
@ -209,7 +209,7 @@ class BottomPanel {
<se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg" <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg"
height="22px"></img></se-list-item> height="22px"></img></se-list-item>
</se-list> </se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}" <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity"
src="${imgPath}/opacity.svg"></se-spin-input> src="${imgPath}/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette> <se-palette id="palette"></se-palette>
</div> </div>

48
src/editor/panels/TopPanel.js
View File

@ -867,10 +867,10 @@ class TopPanel {
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="id" title="properties.id"></se-input> <se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="class" title="properties.class"></se-input> <se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class"></se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg" <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
title="properties.angle"></se-spin-input> title="properties.angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg" <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
@ -897,9 +897,9 @@ class TopPanel {
</se-list> </se-list>
</div> </div>
<div class="xy_panel"> <div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="properties.pos_x"> <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label" title="properties.pos_x">
</se-spin-input> </se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="properties.pos_y"> <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label" title="properties.pos_y">
</se-spin-input> </se-spin-input>
</div> </div>
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
@ -920,7 +920,7 @@ class TopPanel {
<se-button id="tool_align_top" title="tools.align_top" src="${imgPath}/align_top.svg"></se-button> <se-button id="tool_align_top" title="tools.align_top" src="${imgPath}/align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button> <se-button id="tool_align_middle" title="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button> <se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button>
<se-list id="tool_align_relative" label="relative to:"> <se-list id="tool_align_relative" label="tools.relativeTo">
<se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item> <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
<se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item> <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
<se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item> <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
@ -928,49 +928,49 @@ class TopPanel {
</se-list> </se-list>
</div> <!-- multiselected_panel --> </div> <!-- multiselected_panel -->
<div class="rect_panel"> <div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="properties.rect_width"> <se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label" title="properties.rect_width">
</se-spin-input> </se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="properties.rect_height"> <se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label" title="properties.rect_height">
</se-spin-input> </se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius" <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input> data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel --> </div> <!-- rect_panel -->
<div class="image_panel"> <div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="properties.image_width"> <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label" title="properties.image_width">
</se-spin-input> </se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h" <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
title="properties.image_height"></se-spin-input> title="properties.image_height"></se-spin-input>
</div> </div>
<div class="image_panel"> <div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> <se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
</div> </div>
<div class="circle_panel"> <div class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input> <se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input> <se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
</div> </div>
<div class="circle_panel"> <div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input> <se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
</div> </div>
<div class="ellipse_panel"> <div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="cx"> <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="properties.cx_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="cy"> <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="properties.cy_label">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="ellipse_panel"> <div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="rx"> <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="properties.rx_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="ry"> <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="properties.ry_label">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="line_panel"> <div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="x1"> <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="y1"> <se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="x2"> <se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="y2"> <se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="text_panel"> <div class="text_panel">
@ -998,7 +998,7 @@ class TopPanel {
<input id="text" type="text" size="35" /> <input id="text" type="text" size="35" />
<div class="container_panel"> <div class="container_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="label"></se-input> <se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
</div> <!-- container_panel --> </div> <!-- container_panel -->
<div class="use_panel"> <div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" <se-button id="tool_unlink_use" title="tools.tool_unlink_use"
@ -1021,9 +1021,9 @@ class TopPanel {
<se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed> <se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed>
</se-button> </se-button>
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="x:"> <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label">
</se-spin-input> </se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="y:"> <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
</se-spin-input> </se-spin-input>
<select id="seg_type" title="${i18next.t('tools.seg_type')}"> <select id="seg_type" title="${i18next.t('tools.seg_type')}">
<option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option> <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>