Skip to content

Commit 9bdafe8

Browse files
ctf0ctf0
committed
add trans for img editor btns
1 parent 7aa3f89 commit 9bdafe8

File tree

8 files changed

+337
-253
lines changed

8 files changed

+337
-253
lines changed

‎src/resources/assets/js/components/image/editor/controls.vue

+28-26
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@
88
:disabled="processing"
99
class="btn-plain"
1010
@click.stop="operations(item.op)">
11-
<span class="icon"><icon :name="processing ? 'spinner' : item.icon"
12-
:pulse="processing"/></span>
11+
<span class="icon">
12+
<icon :name="processing ? 'spinner' : item.icon"
13+
:pulse="processing"/>
14+
</span>
1315
</button>
1416
</div>
1517
</template>
@@ -27,51 +29,51 @@ export default {
2729
controlsList: [
2830
{
2931
trans: 'move',
30-
op: 'move',
31-
mode: 'move',
32-
icon: 'arrows'
32+
op : 'move',
33+
mode : 'move',
34+
icon : 'arrows'
3335
},
3436
{
3537
trans: 'crop',
36-
op: 'crop',
37-
mode: 'crop',
38-
icon: 'crop'
38+
op : 'crop',
39+
mode : 'crop',
40+
icon : 'crop'
3941
},
4042
{
4143
trans: 'crop_zoom_in',
42-
op: 'zoom-in',
43-
mode: null,
44-
icon: 'search-plus'
44+
op : 'zoom-in',
45+
mode : null,
46+
icon : 'search-plus'
4547
},
4648
{
4749
trans: 'crop_zoom_out',
48-
op: 'zoom-out',
49-
mode: null,
50-
icon: 'search-minus'
50+
op : 'zoom-out',
51+
mode : null,
52+
icon : 'search-minus'
5153
},
5254
{
5355
trans: 'crop_rotate_left',
54-
op: 'rotate-left',
55-
mode: null,
56-
icon: 'rotate-left'
56+
op : 'rotate-left',
57+
mode : null,
58+
icon : 'rotate-left'
5759
},
5860
{
5961
trans: 'crop_rotate_right',
60-
op: 'rotate-right',
61-
mode: null,
62-
icon: 'rotate-right'
62+
op : 'rotate-right',
63+
mode : null,
64+
icon : 'rotate-right'
6365
},
6466
{
6567
trans: 'crop_flip_horizontal',
66-
op: 'flip-horizontal',
67-
mode: null,
68-
icon: 'arrows-h'
68+
op : 'flip-horizontal',
69+
mode : null,
70+
icon : 'arrows-h'
6971
},
7072
{
7173
trans: 'crop_flip_vertical',
72-
op: 'flip-vertical',
73-
mode: null,
74-
icon: 'arrows-v'
74+
op : 'flip-vertical',
75+
mode : null,
76+
icon : 'arrows-v'
7577
}
7678
]
7779
}

‎src/resources/assets/js/components/image/editor/filters/controls.vue

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<template>
22
<div v-tippy="{arrow: true, theme: 'mm'}"
3-
:title="filterName">
3+
:title="getTitle(filterName)">
44
<section v-if="!isControlable">
55
<button v-tippy="{html: '#contentpopup2', interactive: true, reactive: true, trigger: 'click', theme: 'mm', arrow: true}"
66
:class="{'is-active': isUsed()}"
77
:disabled="processing"
88
class="btn-plain">
9-
<span class="icon"><icon :name="processing ? 'spinner' : icon"
10-
:pulse="processing"/></span>
9+
<span class="icon">
10+
<icon :name="processing ? 'spinner' : icon"
11+
:pulse="processing"/>
12+
</span>
1113
</button>
1214

1315
<div id="contentpopup2">
@@ -17,7 +19,9 @@
1719
class="level-item">
1820
<p class="heading is-marginless link"
1921
@click.stop="resetFilter()">
20-
<span class="icon"><icon name="times"/></span>
22+
<span class="icon">
23+
<icon name="times"/>
24+
</span>
2125
</p>
2226
</div>
2327
</transition>
@@ -53,10 +57,12 @@
5357
</template>
5458

5559
<script>
56-
import debounce from 'lodash/debounce'
60+
import debounce from 'lodash/debounce'
61+
import snakeCase from 'lodash/snakeCase'
5762
5863
export default {
5964
props: [
65+
'trans',
6066
'filterName',
6167
'icon',
6268
'max',
@@ -70,7 +76,7 @@ export default {
7076
],
7177
data() {
7278
return {
73-
range: 0,
79+
range : 0,
7480
wasReset: false
7581
}
7682
},
@@ -134,6 +140,9 @@ export default {
134140
this.$refs.range.style.setProperty('--length', perc)
135141
}
136142
},
143+
getTitle(str) {
144+
return this.trans(snakeCase(str))
145+
},
137146
update: debounce(function(val = null) {
138147
this.applyFilter(this.filterName, val)
139148
}, 500)

‎src/resources/assets/js/components/image/editor/filters/index.vue

+58-56
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:step="item.step"
88
:icon="item.icon"
99
:filter-name="item.filterName"
10+
:trans="trans"
1011
:reset="reset"
1112
:apply-filter="applyFilter"
1213
:processing="processing"
@@ -23,6 +24,7 @@ export default {
2324
},
2425
props: [
2526
'processing',
27+
'trans',
2628
'reset',
2729
'applyFilter',
2830
'camanFilters'
@@ -31,101 +33,101 @@ export default {
3133
return {
3234
filtersList: [
3335
{
34-
step: 1,
35-
min: -100,
36-
max: 100,
37-
icon: 'sun-o',
36+
step : 1,
37+
min : -100,
38+
max : 100,
39+
icon : 'sun-o',
3840
filterName: 'brightness'
3941
},
4042
{
41-
step: 1,
42-
min: -100,
43-
max: 100,
44-
icon: 'adjust',
43+
step : 1,
44+
min : -100,
45+
max : 100,
46+
icon : 'adjust',
4547
filterName: 'contrast'
4648
},
4749
{
48-
step: 1,
49-
min: -100,
50-
max: 100,
51-
icon: 'low-vision',
50+
step : 1,
51+
min : -100,
52+
max : 100,
53+
icon : 'low-vision',
5254
filterName: 'saturation'
5355
},
5456
{
55-
step: 1,
56-
min: -100,
57-
max: 100,
58-
icon: 'flash',
57+
step : 1,
58+
min : -100,
59+
max : 100,
60+
icon : 'flash',
5961
filterName: 'vibrance'
6062
},
6163
{
62-
step: 1,
63-
min: -100,
64-
max: 100,
65-
icon: 'thermometer-half',
64+
step : 1,
65+
min : -100,
66+
max : 100,
67+
icon : 'thermometer-half',
6668
filterName: 'exposure'
6769
},
6870
{
69-
step: 1,
70-
min: 0,
71-
max: 100,
72-
icon: 'eyedropper',
71+
step : 1,
72+
min : 0,
73+
max : 100,
74+
icon : 'eyedropper',
7375
filterName: 'hue'
7476
},
7577
{
76-
step: 1,
77-
min: 0,
78-
max: 100,
79-
icon: 'lemon-o',
78+
step : 1,
79+
min : 0,
80+
max : 100,
81+
icon : 'lemon-o',
8082
filterName: 'sepia'
8183
},
8284
{
83-
step: 0.1,
84-
min: 0,
85-
max: 10,
86-
icon: 'flask',
85+
step : 0.1,
86+
min : 0,
87+
max : 10,
88+
icon : 'flask',
8789
filterName: 'gamma'
8890
},
8991
{
90-
step: 1,
91-
min: 0,
92-
max: 100,
93-
icon: 'dot-circle-o',
92+
step : 1,
93+
min : 0,
94+
max : 100,
95+
icon : 'dot-circle-o',
9496
filterName: 'noise'
9597
},
9698
{
97-
step: 1,
98-
min: 0,
99-
max: 100,
100-
icon: 'scissors',
99+
step : 1,
100+
min : 0,
101+
max : 100,
102+
icon : 'scissors',
101103
filterName: 'clip'
102104
},
103105
{
104-
step: 1,
105-
min: 0,
106-
max: 100,
107-
icon: 'diamond',
106+
step : 1,
107+
min : 0,
108+
max : 100,
109+
icon : 'diamond',
108110
filterName: 'sharpen'
109111
},
110112
{
111-
step: 1,
112-
min: 0,
113-
max: 20,
114-
icon: 'glass',
113+
step : 1,
114+
min : 0,
115+
max : 20,
116+
icon : 'glass',
115117
filterName: 'stackBlur'
116118
},
117119
{
118-
step: null,
119-
min: null,
120-
max: null,
121-
icon: 'shield',
120+
step : null,
121+
min : null,
122+
max : null,
123+
icon : 'shield',
122124
filterName: 'greyscale'
123125
},
124126
{
125-
step: null,
126-
min: null,
127-
max: null,
128-
icon: 'cube',
127+
step : null,
128+
min : null,
129+
max : null,
130+
icon : 'cube',
129131
filterName: 'invert'
130132
}
131133
],

‎src/resources/assets/js/components/image/editor/filters/presets.vue

+11-5
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@
1313
v-tippy="{arrow: true, theme: 'mm'}"
1414
:disabled="processing"
1515
:class="{'is-active': isUsed(item)}"
16-
:title="item"
16+
:title="getTitle(item)"
1717
class="btn-plain"
1818
@click.stop="apply(item)">
1919
<span v-show="processing"
20-
class="icon is-small"><icon :pulse="processing"
21-
name="spinner"/></span>
20+
class="icon is-small">
21+
<icon :pulse="processing"
22+
name="spinner"/>
23+
</span>
2224
<span v-show="!processing">{{ truncate(item) }}</span>
2325
</button>
2426
</div>
@@ -27,8 +29,9 @@
2729
</template>
2830

2931
<script>
30-
import chunk from 'lodash/chunk'
32+
import chunk from 'lodash/chunk'
3133
import camelCase from 'lodash/camelCase'
34+
import snakeCase from 'lodash/snakeCase'
3235
3336
export default {
3437
props: [
@@ -74,7 +77,10 @@ export default {
7477
return this.camanFilters.hasOwnProperty(camelCase(name))
7578
},
7679
apply(name) {
77-
this.applyFilter(camelCase(name), null)
80+
return this.applyFilter(camelCase(name), null)
81+
},
82+
getTitle(str) {
83+
return this.trans(snakeCase(str))
7884
}
7985
}
8086
}

0 commit comments

Comments
 (0)