- invio RIS...
This commit is contained in:
Surya Paolo
@@ -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 *;`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -65,6 +65,9 @@
|
||||
:showCol="false"
|
||||
:extraparams="extraparams()"
|
||||
:actionType="actionType"
|
||||
@clickContact="clickContact"
|
||||
:enableContactClick="enableContactClick"
|
||||
|
||||
>
|
||||
</CGridTableRec>
|
||||
</div>
|
||||
@@ -99,6 +102,8 @@
|
||||
:extraparams="extraparams_groups()"
|
||||
:actionType="actionType"
|
||||
:visufind="costanti.FIND_GROUP"
|
||||
@clickContact="clickContact"
|
||||
:enableContactClick="enableContactClick"
|
||||
>
|
||||
</CGridTableRec>
|
||||
</div>
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -679,6 +679,8 @@
|
||||
col_footer ? tools.getLabelFooterByRow(row, col_footer, tablesel) : ''
|
||||
"
|
||||
@showInnerDialog="showInnerDialog"
|
||||
@clickContact="clickContact"
|
||||
:enableContactClick="enableContactClick"
|
||||
>
|
||||
</CMyUser>
|
||||
|
||||
@@ -701,6 +703,8 @@
|
||||
:finder="false"
|
||||
:mygrp="row"
|
||||
:visu="visufind ? visufind : costanti.FIND_GROUP"
|
||||
@clickContact="clickContact"
|
||||
:enableContactClick="enableContactClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<IUserFields | null>,
|
||||
@@ -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)
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
>
|
||||
<q-item-section
|
||||
avatar
|
||||
@click="clickToUser(contact.username)"
|
||||
@click="clickToUser(contact.username, contact)"
|
||||
>
|
||||
<q-avatar size="60px">
|
||||
<q-img
|
||||
@@ -18,7 +18,7 @@
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section @click="clickToUser(contact.username)">
|
||||
<q-item-section @click="clickToUser(contact.username, contact)">
|
||||
<q-item-label v-if="labelextra && labelextra !== contact.username"
|
||||
><strong>{{ labelextra }}</strong></q-item-label
|
||||
>
|
||||
|
||||
@@ -362,9 +362,7 @@ export default defineComponent({
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
if (load) {
|
||||
fine_caricamento();
|
||||
}
|
||||
fine_caricamento();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -999,6 +999,7 @@
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="send-dialog">
|
||||
<!-- HEADER FISSO -->
|
||||
<q-card-section class="dialog-header send">
|
||||
<div class="dialog-title">
|
||||
<q-icon
|
||||
@@ -1017,123 +1018,151 @@
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<!-- CONTENUTO SCROLLABILE -->
|
||||
<q-card-section class="dialog-content">
|
||||
<!-- TOGGLE SELEZIONE VISTA CONTATTI -->
|
||||
<q-btn-toggle
|
||||
v-model="contactViewMode"
|
||||
spread
|
||||
no-caps
|
||||
rounded
|
||||
unelevated
|
||||
toggle-color="primary"
|
||||
color="grey-3"
|
||||
text-color="grey-8"
|
||||
class="contact-view-toggle q-mb-md"
|
||||
:options="contactViewOptions"
|
||||
/>
|
||||
|
||||
<!-- CAMPO DI RICERCA -->
|
||||
<q-input
|
||||
v-if="contactViewMode === 'recent'"
|
||||
v-model="sendSearch"
|
||||
label="Cerca destinatario..."
|
||||
:label="searchPlaceholder"
|
||||
outlined
|
||||
dense
|
||||
clearable
|
||||
class="search-input"
|
||||
@update:model-value="searchRecipients"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Contatti recenti -->
|
||||
<!-- VISTA: CONTATTI RECENTI -->
|
||||
<div
|
||||
v-if="recentContacts.length && !sendSearch"
|
||||
v-if="contactViewMode === 'recent'"
|
||||
class="contacts-section"
|
||||
>
|
||||
<div class="contacts-title">
|
||||
<q-icon
|
||||
name="history"
|
||||
size="16px"
|
||||
/>
|
||||
<span>Usati di recente</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="contact in recentContacts"
|
||||
:key="contact.username"
|
||||
class="contact-item recent"
|
||||
@click="selectRecipient(contact)"
|
||||
>
|
||||
<q-avatar
|
||||
round
|
||||
size="44px"
|
||||
>
|
||||
<img :src="userStore.getImgByProfile(contact)" />
|
||||
<q-badge
|
||||
v-if="tools.isUserOnline(contact)"
|
||||
floating
|
||||
color="green"
|
||||
rounded
|
||||
/>
|
||||
</q-avatar>
|
||||
<div class="contact-info">
|
||||
<div
|
||||
v-if="contact.name"
|
||||
class="contact-name"
|
||||
>
|
||||
{{ contact.name }}
|
||||
<span v-if="contact.surname">{{ contact.surname }}</span>
|
||||
</div>
|
||||
<div class="contact-username">@{{ contact.username }}</div>
|
||||
</div>
|
||||
<q-icon
|
||||
name="chevron_right"
|
||||
size="20px"
|
||||
color="grey-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risultati ricerca -->
|
||||
<div
|
||||
v-if="sendSearch && filteredContacts.length"
|
||||
class="contacts-section"
|
||||
>
|
||||
<div class="contacts-title">
|
||||
<q-icon
|
||||
name="people"
|
||||
size="16px"
|
||||
/>
|
||||
<span>Risultati ricerca</span>
|
||||
</div>
|
||||
<div class="contacts-scrollable">
|
||||
<div
|
||||
v-for="contact in filteredContacts"
|
||||
:key="contact.id"
|
||||
class="contact-item"
|
||||
@click="selectRecipient(contact)"
|
||||
>
|
||||
<q-avatar
|
||||
size="44px"
|
||||
:color="contact.avatarColor"
|
||||
text-color="white"
|
||||
>
|
||||
{{ contact.initials }}
|
||||
</q-avatar>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name">{{ contact.name }}</div>
|
||||
<div class="contact-username">@{{ contact.username }}</div>
|
||||
</div>
|
||||
<!-- Lista contatti recenti -->
|
||||
<template v-if="filteredRecentContacts.length">
|
||||
<div class="contacts-title">
|
||||
<q-icon
|
||||
name="chevron_right"
|
||||
size="20px"
|
||||
color="grey-6"
|
||||
name="history"
|
||||
size="16px"
|
||||
/>
|
||||
<span>Usati di recente</span>
|
||||
<q-badge
|
||||
color="primary"
|
||||
:label="filteredRecentContacts.length"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="contacts-scrollable">
|
||||
<div
|
||||
v-for="contact in filteredRecentContacts"
|
||||
:key="contact.username"
|
||||
class="contact-item recent"
|
||||
@click="selectRecipient(contact)"
|
||||
>
|
||||
<q-avatar
|
||||
round
|
||||
size="44px"
|
||||
>
|
||||
<img :src="userStore.getImgByProfile(contact)" />
|
||||
<q-badge
|
||||
v-if="tools.isUserOnline(contact)"
|
||||
floating
|
||||
color="green"
|
||||
rounded
|
||||
/>
|
||||
</q-avatar>
|
||||
<div class="contact-info">
|
||||
<div
|
||||
v-if="contact.name"
|
||||
class="contact-name"
|
||||
>
|
||||
{{ contact.name }}
|
||||
<span v-if="contact.surname">{{ contact.surname }}</span>
|
||||
</div>
|
||||
<div class="contact-username">@{{ contact.username }}</div>
|
||||
</div>
|
||||
<q-icon
|
||||
name="chevron_right"
|
||||
size="20px"
|
||||
color="grey-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Nessun contatto recente -->
|
||||
<div
|
||||
v-else
|
||||
class="no-results"
|
||||
>
|
||||
<q-icon
|
||||
:name="sendSearch ? 'search_off' : 'history'"
|
||||
size="56px"
|
||||
color="grey-5"
|
||||
/>
|
||||
<p>
|
||||
{{
|
||||
sendSearch
|
||||
? 'Nessun contatto recente trovato'
|
||||
: 'Nessun contatto recente'
|
||||
}}
|
||||
</p>
|
||||
<q-btn
|
||||
v-if="!sendSearch"
|
||||
flat
|
||||
color="primary"
|
||||
label="Cerca in tutti i contatti"
|
||||
icon="people"
|
||||
no-caps
|
||||
@click="contactViewMode = 'all'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VISTA: TUTTI I CONTATTI -->
|
||||
<div
|
||||
v-if="sendSearch && !filteredContacts.length"
|
||||
class="no-results"
|
||||
v-else-if="contactViewMode === 'all'"
|
||||
class="contacts-section"
|
||||
>
|
||||
<q-icon
|
||||
name="search_off"
|
||||
size="56px"
|
||||
color="grey-5"
|
||||
/>
|
||||
<p>Nessun contatto trovato</p>
|
||||
<CTitleBanner
|
||||
class="q-pa-xs"
|
||||
:title="$t('circuit.sendcoins')"
|
||||
bgcolor="white"
|
||||
bgcolor2="lightblue"
|
||||
clcolor="text-indigo"
|
||||
:canopen="true"
|
||||
:small="true"
|
||||
:open="true"
|
||||
>
|
||||
<CFindUsers
|
||||
v-show="contactViewMode === 'all'"
|
||||
:actionType="costanti.ACTIONTYPE.SEND_RIS"
|
||||
:enableContactClick="true"
|
||||
@clickContact="clickContact"
|
||||
/>
|
||||
</CTitleBanner>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<CSendCoins
|
||||
v-if="showReceiveDialog"
|
||||
mode="receive"
|
||||
@@ -1238,6 +1267,7 @@ import { CRISBalanceBar } from '@/components/CRISBalanceBar';
|
||||
import { CSingleMovement } from '@/components/CSingleMovement';
|
||||
import { CSendCoins } from '@/components/CSendCoins';
|
||||
import { CTitleBanner } from '@/components/CTitleBanner';
|
||||
import { CFindUsers } from '@/components/CFindUsers';
|
||||
import { CQRCode } from '@/components/CQRCode';
|
||||
import { CCopyBtnSmall } from '@/components/CCopyBtnSmall';
|
||||
import { CFinder } from '@/components/CFinder';
|
||||
@@ -1272,6 +1302,61 @@ const exploreSearch = ref('');
|
||||
// Transactions
|
||||
const allTransactions = ref<IMovVisu[]>([]);
|
||||
|
||||
// ============================================
|
||||
// STATE
|
||||
// ============================================
|
||||
const contactViewMode = ref('recent'); // 'recent' | 'all'
|
||||
const sendSearch = ref('');
|
||||
|
||||
// ============================================
|
||||
// COMPUTED
|
||||
// ============================================
|
||||
|
||||
// Opzioni per il toggle
|
||||
const contactViewOptions = computed(() => [
|
||||
{
|
||||
label: 'Recenti',
|
||||
value: 'recent',
|
||||
icon: 'history',
|
||||
slot: 'recent',
|
||||
},
|
||||
{
|
||||
label: 'Tutti',
|
||||
value: 'all',
|
||||
icon: 'people',
|
||||
slot: 'all',
|
||||
},
|
||||
]);
|
||||
|
||||
// Placeholder dinamico per la ricerca
|
||||
const searchPlaceholder = computed(() => {
|
||||
return contactViewMode.value === 'recent'
|
||||
? 'Cerca nei contatti recenti...'
|
||||
: 'Cerca in tutti i contatti...';
|
||||
});
|
||||
|
||||
// Contatti recenti filtrati
|
||||
const filteredRecentContacts = computed(() => {
|
||||
if (!sendSearch.value) {
|
||||
return recentContacts.value;
|
||||
}
|
||||
|
||||
const search = sendSearch.value.toLowerCase().trim();
|
||||
|
||||
return recentContacts.value.filter((contact) => {
|
||||
const name = contact.name?.toLowerCase() || '';
|
||||
const surname = contact.surname?.toLowerCase() || '';
|
||||
const username = contact.username?.toLowerCase() || '';
|
||||
|
||||
return (
|
||||
name.includes(search) ||
|
||||
surname.includes(search) ||
|
||||
username.includes(search) ||
|
||||
`${name} ${surname}`.includes(search)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
function configureShowcase() {
|
||||
// Naviga alla configurazione vetrina
|
||||
closeReceiveDialog();
|
||||
@@ -1400,7 +1485,6 @@ const showConfirmSendDialog = ref(false);
|
||||
const showConfirmReceiveDialog = ref(false);
|
||||
|
||||
// Send states
|
||||
const sendSearch = ref('');
|
||||
const selectedRecipient = ref<any>(null);
|
||||
|
||||
const filteredContacts = computed(() => {
|
||||
@@ -1694,8 +1778,8 @@ const getOtherUserUsername = computed(() => {
|
||||
if (!selectedMov.value) return '';
|
||||
// Adatta in base alla tua struttura dati
|
||||
return isSelectedMovSent.value
|
||||
? selectedMov.value.to_username || getOtherUserName.value
|
||||
: selectedMov.value.from_username || getOtherUserName.value;
|
||||
? selectedMov.value.userto.username || getOtherUserName.value
|
||||
: selectedMov.value.userfrom.username || getOtherUserName.value;
|
||||
});
|
||||
|
||||
const getOtherUserAvatar = computed(() => {
|
||||
@@ -1744,6 +1828,15 @@ const openPresentazione = () => {
|
||||
const openGuidaRIS = () => {
|
||||
$router.push('/faq_ris');
|
||||
};
|
||||
|
||||
const clickContact = (data: any) => {
|
||||
const recuser = data.recuser;
|
||||
if (recuser) {
|
||||
selectRecipient(recuser);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user