CSS Animations

This commit is contained in:
Surya Paolo
2022-11-18 18:54:30 +01:00
parent 495abc33be
commit a56ee80fbb
30 changed files with 1131 additions and 251 deletions

View File

@@ -69,26 +69,6 @@
>
</q-btn>
</q-bar>
<div class="row">
<q-input
label="Width:"
@update:model-value="modifElem"
v-model="myel.widthimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Height:"
@update:model-value="modifElem"
v-model="myel.heightimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div class="justify-center row q-ma-xs">
<q-btn
dense
@@ -113,6 +93,26 @@
>
</q-btn>
</div>
<div class="row">
<q-input
label="Width:"
@update:model-value="modifElem"
v-model="myel.widthimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Height:"
@update:model-value="modifElem"
v-model="myel.heightimg"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div class="row">
<q-select
@@ -129,6 +129,20 @@
map-options
>
</q-select>
<q-select
v-if="enableEdit"
rounded
outlined
v-model="myel.vertalign"
:options="tools.SelectListVertAlign"
@update:model-value="modifElem"
dense
label="Vert Allinea"
style="min-width: 100px"
emit-value
map-options
>
</q-select>
<q-select
v-if="enableEdit"
rounded
@@ -169,6 +183,21 @@
</q-input>
</div>
<q-select
v-if="enableEdit && showAnimation"
rounded
style="min-width: 150px"
outlined
v-model="myel.class_anim"
:options="tools.SelectListAnimation"
@update:model-value="modifElem"
dense
label="Animazione"
emit-value
map-options
>
</q-select>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div v-if="enableEdit">
<q-input
@@ -221,17 +250,6 @@
</q-btn>
</q-bar>
<CSelectImage
:title="tools.getTitleGall()"
:directory="tools.getDirectoryGall(myvalue, 'imgcards')"
:imgGall="[myvalue]"
:edit="true"
:canModify="true"
:isInModif="true"
@update:imgGall="updateElem"
@showandsave="Savedb">
</CSelectImage>
<CMyFieldRec
title="Immagine:"
table="imgcards"
@@ -368,15 +386,18 @@
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div v-if="enableEdit">
<q-input
label="Img"
class="fa-border"
<CMyFieldRec
title="Immagine:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem(false)"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</q-input>
</CMyFieldRec>
<q-input
label="Title"
@@ -387,6 +408,155 @@
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Sottotitolo"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.container2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div v-if="enableEdit">
<q-input
label="Velocità"
style="max-width: 100px"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.speed"
type="number"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyFieldRec
title="Immagine:"
table="myelems"
:id="myel._id"
:rec="myel"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<CMyFieldRec
title="Logo:"
table="myelems"
:id="myel._id"
:rec="myel"
field="container3"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
>
</CMyFieldRec>
<div class="row">
<q-input
label="Lunghezza Logo:"
@update:model-value="modifElem"
v-model="myel.width"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Altezza Logo:"
@update:model-value="modifElem"
v-model="myel.height"
filled
dense
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<q-input
label="Titolo"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.container"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-select
v-if="enableEdit"
rounded
style="min-width: 150px"
outlined
v-model="myel.class_anim"
:options="tools.SelectListAnimation"
@update:model-value="modifElem"
dense
label="Animazione Titolo"
emit-value
map-options
>
</q-select>
<CSelectColor
style="min-width: 100px"
v-model="myel.color"
@update:model-value="modifElem"
title="Col Titolo"
>
</CSelectColor>
<q-input
label="Sottotitolo"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.container2"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CSelectColor
style="min-width: 100px"
v-model="myel.colorsub"
@update:model-value="modifElem"
title="Col Sottotitolo"
>
</CSelectColor>
</div>
<q-select
v-if="enableEdit"
rounded
style="min-width: 150px"
outlined
v-model="myel.class_anim2"
:options="tools.SelectListAnimation"
@update:model-value="modifElem"
dense
label="Animaz SottoTitolo"
emit-value
map-options
>
</q-select>
<div class="row">
<q-input
label="Classe Title"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.class4"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
label="Classe SubTitle"
class="fa-border"
@update:model-value="modifElem"
v-model="myel.class3"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
@@ -416,7 +586,7 @@
<q-input
label="NomeFile Img:"
@update:model-value="modifElem"
v-model="myel.container"
v-model="myel.image"
filled
dense
v-on:keyup.enter="saveElem"
@@ -427,7 +597,7 @@
table="myelems"
:id="myel._id"
:rec="myel"
field="container"
field="image"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"