tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI style adjustment

Browse Source
This commit is contained in:
Chen Lily 2023-06-05 15:21:56 +08:00
parent 93d5be462e
commit 2366b378d2
4 changed files with 138 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/app/communications/contact.js
View File

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

32
lib/app/communications/customer.js
View File

@ -337,6 +337,7 @@ class CustomerCommunication {
if (option.autoUpdatesVisible === false) { if (option.autoUpdatesVisible === false) {
checkAutoUpdate.style.display = 'none'; checkAutoUpdate.style.display = 'none';
} }
const This = this;
const checkLink = createCheckbox({ const checkLink = createCheckbox({
className: 'check-status-link', className: 'check-status-link',
enabled: !readonly, enabled: !readonly,
@ -347,6 +348,9 @@ class CustomerCommunication {
setTooltip(checkLink, this.checked ? setTooltip(checkLink, this.checked ?
r('statusLinkIncluded', 'Status Link Included') : r('statusLinkIncluded', 'Status Link Included') :
r('statusLinkExcluded', 'Status Link Excluded')); r('statusLinkExcluded', 'Status Link Excluded'));
if (typeof option.onStatusLinkChanged === 'function') {
option.onStatusLinkChanged.call(This, this.checked);
}
} }
}); });
if (option.statusLinkVisible === false) { 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; return contacts;

124
lib/app/communications/style.scss
View File

@ -42,7 +42,7 @@
&:hover { &:hover {
background-color: var(--dark-fore-opacity-color); background-color: var(--dark-fore-opacity-color);
> svg { >svg {
opacity: .6; opacity: .6;
} }
} }
@ -52,12 +52,12 @@
fill: lightgray; fill: lightgray;
background-color: transparent !important; background-color: transparent !important;
&:hover > svg { &:hover>svg {
opacity: unset; opacity: unset;
} }
} }
> svg { >svg {
width: 13px; width: 13px;
height: 14px; height: 14px;
display: block; display: block;
@ -75,16 +75,16 @@
align-items: center; align-items: center;
font-size: var(--font-larger-size); font-size: var(--font-larger-size);
> div { >div {
flex: 1 1 auto; flex: 1 1 auto;
} }
> .title-functions { >.title-functions {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
padding: 4px; padding: 4px;
> label { >label {
margin: 0 4px; margin: 0 4px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@ -97,7 +97,7 @@
justify-content: center; justify-content: center;
transition: background-color .2s; transition: background-color .2s;
> svg { >svg {
fill: var(--strong-color); fill: var(--strong-color);
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -107,7 +107,7 @@
&:hover { &:hover {
background-color: var(--dark-fore-opacity-color); background-color: var(--dark-fore-opacity-color);
> svg { >svg {
opacity: .6; opacity: .6;
} }
} }
@ -119,7 +119,7 @@
&:hover { &:hover {
background-color: var(--dark-fore-color); background-color: var(--dark-fore-color);
> svg { >svg {
opacity: unset; opacity: unset;
} }
} }
@ -133,24 +133,27 @@
padding: 4px 0; padding: 4px 0;
display: flex; display: flex;
border-bottom: 1px solid var(--title-bg-color); border-bottom: 1px solid var(--title-bg-color);
position: relative;
> .bar-icon { >.bar-icon {
flex: 0 0 auto; flex: 0 0 auto;
> svg { >svg {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin: 0 8px; margin: 0 8px;
} }
} }
> .bar-list { >.bar-list {
flex: 1 1 auto; flex: 1 1 auto;
width: calc(100% - 46px); width: calc(100% - 46px);
.bar-list-container { .bar-list-container {
min-height: 26px;
max-height: 120px; max-height: 120px;
overflow: auto; overflow: auto;
position: relative;
} }
.contact-item { .contact-item {
@ -158,7 +161,7 @@
align-items: center; align-items: center;
line-height: 22px; line-height: 22px;
> svg { >svg {
flex: 0 0 auto; flex: 0 0 auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -166,7 +169,7 @@
fill: var(--strong-color); fill: var(--strong-color);
} }
> span { >span {
// flex: 1 1 auto; // flex: 1 1 auto;
color: var(--strong-color); color: var(--strong-color);
font-size: var(--font-size); font-size: var(--font-size);
@ -178,23 +181,82 @@
} }
} }
>.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 { .roundbtn {
float: right; float: right;
margin: 4px 10px 10px; margin: 4px 10px 10px;
> svg { >svg {
width: 16px; width: 16px;
} }
} }
} }
&.collapsed {
.contact-bar {
border-bottom-color: transparent;
>.bar-icon,
>.bar-list {
display: none;
}
>.bar-info {
display: block;
}
}
.follower-bar {
display: none !important;
}
}
.message-bar { .message-bar {
flex: 0 0 auto; flex: 0 0 auto;
border-bottom: 1px solid var(--title-bg-color); border-bottom: 1px solid var(--title-bg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> textarea { >textarea {
padding: 10px 10px 0; padding: 10px 10px 0;
border: 1px solid var(--title-bg-color); border: 1px solid var(--title-bg-color);
border-radius: 5px; border-radius: 5px;
@ -208,17 +270,17 @@
@include outline(); @include outline();
} }
> div { >div {
padding: 0 10px 10px; padding: 0 10px 10px;
> .customer-name { >.customer-name {
float: left; float: left;
> span { >span {
font-size: var(--font-smaller-size); font-size: var(--font-smaller-size);
} }
> .ui-input { >.ui-input {
margin-left: 4px; margin-left: 4px;
width: 150px; width: 150px;
border-top: none; border-top: none;
@ -227,7 +289,7 @@
} }
} }
> .prompt-count { >.prompt-count {
display: inline-block; display: inline-block;
color: var(--light-color); color: var(--light-color);
font-size: var(--font-smaller-size); font-size: var(--font-smaller-size);
@ -263,7 +325,7 @@
font-size: var(--font-size); font-size: var(--font-size);
align-self: flex-start; align-self: flex-start;
.ui-tooltip-wrapper > .ui-tooltip-content { .ui-tooltip-wrapper>.ui-tooltip-content {
font-weight: normal; font-weight: normal;
} }
} }
@ -277,7 +339,7 @@
max-width: 240px; max-width: 240px;
background-color: rgb(244, 244, 244); background-color: rgb(244, 244, 244);
a > svg { a>svg {
width: 13px; width: 13px;
height: 13px; height: 13px;
fill: #2140fb; fill: #2140fb;
@ -287,7 +349,7 @@
} }
} }
> span::after { >span::after {
content: ''; content: '';
display: block; display: block;
} }
@ -339,7 +401,7 @@
height: 100%; height: 100%;
min-height: 120px; min-height: 120px;
> .ui-grid-body .ui-grid-body-content > .ui-grid-row > td { >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td {
vertical-align: top; vertical-align: top;
.col-icon { .col-icon {
@ -349,11 +411,11 @@
.icon-contact-type { .icon-contact-type {
cursor: unset; cursor: unset;
> svg { >svg {
fill: #333; fill: #333;
} }
&:hover > svg { &:hover>svg {
opacity: unset; opacity: unset;
} }
} }
@ -381,11 +443,11 @@
flex-direction: column; flex-direction: column;
width: 600px; width: 600px;
> .follower-search { >.follower-search {
margin-bottom: 6px; margin-bottom: 6px;
} }
> .follower-grid { >.follower-grid {
height: 380px; height: 380px;
} }
} }
@ -395,7 +457,7 @@
flex-direction: column; flex-direction: column;
width: 780px; width: 780px;
> .selcontact-grid { >.selcontact-grid {
height: 200px; height: 200px;
} }
} }
@ -409,4 +471,4 @@
--strong-color: #ccc; --strong-color: #ccc;
--light-color: #333; --light-color: #333;
} }
}*/ }*/

16
lib/ui/tooltip.js
View File

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