UI style adjustment
This commit is contained in:
parent
93d5be462e
commit
2366b378d2
@ -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');
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user