cat-documents-ng 1.0.4 → 1.0.6

package/src/lib/document/components/document-list/document-list.component.scss

@@ -0,0 +1,513 @@
+.document-list-wrapper{
+    .p-accordion-header-link {
+        padding: 0.5rem;
+    }
+    .p-sidebar-right{
+        width: 35%;
+    }
+}
+.error-message-wrapper{
+  color: #dc3545;
+}
+.right-sidebar{
+    width: 35%;
+}
+
+.document-title-wrapper{
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text-color);
+}
+
+.document-input-field{
+    display: flex;
+    flex-direction: column;
+    input{
+        width:100%;
+        height: 46px;
+        padding: 10px 15px 10px 15px;
+        gap: 10px;
+        border-radius: 10px;
+        outline: none;
+        border: 1px solid #4C62921A;
+        font-size: 15px;
+    }
+}
+label{
+    color: #0F1729;
+    font-weight: 600;
+
+}
+.document-list-dropDown{
+    .p-element{
+        padding: 10px 0px 10px 15px;
+    }
+    .p-dropdown{
+        border-radius: 10px !important;
+    }
+}
+
+
+.side-bar-con{
+    display: flex;
+    flex-direction: column;
+}
+
+
+.save-btn-con{
+    width: 100%;
+    border-top: 1px solid #4C629233;
+    background: #4C629214;
+    padding: 13px 40px 13px 40px
+    
+}
+
+.save-btn-wrapper{
+    padding: 10px 4px;
+}
+
+.save-btn{
+    .p-button{
+        height: 45px !important;
+        width: 140px;
+        border-radius: 10px;
+    }
+    
+
+}
+.p-sidebar-footer {
+    padding: 0px;
+}
+
+.file-input-wrapper.p-inputtext:enabled:focus {
+    box-shadow: 0 0 0 0.2rem #a6d5fa !important;
+}
+
+// Clickable document name styles
+.clickable-doc-name {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+    
+    &:hover {
+        background-color: rgba(76, 98, 146, 0.1);
+        color: var(--primary-color, #4C6292);
+    }
+    
+    &:active {
+        background-color: rgba(76, 98, 146, 0.2);
+        transform: scale(0.98);
+    }
+    
+    .edit-icon {
+        font-size: 0.8em;
+        margin-left: 8px;
+        opacity: 0.6;
+        transition: opacity 0.2s ease;
+    }
+    
+    &:hover .edit-icon {
+        opacity: 1;
+    }
+}
+
+// Document name display styles (alias name + document name)
+.document-name-display {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+    width: 100%;
+    
+    &:hover {
+        background-color: rgba(76, 98, 146, 0.1);
+        
+        .alias-name {
+            color: var(--primary-color, #4C6292);
+        }
+    }
+    
+    &:active {
+        background-color: rgba(76, 98, 146, 0.2);
+        transform: scale(0.98);
+    }
+    
+    .alias-name {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--text-color, #2c3e50);
+        line-height: 1.2;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        max-width: none;
+        transition: color 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 8px;
+        
+            .edit-icon-small {
+        font-size: 0.7em;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s ease, visibility 0.2s ease;
+        margin-left: 6px;
+    }
+    }
+    
+    &:hover .edit-icon-small {
+        opacity: 1;
+        visibility: visible;
+    }
+    
+    .document-name {
+        font-size: 0.875rem;
+        color: var(--text-color-secondary, #6c757d);
+        font-weight: 400;
+        line-height: 1.2;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        max-width: none;
+        opacity: 0.8;
+    }
+}
+
+// Document name input field styles
+.file-input-wrapper {
+    transition: all 0.2s ease;
+    min-width: 300px !important;
+    width: auto !important;
+    max-width: 80vw !important;
+    
+    &:focus {
+        border-color: var(--primary-color, #4C6292) !important;
+        box-shadow: 0 0 0 0.2rem rgba(76, 98, 146, 0.25) !important;
+        outline: none !important;
+    }
+}
+
+// Specific styles for document name input in header
+.document-name-input {
+    min-width: 400px !important;
+    width: auto !important;
+    max-width: 70vw !important;
+    padding: 8px 12px !important;
+    font-size: 1.1rem !important;
+    font-weight: 500 !important;
+    border: 2px solid var(--primary-color, #4C6292) !important;
+    border-radius: 6px !important;
+    background-color: white !important;
+    
+    &:focus {
+        outline: none !important;
+        border-color: var(--primary-color, #4C6292) !important;
+        box-shadow: 0 0 0 0.2rem rgba(76, 98, 146, 0.25) !important;
+    }
+}
+
+// Container for edit input and subline
+.document-edit-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    width: 100%;
+    max-width: 70vw;
+}
+
+// Subline under input showing original file name
+.document-name-subline {
+    font-size: 0.85rem;
+    color: var(--text-color-secondary, #6c757d);
+    line-height: 1.2;
+    padding-left: 4px;
+    opacity: 0.8;
+}
+
+// Document viewer dialog styles - ensure proper positioning
+.document-viewer {
+  position: relative;
+  z-index: 1;
+  
+  // Ensure dialogs appear above everything
+  ::ng-deep .p-dialog {
+    z-index: 9999 !important;
+  }
+  
+  ::ng-deep .p-dialog-mask {
+    z-index: 9998 !important;
+  }
+  
+  // Ensure dialog takes full screen properly
+  ::ng-deep .p-dialog {
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: none !important;
+    max-height: none !important;
+    margin: 0 !important;
+    top: 0 !important;
+    left: 0 !important;
+    transform: none !important;
+  }
+  
+  ::ng-deep .p-dialog-content {
+    height: calc(100vh - 60px) !important; // Account for header
+    max-height: none !important;
+  }
+}
+
+// Document categories styles
+.document-categories-container {
+  padding: 1rem;
+  min-height: auto; // Changed from 100vh to auto for flexible layout
+
+  .category {
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+
+    .category-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1rem;
+      padding-top: 0.6rem;
+      padding-bottom: 1rem;
+
+      .category-title {
+        flex: 1;
+        min-width: 0;
+        
+        h3 {
+          margin: 0 0 0.5rem 0;
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #2c3e50;
+        }
+
+        .category-description {
+          margin: 0;
+          color: #6c757d;
+          font-size: 0.875rem;
+          line-height: 1.4;
+        }
+      }
+
+      .completion-status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: fit-content;
+        
+        .status-badge {
+          background-color: #fbbf24;
+          color: #92400e;
+          padding: 0.375rem 0.75rem;
+          border-radius: 6px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          display: inline-block;
+        }
+        
+        .completion-badge {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          .p-badge {
+            font-size: 0.75rem;
+            font-weight: 500;
+            padding: 0.375rem 0.75rem;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: fit-content;
+            white-space: nowrap;
+            
+            &.p-badge-success {
+              background-color: #d1fae5;
+              color: #065f46;
+              font-family: inherit;
+    font-size: 12px;
+    padding: 15px;
+    font-weight: 400;
+  }
+  
+            &.p-badge-info {
+              background-color: #E5E7EB;
+              color: black;
+              font-family: inherit;
+              font-size: 12px;
+              font-weight: 400;
+  padding: 15px;
+  font-style: inherit;
+}
+            
+            &.p-badge-warning {
+              background-color: #FEF3C7;
+    color: #D97706;
+    font-family: inherit;
+    padding: 15px;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: inherit;
+            }
+            
+            &.p-badge-danger {
+              background-color: #FEE2E2;
+    color: #DC2626;
+    font-family: inherit;
+    font-size: 12px;
+    padding: 15px;
+    font-weight: 400;
+    font-style: inherit;
+            }
+          }
+        }
+      }
+    }
+
+    .table-container {
+      padding: 0;
+    }
+  }
+}
+
+// Highlight pulse animation
+@keyframes highlightPulse {
+  0% {
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
+  }
+  50% {
+    transform: scale(1.03);
+    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
+  }
+  100% {
+    transform: scale(1.02);
+    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
+  }
+}
+
+// Document sections styles
+.document-sections-container {
+  padding: 1rem;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+
+  .section {
+    background: white;
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 1.5rem 1.5rem 1rem 1.5rem;
+      border-bottom: 1px solid #e9ecef;
+
+      .section-title {
+        h3 {
+          margin: 0 0 0.5rem 0;
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #2c3e50;
+        }
+
+        .section-description {
+          margin: 0;
+          color: #6c757d;
+          font-size: 0.875rem;
+          line-height: 1.4;
+        }
+      }
+
+      .completion-status {
+        .status-badge {
+          background-color: #fbbf24;
+          color: #92400e;
+          padding: 0.375rem 0.75rem;
+          border-radius: 6px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          display: inline-block;
+        }
+        
+        .completion-badge {
+          .p-badge {
+            font-size: 0.75rem;
+            font-weight: 500;
+            padding: 0.375rem 0.75rem;
+            border-radius: 6px;
+            
+            &.p-badge-success {
+              background-color: #10b981;
+              color: white;
+            }
+            
+            &.p-badge-info {
+              background-color: #3b82f6;
+              color: white;
+            }
+            
+            &.p-badge-warning {
+              background-color: #f59e0b;
+              color: white;
+            }
+            
+            &.p-badge-danger {
+              background-color: #ef4444;
+              color: white;
+            }
+          }
+        }
+      }
+    }
+
+    .table-container {
+      padding: 0;
+    }
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .document-categories-container,
+  .document-sections-container {
+    padding: 0.5rem;
+
+    .category,
+    .section {
+      .category-header,
+      .section-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+
+        .completion-status {
+          align-self: center;
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}