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

sync

Browse Source
This commit is contained in:
Chen Lily
2025-12-24 10:55:40 +08:00
parent eec9d6045c
commit 752bb23571
25 changed files with 2348 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
lib/app/communications/comments.js
View File

@@ -51,6 +51,11 @@ export default class CustomerRecordComment {
this._var.enter.disabled = flag;
this._var.container.querySelector('.button-send-message').disabled = flag;
}
get replyMsgId() { return this._var.replymsgid || -1 }
set replyMsgId(v) {
this._var.replymsgid = null;
this._var.replymsgctrl.style.display = 'none'
}
/**
* @param {boolean} flag
@@ -111,6 +116,24 @@ export default class CustomerRecordComment {
container.appendChild(
createElement('div', 'message-bar',
enter,
createElement('div', div => {
div.className = 'customer-reply';
div.style.display = 'none';
this._var.replymsgctrl = div;
},
createElement('span', span => {
span.className = 'reply-user';
}),
createElement('span', span => {
span.className = 'reply-msg';
}),
createElement('layer', layer => {
layer.appendChild(createIcon('fa-light', 'times'));
layer.addEventListener('click', () => {
this.replyMsgId = null;
});
})
),
createElement('div', div => div.style.textAlign = 'right',
createElement('div', 'prompt-count'),
createElement('button', button => {
@@ -124,7 +147,8 @@ export default class CustomerRecordComment {
setTooltip(button, r('FLTL_02301', 'Post Note'));
button.addEventListener('click', () => {
if (typeof this._var.option.onAddComment === 'function') {
this._var.option.onAddComment(this.text);
this._var.option.onAddComment(this.text, this._var.replymsgid);
this.replyMsgId = null;
}
})
})
@@ -158,6 +182,13 @@ export default class CustomerRecordComment {
div.innerText = comment.UserName;
}));
const content = createElement('div', 'item-content');
if (comment.ReplyMessage) {
const reply = createElement('div', div => {
div.className = 'reply';
div.innerHTML = comment.ReplyMessage.Comment;
});
content.appendChild(reply);
}
const mmsParts = createElement('div', div => div.style.display = 'none');
content.appendChild(createElement('span', span => span.innerHTML = escapeHtml(escapeEmoji(comment.Comment)), mmsParts));
if (comment.MMSParts?.length > 0) {

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

@@ -188,10 +188,7 @@ export default class CustomerCommunication {
this._var.contacts.replaceChildren();
if (contacts?.length > 0) {
var cs = contacts.sort(function (a, b) {
if (a.Name == b.Name) {
return 0;
}
return a.Name > b.Name ? 1 : -1;
return String(a.Name).localeCompare(String(b.Name));
});
const messages = this._var.data.messages;
if (this._var.contactsUpdated !== true && messages?.length > 0) {
@@ -308,6 +305,8 @@ export default class CustomerCommunication {
*/
set companyName(name) {
this._var.option.companyName = name;
this._var.container.querySelector('.button-edit-contacts').style.display =
this._var.option.recordReadonly && nullOrEmpty(name) ? 'none' : '';
const div = this._var.container.querySelector('.title-company');
const companyCode = div.querySelector('.title-company-code');
if (companyCode != null) {
@@ -674,7 +673,7 @@ export default class CustomerCommunication {
createElement('button', button => {
button.className = 'roundbtn button-edit-contacts';
button.style.backgroundColor = 'rgb(1, 199, 172)';
if (readonly === true) {
if (readonly === true || (recordReadonly && nullOrEmpty(option.companyName))) {
button.style.display = 'none';
}
button.appendChild(createIcon('fa-solid', 'user-edit'));

34
lib/app/communications/internal.js
View File

@@ -106,6 +106,11 @@ export default class InternalComment {
}
}
}
get replyMsgId() { return this._var.replymsgid || -1 }
set replyMsgId(v) {
this._var.replymsgid = null;
this._var.replymsgctrl.style.display = 'none'
}
/**
* @param {boolean} flag
@@ -192,6 +197,24 @@ export default class InternalComment {
});
},
enter,
createElement('div', div => {
div.className = 'customer-reply';
div.style.display = 'none';
this._var.replymsgctrl = div;
},
createElement('span', span => {
span.className = 'reply-user';
}),
createElement('span', span => {
span.className = 'reply-msg';
}),
createElement('layer', layer => {
layer.appendChild(createIcon('fa-light', 'times'));
layer.addEventListener('click', () => {
this.replyMsgId = null;
});
})
),
createElement('div', div => div.style.textAlign = 'right',
createElement('div', 'customer-left',
createElement('div', 'file-selector',
@@ -280,7 +303,7 @@ export default class InternalComment {
}
if (typeof option.onAddComment === 'function') {
this.loading = true;
option.onAddComment(this.text, this.file);
option.onAddComment(this.text, this.file, this.replyMsgId);
}
})
})
@@ -323,6 +346,15 @@ export default class InternalComment {
}
}));
const content = createElement('div', 'item-content');
if (comment.ReplyMessage) {
const reply = createElement('div', div => {
div.className = 'reply';
div.innerHTML = comment.ReplyMessage.Message;
if (comment.ReplyMessage.MessageType !== 2)
div.title = comment.ReplyMessage.Sender + " " + comment.ReplyMessage.TimeStr + "\r\n" + comment.ReplyMessage.Message;
});
content.appendChild(reply);
}
const mmsParts = createElement('div', div => div.style.display = 'none');
content.appendChild(createElement('span', span => {
if (comment.MessageType === 2) {

27
lib/app/communications/lib.js
View File

@@ -511,6 +511,33 @@ export function createHideMessageCommentTail(This, optionName, comment, commentT
span.appendChild(icon);
span.addEventListener('click', () => hisFunc(comment.Id));
}),
createElement('span', span => {
span.className = 'sbutton iconreply';
span.style.padding = '0';
span.style.fontSize = '12px';
setTooltip(span, option?.getText('FLTL_03432', 'Reply'));
span.style.display = comment.AllowReply ? '' : 'none';
if (comment.AllowReply) {
span.addEventListener('click', function () {
This._var.replymsgid = comment.Id;
This._var.replymsgctrl.querySelector('.reply-user').innerText = (comment.Sender || comment.UserName) + ":";
var msg = comment.Message || comment.Comment;
if (comment.MessageType == 2)
msg = option?.getText('FLTL_00491', 'Call Log');
This._var.replymsgctrl.querySelector('.reply-msg').textContent = msg;
This._var.replymsgctrl.style.display = '';
});
}
}),
createElement('span', span => {
span.style.margin = '0 5px 0 0';
span.style.color = '#2594fd';
span.style.display = comment.ReplyCount > 0 ? '' : 'none';
if (comment.ReplyCount > 1)
span.innerText = comment.ReplyCount + ' ' + option?.getText('FLTL_03433', 'Replies');
else
span.innerText = comment.ReplyCount + ' ' + option?.getText('FLTL_03432', 'Reply');
}),
createElement('span', span => {
span.innerText = comment[commentTime];
})

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

@@ -55,7 +55,7 @@
&:hover {
background-color: var(--dark-fore-opacity-color);
>svg {
> svg {
opacity: .6;
}
}
@@ -65,12 +65,12 @@
fill: lightgray;
background-color: transparent !important;
&:hover>svg {
&:hover > svg {
opacity: unset;
}
}
>svg {
> svg {
width: 13px;
height: 14px;
display: block;
@@ -88,19 +88,19 @@
align-items: center;
font-size: var(--font-larger-size);
>div {
> div {
flex: 1 1 auto;
>.title-company {
> .title-company {
line-height: 1rem;
padding: 2px 10px;
// background-color: rgba(0, 0, 0, .15);
>.title-company-name {
> .title-company-name {
font-weight: bold;
}
>.title-company-selector {
> .title-company-selector {
cursor: pointer;
vertical-align: middle;
@@ -108,7 +108,7 @@
background-color: #ccc;
}
>svg {
> svg {
width: 14px;
height: 14px;
fill: rgb(123, 28, 33);
@@ -119,12 +119,12 @@
}
}
>.title-functions {
> .title-functions {
flex: 0 0 auto;
display: flex;
padding: 0 4px;
>label {
> label {
margin: 0 4px;
box-sizing: border-box;
cursor: pointer;
@@ -137,7 +137,7 @@
justify-content: center;
transition: background-color .2s;
>svg {
> svg {
fill: var(--strong-color);
width: 14px;
height: 14px;
@@ -147,7 +147,7 @@
&:hover {
background-color: var(--dark-fore-opacity-color);
>svg {
> svg {
opacity: .6;
}
}
@@ -159,7 +159,7 @@
&:hover {
background-color: var(--dark-fore-color);
>svg {
> svg {
opacity: unset;
}
}
@@ -175,17 +175,17 @@
border-bottom: 1px solid var(--title-ctrlbg-color);
position: relative;
>.bar-icon {
> .bar-icon {
flex: 0 0 auto;
>svg {
> svg {
width: 30px;
height: 30px;
margin: 0 8px;
}
}
>.bar-list {
> .bar-list {
flex: 1 1 auto;
width: calc(100% - 46px);
@@ -202,7 +202,7 @@
align-items: center;
line-height: 22px;
>svg {
> svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
@@ -210,7 +210,7 @@
fill: var(--strong-color);
}
>span {
> span {
// flex: 1 1 auto;
color: var(--strong-color);
font-size: var(--font-size);
@@ -222,14 +222,14 @@
}
}
>.bar-info {
> .bar-info {
display: none;
flex: 1 1 auto;
text-align: right;
margin-right: 50px;
}
>.bar-collapser {
> .bar-collapser {
position: absolute;
top: 3px;
right: 18px;
@@ -245,7 +245,7 @@
background-color: var(--light-color);
}
>span {
> span {
width: 6px;
height: 6px;
position: absolute;
@@ -255,7 +255,7 @@
transform: rotate(135deg);
}
&.collapsed>span {
&.collapsed > span {
top: 9px;
left: 8px;
transform: rotate(45deg);
@@ -266,7 +266,7 @@
float: right;
margin: 4px 10px 10px;
>svg {
> svg {
width: 16px;
}
}
@@ -276,12 +276,12 @@
.contact-bar {
border-bottom-color: transparent;
>.bar-icon,
>.bar-list {
> .bar-icon,
> .bar-list {
display: none;
}
>.bar-info {
> .bar-info {
display: block;
}
}
@@ -297,7 +297,7 @@
display: flex;
flex-direction: column;
>textarea {
> textarea {
padding: 10px 10px 0;
border: 1px solid var(--title-ctrlbg-color);
border-radius: 5px;
@@ -311,19 +311,46 @@
@include outline();
}
>div {
> .customer-reply {
background-color: #d3d3d3;
padding: 5px 10px 0 10px;
border-radius: 5px;
margin: 0 6px 3px 6px;
display: flex;
white-space: nowrap;
line-height: 22px;
> .reply-msg {
flex: 1 1 auto;
display: inline;
margin-left: 4px;
overflow: hidden;
text-overflow: ellipsis;
}
> layer {
> .ui-icon {
width: 16px;
height: 16px;
cursor: pointer;
fill: var(--secondary-link-color);
}
}
}
> div {
padding: 0 10px 10px;
>.customer-left {
> .customer-left {
float: left;
text-align: left;
>.customer-name {
>span {
> .customer-name {
> span {
font-size: var(--font-smaller-size);
}
>.ui-input {
> .ui-input {
margin-left: 4px;
width: 150px;
border-top: none;
@@ -332,39 +359,39 @@
}
}
>.file-selector {
> .file-selector {
display: inline-flex;
align-items: center;
height: 30px;
>.selector-link {
> .selector-link {
cursor: pointer;
display: flex;
>svg {
> svg {
width: 16px;
height: 16px;
fill: var(--secondary-link-color);
}
>input {
> input {
display: none;
}
}
>.selector-name {
> .selector-name {
max-width: 130px;
padding: 0 20px 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+layer {
+ layer {
display: none;
margin-left: -20px;
cursor: pointer;
>svg {
> svg {
width: 16px;
height: 16px;
fill: var(--red-color);
@@ -375,11 +402,11 @@
}
}
&:hover+layer {
&:hover + layer {
display: flex;
}
>.ui-tooltip-wrapper img {
> .ui-tooltip-wrapper img {
max-width: 120px;
max-height: 80px;
}
@@ -387,7 +414,7 @@
}
}
>.prompt-count {
> .prompt-count {
display: inline-block;
color: var(--light-color);
font-size: var(--font-smaller-size);
@@ -423,7 +450,7 @@
font-size: var(--font-size);
align-self: flex-start;
.ui-tooltip-wrapper>.ui-tooltip-content {
.ui-tooltip-wrapper > .ui-tooltip-content {
font-weight: normal;
}
}
@@ -435,13 +462,14 @@
white-space: pre-wrap;
word-break: break-word;
max-width: 240px;
background-color: rgb(244, 244, 244);
/*background-color: rgb(244, 244, 244);*/
background-color: #f5f5f5;
audio[controls] {
width: 220px;
}
a>svg {
a > svg {
width: 13px;
height: 13px;
fill: #2140fb;
@@ -451,7 +479,7 @@
}
}
>span::after {
> span::after {
content: '';
display: block;
}
@@ -467,7 +495,7 @@
.ui-tooltip-content .tip-function-button {
text-align: right;
>svg {
> svg {
width: 20px;
height: 20px;
cursor: pointer;
@@ -483,6 +511,21 @@
}
}
}
.reply {
background-color: white;
padding: 5px;
border: solid 2px #f2f2f2;
border-left: solid 2px lightgray;
border-radius: 5px;
margin-bottom: 2px;
max-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
.item-time {
@@ -522,7 +565,7 @@
height: 100%;
min-height: 120px;
>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td {
> .ui-grid-wrapper > .ui-grid-table > tbody > .ui-grid-row > td {
vertical-align: top;
.col-icon {
@@ -532,11 +575,11 @@
.icon-contact-type {
cursor: unset;
>svg {
> svg {
fill: #333;
}
&:hover>svg {
&:hover > svg {
opacity: unset;
}
}
@@ -566,11 +609,11 @@
flex-direction: column;
width: 600px;
>.follower-search {
> .follower-search {
margin-bottom: 6px;
}
>.follower-grid {
> .follower-grid {
height: 380px;
}
}
@@ -580,7 +623,7 @@
flex-direction: column;
width: 780px;
>.selcontact-grid {
> .selcontact-grid {
height: 200px;
}
}