structure adjustment

2023-04-18 17:23:09 +08:00 · 2023-04-18 17:23:09 +08:00 · 22dbcf8db2
commit 22dbcf8db2
parent af78bf0381
25 changed files with 519 additions and 138 deletions
--- a/css/ui.scss
+++ b/css/ui.scss
@ -1,5 +0,0 @@
-@import './checkbox.scss';
-@import './dropdown.scss';
-@import './tooltip.scss';
-@import './grid.scss';
-@import './popup.scss';
--- a/lib/app/communications/customer.js
+++ b/lib/app/communications/customer.js
@ -1,4 +1,4 @@
-import { Grid, createElement, setTooltip, setTooltipNext, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
+import { Grid, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, createPopup, showAlert, showConfirm } from "../../ui";
 import { r, nullOrEmpty, formatUrl, isEmail, isPhone } from "../../utility";
 import { createBox } from "./lib";
 import Contact from "./contact";
@ -90,16 +90,39 @@ class CustomerCommunication {
        element.dispatchEvent(new Event('change'));
    }

+    /**
+     * @param {boolean} flag
+     */
+    set loading(flag) {
+        if (this.#container == null) {
+            return;
+        }
+        this.#enter.disabled = flag;
+        this.#container.querySelector('.customer-name>.ui-input').disabled = flag;
+        this.#container.querySelector('.button-send-message').disabled = flag;
+        this.#container.querySelector('.button-edit-contacts').disabled = flag;
+        this.#container.querySelector('.button-edit-followers').disabled = flag;
+    }
+
    get text() { return this.#enter?.value }
    set text(s) {
        const element = this.#enter;
        if (element != null) {
            element.value = s
-            s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+            s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
            this.#container.querySelector('.message-bar .prompt-count').innerText = s;
        }
    }

+    get customerName() { return this.#container.querySelector('.customer-name>.ui-input')?.value }
+    set customerName(name) {
+        const element = this.#container.querySelector('.customer-name>.ui-input');
+        if (element == null) {
+            return;
+        }
+        element.value = name;
+    }
+
    get contacts() {
        return [...this.#contacts.children].map(el => {
            const span = el.querySelector('span');
@ -303,7 +326,10 @@ class CustomerCommunication {
        }
        const container = createBox(
            createElement('div', null,
-                createElement('div', div => div.innerText = r('messages', 'Customer Communication')),
+                createElement('div', div => {
+                    div.className = 'title-module';
+                    div.innerText = option.title ?? r('messages', 'Customer Communication');
+                }),
                createElement('div', div => {
                    div.className = 'title-company';
                    if (nullOrEmpty(option.companyName)) {
@ -323,15 +349,16 @@ class CustomerCommunication {
        // followers
        this.#followers = this.#createFollowers(container, option);
        // enter box
-        const enter = createElement('textarea');
+        const enter = createElement('textarea', 'ui-text');
        enter.placeholder = r('typeMessage', 'Enter Message Here');
-        enter.maxLength = 3000;
+        option.maxLength ??= 3000;
+        enter.maxLength = option.maxLength;
        // if (readonly === true) {
        //     enter.disabled = true;
        // }
        enter.addEventListener('input', () => {
            const val = this.#enter.value;
-            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(option.maxLength);
            this.#container.querySelector('.message-bar .prompt-count').innerText = s;
        });
        this.#enter = enter;
@ -344,6 +371,15 @@ class CustomerCommunication {
            },
                enter,
                createElement('div', div => div.style.textAlign = 'right',
+                    createElement('div', div => {
+                        div.className = 'customer-name';
+                        if (option.customerNameVisible !== true) {
+                            div.style.display = 'none';
+                        }
+                    },
+                        createElement('span', span => span.innerText = r('nameColon', 'Name:')),
+                        createElement('input', 'ui-input')
+                    ),
                    createElement('div', 'prompt-count'),
                    createElement('button', button => {
                        button.className = 'roundbtn button-send-message';
@ -992,10 +1028,12 @@ class CustomerCommunication {
    load(data, contacts, followers) {
        const children = [];
        if (data?.length > 0) {
+            contacts ??= this.#data.contacts;
+            followers ??= this.#data.allfollowers;
            for (let comm of data) {
                const div = createElement('div', 'item-div');
                let name;
-                if (comm.IsReply) {
+                if (comm.IsReply && contacts?.length > 0) {
                    const c = isEmail(comm.Sender) ?
                        contacts.find(c => c.Email === comm.Sender) :
                        contacts.find(c => c.MobilePhone === comm.Sender);
--- a/lib/app/communications/internal.js
+++ b/lib/app/communications/internal.js
@ -17,7 +17,7 @@ class InternalComment {
        const element = this.#enter;
        if (element != null) {
            element.value = s
-            s = String(nullOrEmpty(s) ? 0 : val.length) + '/3000';
+            s = String(nullOrEmpty(s) ? 0 : val.length) + '/' + String(this.#option.maxLength);
            this.#container.querySelector('.message-bar .prompt-count').innerText = s;
        }
    }
@ -38,17 +38,20 @@ class InternalComment {
    create() {
        const container = createBox(
            createElement('div', null,
-                createElement('div', div => div.innerText = r('internalComments', 'Internal Comments'))
+                createElement('div', div => {
+                    div.className = 'title-module';
+                    div.innerText = r('internalComments', 'Internal Comments');
+                })
            ), []
        );
        const readonly = this.#option.readonly;
        // enter box
-        const enter = createElement('textarea');
+        const enter = createElement('textarea', 'ui-text');
        enter.placeholder = r('typeComment', 'Enter Comment Here');
-        enter.maxLength = 3000;
+        enter.maxLength = this.#option.maxLength ??= 3000;
        enter.addEventListener('input', () => {
            const val = this.#enter.value;
-            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/3000';
+            const s = String(nullOrEmpty(val) ? 0 : val.length) + '/' + String(this.#option.maxLength);
            this.#container.querySelector('.message-bar .prompt-count').innerText = s;
        });
        if (readonly === true) {
--- a/lib/app/communications/style.scss
+++ b/lib/app/communications/style.scss
@ -1,5 +1,3 @@
-@import '../../../css/variables/definition.scss';
-
 .popup-mask .wrapper-edit-method {
    width: 100%;

@ -46,11 +44,12 @@
            }
        }

-        &.disabled {
+        &.disabled,
+        &:disabled {
            fill: lightgray;
            background-color: transparent !important;

-            &:hover {
+            &:hover>svg {
                opacity: unset;
            }
        }
@ -95,7 +94,7 @@
        line-height: 24px;
        display: flex;
        align-items: center;
-        font-size: 1.2em;
+        font-size: var(--font-larger-size);

        >div {
            flex: 1 1 auto;
@ -186,7 +185,7 @@
                >span {
                    // flex: 1 1 auto;
                    color: var(--strong-color);
-                    font-size: var(--font-larger-size);
+                    font-size: var(--font-size);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
@ -216,6 +215,8 @@
            border: none;
            height: 70px;
            resize: none;
+            font-size: var(--font-smaller-size);
+            font-family: var(--font-family);

            &:focus,
            &:focus-visible {
@ -226,9 +227,26 @@
        >div {
            padding: 0 10px 10px;

+            >.customer-name {
+                float: left;
+
+                >span {
+                    font-size: var(--font-smaller-size);
+                }
+
+                >.ui-input {
+                    margin-left: 4px;
+                    width: 150px;
+                    border-top: none;
+                    border-left: none;
+                    border-right: none;
+                }
+            }
+
            >.prompt-count {
                display: inline-block;
                color: var(--light-color);
+                font-size: var(--font-smaller-size);
            }
        }
    }
@ -246,7 +264,7 @@
            white-space: normal;
            word-break: break-word;
            overflow: hidden;
-            font-size: .8125rem;
+            font-size: var(--font-size);
            color: #333;
            display: flex;
            flex-direction: column;
@ -257,6 +275,7 @@

            .item-poster {
                font-weight: bold;
+                font-size: var(--font-size);
                align-self: flex-start;

                .tooltip-wrapper>.tooltip-content {
@ -293,7 +312,7 @@
                    margin-top: 3px;
                    font-weight: bold;
                    margin-right: -12px;
-                    font-size: 10px;
+                    font-size: .625rem;
                    float: right;
                }
            }
@ -301,7 +320,7 @@
            .item-time {
                align-self: flex-end;
                color: #aaa;
-                font-size: .7rem;
+                font-size: .6875rem;
            }

            &.item-other {
--- a/lib/ui.js
+++ b/lib/ui.js
@ -1,6 +1,7 @@
-import "../css/ui.scss";
+import './ui/css/variables/definition.scss';
+import './ui/css/common.scss';
 import { createElement } from "./functions";
-import { createIcon, resolveIcon } from "./ui/icon";
+import { createIcon, changeIcon, resolveIcon } from "./ui/icon";
 import { createCheckbox, createRadiobox, resolveCheckbox } from "./ui/checkbox";
 import { setTooltip, resolveTooltip } from "./ui/tooltip";
 import Dropdown from "./ui/dropdown";
@ -12,6 +13,7 @@ export {
  createElement,
  // icon
  createIcon,
+  changeIcon,
  resolveIcon,
  // checkbox
  createCheckbox,
--- a/lib/ui/checkbox.js
+++ b/lib/ui/checkbox.js
@ -1,3 +1,4 @@
+import './css/checkbox.scss';
 import { createElement } from "../functions";
 import { createIcon } from "./icon";

--- a/lib/ui/css/checkbox.scss
+++ b/lib/ui/css/checkbox.scss
@ -1,5 +1,4 @@
@import './functions/checkbox.scss';
-@import './variables/definition.scss';

 .checkbox-image {
    >input[type="checkbox"] {
--- a/lib/ui/css/common.scss
+++ b/lib/ui/css/common.scss
@ -0,0 +1,29 @@
+.ui-text,
+.ui-input {
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    border: 1px solid var(--box-color);
+    border-radius: var(--border-radius);
+    transition: border-color .2s;
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:focus,
+    &:hover {
+        border-color: var(--focus-color);
+    }
+
+    &:disabled {
+        border-color: var(--disabled-box-color);
+        color: var(--disabled-color);
+        background-color: var(--disabled-bg-color);
+    }
+}
+
+.ui-input {
+    text-indent: var(--text-indent);
+    line-height: var(--line-height);
+}
--- a/lib/ui/css/dropdown.scss
+++ b/lib/ui/css/dropdown.scss
@ -1,6 +1,4 @@
-@import './variables/definition.scss';
@import './functions/func.scss';
-@import './functions/checkbox.scss';

 $headerHeight: 26px;
 $caretWidth: 26px;
--- a/lib/ui/css/functions/checkbox.scss
+++ b/lib/ui/css/functions/checkbox.scss
--- a/lib/ui/css/functions/func.scss
+++ b/lib/ui/css/functions/func.scss
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@ -1,3 +1,5 @@
+@import './functions/func.scss';
+
 .grid {
    position: relative;
    box-sizing: border-box;
--- a/lib/ui/css/popup.scss
+++ b/lib/ui/css/popup.scss
@ -1,5 +1,4 @@
@import './functions/func.scss';
-@import './variables/definition.scss';

 $headerLineHeight: 24px;
 $buttonHeight: 28px;
@ -25,6 +24,11 @@ $buttonHeight: 28px;
        transform: scale(1.1);
    }

+    &.popup-transparent {
+        right: unset;
+        bottom: unset;
+    }
+
    .popup-container {
        min-width: 400px;
        max-width: 800px;
@ -52,6 +56,12 @@ $buttonHeight: 28px;
                font-size: 1rem;
            }

+            >.popup-header-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
            >svg {
                flex: 0 0 auto;
                width: $headerLineHeight;
@ -210,5 +220,78 @@ $buttonHeight: 28px;
                }
            }
        }
+
+        .popup-border {
+            position: absolute;
+
+            &.popup-border-left,
+            &.popup-border-right {
+                width: 6px;
+                height: 100%;
+                top: 0;
+                cursor: ew-resize;
+            }
+
+            &.popup-border-top,
+            &.popup-border-bottom {
+                width: 100%;
+                height: 6px;
+                left: 0;
+                cursor: ns-resize;
+            }
+
+            &.popup-border-top-left,
+            &.popup-border-top-right,
+            &.popup-border-bottom-right,
+            &.popup-border-bottom-left {
+                width: 8px;
+                height: 8px;
+            }
+
+            &.popup-border-top-left,
+            &.popup-border-bottom-right {
+                cursor: nwse-resize;
+            }
+
+            &.popup-border-top-right,
+            &.popup-border-bottom-left {
+                cursor: nesw-resize;
+            }
+
+            &.popup-border-left,
+            &.popup-border-top-left,
+            &.popup-border-bottom-left {
+                left: -4px;
+            }
+
+            &.popup-border-right,
+            &.popup-border-top-right,
+            &.popup-border-bottom-right {
+                right: -4px;
+            }
+
+            &.popup-border-top,
+            &.popup-border-top-left,
+            &.popup-border-top-right {
+                top: -4px;
+            }
+
+            &.popup-border-bottom,
+            &.popup-border-bottom-right,
+            &.popup-border-bottom-left {
+                bottom: -4px;
+            }
+        }
+
+        &.popup-collapse {
+            min-height: 40px;
+            min-width: 160px;
+
+            .popup-body,
+            .popup-footer,
+            .popup-border {
+                display: none;
+            }
+        }
    }
 }
--- a/lib/ui/css/tooltip.scss
+++ b/lib/ui/css/tooltip.scss
@ -1,6 +1,3 @@
-@import './functions/checkbox.scss';
-@import './variables/definition.scss';
-
 .tooltip-color {
    background-color: #fff;
    color: #323130;
--- a/lib/ui/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@ -31,34 +31,8 @@
    --text-indent: 4px;
    --line-height: 24px;

-    --font-size: .8125rem;
-    --font-smaller-size: .75rem;
-    --font-larger-size: .875rem;
+    --font-size: .8125rem;          // 13px
+    --font-smaller-size: .75rem;    // 12px
+    --font-larger-size: .875rem;    // 14px
    --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
 }
-
-.ui-input {
-    font-size: var(--font-size);
-    font-family: var(--font-family);
-    line-height: var(--line-height);
-    text-indent: var(--text-indent);
-    border: 1px solid var(--box-color);
-    border-radius: var(--border-radius);
-    transition: border-color .2s;
-
-    &:focus,
-    &:focus-visible {
-        outline: none;
-    }
-
-    &:focus,
-    &:hover {
-        border-color: var(--focus-color);
-    }
-
-    &:disabled {
-        border-color: var(--disabled-box-color);
-        color: var(--disabled-color);
-        background-color: var(--disabled-bg-color);
-    }
-}
--- a/lib/ui/dropdown.js
+++ b/lib/ui/dropdown.js
@ -1,4 +1,5 @@
 // import { r, global, contains, isPositive, nullOrEmpty } from "../utility";
+import './css/dropdown.scss';
 import { r } from "../utility/lgres";
 import { contains, nullOrEmpty } from "../utility/strings";
 import { global, isPositive } from "../utility";
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@ -1,3 +1,4 @@
+import '../css/grid.scss';
 import { global, isPositive, isMobile, throttle, truncate } from "../../utility";
 import { r } from "../../utility/lgres";
 import { createElement } from "../../functions";
--- a/lib/ui/icon.d.ts
+++ b/lib/ui/icon.d.ts
@ -1,2 +1,3 @@
 export function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGSVGElement
+export function changeIcon(svg: SVGSVGElement, type: string, id: string): SVGSVGElement
 export function resolveIcon(container: HTMLElement): HTMLElement
--- a/lib/ui/icon.js
+++ b/lib/ui/icon.js
@ -9,6 +9,13 @@ function createUse(type, id) {
    return use;
 }

+function changeIcon(svg, type, id) {
+    if (svg instanceof HTMLElement) {
+        svg.replaceChildren(createUse(type, id));
+    }
+    return svg;
+}
+
 function createIcon(type, id, style) {
    const svg = document.createElementNS(svgns, 'svg');
    svg.appendChild(createUse(type, id));
@ -34,5 +41,6 @@ function resolveIcon(container) {

 export {
    createIcon,
+    changeIcon,
    resolveIcon
 }
--- a/lib/ui/popup.html
+++ b/lib/ui/popup.html
@ -13,15 +13,25 @@
        const ui = window['lib-ui'];

        document.querySelector('#button-popup').addEventListener('click', () => {
-            const popup = ui.createPopup('title', 'content',
-                {
-                    text: 'Loading', trigger: p => {
-                        p.loading = true;
-                        setTimeout(() => p.loading = false, 1000);
-                        return false;
-                    }
-                },
-                { text: 'OK' });
+            const popup = new ui.Popup({
+                title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
+                content: 'content',
+                mask: false,
+                resizable: true,
+                collapsable: true,
+                minWidth: 210,
+                minHeight: 200,
+                buttons: [
+                    {
+                        text: 'Loading', trigger: p => {
+                            p.loading = true;
+                            setTimeout(() => p.loading = false, 1000);
+                            return false;
+                        }
+                    },
+                    { text: 'OK' }
+                ]
+            });
            popup.show();
        });
    </script>
@ -30,5 +40,10 @@
            --title-bg-color: lightgray;
            --title-color: #333;
        }
+        .popup-mask .popup-container {
+            min-width: 210px;
+            min-height: 200px;
+            max-width: unset;
+        }
    </style>
 </div>
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@ -1,11 +1,37 @@
-import "../../css/popup.scss";
+import "./css/popup.scss";
+import { r } from "../utility/lgres";
+import { nullOrEmpty } from "../utility/strings";
+import { global } from "../utility";
 import { createElement } from "../functions";
-import { r, nullOrEmpty } from "../utility";
-import { createIcon } from "./icon";
+import { createIcon, changeIcon } from "./icon";
+
+const ResizeMods = {
+    right: 1,
+    bottom: 2,
+    left: 4,
+    top: 8,
+    bottomRight: 2 | 1,
+    bottomLeft: 2 | 4,
+    topRight: 8 | 1,
+    topLeft: 8 | 4
+}
+
+// const Cursors = {
+//     [ResizeMods.right]: 'ew-resize',
+//     [ResizeMods.bottom]: 'ns-resize',
+//     [ResizeMods.bottomRight]: 'nwse-resize',
+//     [ResizeMods.left]: 'ew-resize',
+//     [ResizeMods.bottomLeft]: 'nesw-resize',
+//     [ResizeMods.top]: 'ns-resize',
+//     [ResizeMods.topRight]: 'nesw-resize',
+//     [ResizeMods.topLeft]: 'nwse-resize'
+// }

 class Popup {
    #mask;
    #option;
+    #bounds;
+    // #cursor;

    constructor(opts = {}) {
        this.#option = opts;
@ -13,8 +39,47 @@ class Popup {

    get container() { return this.#mask.querySelector('.popup-container') }

+    get rect() {
+        const container = this.container;
+        if (container == null) {
+            return null;
+        }
+        const style = global.getComputedStyle(container);
+        return {
+            left: style.left,
+            top: style.top,
+            width: style.width,
+            height: style.height
+        };
+    }
+    set rect(r) {
+        const container = this.container;
+        if (container == null) {
+            return;
+        }
+        const css = [];
+        if (!isNaN(r.left)) {
+            css.push(`left: ${r.left}px`);
+        }
+        if (!isNaN(r.top)) {
+            css.push(`top: ${r.top}px`);
+        }
+        if (!isNaN(r.width) && r.width > 0) {
+            css.push(`width: ${r.width}px`);
+        }
+        if (!isNaN(r.height) && r.height > 0) {
+            css.push(`height: ${r.height}px`);
+        }
+        if (css.length > 0) {
+            container.style.cssText += css.join('; ');
+        }
+    }
+
    create() {
        const mask = createElement('div', 'popup-mask');
+        if (this.#option.mask === false) {
+            mask.classList.add('popup-transparent');
+        }
        const container = createElement('div', 'popup-container');
        const close = () => {
            mask.classList.add('popup-active');
@ -30,7 +95,10 @@ class Popup {
                header.className = 'popup-header';
                let title = this.#option.title;
                if (!(title instanceof HTMLElement)) {
-                    title = createElement('div', t => t.innerText = title);
+                    title = createElement('div', t => {
+                        t.className = 'popup-header-title';
+                        t.innerText = title;
+                    });
                }
                header.appendChild(title);
                const move = title.querySelector('.popup-move') ?? title;
@ -46,6 +114,27 @@ class Popup {
                        mask.removeEventListener('mousemove', move, { passive: false });
                    });
                });
+                if (this.#option.collapsable === true) {
+                    const collapse = createIcon('fa-regular', 'compress-alt');
+                    collapse.classList.add('icon-expand');
+                    collapse.addEventListener('click', () => {
+                        if (container.classList.contains('popup-collapse')) {
+                            const bounds = this.#bounds;
+                            if (bounds != null) {
+                                container.style.cssText += `width: ${bounds.width}; height: ${bounds.height}`;
+                            }
+                            container.classList.remove('popup-collapse');
+                            changeIcon(collapse, 'fa-regular', 'compress-alt');
+                        } else {
+                            const rect = this.rect;
+                            this.#bounds = rect;
+                            container.style.cssText += `left: ${rect.left}; top: ${rect.top}; width: 160px; height: 40px`;
+                            container.classList.add('popup-collapse');
+                            changeIcon(collapse, 'fa-regular', 'expand-alt');
+                        }
+                    });
+                    header.appendChild(collapse);
+                }
                const cancel = createIcon('fa-regular', 'times');
                cancel.addEventListener('click', () => close());
                header.appendChild(cancel);
@ -79,6 +168,43 @@ class Popup {
                }))
            );
        }
+        // resizable
+        if (this.#option.resizable === true) {
+            container.append(
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-bottom-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top-left';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
+                }),
+                createElement('layer', layer => {
+                    layer.className = 'popup-border popup-border-top-right';
+                    layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
+                })
+            )
+        }
        mask.appendChild(container);
        this.#mask = mask;
        return mask;
@ -90,6 +216,12 @@ class Popup {
        }
        let mask = this.#mask ?? this.create();
        parent.appendChild(mask);
+        if (this.#option.mask === false) {
+            // calculator position
+            const container = this.container;
+            container.style.left = String((parent.offsetWidth - container.offsetWidth) / 2) + 'px';
+            container.style.top = String((parent.offsetHeight - container.offsetHeight) / 2) + 'px';
+        }
        return new Promise(resolve => {
            setTimeout(() => {
                mask.style.opacity = 1
@ -112,6 +244,79 @@ class Popup {
            loading.style.opacity = 1;
        }
    }
+
+    #resize(mod, e) {
+        const container = this.container;
+        const option = this.#option;
+        if (typeof option.onResizeStarted === 'function') {
+            option.onResizeStarted.call(this);
+        }
+        const mask = this.#mask;
+        // this.#cursor = mask.style.cursor;
+        // mask.style.cursor = Cursors[mod];
+        const originalX = e.clientX;
+        const originalY = e.clientY;
+        const original = {
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+            left: container.offsetLeft,
+            top: container.offsetTop
+        };
+        const minWidth = option.minWidth ?? 200;
+        const minHeight = option.minHeight ?? 200;
+        const move = e => {
+            const offsetX = e.clientX - originalX;
+            const offsetY = e.clientY - originalY;
+            let width = original.width;
+            let height = original.height;
+            let x = original.left;
+            let y = original.top;
+            if ((mod & ResizeMods.right) === ResizeMods.right) {
+                width += offsetX;
+                if (width < minWidth) {
+                    width = minWidth;
+                }
+            }
+            if ((mod & ResizeMods.bottom) === ResizeMods.bottom) {
+                height += offsetY;
+                if (height < minHeight) {
+                    height = minHeight;
+                }
+            }
+            if ((mod & ResizeMods.left) === ResizeMods.left) {
+                width -= offsetX;
+                if (width < minWidth) {
+                    width = minWidth;
+                    x = originalX + original.width - minWidth;
+                } else {
+                    x += offsetX;
+                }
+            }
+            if ((mod & ResizeMods.top) === ResizeMods.top) {
+                height -= offsetY;
+                if (height < minHeight) {
+                    height = minHeight;
+                    y = originalY + original.height - minHeight;
+                } else {
+                    y += offsetY;
+                }
+            }
+            if (typeof option.onResizing === 'function') {
+                option.onResizing.call(this, x, y, width, height);
+            } else {
+                container.style.cssText += `left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px`;
+            }
+        }
+        const parent = option.mask === false ? mask.parentElement : mask;
+        parent.addEventListener('mousemove', move, { passive: false });
+        parent.addEventListener('mouseup', () => {
+            parent.removeEventListener('mousemove', move, { passive: false });
+            // mask.style.cursor = this.#cursor;
+            if (typeof option.onResizeEnded === 'function') {
+                option.onResizeEnded.call(this);
+            }
+        });
+    }
 }

 export default Popup;
--- a/lib/ui/tooltip.js
+++ b/lib/ui/tooltip.js
@ -1,3 +1,4 @@
+import './css/tooltip.scss';
 import { createElement } from "../functions";
 // import { global } from "../utility";

--- a/lib/utility/strings.js
+++ b/lib/utility/strings.js
@ -46,7 +46,7 @@ function formatUrl(msg) {
        }

        for (let r of rs) {
-            msg = msg.replaceAll(r, '<a target="_blank" href="' + r + '"><svg><use xlink:href="' + ((typeof consts !== 'undefined' && consts.path) ?? '') + 'fonts/fa-regular.svg#link"></use></svg></a>');
+            msg = msg.replaceAll(r, '<a target="_blank" href="' + r + '"><svg><use xlink:href="' + ((typeof consts !== 'undefined' && consts.path) || '') + 'fonts/fa-regular.svg#link"></use></svg></a>');
        }
    }

--- a/main.js
+++ b/main.js
@ -1,5 +1,4 @@
-import './css/ui.scss'
-import './style.css'
+import './style.scss'
 // import javascriptLogo from './javascript.svg'
 import { get } from './lib/utility'

--- a/style.scss
+++ b/style.scss
@ -1,3 +1,11 @@
+@import './lib/ui/css/variables/definition.scss';
+@import './lib/ui/css/common.scss';
+@import './lib/ui/css/checkbox.scss';
+@import './lib/ui/css/dropdown.scss';
+@import './lib/ui/css/grid.scss';
+@import './lib/ui/css/popup.scss';
+@import './lib/ui/css/tooltip.scss';
+
 :root {
  font-family: var(--serif-font-family);
  font-size: 1.125rem;
@ -45,12 +53,12 @@ samp {
 h2+code {
  margin-left: 70px;
  position: relative;
-}

-h2+code::before {
-  content: '签名：';
-  position: absolute;
-  margin-left: -70px;
+  &::before {
+    content: '签名：';
+    position: absolute;
+    margin-left: -70px;
+  }
 }

 h3,
@ -68,20 +76,20 @@ h3~p {
 h4 {
  font-size: .9em;
  margin-block-end: .4em;
-}

-h4+code {
-  font-size: .9rem;
+  +code {
+    font-size: .9rem;
+  }
 }

 a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
-}

-a:hover {
-  color: #535bf2;
+  &:hover {
+    color: #535bf2;
+  }
 }

 button {
@ -94,15 +102,15 @@ button {
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
-}

-button:hover {
-  border-color: #646cff;
-}
+  &:hover {
+    border-color: #646cff;
+  }

-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
 }

 body {
@ -122,45 +130,45 @@ h1 {
  padding: 2rem;
  border-right: 1px solid var(--border-color);
  flex: 0 0 auto;
-}

-#directory>ul {
-  padding: 0;
-  line-height: 1.6em;
-}
+  >ul {
+    padding: 0;
+    line-height: 1.6em;

-#directory>ul>li {
-  list-style: none;
-  user-select: none;
-}
+    >li {
+      list-style: none;
+      user-select: none;

-#directory>ul>li.title {
-  margin: 20px 0 6px;
-  font-weight: bold;
-  font-size: 1.25em;
-}
+      &.title {
+        margin: 20px 0 6px;
+        font-weight: bold;
+        font-size: 1.25em;
+      }
+    }
+  }

-#directory ol {
-  padding-left: 10px;
-}
+  ol {
+    padding-left: 10px;

-#directory ol>li {
-  padding: 0 6px;
-  list-style-position: inside;
-  cursor: pointer;
-}
+    >li {
+      padding: 0 6px;
+      list-style-position: inside;
+      cursor: pointer;

-#directory ol>li:hover {
-  background-color: var(--hover-color);
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+  }
 }

 #container {
  flex: 1 1 auto;
  overflow: auto;
-}

-#container>div {
-  padding: 20px;
+  >div {
+    padding: 20px;
+  }
 }

 .app-module {
@ -170,11 +178,11 @@ h1 {
 #create-icon {
  display: flex;
  justify-content: center;
-}

-#create-icon svg {
-  width: 20px;
-  height: 20px;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 }

 #create-checkbox {
@ -183,13 +191,15 @@ h1 {
  align-items: center;
 }

-.checkbox-wrapper .check-box-inner {
-  width: 14px;
-  height: 14px;
-}
+.checkbox-wrapper {
+  .check-box-inner {
+    width: 14px;
+    height: 14px;
+  }

-.checkbox-wrapper>span {
-  font-size: 1em;
+  >span {
+    font-size: 1em;
+  }
 }

 .icon-col {
@ -200,10 +210,10 @@ h1 {
  text-overflow: ellipsis;
  white-space: pre;
  text-align: center;
-}

-.icon-col:hover {
-  text-decoration: underline;
+  &:hover {
+    text-decoration: underline;
+  }
 }

@media (prefers-color-scheme: light) {