aico-image-editor
Version:
Combine multiple image into and create single combined image
90 lines (88 loc) • 6.59 kB
HTML
<div x-data="colorSubTab">
<div class="block bg-transparent mb-0 shadow-none">
<div class="row">
<div class="col">
<div class="mb-3">
<div class="form-check form-switch form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="canvas-bg-color" name="canvas-bg-color"
x-model="shouldColorToCanvasBackground" @change="() => {
if(shouldColorToCanvasBackground) {
shouldColorToObjectBackground = false
}
}" />
<label class="form-check-label" for="canvas-bg-color" x-text="getTranslatedHTML('canvasBackgroundSwitchLabel')"></label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="object-bg-color" name="object-bg-color"
x-model="shouldColorToObjectBackground" @change="() => {
if(shouldColorToObjectBackground) {
shouldColorToCanvasBackground = false
}
}" />
<label class="form-check-label" for="object-bg-color" x-text="getTranslatedHTML('objectBackgroundSwitchLabel')"></label>
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-wrap">
<template x-for="(defaultColor,defaultColorIndex) in defaultColors" :key="defaultColor.id">
<a :id="'color-' + defaultColor.id" href="javascript:void(0)" class="btn editor-interface__color rounded-5 mb-2 border" :style="{'backgroundColor': defaultColor.color}"
@click="applyColor(defaultColor)"
:class="[activeColorObj?.id === defaultColor.id ? 'border-3 border-primary': '',
(defaultColor.id === 'defaultColor-transparent' && !shouldColorToCanvasBackground && !shouldColorToObjectBackground) ? 'inactiveblock': '']"></a>
</template>
<template x-for="(color,colorIndex) in colors" :key="color.id">
<a :id="'color-' + color.id" href="javascript:void(0)" class="btn editor-interface__color editor-interface__hover__remove rounded-5 mb-2 position-relative" :style="{'backgroundColor': color.color}"
@click="applyColor(color)" :class="activeColorObj?.id === color.id ? 'border-3 border-primary': ''">
<span @click="async() => {
await deleteFilesFromServer(color.id, 'colors', '');
removeColor(colorIndex)
}" class="editor-interface__remove cursor-pointer" style="right: -8px">
<i class="far fa-close"></i></span>
</a>
</template>
<a href="javascript:void(0)" class="btn editor-interface__color bg-gray-lighter rounded-5 position-relative"
x-show="$store.canvas.productId || $store.canvas.configuratorId"
x-data="tooltip" data-bs-toggle="tooltip" :title="getTranslatedHTML('addOwnColorTitle')"
@click="uploadNewColor($store.canvas.configuratorId)" x-bind="colortrigger">
<span class="triangle bottom small"></span>
<span class="bugano-plus-icon fa-lg text-gray-600 opacity-25"></span>
</a>
<button type="button" class="btn editor-interface__color position-relative"
@click="toggleColorPickerBlock()"
:class="isColorPickerBlockVisible ? 'bg-primary text-white':'bg-gray-lighter'"
x-data="tooltip"
data-bs-toggle="tooltip" :title="getTranslatedHTML('addColorTitle')">
<span class="triangle bottom small"></span>
<span class="fa-solid fa-palette fa-md"></span>
</button>
<button type="button" class="btn editor-interface__color position-relative" @click="openEyeDropper()"
x-data="tooltip" data-bs-toggle="tooltip" :title="getTranslatedHTML('chooseColorTitle')"
:class="isEyeDropperActive ? 'bg-primary text-white':'bg-gray-lighter'">
<span class="bugano-color-picker-icon fa-md"></span>
</button>
<button type="button" class="btn editor-interface__color position-relative border"
:class="async() => {
await $nextTick();
return activeColorObj.color && getTextBackgroundColorFromColor(activeColorObj.color) === '#ffffff' ? 'border':''
}"
@click="setTextBackgroundColor(activeColorObj.color)"
:style="backgroundBtnStyles"
:disabled="$store.canvas.isTextBackgroundButtonDisabled"
x-data="tooltip" data-bs-toggle="tooltip" :title="getTranslatedHTML('textUnderlayTitle')">
<span class="fa-md fa-solid fa-font"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="block bg-transparent position-relative mb-0 innerpopup-block mt-3"
:class="[isColorPickerBlockVisible ? 'visibleonmobile d-lg-block': 'd-lg-none']">
<span class="innerpopup-block__drag__handle d-lg-none" @click="hideColorPickerBlock()">
<a href="javascript:void(0)" class="innerpopup-block__drag__link"></a>
</span>
<color-picker datatemplateurl="./colorPicker.html" styles="global" shadow="true" key="2" eventname="textcolor"></color-picker>
</div>
</div>