- Implementazione TRASPORTI ! Passo 1

2025-12-22 01:19:23 +01:00
parent 83a0cf653c
commit c9fc1a83d0
123 changed files with 27433 additions and 28 deletions
--- a/src/modules/trasporti/components/chat/ChatInput.scss
+++ b/src/modules/trasporti/components/chat/ChatInput.scss
@@ -0,0 +1,160 @@
+.chat-input {
+  background: white;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+
+  &__reply {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: rgba(var(--q-primary-rgb), 0.04);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  }
+
+  &__reply-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__reply-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+  }
+
+  &__reply-sender {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--q-primary);
+  }
+
+  &__reply-text {
+    font-size: 12px;
+    color: var(--q-grey-7);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__main {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    padding: 8px 12px;
+  }
+
+  &__field {
+    flex: 1;
+    background: #f5f5f5;
+    border-radius: 24px;
+    padding: 8px 16px;
+
+    :deep(.q-field__control) {
+      height: auto;
+      min-height: 36px;
+    }
+
+    :deep(.q-field__native) {
+      padding: 0;
+      min-height: 20px;
+      max-height: 120px;
+    }
+
+    :deep(textarea) {
+      resize: none;
+    }
+  }
+
+  &__send {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+  }
+
+  &__emoji-picker {
+    padding: 8px 12px;
+    background: #fafafa;
+    border-top: 1px solid rgba(0, 0, 0, 0.04);
+  }
+
+  &__emoji-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  &__emoji {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.08);
+    }
+  }
+}
+
+// Animations
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+// Dark mode
+.body--dark {
+  .chat-input {
+    background: #1e1e1e;
+    border-color: rgba(255, 255, 255, 0.08);
+
+    &__reply {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: rgba(255, 255, 255, 0.04);
+    }
+
+    &__reply-text {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    &__field {
+      background: #2d2d2d;
+    }
+
+    &__emoji-picker {
+      background: #252525;
+      border-color: rgba(255, 255, 255, 0.04);
+    }
+
+    &__emoji:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}