Animations, Policy, Toolbar Colors

This commit is contained in:
Surya Paolo
2022-11-23 10:27:36 +01:00
parent 358bdd5d1e
commit 46bf74e9e2
48 changed files with 1852 additions and 630 deletions

View File

@@ -1,7 +1,8 @@
import { defineComponent, ref } from 'vue'
import { defineComponent, PropType, ref } from 'vue'
import { tools } from '@src/store/Modules/tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { IAnim } from '@src/model'
export default defineComponent({
name: 'CImgPoster',
@@ -46,15 +47,19 @@ export default defineComponent({
required: false,
default: 1
},
class_anim: {
type: String,
anim: {
type: Object as PropType<IAnim>,
required: false,
default: ''
default: () => {
return { name: '', clduration: '', cldelay: '' }
},
},
class_anim2: {
type: String,
anim2: {
type: Object as PropType<IAnim>,
required: false,
default: ''
default: () => {
return { name: '', clduration: '', cldelay: '' }
},
},
logo: String,
logoheight: String,

View File

@@ -23,12 +23,15 @@
: undefined
"
/>
<div :class="classTitle + ` ` + class_anim" :style="` color:` + colorTitle">
<div
:class="classTitle + ` ` + tools.getClassAnim(anim)"
:style="` color:` + colorTitle"
>
{{ title }}
</div>
<div
v-if="legendinside"
:class="classSubtitle + ` ` + class_anim2"
:class="classSubtitle + ` ` + tools.getClassAnim(anim2)"
:style="` color:` + colorSubtitle"
v-html="legendinside"
></div>

View File

@@ -73,6 +73,7 @@ export default defineComponent({
const animare = ref(0)
const slide = ref(0)
const slide2 = ref(0)
const tabCard = ref('card0')
const arrPages = ref([] as any[])
const disableSave = ref(true)
const enableEdit = ref(true)
@@ -295,6 +296,7 @@ export default defineComponent({
saveCard,
updateElem,
showAnimation,
tabCard,
}
},

View File

@@ -124,7 +124,7 @@
@update:model-value="modifElem"
dense
label="Allinea"
style="min-width: 100px"
style="min-width: 150px"
emit-value
map-options
>
@@ -138,7 +138,7 @@
@update:model-value="modifElem"
dense
label="Vert Allinea"
style="min-width: 100px"
style="min-width: 150px"
emit-value
map-options
>
@@ -146,7 +146,7 @@
<q-select
v-if="enableEdit"
rounded
style="min-width: 100px"
style="min-width: 150px"
outlined
v-model="myel.class"
:options="tools.SelectListClass"
@@ -160,7 +160,7 @@
<q-select
v-if="enableEdit && showFit"
rounded
style="min-width: 100px"
style="min-width: 150px"
outlined
v-model="myel.fit"
:options="tools.SelectListFit"
@@ -184,7 +184,7 @@
</div>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.class_anim"
v-model="myel.anim"
@update:model-value="modifElem"
>
</CSelectAnimation>
@@ -205,9 +205,16 @@
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
:class="myel.span ? '' : ''"
>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.anim2"
@update:model-value="modifElem"
label="Animaz Immagini"
>
</CSelectAnimation>
<div class="row">
<q-input
label="Classe Card:"
label="Classe Schede:"
@update:model-value="modifElem"
v-model="myel.class3"
filled
@@ -219,115 +226,140 @@
rounded
dense
color="primary"
label="Card"
label="Scheda"
icon="fas fa-plus"
@click="addNewCard"
>
</q-btn>
<div v-for="(rec, ind) in myel.listcards" :key="ind">
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Card {{ ind + 1 }}
<q-space />
<q-btn
icon="fas fa-trash-alt"
color="negative"
dense
flat
size="sm"
@click="delRecCard(rec._id, myel)"
<q-tabs
v-model="tabCard"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab
v-for="(rec, ind) in myel.listcards"
:key="ind"
:name="`card` + ind"
:label="`Scheda ` + (ind + 1)"
icon="fas fa-pencil-alt"
/>
</q-tabs>
<q-tab-panels v-model="tabCard" animated>
<q-tab-panel
v-for="(rec, ind) in myel.listcards"
:key="ind"
:name="`card` + ind"
>
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Card {{ ind + 1 }}
<q-space />
<q-btn
icon="fas fa-trash-alt"
color="negative"
dense
flat
size="sm"
@click="delRecCard(rec._id, myel)"
>
</q-btn>
</q-bar>
<CMyFieldRec
title="Immagine:"
table="imgcards"
:id="rec._id"
:rec="rec"
field="imagefile"
@update:model-value="modifElem"
@save="saveCard"
:canEdit="true"
:canModify="true"
:nosaveToDb="true"
:path="myel.path"
:fieldtype="costanti.FieldType.imgcard"
>
</q-btn>
</q-bar>
</CMyFieldRec>
<CMyFieldRec
title="Immagine:"
table="imgcards"
:id="rec._id"
:rec="rec"
field="imagefile"
@update:model-value="modifElem"
@save="saveCard"
:canEdit="true"
:canModify="true"
:nosaveToDb="true"
:path="myel.path"
:fieldtype="costanti.FieldType.imgcard"
>
</CMyFieldRec>
<div v-if="enableEdit" class="row">
<q-input
dense
style="min-width: 150px"
label="Titolo:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.alt"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
style="min-width: 150px"
label="Style:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.style"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CSelectColor
v-if="enableEdit"
style="min-width: 150px"
v-model="rec.color"
@update:model-value="modifElem"
title="Col Titolo"
>
</CSelectColor>
<CSelectFontSize
v-if="enableEdit"
style="min-width: 200px"
v-model="rec.size"
@update:model-value="modifElem"
title="Font Titolo"
>
</CSelectFontSize>
</div>
<CMyEditor
v-model:value="rec.content"
title="Contenuto:"
@keyup.enter.stop
:showButtons="false"
:canModify="true"
@update:value="modifElem"
@showandsave="saveElem"
>
</CMyEditor>
<q-input
label="Sottotitolo:"
class="fa-border"
dense
@update:model-value="modifElem"
v-model="rec.description"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div v-if="enableEdit" class="row">
<q-input
dense
style="min-width: 100px"
label="Titolo:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.alt"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<q-input
dense
style="min-width: 100px"
label="Style:"
class="fa-border"
@update:model-value="modifElem"
v-model="rec.style"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CSelectColor
v-if="enableEdit"
style="min-width: 100px"
v-model="rec.color"
v-model="rec.colorsub"
@update:model-value="modifElem"
title="Col Titolo"
title="Col Sottotitolo"
>
</CSelectColor>
<CSelectFontSize
v-if="enableEdit"
style="min-width: 100px"
v-model="rec.size"
@update:model-value="modifElem"
title="Font Titolo"
>
</CSelectFontSize>
</div>
<CMyEditor
v-model:value="rec.content"
title="Contenuto:"
@keyup.enter.stop
:showButtons="false"
:canModify="true"
@update:value="modifElem"
@showandsave="saveElem"
>
</CMyEditor>
<q-input
label="Sottotitolo:"
class="fa-border"
dense
@update:model-value="modifElem"
v-model="rec.description"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
</div>
<div v-if="enableEdit" class="row">
<CSelectColor
v-if="enableEdit"
v-model="rec.colorsub"
@update:model-value="modifElem"
title="Col Sottotitolo"
>
</CSelectColor>
</div>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
@@ -477,7 +509,7 @@
>
</q-input>
<CSelectColor
style="min-width: 100px"
style="min-width: 150px"
v-model="myel.color"
@update:model-value="modifElem"
title="Col Titolo"
@@ -493,20 +525,20 @@
>
</q-input>
<CSelectColor
style="min-width: 100px"
style="min-width: 150px"
v-model="myel.colorsub"
@update:model-value="modifElem"
title="Col Sottotitolo"
>
</CSelectColor>
</div>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.class_anim2"
@update:model-value="modifElem"
label="Animaz SottoTitolo"
>
</CSelectAnimation>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="myel.anim2"
@update:model-value="modifElem"
label="Animaz SottoTitolo"
>
</CSelectAnimation>
<div class="row">
<q-input
label="Classe Title"

View File

@@ -9,12 +9,24 @@
>
<div>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
{{ myel.container }}
</div>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
{{ myel.container }}
</div>
</transition>
</div>
<div
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
@@ -24,15 +36,23 @@
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div v-for="(rec, ind) in myel.listcards" :key="ind" >
<q-card :class="`my-card center_img bordered ` + myel.class3"
:style="rec.style">
<q-img :class="myel.class_anim" :src="tools.getImgFileByElem(myel, rec)" />
<q-card-section>
<div v-for="(rec, ind) in myel.listcards" :key="ind">
<q-card
:class="`my-card center_img bordered ` + myel.class3"
:style="rec.style"
>
<q-img
:class="tools.getClassAnim(myel.anim2)"
:src="tools.getImgFileByElem(myel, rec)"
/>
˛ <q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
{{ rec.alt }}
</div>
<div :class="`q-mt-sm q-mb-xs ` + myel.class_anim" v-html="rec.content"></div>
<div
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
v-html="rec.content"
></div>
<div
v-if="rec.description"
class="text-caption"
@@ -84,7 +104,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()+ ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CTitle
@@ -100,19 +126,26 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CImgTitle
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:legendinside="myel.container2"
>
</CImgTitle>
</div>
</div>
</div> <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -120,7 +153,7 @@
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:myheight="myel.heightimg"
:colorTitle="myel.color"
@@ -134,8 +167,8 @@
:logoheight="myel.height"
:logowidth="myel.width"
:fit="myel.fit"
:class_anim="myel.class_anim"
:class_anim2="myel.class_anim2"
:anim="myel.anim"
:anim2="myel.anim2"
>
</CImgPoster>
</div>
@@ -144,7 +177,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
v-html="myel.containerHtml"
></div>
@@ -153,7 +192,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
@@ -170,7 +215,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
@@ -201,7 +252,7 @@
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div style="color: gray;">Pagina: {{myel.container}}</div>
<div v-if="editOn" style="color: gray">Pagina: {{ myel.container }}</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
@@ -241,9 +292,7 @@
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<section
class="padding_gallery bg-white text-grey-10 text-center"
>
<section class="padding_gallery bg-white text-grey-10 text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
@@ -257,9 +306,12 @@
:fit="myel.fit"
:thumbnails="myel.parambool2"
infinite
:height="myel.heightimg ? myel.heightimg.toString() : tools.getheightgallery()"
:height="
myel.heightimg
? myel.heightimg.toString()
: tools.getheightgallery()
"
>
<q-carousel-slide
v-for="(rec, index) in myel.list"
:key="index"

View File

@@ -12,6 +12,7 @@ import MixinBase from '@/mixins/mixin-base'
export default defineComponent({
name: 'CMyFieldDb',
emits: ['save'],
props: {
title: {
type: String,
@@ -139,6 +140,11 @@ export default defineComponent({
if (newval !== valinitial)
setValDb($q, props.mykey, newval, props.type, props.serv, props.table, props.mysubkey, props.id, props.indrec, props.mysubsubkey, props.specialField)
}
function save(newval: any) {
emit('save', newval)
}
function withBorder() {
@@ -155,9 +161,9 @@ export default defineComponent({
if (props.mycol && props.mycol.name !== '') {
col.value = props.mycol
} else {
console.log('Tab = ', props.table, 'key=', props.mykey)
// console.log('Tab = ', props.table, 'key=', props.mykey, 'mycolProp', props.mycol)
col.value = fieldsTable.getColByTable(props.table, props.mykey)
console.log('MYCOL = ', col.value)
// console.log('MYCOL = ', col.value)
}
}
@@ -173,6 +179,7 @@ export default defineComponent({
row,
showandsel,
withBorder,
save,
}
},
})

View File

@@ -50,6 +50,7 @@
v-model:row="row"
minuteinterval="1"
@showandsave="showandsel"
@save="save"
>
</CMyPopupEdit>

View File

@@ -157,7 +157,7 @@ export default defineComponent({
else
mykey.value = props.field
}
console.log('table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
// console.log('### table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
}

View File

@@ -63,13 +63,22 @@ export default defineComponent({
const { t } = useI18n()
const globalStore = useGlobalStore()
const editOn = ref(false)
const editOn = computed({
get (): boolean {
return !!globalStore.editOn ? globalStore.editOn : false
},
set (value: boolean) {
return globalStore.editOn = value
}
})
const visuEditor = ref(false)
const addOn = ref(false)
const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
const selElem = ref(globalStore.selElem)
const site = ref(globalStore.site)
const myelems = computed(() => {
if (mypathin.value)
@@ -79,7 +88,7 @@ export default defineComponent({
})
function load() {
// console.log('load', mypathin.value)
console.log('load', mypathin.value)
if (mypathin.value !== '') {
globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
@@ -88,7 +97,6 @@ export default defineComponent({
}
if (tools.isManager()) {
editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
console.log('getcookie: ', editOn.value, mypathin.value)
}
}

View File

@@ -10,36 +10,28 @@
>
</q-toggle>
<q-toggle
v-if="tools.isManager()"
v-model="visuEditor"
color="green"
@update:model-value="changeVisuDrawer(mypathin, editOn)"
icon="fas fa-pencil-alt"
>
</q-toggle>
<q-drawer
v-model="visuEditor"
v-if="selElem && editOn"
show-if-above
:breakpoint="800"
side="right"
:width="350"
:breakpoint="700"
:width="tools.isMobile() ? 350 : 400"
elevated
>
<q-scroll-area class="fit">
<q-bar dense class="bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="visuEditor = false"
></q-btn>
</q-bar>
<CMyEditElem :myelem="selElem" :editOn="true" :path="rec.path">
</CMyEditElem>
</q-scroll-area>
<q-bar dense class="q-ma-xs bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
size="md"
color="white"
icon="close"
@click="visuEditor = false"
></q-btn>
</q-bar>
<CMyEditElem :myelem="selElem" :editOn="true" :path="rec.path">
</CMyEditElem>
</q-drawer>
<div class="q-ma-xs q-gutter-xs q-pa-xs">
@@ -77,11 +69,11 @@
<div v-for="(myelem, ind) in myelems" :key="ind">
<div>
<CMyElem
v-if="myelem.active || editOn"
v-if="(myelem.active || editOn) && !!rec.path"
:myelem="myelem"
:editOn="editOn"
:addOn="addOn"
:path="rec.path"
:path="!!rec.path ? rec.path : ''"
:selElem="selElem"
@selElemClick="selElemClick"
>
@@ -93,7 +85,7 @@
</div>
<div v-if="myelems.length === 0">
<CMyElem
v-if="editOn"
v-if="editOn && !!rec.path"
:myelem="myelemVoid"
:editOn="editOn"
:addOn="addOn"

View File

@@ -62,13 +62,13 @@ export default defineComponent({
const { t } = useI18n()
const globalStore = useGlobalStore()
const editOn = ref(false)
const visuEditor = ref(false)
const addOn = ref(false)
const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
const selElem = ref(globalStore.selElem)
const editOn = computed(() => globalStore.editOn)
const myelems = computed(() => {
if (mypathin.value)
@@ -86,10 +86,6 @@ export default defineComponent({
})
}
if (tools.isManager()) {
editOn.value = tools.getCookie('EDITPAGES', '0') === '-1' ? true : false
console.log('getcookie: ', editOn.value, mypathin.value)
}
}
watch(() => props.mypath, (to: string, from: string) => {

View File

@@ -1,51 +1,28 @@
<template>
<div>
<div v-if="mypathin && !!rec">
<q-toggle
v-if="tools.isManager()"
v-model="editOn"
color="green"
@update:model-value="changeVisuDrawer(mypathin, editOn)"
icon="fas fa-pencil-alt"
>
</q-toggle>
<q-toggle
v-if="tools.isManager()"
v-model="visuEditor"
color="green"
@update:model-value="changeVisuDrawer(mypathin, editOn)"
icon="fas fa-pencil-alt"
>
</q-toggle>
<q-drawer
v-model="visuEditor"
v-if="selElem && editOn"
side="right"
:width="350"
:breakpoint="700"
:width="tools.isMobile() ? 350 : 400"
:breakpoint="800"
elevated
style="position: absolute; top: 0; left: 0"
>
<q-scroll-area class="fit">
<q-bar dense class="bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="
visuEditor = false;
"
></q-btn>
</q-bar>
<CMyEditElem
:myelem="selElem"
:editOn="true"
:path="rec.path"
>
</CMyEditElem>
</q-scroll-area>
<q-bar dense class="q-ma-xs bg-primary text-white">
<q-toolbar-title> Editor </q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
@click="visuEditor = false"
></q-btn>
</q-bar>
<CMyEditElem :myelem="selElem" :editOn="editOn" :path="rec.path">
</CMyEditElem>
</q-drawer>
<div class="q-ma-xs q-gutter-xs q-pa-xs">
@@ -81,7 +58,6 @@
<div v-if="!!rec.content4" v-html="rec.content4"></div>
<div v-for="(myelem, ind) in myelems" :key="ind">
<CMyElem
v-if="myelem.active || editOn"
:myelem="myelem"
@@ -120,9 +96,6 @@
<CImgTitle v-if="img" :src="img" :title="title"> </CImgTitle>
</div>
<slot></slot>
<div v-if="!nofooter">
<LandingFooter></LandingFooter>
</div>
</div>
</div>
</div>

View File

@@ -464,7 +464,7 @@ export default defineComponent({
function SaveValueInt(newVal: any, valinitial: any) {
// console.log('SaveValueInt', newVal, valinitial)
console.log('SaveValueInt', newVal, valinitial)
if (isFieldDb()) {
savefield(newVal, valinitial, $q)
@@ -486,8 +486,8 @@ export default defineComponent({
}
}
emit('save', newVal, valinitial)
}
emit('save', newVal, valinitial)
}
function savefield(value: any, initialval: any, myq: any) {
@@ -763,6 +763,7 @@ export default defineComponent({
getTitleEditor,
t,
myrow,
shared_consts,
}
}
})

File diff suppressed because it is too large Load Diff

View File

@@ -1,17 +1,20 @@
import { defineComponent, onMounted, ref } from 'vue'
import { defineComponent, onMounted, PropType, ref } from 'vue'
import { tools } from '@src/store/Modules/tools'
import { shared_consts } from '@src/common/shared_vuejs'
import { emit } from 'process'
import { IAnim } from '@src/model'
export default defineComponent({
name: 'CSelectAnimation',
emits: ['update:modelValue'],
props: {
modelValue: {
type: String,
required: true,
default: '',
type: Object as PropType<IAnim | string | undefined>,
required: false,
default : () => {
return {name: '', clduration: '', cldelay: ''}
}
},
label: {
type: String,
@@ -23,27 +26,18 @@ export default defineComponent({
setup(props, { emit }) {
const myclass = ref('')
const animType = ref('')
const animSpeed = ref('')
const animDelay = ref('')
const myrec = ref(<IAnim>{name: '', clduration: '', cldelay: ''})
function updateClass() {
if (typeof props.modelValue === 'object') {
myrec.value = props.modelValue
}
let mycl = ''
myclass.value = 'animate__animated ' + animType.value + ' ' + animSpeed.value + ' ' + animDelay.value
emit('update:modelValue', myclass.value)
emit('update:modelValue', myrec.value)
}
function mounted() {
const myarr = props.modelValue.split(' ')
animType.value = tools.findFirstElemInCommon(tools.SelectListAnimation, myarr)
animSpeed.value = tools.findFirstElemInCommon(tools.SelectListSpeed, myarr)
animDelay.value = tools.findFirstElemInCommon(tools.SelectListDelay, myarr)
updateClass()
}
onMounted(mounted)
@@ -51,9 +45,7 @@ export default defineComponent({
return {
tools,
updateClass,
animType,
animSpeed,
animDelay,
myrec,
}
},

View File

@@ -1,11 +1,11 @@
<template>
<div>
<div v-if="!!myrec">
{{label}}
<q-select
rounded
style="min-width: 150px"
outlined
v-model="animType"
v-model="myrec.name"
:options="tools.SelectListAnimation"
@update:model-value="updateClass"
dense
@@ -19,7 +19,7 @@
rounded
style="min-width: 150px"
outlined
v-model="animSpeed"
v-model="myrec.clduration"
:options="tools.SelectListSpeed"
@update:model-value="updateClass"
dense
@@ -33,7 +33,7 @@
rounded
style="min-width: 150px"
outlined
v-model="animDelay"
v-model="myrec.cldelay"
:options="tools.SelectListDelay"
@update:model-value="updateClass"
dense

View File

@@ -86,6 +86,7 @@ export default defineComponent({
const isalreadyReg = ref(false)
const globalStore = useGlobalStore()
const site = computed(() => globalStore.site)
const signup = reactive(<ISignupOptions>{
email: process.env.TEST_EMAIL || '',
@@ -329,6 +330,7 @@ export default defineComponent({
showpolicy,
visubuttBOT,
isalreadyReg,
site,
}
},
})

View File

@@ -254,17 +254,18 @@
</q-toolbar>
<q-card-section class="inset-shadow">
<PagePolicy
owneremail="info@riso.app"
SiteName="Riso.app"
ownerDataName="RISO"
managerData="Paolo Arena"
includeData="recapiti (indirizzo email, telefono (facoltativo))"
url="riso.app"
lastdataupdate="12/03/2022"
country="Italia"
>
v-if="site.policy"
:owneremail="site.policy.owneremail"
:siteName="site.policy.siteName"
:ownerDataName="site.policy.ownerDataName"
:managerData="site.policy.managerData"
:includeData="site.policy.includeData"
:url="site.policy.url"
:lastdataupdate="site.policy.lastdataupdate"
:country="site.policy.country"
>
</PagePolicy>
</PagePolicy>
</q-card-section>
</q-card>
</q-dialog>

View File

@@ -6,9 +6,9 @@ $textcol_scuro: darkblue;
.landing__footer {
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
background: linear-gradient(180deg, rgb(6, 31, 92) 95%, #FFF);
padding-top: 4.5rem !important;
padding-bottom: 4.5rem !important;
background: linear-gradient(180deg, #061f5c 95%, #FFF);
padding-top: 3.5rem !important;
padding-bottom: 3.5rem !important;
padding-left: 1.25rem;
padding-right: 1.25rem;
color: #9f9f9f;
@@ -156,6 +156,18 @@ $textcol_scuro: darkblue;
color: #999;
letter-spacing: 0.125rem;
}
.mycontacts_email {
text-shadow: 0.125rem 0.125rem 0.125rem #555;
font-weight: bold;
color: #999;
}
.mycontacts_cell {
text-shadow: 0.125rem 0.125rem 0.125rem #555;
font-weight: bold;
color: #999;
font-size: 1.25rem;
}
.mycontacts_text {
font-size: 1rem;
@@ -170,6 +182,7 @@ $textcol_scuro: darkblue;
.footer_link:hover {
color:white;
cursor: pointer;
}
@@ -180,3 +193,8 @@ $textcol_scuro: darkblue;
.margin_buttons_footer > * {
margin: 4px 8px;
}
.mycontacts_address {
font-size: 1rem;
color: gray;
}

View File

@@ -1,4 +1,5 @@
import {
computed,
defineComponent, ref,
} from 'vue'
@@ -27,6 +28,16 @@ export default defineComponent({
const site = ref(globalStore.site)
const getBackColorText = computed(() => {
let mycol = ''
if (globalStore.site && globalStore.site.confpages?.col_bgfooter)
mycol = globalStore.site.confpages?.col_bgfooter
else
mycol = '#061f5c'
return 'linear-gradient(180deg, ' + mycol + ' 95%, #FFF)'
})
console.log('LandingFooter - INIT')
function TelegramSupport() {
@@ -76,6 +87,7 @@ export default defineComponent({
getarrValDb,
getValDb,
site,
getBackColorText,
}
},
})

View File

@@ -1,38 +1,92 @@
<template>
<div>
<section v-if="site" class="landing__footer">
<section v-if="site && site.contacts" class="landing__footer" :style="`background: `+ getBackColorText + `!important;`">
<div class="row justify-between items-start q-col-gutter-xs">
<div class="col-12 col-sm-4 ">
<div class="col-12 col-sm-4">
<!--<span v-html="t('homepage.footer.description')">-->
<!--</span>-->
<CFacebookFrame
myclass="text-center" :fbimage="getValDb('FBPAGE_IMG', false)"
:urlfbpage="getValDb('FBPAGE_FRAME', false)" :title="getValDb('FBPAGE_TITLE', false)">
v-if="getValDb('FBPAGE_IMG', false)"
myclass="text-center"
:fbimage="getValDb('FBPAGE_IMG', false)"
:urlfbpage="getValDb('FBPAGE_FRAME', false)"
:title="getValDb('FBPAGE_TITLE', false)"
>
</CFacebookFrame>
<div class=" q-my-md">
<div class="landing__footer-icons row flex-center margin_buttons">
<a v-if="!!site.contacts.facebook" :href="site.contacts.facebook" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>
<div class="">
<div v-if="!!site.contacts && !!site.contacts.address">
<p class="mycontacts_title q-mt-sm">
{{ $t('footer.titleaddress') }}
</p>
<p class="mycontacts_address">
{{ site.contacts.address }}
</p>
</div>
<a v-if="!!site.contacts.instagram" :href="site.contacts.instagram" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-instagram icon_contact links"> </i></a>
<div class="landing__footer-icons row flex-center margin_buttons">
<a
v-if="!!site.contacts.facebook"
:href="site.contacts.facebook"
target="_blank"
>
<i
aria-hidden="true"
class="q-icon fab fa-facebook-f icon_contact links"
>
</i
></a>
<a
v-if="!!site.contacts.instagram"
:href="site.contacts.instagram"
target="_blank"
>
<i
aria-hidden="true"
class="q-icon fab fa-instagram icon_contact links"
>
</i
></a>
<a v-if="!!TwitterPage()" :href="TwitterPage()" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-twitter icon_contact links"> </i></a>
<i
aria-hidden="true"
class="q-icon fab fa-twitter icon_contact links"
>
</i
></a>
<a v-if="!!TelegramSupport()" :href="TelegramSupport()" target="_blank">
<a
v-if="!!TelegramSupport()"
:href="TelegramSupport()"
target="_blank"
>
<span class="text-h5 text-white">Supporto Tecnico: </span>
<i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
<i
aria-hidden="true"
class="q-icon fab fa-telegram icon_contact links"
></i
></a>
<a v-if="!!ChatWhatsapp()" :href="ChatWhatsapp()" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>
<i
aria-hidden="true"
class="q-icon fab fa-whatsapp icon_contact links"
></i
></a>
<a v-if="!!Telegram_UsernameHttp()" :href="Telegram_UsernameHttp()" target="_blank">
<i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
<a
v-if="!!Telegram_UsernameHttp()"
:href="Telegram_UsernameHttp()"
target="_blank"
>
<i
aria-hidden="true"
class="q-icon fab fa-telegram icon_contact links"
></i
></a>
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
<!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
@@ -47,91 +101,154 @@
<div v-if="site.contacts.map" class="text-center">
<span v-html="getValDb('MAP_TITLE', false)"></span>
<br>
<a :href="site.contacts.map" target="_blank" class="footer_link">Apri Mappa</a>
<br />
<a :href="site.contacts.map" target="_blank" class="footer_link"
>Apri Mappa</a
>
</div>
<!--<div class="q-mt-xs copyrights">-->
<!--<p class="mycontacts_text" v-html="t('homepage.copyrights')"></p>-->
<!--</div>-->
</div>
<div class="col-12 col-sm-4">
<div class="text-center">
<p class="mycontacts_title q-mt-sm">{{ $t('homepage.titlecontatti') }}:</p>
<div class="text-center q-my-sm">
<div class="q-mt-xs mycontacts">
<p class="mycontacts_title">{{ $t('homepage.titlecontatti') }}</p>
<div class="mycontacts_text">
<i
v-if="site.contacts.email" aria-hidden="true"
class="q-icon fas fa-envelope q-mx-sm"></i>
<a :href="`mailto:` + site.contacts.email" class="links">{{
site.contacts.email
}}</a><br>
<div style="margin-bottom: 20px;"></div>
<div class="row margin_buttons_footer">
<div class="row justify-center margin_buttons_x">
<q-btn
v-if="site.contacts.cell"
fab-mini
icon="fas fa-phone"
color="blue-grey-6"
type="a"
size="sm"
target="__blank"
>
</q-btn>
&nbsp;&nbsp;
<div v-if="!!site.contacts.cell" class="mycontacts_cell">
{{ site.contacts.cell }}
</div>
</div>
<div class="row justify-center margin_buttons_x">
<q-btn
v-if="site.contacts.email"
fab-mini
icon="fas fa-envelope"
color="blue-grey-6"
type="a"
size="sm"
:href="tools.getemailto(site.contacts.email)"
target="__blank"
>
</q-btn>
&nbsp;&nbsp;
<a
class="mycontacts_email"
v-if="!!site.contacts.email"
:href="tools.getemailto(site.contacts.email)"
target="_blank"
>{{ site.contacts.email }}</a
><br />
</div>
<div v-if="!!site.contacts.info2" class="mycontacts_email">{{site.contacts.info2}}</div>
</div>
&nbsp;<br />
<div style="margin-bottom: 20px"></div>
<div
v-for="(rec, index) in getarrValDb('CONTACTS_EMAIL_CELL', false)"
v-for="(rec, index) in getarrValDb(
'CONTACTS_EMAIL_CELL',
false
)"
:key="index"
class="mycontacts_text margin_buttons_footer"
style="margin-bottom: 0;">
<div>
{{ rec.name }}: {{ rec.phone }}
</div>
style="margin-bottom: 0"
>
<div>{{ rec.name }}: {{ rec.phone }}</div>
<div>
<i
v-if="rec.email" aria-hidden="true"
class="q-icon fas fa-envelope q-ma-sm"></i> <a
:href="`mailto:`+ rec.email "
class="links">{{ rec.email }}</a>
v-if="rec.email"
aria-hidden="true"
class="q-icon fas fa-envelope q-ma-sm"
></i>
<a :href="`mailto:` + rec.email" class="links">{{
rec.email
}}</a>
</div>
<div class="row justify-center margin_buttons_footer">
<q-btn
v-if="rec.email" fab-mini icon="fas fa-envelope"
color="blue-grey-6" type="a"
v-if="rec.email"
fab-mini
icon="fas fa-envelope"
color="blue-grey-6"
type="a"
size="sm"
:href="tools.getemailto(rec.email)" target="__blank">
:href="tools.getemailto(rec.email)"
target="__blank"
>
</q-btn>
<q-btn
v-if="!!rec.wa && tools.getHttpForWhatsapp(rec.wa)" fab-mini
v-if="!!rec.wa && tools.getHttpForWhatsapp(rec.wa)"
fab-mini
icon="fab fa-whatsapp"
color="green" type="a"
color="green"
type="a"
size="sm"
:href="tools.getHttpForWhatsapp(rec.wa)" target="__blank">
:href="tools.getHttpForWhatsapp(rec.wa)"
target="__blank"
>
</q-btn>
<q-btn
v-if="tools.getHttpForTelegram(rec.usertelegram)" fab-mini
v-if="tools.getHttpForTelegram(rec.usertelegram)"
fab-mini
icon="fab fa-telegram"
color="blue" type="a"
color="blue"
type="a"
size="sm"
:href="tools.getHttpForTelegram(rec.usertelegram)" target="__blank">
:href="tools.getHttpForTelegram(rec.usertelegram)"
target="__blank"
>
</q-btn>
</div>
</div>
<span v-if="getValDb('CALL_WORKING_DAYS', false)"><br>orari per chiamate:<br>
<span v-html="getValDb('CALL_WORKING_DAYS', false)"></span></span>
<span v-if="getValDb('CALL_WORKING_DAYS', false)"
><br />orari per chiamate:<br />
<span v-html="getValDb('CALL_WORKING_DAYS', false)"></span
></span>
</div>
</div>
</div>
<FormNewsletter
v-if="static_data.functionality.SHOW_NEWSLETTER"
:idwebsite="tools.appid()"
:locale="toolsext.getLocale()">
:locale="toolsext.getLocale()"
>
</FormNewsletter>
<p class="text-center">
<router-link v-if="static_data.functionality.SHOW_ONLY_POLICY" to="/policy" custom v-slot="{ navigate }">
<span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">{{
$t('privacy_policy')
}}</span></router-link>
<router-link
v-if="site.policy && site.policy.show"
to="/policy"
custom
v-slot="{ navigate }"
>
<span
class="footer_link"
@click="navigate"
@keypress.enter="navigate"
role="link"
>{{ $t('privacy_policy') }}</span
></router-link
>
</p>
</div>
<div class="col-12 col-sm-4 q-pa-md">
@@ -140,17 +257,24 @@
</p>
<div v-for="(myitemmenu, ind) in static_data.routes" :key="ind">
<div v-if="myitemmenu.infooter && tools.visumenu(myitemmenu)">
<div v-if="myitemmenu.solotitle">
<span class="footer_link">{{ tools.getLabelByItem(myitemmenu) }}</span><br/>
<span class="footer_link">{{
tools.getLabelByItem(myitemmenu)
}}</span
><br />
</div>
<div v-else>
<router-link :to="myitemmenu.path" custom v-slot="{ navigate }">
<span
class="footer_link" @click="navigate" @keypress.enter="navigate"
role="link"><span
v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
{{ tools.getLabelByItem(myitemmenu) }}</span><br/>
<span
class="footer_link"
@click="navigate"
@keypress.enter="navigate"
role="link"
><span v-if="myitemmenu.level_child > 0"
>&nbsp;&nbsp;&nbsp;</span
>
{{ tools.getLabelByItem(myitemmenu) }}</span
><br />
</router-link>
</div>
</div>
@@ -158,13 +282,28 @@ class="footer_link" @click="navigate" @keypress.enter="navigate"
</div>
</div>
</section>
<q-page-sticky v-if="site.whatsapp_home" position="bottom-right" :offset="[18, 78]">
<q-page-sticky
v-if="site.whatsapp_home"
position="bottom-right"
:offset="[18, 78]"
>
<q-btn
fab icon="fab fa-whatsapp" color="green" type="a" :href="ChatWhatsapp()" target="__blank"
class="mybtn_sticky"/>
fab
icon="fab fa-whatsapp"
color="green"
type="a"
:href="ChatWhatsapp()"
target="__blank"
class="mybtn_sticky"
/>
</q-page-sticky>
<q-page-scroller position="bottom-right" :scroll-offset="850" :offset="[18, 18]" style="opacity: 0.3">
<q-btn fab icon="keyboard_arrow_up" color="accent"/>
<q-page-scroller
position="bottom-right"
:scroll-offset="850"
:offset="[18, 18]"
style="opacity: 0.3"
>
<q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</div>
</template>

View File

@@ -27,6 +27,8 @@ export default defineComponent({
const userStore = useUserStore()
const globalStore = useGlobalStore()
const site = computed(() => globalStore.site)
const { getMyUsername, Username } = MixinUsers()
function mounted() {
@@ -42,6 +44,7 @@ export default defineComponent({
getMyUsername,
Username,
tools,
site,
}
},

View File

@@ -1,6 +1,6 @@
<template>
<q-footer
v-if="tools.isUserOk()"
v-if="tools.isUserOk() && site"
class="bg-white small-screen-only"
bordered
>
@@ -14,6 +14,7 @@
indicator-color="transparent"
>
<q-route-tab
v-if="site.footer_mobile?.show_buttHome"
to="/"
class="mylabfooter"
:label="$t('tabdown.home')"
@@ -48,7 +49,7 @@
icon="fas fa-calendar-plus"
/>
<q-route-tab
v-if="static_data.functionality.ENABLE_VIEW_PROFILE"
v-if="site.footer_mobile.show_profile"
class="mylabfooter"
:label="$t('tabdown.profile')"
:to="`/my/`+getMyUsername()"

View File

@@ -61,6 +61,25 @@ export default defineComponent({
const globalStore = useGlobalStore()
const testStore = useTestStore()
const site = computed(() => globalStore.site)
const isfinishLoading = computed(() => globalStore.finishLoading)
const getClassColorHeader = computed(() => {
// if (tools.isTest()) return 'bg-light-blue'
// if (tools.isDebug()) return 'bg-info'
if (globalStore.site && globalStore.site.confpages?.col_toolbar)
return 'bg-' + globalStore.site.confpages?.col_toolbar
else
return 'bg-light-blue'
})
const getColorText = computed(() => {
if (globalStore.site && globalStore.site.confpages?.col_toolbar === 'white')
return 'black'
else
return 'white'
})
const data = ref({
registration: null,
updateExists: false,
@@ -461,11 +480,6 @@ export default defineComponent({
return null
}
function getClassColorHeader() {
if (tools.isTest()) return 'bg-light-blue'
if (tools.isDebug()) return 'bg-info'
return 'bg-light-blue'
}
function changecmd(value: any) {
console.log('changecmd', value)
@@ -527,6 +541,9 @@ export default defineComponent({
isUserNotAuth,
tools,
data,
site,
isfinishLoading,
getColorText,
}
},

View File

@@ -1,12 +1,13 @@
<template>
<div>
<q-header reveal elevated :class="getClassColorHeader()">
<q-header reveal elevated :class="getClassColorHeader" :style="`color: `+ getColorText + `;`">
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar">
<q-btn
flat
dense
@@ -156,7 +157,7 @@
side="left"
bordered
show-if-above
:breakpoint="500"
:breakpoint="800"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
@@ -171,7 +172,7 @@
side="right" elevated>
<q-btn
class="absolute-top-right" style="margin-right: 10px; color: white;"
class="absolute-top-right" :style="`margin-right: 10px; color:`+ getColorText + `;`"
dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
</q-btn>
<div v-if="tools.isLogged()" class="text-weight-bold text-cart">Carrello
@@ -187,7 +188,7 @@
style="height: 150px" alt="section page">
</q-img>
<div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px;">
<div class="text-center q-ma-xs boldhigh text-white text-h7">Area Personale</div>
<div :class="`text-center q-ma-xs boldhigh text-`+ getColorText + ` text-h7`">Area Personale</div>
<q-avatar size="80px" class="center_img q-ma-md">
<q-img fit="cover" :src="getMyImg()" :alt="Username()" img-class="imgprofile" height="80px"/>
@@ -196,7 +197,7 @@
<!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->
<q-btn
class="absolute-top-right" style="margin-right: 10px; color: white;"
class="absolute-top-right" :style="`margin-right: 10px; color: `+ getColorText + `;`"
dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
</q-btn>