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 */
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js';
import { t } from '../locale.js';
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
@ -673,7 +674,7 @@ export class SeColorPicker extends HTMLElement {
*/
init (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
@ -696,7 +697,7 @@ export class SeColorPicker extends HTMLElement {
this.$logo.setAttribute('src', newValue);
break;
case 'label':
this.setAttribute('title', newValue);
this.setAttribute('title', t(newValue));
break;
case 'type':
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
*/
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) {
if (oldValue === newValue) return;
switch (name) {
case 'title':
this.$dropdown.setAttribute('title', `${t(newValue)}`);
break;
case 'label':
this.$label.textContent = t(newValue);
break;
@ -74,6 +77,21 @@ export class SeList extends HTMLElement {
break;
}
}
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
/**
* @function get
* @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 title0 = svgEditor.i18next.t(`${name}:contextTools.0.title`);
const label1 = svgEditor.i18next.t(`${name}:contextTools.1.label`);
const title1 = svgEditor.i18next.t(`${name}:contextTools.1.title`);
const label2 = svgEditor.i18next.t(`${name}:contextTools.2.label`);
const title2 = svgEditor.i18next.t(`${name}:contextTools.2.title`);
const label3 = svgEditor.i18next.t(`${name}:contextTools.3.label`);
const title3 = svgEditor.i18next.t(`${name}:contextTools.3.title`);
const label0 = `${name}:contextTools.0.label`;
const title0 = `${name}:contextTools.0.title`;
const label1 = `${name}:contextTools.1.label`;
const title1 = `${name}:contextTools.1.title`;
const label2 = `${name}:contextTools.2.label`;
const title2 = `${name}:contextTools.2.title`;
const label3 = `${name}:contextTools.3.label`;
const title3 = `${name}:contextTools.3.title`;
// Add the context panel and its handler(s)
const panelTemplate = document.createElement("template");
// 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_middle: 'Align the text in middle',
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',
serif: '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="content">${i18next.t('tools.fit_to_all')}</div>
</se-zoom>
<se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('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="fill_color" src="${imgPath}/fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" label="properties.stroke_color" type="stroke">
</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-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
<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="properties.stroke_style" label="" width="22px" height="22px">
<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="${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"
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"
@ -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"
height="22px"></img></se-list-item>
</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"
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"
@ -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"
height="22px"></img></se-list-item>
</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>
<se-palette id="palette"></se-palette>
</div>

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

@ -867,10 +867,10 @@ class TopPanel {
</div>
<div class="selected_panel">
<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 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"
title="properties.angle"></se-spin-input>
<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>
</div>
<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 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>
</div>
<!-- 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_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-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="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>
@ -928,49 +928,49 @@ class TopPanel {
</se-list>
</div> <!-- multiselected_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 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 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>
</div> <!-- rect_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 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>
</div>
<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 class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></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="properties.cy_label"></se-spin-input>
</div>
<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 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 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>
</div>
<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 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>
</div>
<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 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 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 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>
</div>
<div class="text_panel">
@ -998,7 +998,7 @@ class TopPanel {
<input id="text" type="text" size="35" />
<div class="container_panel">
<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 class="use_panel">
<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>
<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 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>
<select id="seg_type" title="${i18next.t('tools.seg_type')}">
<option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>