diff --git a/quasar.config.ts b/quasar.config.ts index da70404f..a21cc419 100644 --- a/quasar.config.ts +++ b/quasar.config.ts @@ -82,7 +82,7 @@ export default defineConfig((ctx) => { ...(viteConf.css || {}), preprocessorOptions: { scss: { - additionalData: `@use "sass:color"; @use "@/css/variables.scss" as *;`, + additionalData: `@use "sass:color"; @use "src/css/variables.scss" as *;`, }, }, }; diff --git a/src/components/CFindUsers/CFindUsers.ts b/src/components/CFindUsers/CFindUsers.ts index cec4d0e4..ac0c172c 100755 --- a/src/components/CFindUsers/CFindUsers.ts +++ b/src/components/CFindUsers/CFindUsers.ts @@ -35,6 +35,7 @@ import { colmyUserPeople, colmyUserGroup } from '@store/Modules/fieldsTable'; export default defineComponent({ name: 'CFindUsers', + emits: ['clickContact'], props: { actionType: { type: Number, @@ -46,6 +47,11 @@ export default defineComponent({ required: false, default: '', }, + enableContactClick: { + type: Boolean, + required: false, + default: false, + }, }, components: { CMyUser, @@ -57,7 +63,7 @@ export default defineComponent({ CGridTableRec, CQRCode, }, - setup(props) { + setup(props, { emit }) { const userStore = useUserStore(); const globalStore = useGlobalStore(); const circuitStore = useCircuitStore(); @@ -253,6 +259,10 @@ export default defineComponent({ usersList.value.listgroup = receiveRislistgroup; } + function clickContact(data: any) { + emit('clickContact', data) + } + return { userStore, tools, @@ -277,6 +287,7 @@ export default defineComponent({ extraparams_groups, filtercustom, arrfilterand, + clickContact, }; }, }); diff --git a/src/components/CFindUsers/CFindUsers.vue b/src/components/CFindUsers/CFindUsers.vue index b0a5fddf..fd2d217e 100755 --- a/src/components/CFindUsers/CFindUsers.vue +++ b/src/components/CFindUsers/CFindUsers.vue @@ -65,6 +65,9 @@ :showCol="false" :extraparams="extraparams()" :actionType="actionType" + @clickContact="clickContact" + :enableContactClick="enableContactClick" + > @@ -99,6 +102,8 @@ :extraparams="extraparams_groups()" :actionType="actionType" :visufind="costanti.FIND_GROUP" + @clickContact="clickContact" + :enableContactClick="enableContactClick" > diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts index 5fd5a167..47500cba 100755 --- a/src/components/CGridTableRec/CGridTableRec.ts +++ b/src/components/CGridTableRec/CGridTableRec.ts @@ -71,7 +71,7 @@ import { isMap } from 'util/types'; export default defineComponent({ name: 'CGridTableRec', - emits: ['clickButtBar', 'savefilter'], + emits: ['clickButtBar', 'savefilter', 'clickContact'], props: { prop_mytitle: { type: String, @@ -377,6 +377,11 @@ export default defineComponent({ required: false, default: false, }, + enableContactClick: { + type: Boolean, + required: false, + default: false, + }, }, components: { CMyPopupEdit, @@ -3230,6 +3235,10 @@ export default defineComponent({ return false; } + function clickContact(data: any) { + emit('clickContact', data); + } + created(); return { @@ -3368,6 +3377,7 @@ export default defineComponent({ getisDettagliByCatalog, getisDettagliByRaccolta, hidewindowEdit, + clickContact, }; }, }); diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue index fc618daf..9645fe47 100755 --- a/src/components/CGridTableRec/CGridTableRec.vue +++ b/src/components/CGridTableRec/CGridTableRec.vue @@ -679,6 +679,8 @@ col_footer ? tools.getLabelFooterByRow(row, col_footer, tablesel) : '' " @showInnerDialog="showInnerDialog" + @clickContact="clickContact" + :enableContactClick="enableContactClick" > @@ -701,6 +703,8 @@ :finder="false" :mygrp="row" :visu="visufind ? visufind : costanti.FIND_GROUP" + @clickContact="clickContact" + :enableContactClick="enableContactClick" /> diff --git a/src/components/CMenuItem/CMenuItem.scss b/src/components/CMenuItem/CMenuItem.scss index 7a4c30e1..9916bb0b 100755 --- a/src/components/CMenuItem/CMenuItem.scss +++ b/src/components/CMenuItem/CMenuItem.scss @@ -1,20 +1,72 @@ // ========================================== -// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO -// Mantiene tutto il codice originale + stile moderno +// CMENUITEM.SCSS // ========================================== +// ========================================== +// VARIABILI COLORI MENU +// ========================================== +$menu-border-color: #dedede; +$menu-border-color-dark: #404040; + +$menu-active-color: #027be3; +$menu-active-color-dark: #4da3ff; +$menu-active-bg: #dadada; +$menu-active-bg-dark: #2a3a4a; + +$menu-hover-bg: rgba(0, 0, 0, 0.04); +$menu-hover-bg-dark: rgba(255, 255, 255, 0.08); + +$menu-text-color: rgba(0, 0, 0, 0.87); +$menu-text-color-dark: rgba(255, 255, 255, 0.87); + +$menu-icon-color: rgba(0, 0, 0, 0.5); +$menu-icon-color-dark: rgba(255, 255, 255, 0.5); + +$subtitle-color: #666; +$subtitle-color-dark: #aaa; + +// Colori ruoli +$color-admin: #d32f2f; +$color-admin-dark: #ef5350; +$color-manager: #388e3c; +$color-manager-dark: #66bb6a; +$color-socio: #1b5e20; +$color-socio-dark: #4caf50; +$color-facilitatore: #4a148c; +$color-facilitatore-dark: #9c27b0; +$color-collaboratore: #f57c00; +$color-collaboratore-dark: #ffb74d; +$color-editor: #6a1b9a; +$color-editor-dark: #ab47bc; +$color-commerciale: #e65100; +$color-commerciale-dark: #ff9800; +$color-grafico: #00796b; +$color-grafico-dark: #26a69a; +$color-doc: #42a5f5; +$color-doc-dark: #64b5f6; + +// ========================================== +// DEBUG CLASS +// ========================================== .prova { color: red; } +// ========================================== +// BASE MENU STYLES +// ========================================== .q-list-header { min-height: 12px; padding: 5px 8px; } .menu-hr { - border-color: #dedede; + border-color: $menu-border-color; height: 0.5px; + + .body--dark & { + border-color: $menu-border-color-dark; + } } .list-label:first-child { @@ -23,90 +75,266 @@ margin: 1px; } +// ========================================== +// ROUTER LINK ACTIVE +// ========================================== .router-link-active { - color: #027be3; - background-color: #dadada !important; - border-right: 2px solid #027be3; -} - -.router-link-active .item-primary { - color: #027be3; + color: $menu-active-color; + background-color: $menu-active-bg !important; + border-right: 2px solid $menu-active-color; + + .body--dark & { + color: $menu-active-color-dark; + background-color: $menu-active-bg-dark !important; + border-right-color: $menu-active-color-dark; + } + + .item-primary { + color: $menu-active-color; + + .body--dark & { + color: $menu-active-color-dark; + } + } } +// ========================================== +// MENU ARROW +// ========================================== .menu_freccina { position: absolute; right: 10px; display: inline-block; - padding: 0 0 0 0; - -webkit-transform: rotate(-180deg); + padding: 0; transform: rotate(-180deg); } +// ========================================== +// MENU SIZES +// ========================================== .my-menu, -.my-menu>i { +.my-menu > i { min-height: 40px; min-width: 26px; font-size: 1rem; } .my-menu-small, -.my-menu-small>i { +.my-menu-small > i { min-height: 40px; min-width: 26px; font-size: 0.75rem; } -.isAdmin { - color: red !important; -} - -.isSocioResidente { - color: darkgreen; -} - -.isCalendar {} - -.isManager { - color: green !important; -} - -.isFacilitatore { - color: #201a80; -} - -.onlyCollaboratore { - color: #bd7b10; -} - .my-menu-icon { min-width: 2px; font-size: 1rem; + + > i { + min-width: 26px; + font-size: 1.25rem; + } } -.my-menu-icon>i { - min-width: 26px; - font-size: 1.25rem; -} - -.clexpansion { - min-width: 0 !important; -} - -.my-menu-active { - background-color: rgba(174, 189, 241, 0.71); -} - -.my-menu-separat>i { +.my-menu-separat > i { min-width: 26px; font-size: 1rem; } -.my-menu-icon-none>i { +.my-menu-icon-none > i { display: none; } -.clicon img, -.clicon { +// ========================================== +// ROLE COLORS - Con Dark Mode +// ========================================== +.isAdmin { + color: $color-admin !important; + border-left: 3px solid $color-admin; + background: linear-gradient(90deg, rgba($color-admin, 0.08) 0%, rgba($color-admin, 0.02) 100%); + + .body--dark & { + color: $color-admin-dark !important; + border-left-color: $color-admin-dark; + background: linear-gradient(90deg, rgba($color-admin-dark, 0.15) 0%, rgba($color-admin-dark, 0.05) 100%); + } + + .q-avatar { + background: rgba($color-admin, 0.12) !important; + + .q-icon { + color: $color-admin; + } + + .body--dark & { + background: rgba($color-admin-dark, 0.2) !important; + + .q-icon { + color: $color-admin-dark; + } + } + } + + &:hover { + background: linear-gradient(90deg, rgba($color-admin, 0.12) 0%, rgba($color-admin, 0.04) 100%); + + .body--dark & { + background: linear-gradient(90deg, rgba($color-admin-dark, 0.2) 0%, rgba($color-admin-dark, 0.08) 100%); + } + } +} + +.isManager { + color: $color-manager !important; + border-left: 3px solid $color-manager; + background: linear-gradient(90deg, rgba($color-manager, 0.08) 0%, rgba($color-manager, 0.02) 100%); + + .body--dark & { + color: $color-manager-dark !important; + border-left-color: $color-manager-dark; + background: linear-gradient(90deg, rgba($color-manager-dark, 0.15) 0%, rgba($color-manager-dark, 0.05) 100%); + } + + .q-avatar { + background: rgba($color-manager, 0.12) !important; + + .q-icon { + color: $color-manager; + } + + .body--dark & { + background: rgba($color-manager-dark, 0.2) !important; + + .q-icon { + color: $color-manager-dark; + } + } + } + + &:hover { + background: linear-gradient(90deg, rgba($color-manager, 0.12) 0%, rgba($color-manager, 0.04) 100%); + + .body--dark & { + background: linear-gradient(90deg, rgba($color-manager-dark, 0.2) 0%, rgba($color-manager-dark, 0.08) 100%); + } + } +} + +.isSocioResidente { + color: $color-socio !important; + + .body--dark & { + color: $color-socio-dark !important; + } + + .q-avatar .q-icon { + color: $color-socio; + + .body--dark & { + color: $color-socio-dark; + } + } +} + +.isFacilitatore { + color: $color-facilitatore !important; + + .body--dark & { + color: $color-facilitatore-dark !important; + } + + .q-avatar .q-icon { + color: $color-facilitatore; + + .body--dark & { + color: $color-facilitatore-dark; + } + } +} + +.onlyCollaboratore { + color: $color-collaboratore !important; + + .body--dark & { + color: $color-collaboratore-dark !important; + } + + .q-avatar .q-icon { + color: $color-collaboratore; + + .body--dark & { + color: $color-collaboratore-dark; + } + } +} + +.isEditor { + color: $color-editor !important; + + .body--dark & { + color: $color-editor-dark !important; + } + + .q-avatar .q-icon { + color: $color-editor; + + .body--dark & { + color: $color-editor-dark; + } + } +} + +.isCommerciale { + color: $color-commerciale !important; + + .body--dark & { + color: $color-commerciale-dark !important; + } + + .q-avatar .q-icon { + color: $color-commerciale; + + .body--dark & { + color: $color-commerciale-dark; + } + } +} + +.isGrafico { + color: $color-grafico !important; + + .body--dark & { + color: $color-grafico-dark !important; + } + + .q-avatar .q-icon { + color: $color-grafico; + + .body--dark & { + color: $color-grafico-dark; + } + } +} + +.isDoc { + border-left: 3px solid $color-doc; + background: linear-gradient(90deg, rgba($color-doc, 0.08) 0%, rgba($color-doc, 0.02) 100%); + + .body--dark & { + border-left-color: $color-doc-dark; + background: linear-gradient(90deg, rgba($color-doc-dark, 0.15) 0%, rgba($color-doc-dark, 0.05) 100%); + } +} + +.isCalendar { + // Placeholder per eventuali stili calendario +} + +// ========================================== +// ICONS & AVATARS +// ========================================== +.clicon, +.clicon img { font-size: 16px; } @@ -114,100 +342,151 @@ min-width: 30px; } -.OLD_q-item__section--side { - padding-right: 8px; -} - .imgicon img { font-size: 2.5rem !important; border-radius: 8px; } -/* -.menu-enter-active, .scale-enter { - -webkit-animation: moveFromTopFade .5s ease both; - animation: moveFromTopFade .5s ease both; +.clexpansion { + min-width: 0 !important; } -.menu-leave-to, .scale-leave-active { - -webkit-animation: moveToBottom .5s ease both; - animation: moveToBottom .5s ease both; -} -*/ +// ========================================== +// MENU ACTIVE STATE +// ========================================== +.my-menu-active { + background: linear-gradient(90deg, rgba($menu-active-color, 0.12) 0%, rgba($menu-active-color, 0.05) 100%) !important; + border-radius: 8px; + border-right: 3px solid $menu-active-color; + .body--dark & { + background: linear-gradient(90deg, rgba($menu-active-color-dark, 0.2) 0%, rgba($menu-active-color-dark, 0.08) 100%) !important; + border-right-color: $menu-active-color-dark; + } + + span { + color: $menu-active-color; + font-weight: 600; + + .body--dark & { + color: $menu-active-color-dark; + } + } + + .q-avatar { + background: rgba($menu-active-color, 0.1) !important; + + .body--dark & { + background: rgba($menu-active-color-dark, 0.2) !important; + } + + .q-icon { + color: $menu-active-color; + + .body--dark & { + color: $menu-active-color-dark; + } + } + } + + &:hover { + background: linear-gradient(90deg, rgba($menu-active-color, 0.16) 0%, rgba($menu-active-color, 0.08) 100%) !important; + + .body--dark & { + background: linear-gradient(90deg, rgba($menu-active-color-dark, 0.25) 0%, rgba($menu-active-color-dark, 0.12) 100%) !important; + } + } +} + +// ========================================== +// BIG MENU - Titoli grandi +// ========================================== .bigmenu { - font-size: 1.25rem; - font-weight: bold; - text-shadow: 0.0512rem 0.052rem .01rem #555; + font-size: 1.2rem; + font-weight: 700; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + letter-spacing: -0.01em; + + .body--dark & { + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + } } +// ========================================== +// SUBTITLE +// ========================================== .subtitle { - font-size: 0.85em; - color: #666; + font-size: 0.8rem; + color: $subtitle-color; + font-style: italic; + margin-top: 2px; + opacity: 0.85; + line-height: 1.3; + + .body--dark & { + color: $subtitle-color-dark; + } } // ========================================== -// MIGLIORAMENTI STILE RISO - AGGIUNTI +// QUASAR COMPONENT OVERRIDES // ========================================== -// ========================================== -// INDENTAZIONE LIVELLI - Più compatta -// ========================================== -[style*="paddingLeft"] { - transition: all 0.3s ease; -} - -// ========================================== -// Q-SEPARATOR - Divisore migliorato -// ========================================== +// Q-SEPARATOR .q-separator { - background: linear-gradient(90deg, - transparent 0%, - rgba(0, 0, 0, 0.1) 50%, - transparent 100%); + background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%); margin: 6px 0; height: 1px; + + .body--dark & { + background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%); + } } -// ========================================== -// Q-EXPANSION-ITEM - Espandibile migliorato -// ========================================== +// Q-EXPANSION-ITEM .q-expansion-item { border-radius: 8px; margin-bottom: 2px; overflow: hidden; - - // Header dell'expansion + > .q-item { border-radius: 8px; padding: 6px 10px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); - + &:hover { - background: rgba(0, 0, 0, 0.04); + background: $menu-hover-bg; transform: translateX(2px); + + .body--dark & { + background: $menu-hover-bg-dark; + } } } - - // Label header + .q-item__label { font-size: 0.95rem; font-weight: 500; } - - // Icona expand/collapse + .q-icon { transition: all 0.3s ease; font-size: 0.9rem; - color: rgba(0, 0, 0, 0.5); - } -} + color: $menu-icon-color; -// Quando espanso -.q-expansion-item--expanded { - > .q-item { + .body--dark & { + color: $menu-icon-color-dark; + } + } + + // Expanded state + &--expanded > .q-item { background: rgba(0, 0, 0, 0.02); - + + .body--dark & { + background: rgba(255, 255, 255, 0.05); + } + .q-icon { color: var(--q-primary); transform: rotate(0deg); @@ -215,52 +494,55 @@ } } -// ========================================== -// Q-ITEM FOGLIA - Voce menu semplice -// ========================================== +// Q-ITEM .q-item { border-radius: 8px; padding: 6px 10px; margin-bottom: 2px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-height: 42px; - + &:hover { - background: rgba(0, 0, 0, 0.05); + background: $menu-hover-bg; transform: translateX(3px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + + .body--dark & { + background: $menu-hover-bg-dark; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + } } - + &:active { transform: translateX(1px); } - - // Sezione thumbnail con avatar + .q-item__section--thumbnail { min-width: 36px; padding-right: 10px; } - - // Label principale + > .q-item__section > span:not(.subtitle) { font-size: 0.95rem; font-weight: 500; - color: rgba(0, 0, 0, 0.87); + color: $menu-text-color; + + .body--dark & { + color: $menu-text-color-dark; + } } } -// ========================================== -// Q-AVATAR - Icone migliorate -// ========================================== +// Q-AVATAR .q-avatar { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent !important; - + &.rounded { border-radius: 8px; overflow: hidden; } - + .q-icon { font-size: 1.3rem; transition: all 0.3s ease; @@ -269,212 +551,28 @@ .q-item:hover .q-avatar { transform: scale(1.08); - + .q-icon { transform: rotate(-5deg); } } // ========================================== -// MY-MENU-ACTIVE - Stato attivo +// INDENTATION TRANSITION // ========================================== -.my-menu-active { - background: linear-gradient(90deg, - rgba(2, 123, 227, 0.12) 0%, - rgba(2, 123, 227, 0.05) 100%) !important; - border-radius: 8px; - border-right: 3px solid #027be3; - - span { - color: #027be3; - font-weight: 600; - } - - .q-avatar { - background: rgba(2, 123, 227, 0.1) !important; - - .q-icon { - color: #027be3; - } - } - - &:hover { - background: linear-gradient(90deg, - rgba(2, 123, 227, 0.16) 0%, - rgba(2, 123, 227, 0.08) 100%) !important; - } +[style*="paddingLeft"] { + transition: all 0.3s ease; } // ========================================== -// CLASSI PERMESSI - Badge colorati -// ========================================== -.isAdmin { - color: #d32f2f !important; - border-left: 3px solid #d32f2f; - background: linear-gradient(90deg, - rgba(211, 47, 47, 0.08) 0%, - rgba(211, 47, 47, 0.02) 100%); - - .q-avatar { - background: rgba(211, 47, 47, 0.12) !important; - - .q-icon { - color: #d32f2f; - } - } - - &:hover { - background: linear-gradient(90deg, - rgba(211, 47, 47, 0.12) 0%, - rgba(211, 47, 47, 0.04) 100%); - } -} - -.isManager { - color: #388e3c !important; - border-left: 3px solid #388e3c; - background: linear-gradient(90deg, - rgba(56, 142, 60, 0.08) 0%, - rgba(56, 142, 60, 0.02) 100%); - - .q-avatar { - background: rgba(56, 142, 60, 0.12) !important; - - .q-icon { - color: #388e3c; - } - } - - &:hover { - background: linear-gradient(90deg, - rgba(56, 142, 60, 0.12) 0%, - rgba(56, 142, 60, 0.04) 100%); - } -} - -.isSocioResidente { - color: #1b5e20 !important; - - .q-avatar .q-icon { - color: #1b5e20; - } -} - -.isFacilitatore { - color: #4a148c !important; - - .q-avatar .q-icon { - color: #4a148c; - } -} - -.onlyCollaboratore { - color: #f57c00 !important; - - .q-avatar .q-icon { - color: #f57c00; - } -} - -.isEditor { - color: #6a1b9a !important; - - .q-avatar .q-icon { - color: #6a1b9a; - } -} - -.isCommerciale { - color: #e65100 !important; - - .q-avatar .q-icon { - color: #e65100; - } -} - -.isGrafico { - color: #00796b !important; - - .q-avatar .q-icon { - color: #00796b; - } -} - -.isDoc { - border-left: 3px solid #42a5f5; - background: linear-gradient(90deg, - rgba(66, 165, 245, 0.08) 0%, - rgba(66, 165, 245, 0.02) 100%); -} - -// ========================================== -// SUBTITLE - Testo secondario -// ========================================== -.subtitle { - font-size: 0.8rem; - color: #757575; - font-style: italic; - margin-top: 2px; - opacity: 0.85; - line-height: 1.3; -} - -// ========================================== -// BIGMENU - Titoli grandi -// ========================================== -.bigmenu { - font-size: 1.2rem; - font-weight: 700; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - letter-spacing: -0.01em; -} - -// ========================================== -// CLASSI EXTRA - Supporto customizzazioni +// EXTRA CLASSES // ========================================== .extraclass { // Placeholder per classi custom } // ========================================== -// RESPONSIVE -// ========================================== -@media screen and (max-width: 600px) { - .q-item { - padding: 5px 8px; - min-height: 40px; - } - - .q-expansion-item > .q-item { - padding: 5px 8px; - } - - .q-avatar { - width: 1.8rem !important; - height: 1.8rem !important; - font-size: 1.8rem !important; - - .q-icon { - font-size: 1.1rem; - } - } - - .q-item__section--thumbnail { - min-width: 32px; - padding-right: 8px; - } - - .bigmenu { - font-size: 1.1rem; - } - - .subtitle { - font-size: 0.75rem; - } -} - -// ========================================== -// ANIMAZIONI ENTRATA +// ANIMATIONS // ========================================== @keyframes fadeSlideIn { from { @@ -493,11 +591,50 @@ } // ========================================== -// FOCUS ACCESSIBILITA +// ACCESSIBILITY - Focus States // ========================================== -.q-item:focus-visible, -.q-expansion-item:focus-visible { - outline: 2px solid var(--q-primary); - outline-offset: 2px; - border-radius: 8px; +.q-item, +.q-expansion-item { + &:focus-visible { + outline: 2px solid var(--q-primary); + outline-offset: 2px; + border-radius: 8px; + } +} + +// ========================================== +// RESPONSIVE +// ========================================== +@media screen and (max-width: 600px) { + .q-item { + padding: 5px 8px; + min-height: 40px; + } + + .q-expansion-item > .q-item { + padding: 5px 8px; + } + + .q-avatar { + width: 1.8rem !important; + height: 1.8rem !important; + font-size: 1.8rem !important; + + .q-icon { + font-size: 1.1rem; + } + } + + .q-item__section--thumbnail { + min-width: 32px; + padding-right: 8px; + } + + .bigmenu { + font-size: 1.1rem; + } + + .subtitle { + font-size: 0.75rem; + } } \ No newline at end of file diff --git a/src/components/CMyUser/CMyUser.ts b/src/components/CMyUser/CMyUser.ts index 92f30022..762be0eb 100755 --- a/src/components/CMyUser/CMyUser.ts +++ b/src/components/CMyUser/CMyUser.ts @@ -17,7 +17,7 @@ import { useCircuitStore } from '@store/CircuitStore' export default defineComponent({ name: 'CMyUser', components: { CSendCoins, CSaldo, CUserInfoAccount }, - emits: ['setCmd', 'showInnerDialog'], + emits: ['setCmd', 'showInnerDialog', 'clickContact'], props: { mycontact: { type: Object as PropType, @@ -72,6 +72,11 @@ export default defineComponent({ type: Boolean, required: false, default: false, + }, + enableContactClick: { + type: Boolean, + required: false, + default: false, } }, @@ -128,13 +133,17 @@ export default defineComponent({ emit('showInnerDialog', showsendCoinTo.value) } - function clickToUser(username: string) { - if (props.actionType === costanti.ACTIONTYPE.SEND_RIS) - naviga(`/my/` + username + '?sr=0') - else if (props.actionType === costanti.ACTIONTYPE.LINK_REG) - naviga(`/registrati/` + username) - else - naviga(`/my/` + username) + function clickToUser(username: string, recuser: any) { + if (props.enableContactClick) { + emit('clickContact', { username, recuser }) + } else { + if (props.actionType === costanti.ACTIONTYPE.SEND_RIS) + naviga(`/my/` + username + '?sr=0') + else if (props.actionType === costanti.ACTIONTYPE.LINK_REG) + naviga(`/registrati/` + username) + else + naviga(`/my/` + username) + } } onMounted(mounted) diff --git a/src/components/CMyUser/CMyUser.vue b/src/components/CMyUser/CMyUser.vue index 56407fff..a26fbdf6 100755 --- a/src/components/CMyUser/CMyUser.vue +++ b/src/components/CMyUser/CMyUser.vue @@ -6,7 +6,7 @@ > - + {{ labelextra }} diff --git a/src/components/CSendCoins/CSendCoins.ts b/src/components/CSendCoins/CSendCoins.ts index 107be78e..5fdd11ca 100755 --- a/src/components/CSendCoins/CSendCoins.ts +++ b/src/components/CSendCoins/CSendCoins.ts @@ -362,9 +362,7 @@ export default defineComponent({ } } finally { loading.value = false; - if (load) { - fine_caricamento(); - } + fine_caricamento(); } } } diff --git a/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss index 9a58e7f9..1f2a8e25 100644 --- a/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss +++ b/src/components/Riso_Home_ParteFinale/Riso_Home_ParteFinale.scss @@ -1,8 +1,15 @@ - /* ========================================================= RISO Home (parte finale) — refresh estetico coerente ========================================================= */ +$space-xs: 4px; +$space-sm: 8px; +$space-md: 12px; +$space-lg: 16px; +$space-xl: 20px; +$space-xxl: 24px; + + .riso-modern-home { padding: $s-md; padding-bottom: calc(#{$s-md} + env(safe-area-inset-bottom)); @@ -28,6 +35,7 @@ } :global(body.body--dark) { + .content-section, .community-actions-section, .footer-section-modern { @@ -82,10 +90,12 @@ &::-webkit-scrollbar { height: 8px; } + &::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 999px; } + &::-webkit-scrollbar-track { background: transparent; } @@ -373,3 +383,56 @@ border: 1px solid rgba(255, 255, 255, 0.10); } } + +// ======================================== +// Community Actions Grid +// ======================================== +.community-actions-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $space-md; + margin-bottom: $space-lg; + + // Mobile: colonna singola se necessario + @media (max-width: 400px) { + grid-template-columns: 1fr; + gap: $space-sm; + } +} + +.community-action-btn { + display: flex; + align-items: center; + justify-content: center; + gap: $space-sm; + padding: $space-md $space-lg; + min-height: 48px; + font-size: 14px; + font-weight: 600; + text-transform: none; + box-shadow: var(--cm-shadow-sm); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: var(--cm-shadow-md); + } + + &:active { + transform: translateY(0); + } + + // Quasar icon spacing fix + :deep(.q-icon) { + margin-right: $space-xs; + } + + // Dark mode adjustments + .body--dark & { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + } + } +} \ No newline at end of file diff --git a/src/components/pageris/pageris.scss b/src/components/pageris/pageris.scss index c46d1043..2822144d 100644 --- a/src/components/pageris/pageris.scss +++ b/src/components/pageris/pageris.scss @@ -998,15 +998,23 @@ $space-xxl: 24px; // ======================================== // Send/Receive/Confirm Dialogs // ======================================== +// ======================================== +// Send/Receive/Confirm Dialogs - MODIFICATO +// ======================================== .send-dialog, .confirm-dialog { max-width: 500px; width: 100%; border-radius: $radius-xl; overflow: hidden; + display: flex; // AGGIUNTO + flex-direction: column; // AGGIUNTO + max-height: 100vh; // AGGIUNTO @media (max-width: 599px) { max-width: 100%; + height: 100vh; // AGGIUNTO + max-height: 100vh; // AGGIUNTO border-radius: 0; } } @@ -1017,6 +1025,7 @@ $space-xxl: 24px; align-items: center; padding: $space-lg $space-xl; color: white; + flex-shrink: 0; // AGGIUNTO - impedisce compressione &.send { background: $gradient-send; @@ -1037,32 +1046,41 @@ $space-xxl: 24px; .dialog-content { padding: $space-xl; + flex: 1; // AGGIUNTO - occupa spazio disponibile + overflow-y: auto; // AGGIUNTO - abilita scroll + overflow-x: hidden; // AGGIUNTO + + // AGGIUNTO - Scrollbar styling + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; + + &:hover { + background: rgba(0, 0, 0, 0.3); + } + } } .dialog-actions { padding: $space-md $space-xl $space-xl; + flex-shrink: 0; // AGGIUNTO - impedisce compressione + border-top: 1px solid var(--cm-border); // AGGIUNTO - separatore visivo } -.info-banner { - display: flex; - gap: $space-md; - align-items: flex-start; - padding: $space-md; - background: rgba(59, 130, 246, 0.1); - border: 1px solid rgba(59, 130, 246, 0.2); - border-radius: $radius-md; - margin-bottom: $space-lg; - - p { - margin: 0; - font-size: 13px; - color: #2563eb; - } -} - -// Contacts +// ======================================== +// Contacts Section - MODIFICATO +// ======================================== .contacts-section { margin-bottom: $space-lg; + // Rimosso max-height - ora gestito dal parent .contacts-title { display: flex; @@ -1074,14 +1092,45 @@ $space-xxl: 24px; letter-spacing: 0.5px; color: var(--cm-text-hint); margin-bottom: $space-md; + position: sticky; // AGGIUNTO - titolo sticky + top: 0; // AGGIUNTO + background: var(--cm-bg-card); // AGGIUNTO + padding: $space-sm 0; // AGGIUNTO + z-index: 1; // AGGIUNTO } } .contacts-scrollable { - max-height: 300px; - overflow-y: auto; + // Rimosso max-height e overflow - gestito dal parent .dialog-content + display: flex; + flex-direction: column; + gap: $space-sm; } +// ======================================== +// Dark Mode per Scrollbar - AGGIUNTO +// ======================================== +.body--dark { + .dialog-content { + &::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + } + + &::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + + &:hover { + background: rgba(255, 255, 255, 0.3); + } + } + } + + .contacts-section .contacts-title { + background: #1e293b; + } +} + + .contact-item { display: flex; align-items: center; @@ -2237,4 +2286,5 @@ $space-xxl: 24px; } } } -} \ No newline at end of file +} + diff --git a/src/components/pageris/pageris.vue b/src/components/pageris/pageris.vue index b0ac7f1e..22817a7b 100644 --- a/src/components/pageris/pageris.vue +++ b/src/components/pageris/pageris.vue @@ -999,6 +999,7 @@ transition-hide="slide-down" > +
+ + + + + -