surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS Animations

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -5,7 +5,8 @@ import {
import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '../CImgTitle/index'
import { CImgTitle } from '@/components/CImgTitle'
import { CImgPoster } from '@/components/CImgPoster'
import { CTitle } from '@/components/CTitle/index'
import { tools } from '@store/Modules/tools'
import { shared_consts } from '@/common/shared_vuejs'
@@ -17,6 +18,7 @@ import { CMyPageIntro } from '@src/components/CMyPageIntro'
import { CEventsCalendar } from '@src/components/CEventsCalendar'
import { CMyEditor } from '@src/components/CMyEditor'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import { CSelectImage } from '@src/components/CSelectImage'
import { CSelectColor } from '@src/components/CSelectColor'
import { CSelectFontSize } from '@src/components/CSelectFontSize'
@@ -33,7 +35,7 @@ export default defineComponent({
components: {
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster
},
emits: ['saveElem'],
props: {
@@ -234,12 +236,26 @@ export default defineComponent({
}
})
}
} else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
(props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
myel.value.image = myval
}
modifElem()
}
function showAnimation() {
return (myel.value.type === shared_consts.ELEMTYPE.IMAGE)
|| (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE)
|| (myel.value.type === shared_consts.ELEMTYPE.TEXT)
|| (myel.value.type === shared_consts.ELEMTYPE.HTML)
|| (myel.value.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS)
}
function updateElem(myvalue: any) {
myel.value = myvalue
console.log('updateElem', myvalue)
if (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE) {
myel.value.container = myvalue
}
modifElem()
}
@@ -276,6 +292,7 @@ export default defineComponent({
delRecCard,
saveCard,
updateElem,
showAnimation,
}
},

250
src/components/CMyEditElem/CMyEditElem.vue
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"