|
@@ -1,9 +1,9 @@
|
|
<template>
|
|
<template>
|
|
<div class="edit-panel" :class="{ closed: !isOpen }">
|
|
<div class="edit-panel" :class="{ closed: !isOpen }">
|
|
- <div class="title">Text Properties</div>
|
|
|
|
|
|
+ <div class="title">{{ $t('editorPanel.textProp') }}</div>
|
|
<div class="edit-container">
|
|
<div class="edit-container">
|
|
<div class="color">
|
|
<div class="color">
|
|
- <div class="color-title">Color</div>
|
|
|
|
|
|
+ <div class="color-title">{{ $t('color') }}</div>
|
|
<div class="colors-container">
|
|
<div class="colors-container">
|
|
<!-- <span class="cell-container">
|
|
<!-- <span class="cell-container">
|
|
<span class="cell-outer" :class="{ active: property.color === '#FFFFFF' }" @click="setActiveToolColor('#FFFFFF')">
|
|
<span class="cell-outer" :class="{ active: property.color === '#FFFFFF' }" @click="setActiveToolColor('#FFFFFF')">
|
|
@@ -28,7 +28,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="opacity">
|
|
<div class="opacity">
|
|
- <div class="opacity-title">Opacity</div>
|
|
|
|
|
|
+ <div class="opacity-title">{{ $t('opacity') }}</div>
|
|
<div class="width-tool">
|
|
<div class="width-tool">
|
|
<n-slider v-model:value="property.opacity" :tooltip="false" :step="1" :max="100" :min="0" class="width-slider">
|
|
<n-slider v-model:value="property.opacity" :tooltip="false" :step="1" :max="100" :min="0" class="width-slider">
|
|
<template #thumb>
|
|
<template #thumb>
|
|
@@ -48,7 +48,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
<div class="text">
|
|
- <div class="text-title">Text Style</div>
|
|
|
|
|
|
+ <div class="text-title">{{ $t('editorPanel.textStyle') }}</div>
|
|
<select v-model="property.fontFamily" class="text-family">
|
|
<select v-model="property.fontFamily" class="text-family">
|
|
<option value="Helvetica">Helvetica</option>
|
|
<option value="Helvetica">Helvetica</option>
|
|
<option value="Courier">Courier</option>
|
|
<option value="Courier">Courier</option>
|
|
@@ -56,19 +56,19 @@
|
|
</select>
|
|
</select>
|
|
<div class="content-block">
|
|
<div class="content-block">
|
|
<select v-model="property.fontStyle" class="font-family-select">
|
|
<select v-model="property.fontStyle" class="font-family-select">
|
|
- <option value="0">Regular</option>
|
|
|
|
- <option value="1">Bold</option>
|
|
|
|
- <option value="3">BoldOblique</option>
|
|
|
|
- <option value="2">Oblique</option>
|
|
|
|
|
|
+ <option value="0">{{ $t('regular') }}</option>
|
|
|
|
+ <option value="1">{{ $t('bold') }}</option>
|
|
|
|
+ <option value="3">{{ $t('boldOblique') }}</option>
|
|
|
|
+ <option value="2">{{ $t('oblique') }}</option>
|
|
</select>
|
|
</select>
|
|
<select v-model="property.fontSize" class="font-size-select">
|
|
<select v-model="property.fontSize" class="font-size-select">
|
|
<option :value="property.fontSize" style="display: none;">{{ property.fontSize }}</option>
|
|
<option :value="property.fontSize" style="display: none;">{{ property.fontSize }}</option>
|
|
- <option value="12">12</option>
|
|
|
|
- <option value="14">14</option>
|
|
|
|
- <option value="16">16</option>
|
|
|
|
- <option value="20">20</option>
|
|
|
|
- <option value="24">24</option>
|
|
|
|
- <option value="28">28</option>
|
|
|
|
|
|
+ <option value="12">12 pt</option>
|
|
|
|
+ <option value="14">14 pt</option>
|
|
|
|
+ <option value="16">16 pt</option>
|
|
|
|
+ <option value="20">20 pt</option>
|
|
|
|
+ <option value="24">24 pt</option>
|
|
|
|
+ <option value="28">28 pt</option>
|
|
</select>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="text-align">
|
|
<div class="text-align">
|