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 2023-06-05 10:09:25 +08:00
parent a930a2bf5b
commit 93d5be462e
5 changed files with 111 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -472,6 +472,7 @@ class CustomerCommunication {
title: createElement('div', div => { title: createElement('div', div => {
div.style.display = 'flex'; div.style.display = 'flex';
div.style.alignItems = 'center'; div.style.alignItems = 'center';
div.style.padding = '10px 0 6px 12px';
div.append( div.append(
createElement('div', div => { createElement('div', div => {
div.className = 'ui-popup-move'; div.className = 'ui-popup-move';

47
lib/ui/css/popup.scss
View File

@ -45,7 +45,6 @@ $buttonHeight: 28px;
.ui-popup-header { .ui-popup-header {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px 12px 6px;
border-radius: var(--corner-radius) var(--corner-radius) 0 0; border-radius: var(--corner-radius) var(--corner-radius) 0 0;
line-height: $headerLineHeight; line-height: $headerLineHeight;
user-select: none; user-select: none;
@ -63,28 +62,40 @@ $buttonHeight: 28px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 10px 0 6px 12px;
} }
>svg { >.ui-popup-header-title,
.ui-popup-move {
cursor: move;
}
>.ui-popup-header-icons {
flex: 0 0 auto; flex: 0 0 auto;
width: $headerLineHeight; padding: 10px 12px 6px 0;
height: $headerLineHeight; display: flex;
fill: var(--title-color);
padding: 4px;
cursor: pointer;
box-sizing: border-box;
transition: opacity .12s ease;
&:hover { >svg {
opacity: .8; flex: 0 0 auto;
} width: $headerLineHeight;
height: $headerLineHeight;
fill: var(--title-color);
padding: 4px;
cursor: pointer;
box-sizing: border-box;
transition: opacity .12s ease;
&:focus, &:hover {
&:focus-visible { opacity: .8;
outline: none; }
opacity: .8;
background-color: rgb(0 0 0/10%); &:focus,
border-radius: var(--corner-radius); &:focus-visible {
outline: none;
opacity: .8;
background-color: rgb(0 0 0/10%);
border-radius: var(--corner-radius);
}
} }
} }
} }

5
lib/ui/css/tooltip.scss
View File

@ -51,4 +51,9 @@
height: calc(100% - 16px); height: calc(100% - 16px);
user-select: none; user-select: none;
} }
&.ui-tooltip-down>.ui-tooltip-pointer {
bottom: unset;
top: -8px;
}
} }

99
lib/ui/popup.js
View File

@ -78,7 +78,7 @@ class Popup {
if (!isNaN(r.top)) { if (!isNaN(r.top)) {
css.push(`top: ${r.top}px`); css.push(`top: ${r.top}px`);
} }
const collapse = container.querySelector('.ui-popup-header>.icon-expand'); const collapse = container.querySelector('.ui-popup-header-icons>.icon-expand');
if (r.collapsed === true) { if (r.collapsed === true) {
css.push('width: 160px', 'height: 40px'); css.push('width: 160px', 'height: 40px');
this.#bounds = r; this.#bounds = r;
@ -150,6 +150,8 @@ class Popup {
mask.dataset.zindex = mask.style.zIndex; mask.dataset.zindex = mask.style.zIndex;
mask.style.zIndex = max + 1; mask.style.zIndex = max + 1;
}); });
} else {
} }
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)); let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
if (tabIndex < 0) { if (tabIndex < 0) {
@ -172,11 +174,15 @@ class Popup {
} }
header.appendChild(title); header.appendChild(title);
if (option.movable !== false) { if (option.movable !== false) {
const move = title.querySelector('.ui-popup-move') ?? title; const move = header; // title.querySelector('.ui-popup-move') ?? title;
move.addEventListener('mousedown', e => { move.addEventListener('mousedown', e => {
if (['svg', 'use'].includes(e.target?.tagName)) {
return;
}
if (e.buttons !== 1) { if (e.buttons !== 1) {
return; return;
} }
const parent = option.mask === false ? mask.parentElement : mask;
const x = e.clientX - container.offsetLeft; const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop; const y = e.clientY - container.offsetTop;
let moved; let moved;
@ -186,61 +192,65 @@ class Popup {
container.style.top = `${e.clientY - y}px`; container.style.top = `${e.clientY - y}px`;
moved = true; moved = true;
} else { } else {
mask.dispatchEvent(new MouseEvent('mouseup')); parent.dispatchEvent(new MouseEvent('mouseup'));
} }
}; };
mask.addEventListener('mousemove', move, { passive: false }); parent.addEventListener('mousemove', move, { passive: false });
const up = () => { const up = () => {
mask.removeEventListener('mousemove', move, { passive: false }); parent.removeEventListener('mousemove', move, { passive: false });
mask.removeEventListener('mouseup', up); parent.removeEventListener('mouseup', up);
if (moved === true && typeof option.onMoveEnded === 'function') { if (moved === true && typeof option.onMoveEnded === 'function') {
option.onMoveEnded.call(this); option.onMoveEnded.call(this);
} }
moved = false; moved = false;
}; };
mask.addEventListener('mouseup', up); parent.addEventListener('mouseup', up);
}); });
} }
if (option.collapsable === true) { const icons = createElement('div', icons => {
const collapse = createIcon('fa-regular', 'compress-alt'); icons.className = 'ui-popup-header-icons';
collapse.tabIndex = tabIndex + 2; if (option.collapsable === true) {
collapse.classList.add('icon-expand'); const collapse = createIcon('fa-regular', 'compress-alt');
collapse.addEventListener('keypress', e => { collapse.tabIndex = tabIndex + 2;
if (e.key === ' ' || e.key === 'Enter') { collapse.classList.add('icon-expand');
collapse.dispatchEvent(new MouseEvent('click')); collapse.addEventListener('keypress', e => {
} if (e.key === ' ' || e.key === 'Enter') {
}); collapse.dispatchEvent(new MouseEvent('click'));
collapse.addEventListener('click', () => {
if (container.classList.contains('ui-popup-collapse')) {
const bounds = this.#bounds;
if (bounds != null) {
container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`;
this.#bounds = null;
} }
container.classList.remove('ui-popup-collapse'); });
changeIcon(collapse, 'fa-regular', 'compress-alt'); collapse.addEventListener('click', () => {
} else { if (container.classList.contains('ui-popup-collapse')) {
const rect = this.rect; const bounds = this.#bounds;
this.#bounds = rect; if (bounds != null) {
container.style.cssText += `width: 160px; height: 40px`; container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`;
container.classList.add('ui-popup-collapse'); this.#bounds = null;
changeIcon(collapse, 'fa-regular', 'expand-alt'); }
} container.classList.remove('ui-popup-collapse');
if (typeof option.onResizeEnded === 'function') { changeIcon(collapse, 'fa-regular', 'compress-alt');
option.onResizeEnded.call(this); } else {
const rect = this.rect;
this.#bounds = rect;
container.style.cssText += `width: 160px; height: 40px`;
container.classList.add('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt');
}
if (typeof option.onResizeEnded === 'function') {
option.onResizeEnded.call(this);
}
});
icons.appendChild(collapse);
}
const cancel = createIcon('fa-regular', 'times');
cancel.tabIndex = tabIndex + 3;
cancel.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
this.close();
} }
}); });
header.appendChild(collapse); cancel.addEventListener('click', () => this.close());
} icons.appendChild(cancel);
const cancel = createIcon('fa-regular', 'times');
cancel.tabIndex = tabIndex + 3;
cancel.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
this.close();
}
}); });
cancel.addEventListener('click', () => this.close()); header.appendChild(icons);
header.appendChild(cancel);
}), }),
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading', createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third')) createElement('div', null, createIcon('fa-regular', 'spinner-third'))
@ -339,7 +349,8 @@ class Popup {
return; return;
} }
let mask = this.#mask ?? this.create(); let mask = this.#mask ?? this.create();
const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask')); // const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask'));
const exists = parent.querySelectorAll('.ui-popup-mask');
let zindex = 0; let zindex = 0;
for (let ex of exists) { for (let ex of exists) {
let z = parseInt(ex.style.zIndex); let z = parseInt(ex.style.zIndex);

24
lib/ui/tooltip.js
View File

@ -66,15 +66,33 @@ function setTooltip(container, content, flag = false, parent = null) {
} }
} }
p = c.parentElement; p = c.parentElement;
const offsetParent = c.offsetParent; const offsetParent = isParent ? parent : c.offsetParent;
while (p != null && p !== (isParent ? parent : offsetParent)) { while (p != null && p !== offsetParent) {
left -= p.scrollLeft; left -= p.scrollLeft;
top -= p.scrollTop; top -= p.scrollTop;
p = p.parentElement; p = p.parentElement;
} }
left += (c.offsetWidth - wrapper.offsetWidth) / 2; left += (c.offsetWidth - wrapper.offsetWidth) / 2;
top -= wrapper.offsetHeight + 14;
wrapper.style.left = `${left}px`; wrapper.style.left = `${left}px`;
// check overflow
let t = c.offsetTop;
p = c.offsetParent;
while (p != null) {
const overflow = window.getComputedStyle(p).overflow;
if (overflow !== 'visible') {
break;
}
t += p.offsetTop;
p = p.offsetParent;
}
const offsetHeight = wrapper.offsetHeight + 14;
if (t + top - offsetHeight < 0) {
top += c.parentElement.offsetHeight + 14;
wrapper.classList.add('ui-tooltip-down');
} else {
top -= offsetHeight;
wrapper.classList.remove('ui-tooltip-down');
}
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;