Skip to content

Commit

Permalink
add trans for img editor btns
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctf0
ctf0 committed Oct 20, 2020
1 parent 7aa3f89 commit 9bdafe8
Show file tree
Hide file tree
Showing 8 changed files with 337 additions and 253 deletions.
54 changes: 28 additions & 26 deletions src/resources/assets/js/components/image/editor/controls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
:disabled="processing"
class="btn-plain"
@click.stop="operations(item.op)">
<span class="icon"><icon :name="processing ? 'spinner' : item.icon"
:pulse="processing"/></span>
<span class="icon">
<icon :name="processing ? 'spinner' : item.icon"
:pulse="processing"/>
</span>
</button>
</div>
</template>
Expand All @@ -27,51 +29,51 @@ export default {
controlsList: [
{
trans: 'move',
op: 'move',
mode: 'move',
icon: 'arrows'
op : 'move',
mode : 'move',
icon : 'arrows'
},
{
trans: 'crop',
op: 'crop',
mode: 'crop',
icon: 'crop'
op : 'crop',
mode : 'crop',
icon : 'crop'
},
{
trans: 'crop_zoom_in',
op: 'zoom-in',
mode: null,
icon: 'search-plus'
op : 'zoom-in',
mode : null,
icon : 'search-plus'
},
{
trans: 'crop_zoom_out',
op: 'zoom-out',
mode: null,
icon: 'search-minus'
op : 'zoom-out',
mode : null,
icon : 'search-minus'
},
{
trans: 'crop_rotate_left',
op: 'rotate-left',
mode: null,
icon: 'rotate-left'
op : 'rotate-left',
mode : null,
icon : 'rotate-left'
},
{
trans: 'crop_rotate_right',
op: 'rotate-right',
mode: null,
icon: 'rotate-right'
op : 'rotate-right',
mode : null,
icon : 'rotate-right'
},
{
trans: 'crop_flip_horizontal',
op: 'flip-horizontal',
mode: null,
icon: 'arrows-h'
op : 'flip-horizontal',
mode : null,
icon : 'arrows-h'
},
{
trans: 'crop_flip_vertical',
op: 'flip-vertical',
mode: null,
icon: 'arrows-v'
op : 'flip-vertical',
mode : null,
icon : 'arrows-v'
}
]
}
Expand Down
21 changes: 15 additions & 6 deletions src/resources/assets/js/components/image/editor/filters/controls.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<div v-tippy="{arrow: true, theme: 'mm'}"
:title="filterName">
:title="getTitle(filterName)">
<section v-if="!isControlable">
<button v-tippy="{html: '#contentpopup2', interactive: true, reactive: true, trigger: 'click', theme: 'mm', arrow: true}"
:class="{'is-active': isUsed()}"
:disabled="processing"
class="btn-plain">
<span class="icon"><icon :name="processing ? 'spinner' : icon"
:pulse="processing"/></span>
<span class="icon">
<icon :name="processing ? 'spinner' : icon"
:pulse="processing"/>
</span>
</button>

<div id="contentpopup2">
Expand All @@ -17,7 +19,9 @@
class="level-item">
<p class="heading is-marginless link"
@click.stop="resetFilter()">
<span class="icon"><icon name="times"/></span>
<span class="icon">
<icon name="times"/>
</span>
</p>
</div>
</transition>
Expand Down Expand Up @@ -53,10 +57,12 @@
</template>

<script>
import debounce from 'lodash/debounce'
import debounce from 'lodash/debounce'
import snakeCase from 'lodash/snakeCase'
export default {
props: [
'trans',
'filterName',
'icon',
'max',
Expand All @@ -70,7 +76,7 @@ export default {
],
data() {
return {
range: 0,
range : 0,
wasReset: false
}
},
Expand Down Expand Up @@ -134,6 +140,9 @@ export default {
this.$refs.range.style.setProperty('--length', perc)
}
},
getTitle(str) {
return this.trans(snakeCase(str))
},
update: debounce(function(val = null) {
this.applyFilter(this.filterName, val)
}, 500)
Expand Down
114 changes: 58 additions & 56 deletions src/resources/assets/js/components/image/editor/filters/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:step="item.step"
:icon="item.icon"
:filter-name="item.filterName"
:trans="trans"
:reset="reset"
:apply-filter="applyFilter"
:processing="processing"
Expand All @@ -23,6 +24,7 @@ export default {
},
props: [
'processing',
'trans',
'reset',
'applyFilter',
'camanFilters'
Expand All @@ -31,101 +33,101 @@ export default {
return {
filtersList: [
{
step: 1,
min: -100,
max: 100,
icon: 'sun-o',
step : 1,
min : -100,
max : 100,
icon : 'sun-o',
filterName: 'brightness'
},
{
step: 1,
min: -100,
max: 100,
icon: 'adjust',
step : 1,
min : -100,
max : 100,
icon : 'adjust',
filterName: 'contrast'
},
{
step: 1,
min: -100,
max: 100,
icon: 'low-vision',
step : 1,
min : -100,
max : 100,
icon : 'low-vision',
filterName: 'saturation'
},
{
step: 1,
min: -100,
max: 100,
icon: 'flash',
step : 1,
min : -100,
max : 100,
icon : 'flash',
filterName: 'vibrance'
},
{
step: 1,
min: -100,
max: 100,
icon: 'thermometer-half',
step : 1,
min : -100,
max : 100,
icon : 'thermometer-half',
filterName: 'exposure'
},
{
step: 1,
min: 0,
max: 100,
icon: 'eyedropper',
step : 1,
min : 0,
max : 100,
icon : 'eyedropper',
filterName: 'hue'
},
{
step: 1,
min: 0,
max: 100,
icon: 'lemon-o',
step : 1,
min : 0,
max : 100,
icon : 'lemon-o',
filterName: 'sepia'
},
{
step: 0.1,
min: 0,
max: 10,
icon: 'flask',
step : 0.1,
min : 0,
max : 10,
icon : 'flask',
filterName: 'gamma'
},
{
step: 1,
min: 0,
max: 100,
icon: 'dot-circle-o',
step : 1,
min : 0,
max : 100,
icon : 'dot-circle-o',
filterName: 'noise'
},
{
step: 1,
min: 0,
max: 100,
icon: 'scissors',
step : 1,
min : 0,
max : 100,
icon : 'scissors',
filterName: 'clip'
},
{
step: 1,
min: 0,
max: 100,
icon: 'diamond',
step : 1,
min : 0,
max : 100,
icon : 'diamond',
filterName: 'sharpen'
},
{
step: 1,
min: 0,
max: 20,
icon: 'glass',
step : 1,
min : 0,
max : 20,
icon : 'glass',
filterName: 'stackBlur'
},
{
step: null,
min: null,
max: null,
icon: 'shield',
step : null,
min : null,
max : null,
icon : 'shield',
filterName: 'greyscale'
},
{
step: null,
min: null,
max: null,
icon: 'cube',
step : null,
min : null,
max : null,
icon : 'cube',
filterName: 'invert'
}
],
Expand Down
16 changes: 11 additions & 5 deletions src/resources/assets/js/components/image/editor/filters/presets.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@
v-tippy="{arrow: true, theme: 'mm'}"
:disabled="processing"
:class="{'is-active': isUsed(item)}"
:title="item"
:title="getTitle(item)"
class="btn-plain"
@click.stop="apply(item)">
<span v-show="processing"
class="icon is-small"><icon :pulse="processing"
name="spinner"/></span>
class="icon is-small">
<icon :pulse="processing"
name="spinner"/>
</span>
<span v-show="!processing">{{ truncate(item) }}</span>
</button>
</div>
Expand All @@ -27,8 +29,9 @@
</template>

<script>
import chunk from 'lodash/chunk'
import chunk from 'lodash/chunk'
import camelCase from 'lodash/camelCase'
import snakeCase from 'lodash/snakeCase'
export default {
props: [
Expand Down Expand Up @@ -74,7 +77,10 @@ export default {
return this.camanFilters.hasOwnProperty(camelCase(name))
},
apply(name) {
this.applyFilter(camelCase(name), null)
return this.applyFilter(camelCase(name), null)
},
getTitle(str) {
return this.trans(snakeCase(str))
}
}
}
Expand Down
Loading

0 comments on commit 9bdafe8

Please sign in to comment.