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

++ Animation fixed in Home pic.

Browse Source 
++"Dark Mode"
This commit is contained in:
Surya Paolo
2022-11-23 23:57:21 +01:00
parent 46bf74e9e2
commit fab0dbbb72
17 changed files with 722 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/CImgPoster/CImgPoster.ts
View File

@@ -2,7 +2,7 @@ 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'
import { IAnim, IElemText } from '@src/model'
export default defineComponent({
name: 'CImgPoster',
@@ -27,40 +27,25 @@ export default defineComponent({
required: false,
default: 0,
},
legendinside: {
type: String,
elemsText: {
type: Array,
required: false,
default: '',
default: () => {
return []
}
},
legend: {
type: String,
required: false,
default: '',
},
classTitle: String,
classSubtitle: String,
colorTitle: String,
colorSubtitle: String,
vertalign: Number,
anim: { type: Object as PropType<IAnim>,
required: false,
default : () => {
return {name: '', clduration: '', cldelay: '', timingtype: 'ease-in-out'}
},
},
speed: {
type: Number,
required: false,
default: 1
},
anim: {
type: Object as PropType<IAnim>,
required: false,
default: () => {
return { name: '', clduration: '', cldelay: '' }
},
},
anim2: {
type: Object as PropType<IAnim>,
required: false,
default: () => {
return { name: '', clduration: '', cldelay: '' }
},
},
logo: String,
logoheight: String,
logowidth: String,

41
src/components/CImgPoster/CImgPoster.vue
View File

@@ -1,10 +1,16 @@
<template>
<div class="poster_shadows shadow-3">
<q-parallax
:src="getsrc()"
:speed="speed ? speed : 1"
:height="myheight ? myheight : undefined"
>
<template v-slot:media>
<img
:class="tools.getClassAnim(anim)"
:src="getsrc()"
/>
</template>
<template v-slot:content="scope">
<div
:class="`column items-center ` + myclass()"
@@ -15,6 +21,7 @@
<img
v-if="logo"
:src="logo"
:class="tools.getClassAnim(anim)"
:style="
logowidth
? `width: ` + logowidth + `px; + `
@@ -23,30 +30,18 @@
: undefined
"
/>
<div
:class="classTitle + ` ` + tools.getClassAnim(anim)"
:style="` color:` + colorTitle"
>
{{ title }}
<div v-for="(rec, index) in elemsText" :key="index">
<div
v-if="rec"
:class="
rec.class + ` ` + rec.size + ` ` + tools.getClassAnim(rec.anim)
"
:style="` color:` + rec.color"
v-html="rec.text"
></div>
</div>
<div
v-if="legendinside"
:class="classSubtitle + ` ` + tools.getClassAnim(anim2)"
:style="` color:` + colorSubtitle"
v-html="legendinside"
></div>
</div>
</template>
<div>
<!--<q-img
v-if="logo"
:src="tools.getImgFileByElem(logo)"
:fit="fit"
class="img"
:width="logowidth ? logowidth : undefined"
:height="logoheight ? logoheight : undefined"
></q-img>-->
</div>
</q-parallax>
</div>
</template>

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

@@ -2,7 +2,7 @@ import {
defineComponent, onMounted, PropType, ref, toRef, watch,
} from 'vue'
import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { CImgTitle } from '@/components/CImgTitle'
@@ -74,6 +74,7 @@ export default defineComponent({
const slide = ref(0)
const slide2 = ref(0)
const tabCard = ref('card0')
const tabElemsText = ref('elem0')
const arrPages = ref([] as any[])
const disableSave = ref(true)
const enableEdit = ref(true)
@@ -202,6 +203,14 @@ export default defineComponent({
modifElem()
}
function addNewElemText() {
if (!myel.value.elemsText)
myel.value.elemsText = []
myel.value.elemsText.push({ _id: objectId(), text: '', color: '#ffffff', class: '', size: '', anim: { name: 'FadeIn', clduration: '', cldelay: '', timingtype: 'ease-in-out'} })
modifElem()
}
function getClass() {
let mycl = ''
if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
@@ -222,10 +231,15 @@ export default defineComponent({
return false
}
function delRecCard(idcard: string, myel: IMyElem) {
function delRecCard(id: string, myel: IMyElem) {
//
if (myel.listcards)
myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== idcard)
if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
if (myel.listcards)
myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id)
} else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
if (myel.elemsText)
myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id)
}
}
@@ -238,6 +252,14 @@ export default defineComponent({
}
})
}
} else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
if (props.myelem.elemsText) {
props.myelem.elemsText.forEach((rec: IElemText) => {
if (recpass._id === rec._id) {
rec.text = myval
}
})
}
} else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
(props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
myel.value.image = myval
@@ -290,6 +312,7 @@ export default defineComponent({
dupElem,
enableEdit,
addNewCard,
addNewElemText,
arrPages,
costanti,
delRecCard,
@@ -297,6 +320,7 @@ export default defineComponent({
updateElem,
showAnimation,
tabCard,
tabElemsText,
}
},

151
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -471,7 +471,7 @@
table="myelems"
:id="myel._id"
:rec="myel"
field="container3"
field="img"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
@@ -499,65 +499,100 @@
</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-btn
rounded
dense
color="primary"
label="Testo"
icon="fas fa-plus"
@click="addNewElemText"
>
</q-input>
<CSelectColor
style="min-width: 150px"
v-model="myel.color"
@update:model-value="modifElem"
title="Col Titolo"
</q-btn>
<q-tabs
v-model="tabElemsText"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
</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: 150px"
v-model="myel.colorsub"
@update:model-value="modifElem"
title="Col Sottotitolo"
>
</CSelectColor>
</div>
<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"
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>
<q-tab
v-for="(rec, ind) in myel.elemsText"
:key="ind"
:name="`elem` + ind"
:label="`Testo ` + (ind + 1)"
icon="fas fa-pencil-alt"
/>
</q-tabs>
<q-tab-panels v-model="tabElemsText" animated>
<q-tab-panel
v-for="(rec, ind) in myel.elemsText"
:key="ind"
:name="`elem` + ind"
>
<div v-if="enableEdit" class="column bordered q-ma-xs">
<q-bar class="bg-primary text-white">
Elem {{ 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>
<div v-if="enableEdit" class="row">
<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>
<q-input
label="Classe:"
@update:model-value="modifElem"
v-model="rec.class"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<CMyEditor
v-model:value="rec.text"
title="Contenuto:"
@keyup.enter.stop
:showButtons="false"
:canModify="true"
@update:value="modifElem"
@showandsave="saveElem"
>
</CMyEditor>
<CSelectAnimation
v-if="enableEdit && showAnimation"
v-model="rec.anim"
@update:model-value="modifElem"
label="Animazione"
>
</CSelectAnimation>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">

51
src/components/CMyElem/CMyElem.vue
View File

@@ -45,8 +45,8 @@
:class="tools.getClassAnim(myel.anim2)"
:src="tools.getImgFileByElem(myel, rec)"
/>
˛ <q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
<q-card-section>
<div :class="rec.size" :style="`color: ` + rec.color">
{{ rec.alt }}
</div>
<div
@@ -146,32 +146,25 @@
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:myheight="myel.heightimg"
:vertalign="myel.vertalign"
:speed="myel.speed"
:elemsText="myel.elemsText"
:logo="tools.getImgFileByFilename(myel, myel.img)"
:logoheight="myel.height.toString()"
:logowidth="myel.width.toString()"
:fit="myel.fit"
:anim="myel.anim"
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:myheight="myel.heightimg"
:colorTitle="myel.color"
:classTitle="myel.class4"
:vertalign="myel.vertalign"
:speed="myel.speed"
:classSubtitle="myel.class3"
:colorSubtitle="myel.colorsub"
:legendinside="myel.container2"
:logo="tools.getImgFileByFilename(myel, myel.container3)"
:logoheight="myel.height"
:logowidth="myel.width"
:fit="myel.fit"
:anim="myel.anim"
:anim2="myel.anim2"
>
</CImgPoster>
</div>
</CImgPoster>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
@@ -252,7 +245,9 @@
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div v-if="editOn" 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">

2
src/components/CSelectAnimation/CSelectAnimation.ts
View File

@@ -13,7 +13,7 @@ export default defineComponent({
type: Object as PropType<IAnim | string | undefined>,
required: false,
default : () => {
return {name: '', clduration: '', cldelay: ''}
return {name: '', clduration: '', cldelay: '', timingtype: 'ease-in-out'}
}
},
label: {

18
src/components/CSelectAnimation/CSelectAnimation.vue
View File

@@ -1,9 +1,10 @@
<template>
<div v-if="!!myrec">
{{label}}
<div class="row">
<q-select
rounded
style="min-width: 150px"
style="width: 150px"
outlined
v-model="myrec.name"
:options="tools.SelectListAnimation"
@@ -15,6 +16,21 @@
>
</q-select>
<q-select
rounded
style="width: 150px"
outlined
v-model="myrec.timingtype"
:options="tools.SelectListTimingType"
@update:model-value="updateClass"
dense
label="Timing:"
emit-value
map-options
>
</q-select>
</div>
<q-select
rounded
style="min-width: 150px"

4
src/components/LandingFooter/LandingFooter.ts
View File

@@ -49,8 +49,8 @@ export default defineComponent({
}
function Telegram_UsernameHttp() {
if (site.value!.contacts!.telegram)
return tools.getHttpForTelegram(site.value!.contacts!.telegram)
if (site.value.contacts!.telegram)
return tools.getHttpForTelegram(site.value.contacts!.telegram)
else
return ''
}

30
src/components/MyHeader/MyHeader.ts
View File

@@ -15,6 +15,7 @@ import notifPopover from '../../layouts/toolbar/notifPopover/notifPopover.vue'
import coinsPopover from '../../layouts/toolbar/coinsPopover/coinsPopover.vue'
import drawer from '../../layouts/drawer/drawer.vue'
import { CMyAvatar } from '@/components/CMyAvatar'
import { CMyFieldDb } from '@/components/CMyFieldDb'
import { toolsext } from '@store/Modules/toolsext'
import { useGlobalStore } from '@store/globalStore'
import { useTestStore } from '@store/testStore'
@@ -22,11 +23,13 @@ import { useUserStore } from '@store/UserStore'
import MixinUsers from '../../mixins/mixin-users'
import { CMyCart, CSigninNoreg } from '@/components'
import { costanti } from '@costanti'
export default defineComponent({
name: 'MyHeader',
components: {
drawer, messagePopover, CMyAvatar, CSigninNoreg, CMyCart, notifPopover, coinsPopover
drawer, messagePopover,
CMyFieldDb, CMyAvatar, CSigninNoreg, CMyCart, notifPopover, coinsPopover
},
props: {
extraContent: {
@@ -64,6 +67,8 @@ export default defineComponent({
const site = computed(() => globalStore.site)
const isfinishLoading = computed(() => globalStore.finishLoading)
const dark = ref(false)
const getClassColorHeader = computed(() => {
// if (tools.isTest()) return 'bg-light-blue'
// if (tools.isDebug()) return 'bg-info'
@@ -80,6 +85,23 @@ export default defineComponent({
return 'white'
})
watch(() => dark.value, (value: any, oldval: any) => {
$q.dark.set(value)
tools.setCookie('darkmode', value ? '-1' : '0')
})
function uploadStart() {
dark.value = tools.getCookie('darkmode', false, false, false) === '-1'
$q.dark.set(dark.value)
}
watch(() => globalStore.finishLoading, (value: any, oldval: any) => {
if (value) {
uploadStart()
}
})
const data = ref({
registration: null,
updateExists: false,
@@ -97,6 +119,10 @@ export default defineComponent({
}
function created() {
if (isfinishLoading.value) {
uploadStart()
}
document.addEventListener('swUpdated', updateAvailable, { once: true })
navigator.serviceWorker.addEventListener('controllerchange', () => {
// We'll also need to add 'refreshing' to our data originally set to false.
@@ -544,6 +570,8 @@ export default defineComponent({
site,
isfinishLoading,
getColorText,
costanti,
dark,
}
},

318
src/components/MyHeader/MyHeader.vue
View File

@@ -1,20 +1,25 @@
<template>
<div>
<q-header reveal elevated :class="getClassColorHeader" :style="`color: `+ getColorText + `;`">
<q-header
reveal
elevated
:class="getClassColorHeader"
:style="`color: ` + getColorText + `;`"
>
<q-toolbar
color="primary"
:glossy="$q.theme === 'mat'"
:inverted="$q.theme === 'ios'"
class="toolbar">
class="toolbar"
>
<q-btn
flat
dense
round
@click="leftDrawerOpen = !leftDrawerOpen"
aria-label="Menu">
<q-icon name="menu"/>
aria-label="Menu"
>
<q-icon name="menu" />
</q-btn>
<div v-if="$q.platform.is.desktop">
@@ -31,15 +36,30 @@
<q-btn
size="md"
id="newvers" v-if="isNewVersionAvailable() || data.updateExists" color="secondary" rounded icon="refresh"
class="btnNewVersShow" @click="RefreshApp()" :label="t('notification.newVersionAvailable')">
id="newvers"
v-if="isNewVersionAvailable() || data.updateExists"
color="secondary"
rounded
icon="refresh"
class="btnNewVersShow"
@click="RefreshApp()"
:label="t('notification.newVersionAvailable')"
>
</q-btn>
<q-toolbar-title class="row items-center">
<q-avatar>
<img :src="imglogo()" height="27" alt="Immagine Logo">
<img :src="imglogo()" height="27" alt="Immagine Logo" />
</q-avatar>
<div class="q-mx-sm titlesite">{{ getappname() }}</div>
<div v-if="site.confpages.show_darkopt" class="text-h7">
<q-toggle
size="xs"
v-model="dark"
:label="dark ? 'Scuro' : 'Chiaro'"
>
</q-toggle>
</div>
</q-toolbar-title>
<!--
@@ -56,7 +76,10 @@
-->
<q-btn
v-if="!isonline() && static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION"
v-if="
!isonline() &&
static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION
"
flat
dense
round
@@ -75,12 +98,14 @@
>
<q-list bordered>
<q-item
clickable v-ripple
v-for="langrec in static_data.lang_available" :key="langrec.value"
@click="lang = langrec.value">
clickable
v-ripple
v-for="langrec in static_data.lang_available"
:key="langrec.value"
@click="lang = langrec.value"
>
<q-item-section avatar>
<img :src="langrec.image" class="flagimg" alt="flag">
<img :src="langrec.image" class="flagimg" alt="flag" />
</q-item-section>
<q-item-section>
{{ langrec.label }}
@@ -93,12 +118,10 @@
<message-popover></message-popover>
</div>
<div v-if="static_data.functionality.SHOW_COINS">
<coinsPopover
v-model="rightCoinsOpen"></coinsPopover>
<coinsPopover v-model="rightCoinsOpen"></coinsPopover>
</div>
<div v-if="static_data.functionality.SHOW_NOTIF">
<notifPopover
v-model="rightNotifOpen"></notifPopover>
<notifPopover v-model="rightNotifOpen"></notifPopover>
</div>
<!--
@@ -109,48 +132,93 @@
<!-- BUTTON USER BAR -->
<q-btn
class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged()" round dense flat
@click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
<q-badge v-if="getnumItemsCart() > 0" color="red" floating transparent>
class="q-mx-xs"
v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged()"
round
dense
flat
@click="rightCartOpen = !rightCartOpen"
icon="fas fa-shopping-cart"
>
<q-badge
v-if="getnumItemsCart() > 0"
color="red"
floating
transparent
>
{{ getnumItemsCart() }}
</q-badge>
</q-btn>
<q-btn
class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged() && getnumOrdersCart() > 0"
round dense flat
to="/orderinfo" icon="fas fa-list-ol">
<q-badge v-if="getnumOrdersCart() > 0" color="blue" floating transparent>
class="q-mx-xs"
v-if="
static_data.functionality.ENABLE_ECOMMERCE &&
tools.isLogged() &&
getnumOrdersCart() > 0
"
round
dense
flat
to="/orderinfo"
icon="fas fa-list-ol"
>
<q-badge
v-if="getnumOrdersCart() > 0"
color="blue"
floating
transparent
>
{{ getnumOrdersCart() }}
</q-badge>
</q-btn>
<q-btn
class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !tools.isLogged()" dense flat round
class="q-mx-xs"
v-if="static_data.functionality.SHOW_USER_MENU && !tools.isLogged()"
dense
flat
round
icon="menu"
@click="rightDrawerOpen = !rightDrawerOpen">
@click="rightDrawerOpen = !rightDrawerOpen"
>
</q-btn>
<q-avatar v-else-if="static_data.functionality.SHOW_USER_MENU && tools.isLogged() && getMyImg()"
size="36px" class="center_img cursor-pointer"
@click="rightDrawerOpen = !rightDrawerOpen">
<q-img ratio="1" fit="conver" :src="getMyImg()" :alt="Username()" img-class="imgprofile_small" stretch="false"
/>
<q-avatar
v-else-if="
static_data.functionality.SHOW_USER_MENU &&
tools.isLogged() &&
getMyImg()
"
size="36px"
class="center_img cursor-pointer"
@click="rightDrawerOpen = !rightDrawerOpen"
>
<q-img
ratio="1"
fit="conver"
:src="getMyImg()"
:alt="Username()"
img-class="imgprofile_small"
stretch="false"
/>
</q-avatar>
<q-btn
v-else
class="q-mx-xs iconprofile_small" round dense flat
@click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
class="q-mx-xs iconprofile_small"
round
dense
flat
@click="rightDrawerOpen = !rightDrawerOpen"
:icon="getMyImgforIcon()"
:color="getcolormenu()"
>
</q-btn>
<!--<q-btn
class="q-mx-xs iconprofile_small" v-if="static_data.functionality.SHOW_USER_MENU && isLogged()" round dense flat
@click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
</q-btn>-->
</q-toolbar>
</q-header>
<q-drawer
@@ -160,95 +228,183 @@
:breakpoint="800"
v-model="leftDrawerOpen"
:content-class="['bg-grey-1', 'q-pa-sm']"
:content-style="{padding: '0px'}"
:content-style="{ padding: '0px' }"
>
<drawer :clBase="clBase"></drawer>
</q-drawer>
<!-- USER BAR -->
<q-drawer v-if="static_data.functionality.ENABLE_ECOMMERCE"
v-model="rightCartOpen"
side="right" elevated>
<q-drawer
v-if="static_data.functionality.ENABLE_ECOMMERCE"
v-model="rightCartOpen"
side="right"
elevated
>
<q-btn
class="absolute-top-right" :style="`margin-right: 10px; color:`+ getColorText + `;`"
dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
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
<div v-if="tools.isLogged()" class="text-weight-bold text-cart">
Carrello
</div>
<CMyCart></CMyCart>
</q-drawer>
<!-- USER BAR -->
<q-drawer v-if="static_data.functionality.SHOW_USER_MENU"
v-model="rightDrawerOpen" side="right" elevated>
<q-drawer
v-if="static_data.functionality.SHOW_USER_MENU"
v-model="rightDrawerOpen"
side="right"
elevated
>
<div id="profile">
<q-img
class="absolute-top" src="images/landing_first_section.png"
style="height: 150px" alt="section page">
class="absolute-top"
src="images/landing_first_section.png"
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-`+ getColorText + ` text-h7`">Area Personale</div>
<div
class="absolute-top bg-transparent text-black center_img"
style="margin-top: 10px"
>
<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"/>
<q-img
fit="cover"
:src="getMyImg()"
:alt="Username()"
img-class="imgprofile"
height="80px"
/>
</q-avatar>
<!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->
<q-btn
class="absolute-top-right" :style="`margin-right: 10px; color: `+ getColorText + `;`"
dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
class="absolute-top-right"
:style="`margin-right: 10px; color: ` + getColorText + `;`"
dense
flat
round
icon="close"
@click="rightDrawerOpen = !rightDrawerOpen"
>
</q-btn>
<div v-if="tools.isLogged()" class="text-weight-bold text-user">{{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
<div v-if="tools.isLogged()" class="text-weight-bold text-user">
{{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
</div>
<div class="row justify-evenly q-pa-xs-sm">
<div v-if="tools.isLogged() && isAdmin()" class="text-weight-bold text-user bg-red q-px-xs">Admin</div>
<div v-if="isSocio" class="text-weight-bold text-user q-px-xs">Socio</div>
<div v-if="isSocioResidente()" class="text-weight-bold text-user q-px-xs bg-amber">Residente</div>
<div v-if="isConsiglio()" class="text-weight-bold text-user q-px-xs bg-deep-orange-10">Consiglio</div>
<div v-if="isManager()" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
<div v-if="isFacilitatore()" class="text-weight-bold text-user q-px-xs">Facilitatore</div>
<div v-if="isTratuttrici()" class="text-weight-bold text-user q-px-xs">Editor</div>
<div
v-if="tools.isLogged() && isAdmin()"
class="text-weight-bold text-user bg-red q-px-xs"
>
Admin
</div>
<div v-if="isSocio" class="text-weight-bold text-user q-px-xs">
Socio
</div>
<div
v-if="isSocioResidente()"
class="text-weight-bold text-user q-px-xs bg-amber"
>
Residente
</div>
<div
v-if="isConsiglio()"
class="text-weight-bold text-user q-px-xs bg-deep-orange-10"
>
Consiglio
</div>
<div
v-if="isManager()"
class="text-weight-bold text-user bg-blue q-px-xs"
>
Segreteria
</div>
<div
v-if="isFacilitatore()"
class="text-weight-bold text-user q-px-xs"
>
Facilitatore
</div>
<div
v-if="isTratuttrici()"
class="text-weight-bold text-user q-px-xs"
>
Editor
</div>
</div>
<div v-if="!tools.isLogged()" class="text-user text-italic bg-red">
{{ t('user.loggati') }}
</div>
<div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">{{
t('components.authentication.email_verification.verify_email')
}}
<div
v-if="tools.isLogged() && !tools.isVerified()"
class="text-verified"
>
{{ t('components.authentication.email_verification.verify_email') }}
</div>
<div v-if="tools.isLogged()"
class="text-verified">
<div v-if="tools.isLogged()" class="text-verified">
<!-- <span class="text-white" v-if="Verificato()"> {{t('reg.verificato')}} </span> -->
<span class="text-user text-italic bg-red" v-if="!tools.Verificato()"> {{t('reg.non_verificato')}} </span>
<span
class="text-user text-italic bg-red"
v-if="!tools.Verificato()"
>
{{ t('reg.non_verificato') }}
</span>
</div>
<div v-if="tools.isLogged()" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
<q-btn rounded color="primary" icon="person" :to="`/my/`+getMyUsername()">{{ t('pages.profile') }}</q-btn>
<div
v-if="tools.isLogged()"
id="user-actions"
class="column justify-center q-gutter-sm q-ma-sm center-150"
>
<q-btn
rounded
color="primary"
icon="person"
:to="`/my/` + getMyUsername()"
>{{ t('pages.profile') }}</q-btn
>
<!--<q-btn round color="warning" icon="lock"></q-btn>-->
<q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{ t('login.esci') }}</q-btn>
<q-btn
rounded
color="negative"
icon="exit_to_app"
@click="logoutHandler"
>{{ t('login.esci') }}</q-btn
>
</div>
</div>
<div style="margin-top:120px;"></div>
<div style="margin-top: 120px"></div>
<div v-show="!tools.isLogged()">
<div class="q-ma-md" style="">
<CSigninNoreg :showregbutt="static_data.functionality.SHOW_REG_BUTTON">
<CSigninNoreg
:showregbutt="static_data.functionality.SHOW_REG_BUTTON"
>
</CSigninNoreg>
</div>
</div>
</div>
<div v-if="tools.isLogged()" class="q-mt-lg"></div>
<slot></slot>
</q-drawer>
</div>
</template>

148
src/css/app.scss
View File

@@ -973,6 +973,10 @@ h3 {
}
}
.q-item__section--side {
margin-left: 0px !important;
}
.underline {
text-decoration: underline;
color: blue;
@@ -1336,3 +1340,147 @@ h3 {
transform: translateY(0);
}
}
.film, .effect {
width: 100%;
height: 100%;
filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
}
.film:after, .effect:after {
content: '';
width: 120%;
height: 100%;
top: 0;
left: 0;
padding-left: 100px;
opacity: 0.5;
animation: film-scratch 0.45s steps(1) infinite;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
.effect:after {
left: 30%;
animation: effect-scratch 2s infinite;
}
.grain {
width: 100%;
height: 100%;
}
.grain:after {
content: '';
width: 110%;
height: 110%;
top: -5%;
left: -5%;
opacity: .25;
background-image:
repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
animation: grain 0.5s steps(1) infinite;
filter: drop-shadow(0px 0px 1px black);
}
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-1%, -1%); }
20% { transform: translate(1%, 1%); }
30% { transform: translate(-2%, -2%); }
40% { transform: translate(3%, 3%); }
50% { transform: translate(-3%, -3%); }
60% { transform: translate(4%, 4%); }
70% { transform: translate(-4%, -4%); }
80% { transform: translate(2%, 2%); }
90% { transform: translate(-3%, -3%); }
}
@keyframes film-scratch {
0%, 100% { transform: translateX(0); opacity: 0.5; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); opacity: 0.75; }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(-2%); }
}
@keyframes effect-scratch {
0% { transform: translateX(0); opacity: 0.75; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(20%); }
100% { transform: translateX(30%); }
}
/**** OLD FILM EFFECT END ****/
@keyframes zoomImg {
0% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
20% { transform: translate(-15%, 10%) scale(1.5); opacity: 1; }
50% { transform: translate(-15%, 25%) scale(1.35); opacity: 1; }
80% { transform: translate(-65%, 25%) scale(1.35); opacity: 1; }
100% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
}
.zoomImg {
animation: zoomImg 20s linear infinite;
}
.animate__animated.animate__slow3 {
-webkit-animation-duration: calc(1s * 3);
animation-duration: calc(1s * 3);
-webkit-animation-duration: calc(var(--animate-duration) * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
.animate__animated.animate__slow4 {
-webkit-animation-duration: calc(1s * 4);
animation-duration: calc(1s * 4);
-webkit-animation-duration: calc(var(--animate-duration) * 4);
animation-duration: calc(var(--animate-duration) * 4);
}
.animate__animated.animate__slow5 {
-webkit-animation-duration: calc(1s * 5);
animation-duration: calc(1s * 5);
-webkit-animation-duration: calc(var(--animate-duration) * 5);
animation-duration: calc(var(--animate-duration) * 5);
}
.animate__animated.animate__slow10 {
-webkit-animation-duration: calc(1s * 10);
animation-duration: calc(1s * 10);
-webkit-animation-duration: calc(var(--animate-duration) * 10);
animation-duration: calc(var(--animate-duration) * 10);
}
.animate__animated.animate__slow20 {
-webkit-animation-duration: calc(1s * 20);
animation-duration: calc(1s * 20);
-webkit-animation-duration: calc(var(--animate-duration) * 20);
animation-duration: calc(var(--animate-duration) * 20);
}
.animate__animated.animate__ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.animate__animated.animate__linear {
transition-timing-function: linear;
}
.animate__animated.animate__ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.animate__animated.animate__ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.animate__animated.animate__ease {
transition-timing-function: ease;
}

18
src/model/GlobalStore.ts
View File

@@ -119,6 +119,7 @@ export interface IMyElem {
container?: string
container2?: string
container3?: string
container4?: string
span?: boolean
transition?: boolean
align?: number
@@ -150,8 +151,17 @@ export interface IMyElem {
styleadd?: string
list?: IImgGallery[]
listcards?: IMyCard[]
elemsText?: IElemText[]
}
export interface IElemText {
_id: string
text: string
color?: string
size?: string
class?: string
anim?: IAnim
}
export interface IMyPage {
_id?: string
author_username?: string
@@ -180,7 +190,7 @@ export interface IMyPage {
active?: boolean
inmenu?: boolean
color?: string
colorsub?: string
elemsText?: IElemText[]
onlyif_logged?: boolean
only_residenti?: boolean
only_consiglio?: boolean
@@ -202,6 +212,7 @@ export interface IConfPages {
font?: string
col_toolbar?: string
col_bgfooter?: string
show_darkopt: boolean
}
export interface IFooterMobile {
show_buttHome: boolean
@@ -259,7 +270,7 @@ export interface ISites {
keywords?: string
contacts?: IContacts
footer_mobile?: IFooterMobile
confpages?: IConfPages
confpages: IConfPages
}
export interface INewsToSent {
@@ -405,7 +416,7 @@ export interface IGlobalState {
catgrps: ICatGrp[],
provinces: IProvince[],
datastat?: INotData
site?: ISites,
site: ISites,
mygroups: IMyGroup[],
selElem?: IMyElem,
editOn?: boolean,
@@ -1101,4 +1112,5 @@ export interface IAnim {
name: string,
clduration: string,
cldelay: string,
timingtype: string,
}

7
src/rootgen/admin/confsite/confsite.ts
View File

@@ -41,7 +41,11 @@ export default defineComponent({
globalStore.site.confpages.col_bgfooter = mycol
}
}
function saveShowDark(mycol: any) {
if (globalStore.site?.confpages) {
globalStore.site.confpages.show_darkopt = mycol
}
}
onMounted(mounted)
return {
@@ -53,6 +57,7 @@ export default defineComponent({
saveCol,
saveBgCol,
globalStore,
saveShowDark,
}
}
})

12
src/rootgen/admin/confsite/confsite.vue
View File

@@ -273,6 +273,18 @@
:type="costanti.FieldType.color"
>
</CMyFieldDb>
<CMyFieldDb
title="Mostra Scelta Dark"
table="sites"
:id="mysite._id"
:rec="mysite"
mykey="confpages"
mysubkey="show_darkopt"
debounce="1000"
@save="saveShowDark"
:type="costanti.FieldType.boolean"
>
</CMyFieldDb>
</q-tab-panel>
<q-tab-panel name="footer">
<CMyFieldDb

16
src/store/Modules/fieldsTable.ts
View File

@@ -145,6 +145,7 @@ export const colmyelems = [
AddCol({ name: 'container2', label_trans: 'myelems.container2' }),
AddCol({ name: 'span', label_trans: 'myelems.span', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'container3', label_trans: 'myelems.container3' }),
AddCol({ name: 'container4', label_trans: 'myelems.container4' }),
AddCol({ name: 'img', label_trans: 'myelems.img' }),
AddCol({ name: 'align', label_trans: 'myelems.align', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'vertalign', label_trans: 'myelems.vertalign', fieldtype: costanti.FieldType.number }),
@@ -166,6 +167,7 @@ export const colmyelems = [
AddCol({ name: 'onlyif_logged', label_trans: 'myelems.onlyif_logged', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'color', label_trans: 'myelems.color' }),
AddCol({ name: 'colorsub', label_trans: 'myelems.colorsub' }),
AddCol({ name: 'colorsub2', label_trans: 'myelems.colorsub2' }),
AddCol({ name: 'class', label_trans: 'myelems.class' }),
AddCol({ name: 'styleadd', label_trans: 'myelems.styleadd' }),
AddCol({
@@ -1604,6 +1606,20 @@ export const colTableSites = [
label_trans: 'confpages.col_bgfooter',
fieldtype: costanti.FieldType.string,
}),
AddCol({
name: 'confpages.show_darkopt',
field: 'confpages',
subfield: 'show_darkopt',
label_trans: 'confpages.show_darkopt',
fieldtype: costanti.FieldType.boolean,
}),
AddCol({
name: 'confpages.dark',
field: 'confpages',
subfield: 'dark',
label_trans: 'confpages.dark',
fieldtype: costanti.FieldType.boolean,
}),
AddCol({
name: 'footer_mobile.show_buttHome',
field: 'footer_mobile',

64
src/store/Modules/tools.ts
View File

@@ -598,6 +598,22 @@ export const tools = {
label: '[Nessuna]',
value: '',
},
{
label: 'Slow 20s',
value: 'animate__slow20',
},
{
label: 'Slow 10s',
value: 'animate__slow10',
},
{
label: 'Slow 5s',
value: 'animate__slow5',
},
{
label: 'Slow 3s',
value: 'animate__slow3',
},
{
label: 'Slow 2s',
value: 'animate__slow',
@@ -644,6 +660,34 @@ export const tools = {
],
SelectListTimingType: [
{
label: '[Nessuna]',
value: '',
},
{
label: 'Linear',
value: 'animate__linear',
},
{
label: 'Ease',
value: 'animate__ease',
},
{
label: 'Ease-In',
value: 'animate__ease-in',
},
{
label: 'Ease-Out',
value: 'animate__ease-out',
},
{
label: 'Ease-In-Out',
value: 'animate__ease-in-out',
},
],
SelectListAnimation: [
{
@@ -694,6 +738,10 @@ export const tools = {
label: 'slideOut Down',
value: 'animate__slideOutDown',
},
{
label: 'zoomImg',
value: 'zoomImg',
},
{
label: 'zoomIn',
value: 'animate__zoomIn',
@@ -730,6 +778,14 @@ export const tools = {
label: 'zoomOut Down',
value: 'animate__zoomOutDown',
},
{
label: 'Effetto Film 1',
value: 'film',
},
{
label: 'Zoom IMG',
value: 'zoomImg',
},
{
label: 'FadeIn',
value: 'animate__fadeIn',
@@ -7180,9 +7236,15 @@ export const tools = {
},
getClassAnim(myanim: IAnim) {
if (!myanim)
return ''
let mycl = ''
if (myanim)
mycl = (!!myanim.name ? myanim.name : '') + ' ' + (!!myanim.clduration ? myanim.clduration : '') + ' ' + (!!myanim.cldelay ? myanim.cldelay : '')
mycl = (!!myanim.name ? myanim.name : '') +
' ' + (!!myanim.clduration ? myanim.clduration : '') +
' ' + (!!myanim.cldelay ? myanim.cldelay : '') +
' ' + (!!myanim.timingtype ? myanim.timingtype : '')
else
mycl = ''

3
src/store/globalStore.ts
View File

@@ -138,7 +138,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
options: 0
},
confpages: {
font: ''
font: '',
show_darkopt: false,
},
},
provinces: [],