Tower: upload cetmix_tower_server 16.0.2.2.9 (via marketplace)

2026-04-27 08:44:33 +00:00
parent 9c9cc898a4
commit d6d2136df6
1 changed files with 190 additions and 0 deletions
--- a/addons/cetmix_tower_server/static/src/components/ace_variables/autocomplete_popup.scss
+++ b/addons/cetmix_tower_server/static/src/components/ace_variables/autocomplete_popup.scss
@@ -0,0 +1,190 @@
+// Define z-index variable for better management
+$z-index-autocomplete: 1050; // Above dropdowns but below modals
+
+.ace-autocomplete-popup {
+    position: absolute; // Keep original positioning for cursor placement
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: $z-index-autocomplete;
+    min-width: 300px;
+    max-width: 500px;
+    max-height: 300px;
+    overflow: hidden;
+    font-family: monospace;
+    font-size: 14px;
+
+    // Mobile adaptations
+    @media (max-width: 768px) {
+        width: 90%;
+        min-width: unset;
+        max-width: unset;
+        left: 50% !important;
+        transform: translateX(-50%);
+        font-size: 13px;
+    }
+}
+
+.ace-autocomplete-search {
+    padding: 8px;
+    padding-right: 48px; // Add right padding to avoid overlap with close button
+    border-bottom: 1px solid #eee;
+    background: #f8f9fa;
+
+    // Mobile: reduce padding
+    @media (max-width: 768px) {
+        padding: 6px;
+        padding-right: 56px;
+    }
+}
+
+.ace-autocomplete-search-input {
+    width: 100%;
+    padding: 6px 10px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    font-size: 13px;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.ace-autocomplete-search-input:focus {
+    border-color: #007cba;
+    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1);
+}
+
+.ace-autocomplete-items {
+    max-height: 240px;
+    overflow-y: auto;
+
+    /* Standard scrollbar styling (Firefox 64+) */
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
+}
+
+/* Scrollbar styling for webkit browsers */
+.ace-autocomplete-items::-webkit-scrollbar {
+    width: 6px;
+}
+
+.ace-autocomplete-items::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.ace-autocomplete-items::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+.ace-autocomplete-items::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+.ace-autocomplete-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    // Mobile: stack items vertically with reduced padding
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 6px 12px;
+    }
+}
+
+.ace-autocomplete-item:hover {
+    background-color: #f5f5f5;
+}
+
+.ace-autocomplete-item-selected {
+    background-color: #e6f3ff;
+    color: #0066cc;
+}
+
+.ace-autocomplete-item-selected:hover {
+    background-color: #cce7ff;
+}
+
+.command-name {
+    font-weight: 600;
+    color: #333;
+    flex: 1;
+    margin-right: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    // Mobile adaptations
+    @media (max-width: 768px) {
+        margin-right: 0;
+        margin-bottom: 2px; // Reduced from 4px
+        width: 100%;
+        font-size: 14px;
+    }
+}
+
+.command-description {
+    color: #666;
+    font-size: 12px;
+    font-style: italic;
+    flex-shrink: 0;
+
+    // Mobile adaptations
+    @media (max-width: 768px) {
+        font-size: 11px;
+        width: 100%;
+        word-break: break-word;
+    }
+}
+
+.ace-autocomplete-no-results {
+    padding: 16px 12px;
+    text-align: center;
+    color: #999;
+    font-style: italic;
+}
+
+// Close button styles
+.ace-autocomplete-close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    font-weight: bold;
+    color: #666;
+    cursor: pointer;
+    padding: 4px 8px;
+    line-height: 1;
+    border-radius: 3px;
+    z-index: 1;
+    min-width: 30px;
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        background-color: #f0f0f0;
+        color: #333;
+    }
+
+    &:active {
+        background-color: #e0e0e0;
+    }
+
+    // Mobile-friendly touch target
+    @media (max-width: 768px) {
+        min-width: 40px;
+        min-height: 40px;
+        font-size: 24px;
+        top: 4px;
+        right: 4px;
+    }
+}