- aggiornato Card service, e CGridTableRec.

2025-11-28 21:28:31 +01:00
parent 3018542868
commit 2abdda3b44
17 changed files with 1753 additions and 421 deletions
--- a/src/components/CMenuItem/CMenuItem.scss
+++ b/src/components/CMenuItem/CMenuItem.scss
@@ -1,144 +1,503 @@
+// ==========================================
+// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO
+// Mantiene tutto il codice originale + stile moderno
+// ==========================================
+
 .prova {
-    color: red;
+  color: red;
 }

 .q-list-header {
-    min-height: 12px;
-    padding: 5px 8px;
+  min-height: 12px;
+  padding: 5px 8px;
 }

 .menu-hr {
-    border-color: #dedede;
-    height: 0.5px;
+  border-color: #dedede;
+  height: 0.5px;
 }

-
 .list-label:first-child {
-    line-height: 20px;
-    padding: 5px;
-    margin: 1px;
+  line-height: 20px;
+  padding: 5px;
+  margin: 1px;
 }

 .router-link-active {
-    color: #027be3;
-    background-color: #dadada !important;
-    border-right: 2px solid #027be3;
+  color: #027be3;
+  background-color: #dadada !important;
+  border-right: 2px solid #027be3;
 }

 .router-link-active .item-primary {
-    color: #027be3;
+  color: #027be3;
 }

 .menu_freccina {
-    position: absolute;
-    right: 10px;
-    display: inline-block;
-    padding: 0 0 0 0;
-    -webkit-transform: rotate(-180deg);
-    transform: rotate(-180deg);
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+  padding: 0 0 0 0;
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
 }

 .my-menu,
 .my-menu>i {
-    min-height: 40px;
-    min-width: 26px;
-    font-size: 1rem;
+  min-height: 40px;
+  min-width: 26px;
+  font-size: 1rem;
 }

 .my-menu-small,
 .my-menu-small>i {
-    min-height: 40px;
-    min-width: 26px;
-    font-size: 0.75rem;
+  min-height: 40px;
+  min-width: 26px;
+  font-size: 0.75rem;
 }

 .isAdmin {
-    color: red !important;
+  color: red !important;
 }

 .isSocioResidente {
-    color: darkgreen;
+  color: darkgreen;
 }

 .isCalendar {}

 .isManager {
-    color: green !important;
+  color: green !important;
 }

 .isFacilitatore {
-    color: #201a80;
+  color: #201a80;
 }
+
 .onlyCollaboratore {
-    color: #bd7b10;
+  color: #bd7b10;
 }

 .my-menu-icon {
-    min-width: 2px;
-    font-size: 1rem;
+  min-width: 2px;
+  font-size: 1rem;
 }

 .my-menu-icon>i {
-    min-width: 26px;
-    font-size: 1.25rem;
+  min-width: 26px;
+  font-size: 1.25rem;
 }

 .clexpansion {
-    min-width: 0 !important;
+  min-width: 0 !important;
 }

 .my-menu-active {
-    background-color: rgba(174, 189, 241, 0.71);
+  background-color: rgba(174, 189, 241, 0.71);
 }

 .my-menu-separat>i {
-    min-width: 26px;
-    font-size: 1rem;
+  min-width: 26px;
+  font-size: 1rem;
 }

 .my-menu-icon-none>i {
-    display: none;
+  display: none;
 }

 .clicon img,
 .clicon {
-    font-size: 16px;
+  font-size: 16px;
 }

 .q-item__section--avatar {
-    min-width: 30px;
+  min-width: 30px;
 }

 .OLD_q-item__section--side {
-    padding-right: 8px;
+  padding-right: 8px;
 }

-
 .imgicon img {
-    font-size: 2.5rem !important;
-    border-radius: 8px;
+  font-size: 2.5rem !important;
+  border-radius: 8px;
 }

-
 /*
-  .menu-enter-active, .scale-enter {
-      -webkit-animation: moveFromTopFade .5s ease both;
-      animation: moveFromTopFade .5s ease both;
-  }
-  
-  .menu-leave-to, .scale-leave-active {
-      -webkit-animation: moveToBottom .5s ease both;
-      animation: moveToBottom .5s ease both;
-  }
-  */
+.menu-enter-active, .scale-enter {
+    -webkit-animation: moveFromTopFade .5s ease both;
+    animation: moveFromTopFade .5s ease both;
+}
+
+.menu-leave-to, .scale-leave-active {
+    -webkit-animation: moveToBottom .5s ease both;
+    animation: moveToBottom .5s ease both;
+}
+*/

 .bigmenu {
-    font-size: 1.25rem;
-    font-weight: bold;
-    text-shadow: 0.0512rem 0.052rem .01rem #555;
+  font-size: 1.25rem;
+  font-weight: bold;
+  text-shadow: 0.0512rem 0.052rem .01rem #555;
 }

 .subtitle {
  font-size: 0.85em;
  color: #666;
 }
+
+// ==========================================
+// MIGLIORAMENTI STILE RISO - AGGIUNTI
+// ==========================================
+
+// ==========================================
+// INDENTAZIONE LIVELLI - Più compatta
+// ==========================================
+[style*="paddingLeft"] {
+  transition: all 0.3s ease;
+}
+
+// ==========================================
+// Q-SEPARATOR - Divisore migliorato
+// ==========================================
+.q-separator {
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(0, 0, 0, 0.1) 50%, 
+    transparent 100%);
+  margin: 6px 0;
+  height: 1px;
+}
+
+// ==========================================
+// Q-EXPANSION-ITEM - Espandibile migliorato
+// ==========================================
+.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);
+      transform: translateX(2px);
+    }
+  }
+  
+  // 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);
+  }
+}
+
+// Quando espanso
+.q-expansion-item--expanded {
+  > .q-item {
+    background: rgba(0, 0, 0, 0.02);
+    
+    .q-icon {
+      color: var(--q-primary);
+      transform: rotate(0deg);
+    }
+  }
+}
+
+// ==========================================
+// Q-ITEM FOGLIA - Voce menu semplice
+// ==========================================
+.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);
+    transform: translateX(3px);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  
+  &: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);
+  }
+}
+
+// ==========================================
+// Q-AVATAR - Icone migliorate
+// ==========================================
+.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;
+  }
+}
+
+.q-item:hover .q-avatar {
+  transform: scale(1.08);
+  
+  .q-icon {
+    transform: rotate(-5deg);
+  }
+}
+
+// ==========================================
+// MY-MENU-ACTIVE - Stato attivo
+// ==========================================
+.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;
+  }
+}
+
+// ==========================================
+// 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
+// ==========================================
+.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
+// ==========================================
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.q-item,
+.q-expansion-item {
+  animation: fadeSlideIn 0.3s ease;
+}
+
+// ==========================================
+// FOCUS ACCESSIBILITA
+// ==========================================
+.q-item:focus-visible,
+.q-expansion-item:focus-visible {
+  outline: 2px solid var(--q-primary);
+  outline-offset: 2px;
+  border-radius: 8px;
+}