@sequent-org/moodboard 1.4.54 → 1.4.56

package/src/ui/text-properties/TextFormatControls.js

@@ -11,6 +11,15 @@ const SVG_ITALIC = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="1
 const SVG_UNDERLINE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" y1="20" x2="20" y2="20"/></svg>';
 const SVG_STRIKE = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/></svg>';
 
+const SVG_ALIGN_LEFT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M4.75 18.2637H13.25"/><path d="M4.75 14.0879H19.25"/><path d="M4.75 9.91211L13.25 9.91211"/></svg>';
+const SVG_ALIGN_CENTER = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M7.75 18.2637H16.25"/><path d="M4.75 14.0879H19.25"/><path d="M7.75 9.91211L16.25 9.91211"/></svg>';
+const SVG_ALIGN_RIGHT = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M10.75 18.2637H19.25"/><path d="M4.75 14.0879H19.25"/><path d="M10.75 9.91211L19.25 9.91211"/></svg>';
+const SVG_ALIGN_JUSTIFY = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4.75 5.73633H19.25"/><path d="M4.75 9.91211H19.25"/><path d="M4.75 14.0879H19.25"/><path d="M4.75 18.2637H19.25"/></svg>';
+
+const SVG_LIST_BULLET = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M4.21484 17.25C4.62906 17.25 4.96484 16.9142 4.96484 16.5C4.96484 16.0858 4.62906 15.75 4.21484 15.75C3.80063 15.75 3.46484 16.0858 3.46484 16.5C3.46484 16.9142 3.80063 17.25 4.21484 17.25ZM4.21484 11.75C4.62906 11.75 4.96484 11.4142 4.96484 11C4.96484 10.5858 4.62906 10.25 4.21484 10.25C3.80063 10.25 3.46484 10.5858 3.46484 11C3.46484 11.4142 3.80063 11.75 4.21484 11.75ZM4.21484 6.24609C4.62906 6.24609 4.96484 5.91031 4.96484 5.49609C4.96484 5.08188 4.62906 4.74609 4.21484 4.74609C3.80063 4.74609 3.46484 5.08188 3.46484 5.49609C3.46484 5.91031 3.80063 6.24609 4.21484 6.24609Z"/></svg>';
+const SVG_LIST_NUMBERED = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49505H19.2852M8.28516 10.999H19.2852M8.28516 16.4951H19.2852M3.30078 5.32812L4.67578 4.64062V9.45312M3.39531 13.2839C3.45867 13.1269 3.55438 12.9853 3.67622 12.8678C3.79808 12.7505 3.9433 12.6602 4.10242 12.6027C4.26156 12.5453 4.43101 12.5221 4.59972 12.5345C4.76844 12.547 4.93262 12.595 5.08156 12.6752C5.23049 12.7555 5.36082 12.8662 5.46407 13.0002C5.56729 13.1343 5.6411 13.2885 5.68067 13.453C5.72022 13.6175 5.72466 13.7885 5.69366 13.9549C5.66266 14.1211 5.59693 14.279 5.50078 14.4182L3.30078 17.3573H5.70703"/></svg>';
+const SVG_LIST_CHECK = '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8.28516 5.49609H19.2852M8.28516 11H19.2852M8.28516 16.4961H19.2852M2.9 5.2L3.9 6.2L5.7 4.2M2.9 10.7L3.9 11.7L5.7 9.7M2.9 16.2L3.9 17.2L5.7 15.2"/></svg>';
+
 function makeSep() {
     const d = document.createElement('div');
     d.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
@@ -27,16 +36,216 @@ function makeToggleBtn(svgStr, title, prop) {
     return btn;
 }
 
-function makeSelect(className, options) {
-    const sel = document.createElement('select');
-    sel.className = className;
-    options.forEach(({ value, label }) => {
-        const opt = document.createElement('option');
-        opt.value = value;
-        opt.textContent = label;
-        sel.appendChild(opt);
+function makeListButtons() {
+    const container = document.createElement('div');
+    container.className = 'tpp-list-btns';
+
+    const listOptions = [
+        { value: 'bullet', title: 'Маркированный список', svg: SVG_LIST_BULLET },
+        { value: 'numbered', title: 'Нумерованный список', svg: SVG_LIST_NUMBERED },
+        { value: 'checkbox', title: 'Список с флажками', svg: SVG_LIST_CHECK },
+    ];
+
+    let currentValue = 'none';
+    const changeListeners = [];
+
+    // Кнопка-триггер: всегда показывает иконку bullet-list и открывает модальное окно
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.title = 'Список';
+    triggerBtn.className = 'tpp-format-btn tpp-list-trigger';
+    triggerBtn.innerHTML = SVG_LIST_BULLET;
+
+    const modal = document.createElement('div');
+    modal.className = 'tpp-list-modal';
+    modal.style.display = 'none';
+
+    listOptions.forEach(({ value, title, svg }) => {
+        const optBtn = document.createElement('button');
+        optBtn.type = 'button';
+        optBtn.title = title;
+        optBtn.className = 'tpp-list-modal-option';
+        optBtn.dataset.listValue = value;
+        optBtn.innerHTML = svg;
+        optBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            // Клик по выбранному элементу снимает форматирование (none).
+            currentValue = currentValue === value ? 'none' : value;
+            closeModal();
+            updateActive();
+            changeListeners.forEach((cb) => cb({ target: proxy }));
+        });
+        modal.appendChild(optBtn);
+    });
+
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
+
+    function openModal() {
+        modal.style.display = 'flex';
+        updateModalActive();
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    function updateActive() {
+        triggerBtn.classList.toggle('is-active', currentValue !== 'none');
+        updateModalActive();
+    }
+
+    function updateModalActive() {
+        modal.querySelectorAll('.tpp-list-modal-option').forEach((btn) => {
+            const isActive = btn.dataset.listValue === currentValue;
+            btn.style.color = isActive ? 'rgb(53, 56, 205)' : '';
+        });
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
+    });
+
+    const proxy = {
+        get value() {
+            return currentValue;
+        },
+        set value(v) {
+            currentValue = v || 'none';
+            updateActive();
+        },
+        addEventListener(event, cb) {
+            if (event === 'change') changeListeners.push(cb);
+        },
+        _container: container,
+    };
+
+    updateActive();
+    return proxy;
+}
+
+function makeAlignButtons() {
+    const container = document.createElement('div');
+    container.className = 'tpp-align-btns';
+
+    const alignOptions = [
+        { value: 'left', title: 'По левому краю', svg: SVG_ALIGN_LEFT },
+        { value: 'center', title: 'По центру', svg: SVG_ALIGN_CENTER },
+        { value: 'right', title: 'По правому краю', svg: SVG_ALIGN_RIGHT },
+        { value: 'justify', title: 'По ширине', svg: SVG_ALIGN_JUSTIFY },
+    ];
+
+    let currentValue = 'left';
+    const changeListeners = [];
+
+    // Единственная кнопка — отображает текущее выравнивание и открывает модальное окно
+    const triggerBtn = document.createElement('button');
+    triggerBtn.type = 'button';
+    triggerBtn.className = 'tpp-format-btn tpp-align-btn tpp-align-trigger';
+    triggerBtn.dataset.alignValue = 'left';
+
+    // Модальный попап
+    const modal = document.createElement('div');
+    modal.className = 'tpp-align-modal';
+    modal.style.display = 'none';
+
+    alignOptions.forEach(({ value, title, svg }) => {
+        const optBtn = document.createElement('button');
+        optBtn.type = 'button';
+        optBtn.title = title;
+        optBtn.className = 'tpp-align-modal-option';
+        optBtn.dataset.alignValue = value;
+        optBtn.innerHTML = svg;
+        optBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            currentValue = value;
+            closeModal();
+            updateActive();
+            changeListeners.forEach((cb) => cb({ target: proxy }));
+        });
+        modal.appendChild(optBtn);
+    });
+
+    container.appendChild(triggerBtn);
+    container.appendChild(modal);
+
+    function openModal() {
+        modal.style.display = 'flex';
+        updateModalActive();
+        // Закрытие по клику вне
+        setTimeout(() => {
+            document.addEventListener('click', closeOnOutside);
+        }, 0);
+    }
+
+    function closeModal() {
+        modal.style.display = 'none';
+        document.removeEventListener('click', closeOnOutside);
+    }
+
+    function closeOnOutside(e) {
+        if (!container.contains(e.target)) {
+            closeModal();
+        }
+    }
+
+    function updateActive() {
+        const opt = alignOptions.find((o) => o.value === currentValue);
+        if (opt) {
+            triggerBtn.innerHTML = opt.svg;
+            triggerBtn.title = opt.title;
+            triggerBtn.dataset.alignValue = currentValue;
+        }
+        updateModalActive();
+    }
+
+    function updateModalActive() {
+        modal.querySelectorAll('.tpp-align-modal-option').forEach((btn) => {
+            const isActive = btn.dataset.alignValue === currentValue;
+            btn.style.color = isActive ? 'rgb(53, 56, 205)' : '';
+        });
+    }
+
+    triggerBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (modal.style.display === 'none') {
+            openModal();
+        } else {
+            closeModal();
+        }
     });
-    return sel;
+
+    const proxy = {
+        get value() {
+            return currentValue;
+        },
+        set value(v) {
+            currentValue = v;
+            updateActive();
+        },
+        addEventListener(event, cb) {
+            if (event === 'change') changeListeners.push(cb);
+        },
+        _container: container,
+    };
+
+    updateActive();
+    return proxy;
 }
 
 export function createTextFormatControls(panelInstance, panel) {
@@ -53,21 +262,11 @@ export function createTextFormatControls(panelInstance, panel) {
 
     panel.appendChild(makeSep());
 
-    panelInstance.alignControl = makeSelect('tpp-align-select', [
-        { value: 'left', label: '≡ Лево' },
-        { value: 'center', label: '≡ Центр' },
-        { value: 'right', label: '≡ Право' },
-        { value: 'justify', label: '≡ По ширине' },
-    ]);
-    panel.appendChild(panelInstance.alignControl);
-
-    panelInstance.listControl = makeSelect('tpp-list-select', [
-        { value: 'none', label: 'Список: нет' },
-        { value: 'bullet', label: '• Маркер' },
-        { value: 'numbered', label: '1. Нумерация' },
-        { value: 'checkbox', label: '☐ Флажки' },
-    ]);
-    panel.appendChild(panelInstance.listControl);
+    panelInstance.alignControl = makeAlignButtons();
+    panel.appendChild(panelInstance.alignControl._container);
+
+    panelInstance.listControl = makeListButtons();
+    panel.appendChild(panelInstance.listControl._container);
 
     panel.appendChild(makeSep());
 

package/src/ui/text-properties/TextPropertiesPanelBindings.js

@@ -7,19 +7,80 @@ function hidePresetTicks(buttons) {
     });
 }
 
+function setFontDropdownOpen(panel, isOpen) {
+    if (!panel.fontDropdown || !panel.fontSelect) {
+        return;
+    }
+    panel.fontDropdown.classList.toggle('is-open', isOpen);
+    panel.fontSelect.classList.toggle('is-active', isOpen);
+    panel.fontSelect.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+}
+
 export function bindTextPropertiesPanelControls(panel) {
     if (panel._bindingsAttached) {
         return;
     }
 
-    panel.fontSelect.addEventListener('change', (event) => {
-        panel._changeFontFamily(event.target.value);
+    panel.fontSelect.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const willOpen = !panel.fontDropdown.classList.contains('is-open');
+        setFontDropdownOpen(panel, willOpen);
     });
 
+    panel.fontSelect.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const willOpen = !panel.fontDropdown.classList.contains('is-open');
+            setFontDropdownOpen(panel, willOpen);
+        } else if (event.key === 'Escape') {
+            setFontDropdownOpen(panel, false);
+        }
+    });
+
+    panel.fontDropdown.querySelectorAll('.font-dropdown__item').forEach((item) => {
+        item.addEventListener('click', (event) => {
+            event.stopPropagation();
+            const value = item.dataset.value;
+            panel.fontSelect.value = value;
+            panel._changeFontFamily(value);
+            setFontDropdownOpen(panel, false);
+        });
+    });
+
+    panel._onFontDocumentClick = (event) => {
+        if (!panel._fontSelectWrapper || !event.target) {
+            return;
+        }
+        if (!panel._fontSelectWrapper.contains(event.target)) {
+            setFontDropdownOpen(panel, false);
+        }
+    };
+    document.addEventListener('click', panel._onFontDocumentClick);
+
     panel.fontSizeSelect.addEventListener('change', (event) => {
         panel._changeFontSize(parseInt(event.target.value, 10));
     });
 
+    if (panel.fontSizeUpBtn) {
+        panel.fontSizeUpBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex < select.options.length - 1) {
+                select.selectedIndex++;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
+    if (panel.fontSizeDownBtn) {
+        panel.fontSizeDownBtn.addEventListener('click', () => {
+            const select = panel.fontSizeSelect;
+            if (select.selectedIndex > 0) {
+                select.selectedIndex--;
+                select.dispatchEvent(new Event('change'));
+            }
+        });
+    }
+
     panel.currentColorButton.addEventListener('click', (event) => {
         event.stopPropagation();
         panel._toggleColorDropdown();
@@ -115,5 +176,10 @@ export function unbindTextPropertiesPanelControls(panel) {
         panel._onBgDocumentClick = null;
     }
 
+    if (panel._onFontDocumentClick) {
+        document.removeEventListener('click', panel._onFontDocumentClick);
+        panel._onFontDocumentClick = null;
+    }
+
     panel._bindingsAttached = false;
 }

package/src/ui/text-properties/TextPropertiesPanelRenderer.js

@@ -99,54 +99,109 @@ export function updateCurrentBgColorButton(panelInstance, color) {
 }
 
 function createFontControls(panelInstance, panel) {
-    const fontLabel = document.createElement('span');
-    fontLabel.textContent = 'Шрифт:';
-    fontLabel.className = 'tpp-label';
-    panel.appendChild(fontLabel);
-
-    panelInstance.fontSelect = document.createElement('select');
-    panelInstance.fontSelect.className = 'font-select';
-    panelInstance.fontSelect.className = 'font-select';
+    const fontWrapper = document.createElement('div');
+    fontWrapper.className = 'font-select-wrapper';
+
+    const trigger = document.createElement('div');
+    trigger.className = 'font-select';
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('tabindex', '0');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+
+    const triggerLabel = document.createElement('span');
+    triggerLabel.className = 'font-select__label';
+    trigger.appendChild(triggerLabel);
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'font-dropdown';
+    dropdown.setAttribute('role', 'listbox');
+
+    const optionElements = [];
+    const optionRefs = FONT_OPTIONS.map((font) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'font-dropdown__item';
+        item.setAttribute('role', 'option');
+        item.dataset.value = font.value;
+        item.textContent = font.name;
+        item.style.fontFamily = font.value;
+        dropdown.appendChild(item);
+        optionElements.push(item);
+        return { value: font.value, textContent: font.name, element: item };
+    });
 
-    FONT_OPTIONS.forEach((font) => {
-        const option = document.createElement('option');
-        option.value = font.value;
-        option.textContent = font.name;
-        option.style.fontFamily = font.value;
-        panelInstance.fontSelect.appendChild(option);
+    fontWrapper.appendChild(trigger);
+    fontWrapper.appendChild(dropdown);
+    panel.appendChild(fontWrapper);
+
+    let currentValue = FONT_OPTIONS[0].value;
+    const applyValue = (newValue) => {
+        currentValue = newValue;
+        const match = optionRefs.find((opt) => opt.value === newValue);
+        triggerLabel.textContent = match ? match.textContent : newValue;
+        triggerLabel.style.fontFamily = newValue;
+        optionRefs.forEach((opt) => {
+            opt.element.classList.toggle('is-active', opt.value === newValue);
+        });
+    };
+    applyValue(currentValue);
+
+    Object.defineProperty(trigger, 'value', {
+        configurable: true,
+        get() {
+            return currentValue;
+        },
+        set(newValue) {
+            applyValue(newValue);
+        },
+    });
+    Object.defineProperty(trigger, 'options', {
+        configurable: true,
+        get() {
+            return optionElements;
+        },
     });
 
-    panel.appendChild(panelInstance.fontSelect);
+    panelInstance.fontSelect = trigger;
+    panelInstance.fontDropdown = dropdown;
+    panelInstance._fontSelectWrapper = fontWrapper;
 
-    const sizeLabel = document.createElement('span');
-    sizeLabel.textContent = 'Размер:';
-    sizeLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(sizeLabel);
+    const fontSizeWrapper = document.createElement('div');
+    fontSizeWrapper.className = 'font-size-wrapper';
 
     panelInstance.fontSizeSelect = document.createElement('select');
     panelInstance.fontSizeSelect.className = 'font-size-select';
-    panelInstance.fontSizeSelect.className = 'font-size-select';
 
     FONT_SIZE_OPTIONS.forEach((size) => {
         const option = document.createElement('option');
         option.value = size;
-        option.textContent = `${size}px`;
+        option.textContent = String(size);
         panelInstance.fontSizeSelect.appendChild(option);
     });
 
-    panel.appendChild(panelInstance.fontSizeSelect);
+    const stepperContainer = document.createElement('div');
+    stepperContainer.className = 'font-size-steppers';
 
-    const colorLabel = document.createElement('span');
-    colorLabel.textContent = 'Цвет:';
-    colorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(colorLabel);
+    panelInstance.fontSizeUpBtn = document.createElement('button');
+    panelInstance.fontSizeUpBtn.type = 'button';
+    panelInstance.fontSizeUpBtn.className = 'font-size-stepper font-size-stepper--up';
+    panelInstance.fontSizeUpBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="top: 1px;"><path d="M8.25 6.75L5 3.25L1.75 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 
-    createCompactColorSelector(panelInstance, panel);
+    panelInstance.fontSizeDownBtn = document.createElement('button');
+    panelInstance.fontSizeDownBtn.type = 'button';
+    panelInstance.fontSizeDownBtn.className = 'font-size-stepper font-size-stepper--down';
+    panelInstance.fontSizeDownBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="bottom: 1px;"><path d="M8.25 3.25L5 6.75L1.75 3.25"></path></svg>';
+
+    stepperContainer.appendChild(panelInstance.fontSizeUpBtn);
+    stepperContainer.appendChild(panelInstance.fontSizeDownBtn);
+
+    fontSizeWrapper.appendChild(panelInstance.fontSizeSelect);
+    fontSizeWrapper.appendChild(stepperContainer);
 
-    const bgColorLabel = document.createElement('span');
-    bgColorLabel.textContent = 'Фон:';
-    bgColorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(bgColorLabel);
+    panel.appendChild(fontSizeWrapper);
+
+    createCompactColorSelector(panelInstance, panel);
 
     createCompactBackgroundSelector(panelInstance, panel);
 

package/src/utils/styleLoader.js

@@ -49,7 +49,7 @@ export class StyleLoader {
             }
             
             .font-select { min-width: 110px; }
-            .font-size-select { min-width: 56px; }
+            .font-size-select { min-width: 32px; }
             
             .text-properties-panel .tpp-label--spaced { margin-left: 6px; }