UI style adjustment

lib/app/communications/contact.js

@@ -73,7 +73,7 @@ class Contact {
                     if (item == null) {
                         return false;
                     }
-                    item.Id = -1;
+                    //item.Id = -1;
                     item.SaveToCustomer = 0;
                     if (typeof this.#option.onSave === 'function') {
                         return this.#option.onSave.call(this, item, 'workorder');

lib/app/communications/customer.js

@@ -337,6 +337,7 @@ class CustomerCommunication {
         if (option.autoUpdatesVisible === false) {
             checkAutoUpdate.style.display = 'none';
         }
+        const This = this;
         const checkLink = createCheckbox({
             className: 'check-status-link',
             enabled: !readonly,
@@ -347,6 +348,9 @@ class CustomerCommunication {
                 setTooltip(checkLink, this.checked ?
                     r('statusLinkIncluded', 'Status Link Included') :
                     r('statusLinkExcluded', 'Status Link Excluded'));
+                if (typeof option.onStatusLinkChanged === 'function') {
+                    option.onStatusLinkChanged.call(This, this.checked);
+                }
             }
         });
         if (option.statusLinkVisible === false) {
@@ -898,7 +902,33 @@ class CustomerCommunication {
                             });
                         });
                     })
-                )
+                ),
+                createElement('div', div => {
+                    div.className = 'bar-info';
+                    div.innerText = r('contactInformation', 'Contact Information');
+                }),
+                createElement('div', div => {
+                    if (option.contactCollapsed) {
+                        container.classList.add('collapsed');
+                        div.className = 'bar-collapser collapsed';
+                    } else {
+                        div.className = 'bar-collapser';
+                    }
+                    div.addEventListener('click', () => {
+                        const collapsed = div.classList.contains('collapsed');
+                        if (collapsed) {
+                            div.classList.remove('collapsed');
+                            container.classList.remove('collapsed');
+                        } else {
+                            div.classList.add('collapsed');
+                            container.classList.add('collapsed');
+                        }
+                        if (typeof option.onContactCollapsed === 'function') {
+                            option.onContactCollapsed.call(this, !collapsed);
+                        }
+                    });
+                    div.append(createElement('span'));
+                })
             )
         );
         return contacts;

lib/app/communications/style.scss

@@ -133,6 +133,7 @@
         padding: 4px 0;
         display: flex;
         border-bottom: 1px solid var(--title-bg-color);
+        position: relative;
 
         >.bar-icon {
             flex: 0 0 auto;
@@ -149,8 +150,10 @@
             width: calc(100% - 46px);
 
             .bar-list-container {
+                min-height: 26px;
                 max-height: 120px;
                 overflow: auto;
+                position: relative;
             }
 
             .contact-item {
@@ -178,6 +181,46 @@
             }
         }
 
+        >.bar-info {
+            display: none;
+            flex: 1 1 auto;
+            text-align: right;
+            margin-right: 50px;
+        }
+
+        >.bar-collapser {
+            position: absolute;
+            top: 3px;
+            right: 18px;
+            width: 26px;
+            height: 26px;
+            box-sizing: border-box;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 13px;
+            transition: background-color .12s ease;
+
+            &:hover {
+                background-color: var(--light-color);
+            }
+
+            >span {
+                width: 6px;
+                height: 6px;
+                position: absolute;
+                border-top: 1px solid var(--strong-color);
+                border-right: 1px solid var(--strong-color);
+                top: 8px;
+                transform: rotate(135deg);
+            }
+
+            &.collapsed>span {
+                top: 9px;
+                left: 8px;
+                transform: rotate(45deg);
+            }
+        }
+
         .roundbtn {
             float: right;
             margin: 4px 10px 10px;
@@ -188,6 +231,25 @@
         }
     }
 
+    &.collapsed {
+        .contact-bar {
+            border-bottom-color: transparent;
+
+            >.bar-icon,
+            >.bar-list {
+                display: none;
+            }
+
+            >.bar-info {
+                display: block;
+            }
+        }
+
+        .follower-bar {
+            display: none !important;
+        }
+    }
+
     .message-bar {
         flex: 0 0 auto;
         border-bottom: 1px solid var(--title-bg-color);

lib/ui/tooltip.js

@@ -72,10 +72,10 @@ function setTooltip(container, content, flag = false, parent = null) {
                     top -= p.scrollTop;
                     p = p.parentElement;
                 }
-                left += (c.offsetWidth - wrapper.offsetWidth) / 2;
-                wrapper.style.left = `${left}px`;
                 // check overflow
                 let t = c.offsetTop;
+                let l = c.offsetLeft;
+                let lastWidth = c.offsetWidth;
                 p = c.offsetParent;
                 while (p != null) {
                     const overflow = window.getComputedStyle(p).overflow;
@@ -83,16 +83,26 @@ function setTooltip(container, content, flag = false, parent = null) {
                         break;
                     }
                     t += p.offsetTop;
+                    l += p.offsetLeft;
+                    lastWidth = p.offsetWidth;
                     p = p.offsetParent;
                 }
                 const offsetHeight = wrapper.offsetHeight + 14;
                 if (t + top - offsetHeight < 0) {
-                    top += c.parentElement.offsetHeight + 14;
+                    top += c.parentElement.offsetHeight + 10;
                     wrapper.classList.add('ui-tooltip-down');
                 } else {
                     top -= offsetHeight;
                     wrapper.classList.remove('ui-tooltip-down');
                 }
+                const offsetWidth = wrapper.offsetWidth;
+                left += (c.offsetWidth - offsetWidth) / 2;
+                if (left < -l) {
+                    left = 2;
+                } else if (left + offsetWidth + 2 > lastWidth) {
+                    left = lastWidth - offsetWidth - 2;
+                }
+                wrapper.style.left = `${left}px`;
                 wrapper.style.top = `${top}px`;
                 wrapper.style.visibility = 'visible';
                 wrapper.style.opacity = 1;