@sequent-org/moodboard 1.4.55 → 1.4.57

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

@@ -5,6 +5,7 @@ import {
     TEXT_COLOR_PRESETS,
 } from './TextPropertiesPanelMapper.js';
 import { createTextFormatControls } from './TextFormatControls.js';
+import { createTextLockMoreControls } from './TextLockMoreControls.js';
 
 export function createTextPropertiesPanelRenderer(panelInstance) {
     const panel = document.createElement('div');
@@ -36,7 +37,9 @@ export function hideColorDropdown(panelInstance) {
 
 export function updateCurrentColorButton(panelInstance, color) {
     if (panelInstance.currentColorButton) {
-        panelInstance.currentColorButton.style.backgroundColor = color;
+        if (panelInstance.colorIndicator) {
+            panelInstance.colorIndicator.style.backgroundColor = color;
+        }
         panelInstance.currentColorButton.title = `Текущий цвет: ${color}`;
     }
     if (panelInstance.colorInput) {
@@ -44,6 +47,36 @@ export function updateCurrentColorButton(panelInstance, color) {
     }
 }
 
+export function toggleHighlightDropdown(panelInstance) {
+    if (!panelInstance.highlightDropdown) {
+        return;
+    }
+
+    if (panelInstance.highlightDropdown.style.display === 'none') {
+        panelInstance.highlightDropdown.style.display = 'block';
+    } else {
+        panelInstance.highlightDropdown.style.display = 'none';
+    }
+}
+
+export function hideHighlightDropdown(panelInstance) {
+    if (panelInstance.highlightDropdown) {
+        panelInstance.highlightDropdown.style.display = 'none';
+    }
+}
+
+export function updateCurrentHighlightButton(panelInstance, color) {
+    if (panelInstance.currentHighlightButton) {
+        if (panelInstance.highlightIndicator) {
+            panelInstance.highlightIndicator.style.backgroundColor = color === 'transparent' ? 'transparent' : color;
+        }
+        panelInstance.currentHighlightButton.title = color === 'transparent' ? 'Без фона текста' : `Цвет фона текста: ${color}`;
+    }
+    if (panelInstance.highlightInput) {
+        panelInstance.highlightInput.value = color === 'transparent' ? '#ffff99' : color;
+    }
+}
+
 export function toggleBgColorDropdown(panelInstance) {
     if (!panelInstance.bgColorDropdown) {
         return;
@@ -68,24 +101,27 @@ export function updateCurrentBgColorButton(panelInstance, color) {
             panelInstance.currentBgColorButton.style.backgroundColor = 'white';
             panelInstance.currentBgColorButton.title = 'Без выделения';
 
-            if (!panelInstance.currentBgColorButton.querySelector('div')) {
-                const line = document.createElement('div');
-                line.style.cssText = `
-                    width: 20px;
-                    height: 1px;
-                    background: #ff0000;
-                    transform: rotate(45deg);
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform-origin: center;
-                    transform: translate(-50%, -50%) rotate(45deg);
-                `;
-                panelInstance.currentBgColorButton.appendChild(line);
+            const line = panelInstance.currentBgColorButton.querySelector('div');
+            if (line) {
+                line.remove();
+            }
+
+            if (!panelInstance.currentBgColorButton.querySelector('img.no-color-icon')) {
+                const img = document.createElement('img');
+                img.src = '/icons/no-color.svg';
+                img.className = 'no-color-icon';
+                img.style.cssText = 'width: 20px; height: 20px; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);';
+                panelInstance.currentBgColorButton.appendChild(img);
             }
         } else {
             panelInstance.currentBgColorButton.style.backgroundColor = color;
             panelInstance.currentBgColorButton.title = `Цвет выделения: ${color}`;
+            
+            const img = panelInstance.currentBgColorButton.querySelector('img.no-color-icon');
+            if (img) {
+                img.remove();
+            }
+            
             const line = panelInstance.currentBgColorButton.querySelector('div');
             if (line) {
                 line.remove();
@@ -99,54 +135,120 @@ 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.id = `tpp-font-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+    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;
+        },
+    });
+
+    panelInstance.fontSelect = trigger;
+    panelInstance.fontDropdown = dropdown;
+    panelInstance._fontSelectWrapper = fontWrapper;
 
-    panel.appendChild(panelInstance.fontSelect);
+    const fontSeparator = document.createElement('div');
+    fontSeparator.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
+    panel.appendChild(fontSeparator);
 
-    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';
+
+    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>';
+
+    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);
+
+    panel.appendChild(fontSizeWrapper);
 
-    const colorLabel = document.createElement('span');
-    colorLabel.textContent = 'Цвет:';
-    colorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(colorLabel);
+    const colorSeparator = document.createElement('div');
+    colorSeparator.style.cssText = 'width:1px;height:18px;background:#e0e0e0;margin:0 6px;flex-shrink:0;';
+    panel.appendChild(colorSeparator);
 
     createCompactColorSelector(panelInstance, panel);
 
-    const bgColorLabel = document.createElement('span');
-    bgColorLabel.textContent = 'Фон:';
-    bgColorLabel.className = 'tpp-label tpp-label--spaced';
-    panel.appendChild(bgColorLabel);
+    createCompactHighlightSelector(panelInstance, panel);
 
     createCompactBackgroundSelector(panelInstance, panel);
 
@@ -172,6 +274,8 @@ function createFontControls(panelInstance, panel) {
     panel.appendChild(mdLabel);
 
     createTextFormatControls(panelInstance, panel);
+
+    createTextLockMoreControls(panelInstance, panel);
 }
 
 function createCompactColorSelector(panelInstance, panel) {
@@ -179,7 +283,6 @@ function createCompactColorSelector(panelInstance, panel) {
     colorSelectorContainer.style.cssText = `
         position: relative;
         display: inline-block;
-        margin-left: 4px;
     `;
     panelInstance._colorSelectorContainer = colorSelectorContainer;
 
@@ -188,7 +291,26 @@ function createCompactColorSelector(panelInstance, panel) {
     panelInstance.currentColorButton.title = 'Выбрать цвет';
     panelInstance.currentColorButton.className = 'current-color-button';
 
+    const colorIcon = document.createElement('span');
+    colorIcon.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5636 13.9875L12 5L15.4364 13.9875"></path><path d="M9.88525 10.8155H14.1147"></path></svg>';
+    colorIcon.style.cssText = 'width: 24px; height: 24px; pointer-events: none; display: flex; align-items: center; justify-content: center;';
+
+    panelInstance.colorIndicator = document.createElement('div');
+    panelInstance.colorIndicator.style.cssText = `
+        width: 18px;
+        height: 5px;
+        position: absolute;
+        bottom: 2px;
+        background: rgb(255, 235, 164);
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
+        border-radius: 2px;
+    `;
+
+    panelInstance.currentColorButton.appendChild(colorIcon);
+    panelInstance.currentColorButton.appendChild(panelInstance.colorIndicator);
+
     panelInstance.colorDropdown = document.createElement('div');
+    panelInstance.colorDropdown.id = `tpp-color-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     panelInstance.colorDropdown.style.cssText = `
         position: absolute;
         top: 100%;
@@ -200,7 +322,7 @@ function createCompactColorSelector(panelInstance, panel) {
         padding: 8px;
         display: none;
         z-index: 10000;
-        min-width: 200px;
+        width: max-content;
     `;
 
     createColorGrid(panelInstance, panelInstance.colorDropdown);
@@ -301,6 +423,178 @@ function createColorGrid(panelInstance, container) {
     container.appendChild(customContainer);
 }
 
+function createCompactHighlightSelector(panelInstance, panel) {
+    const highlightSelectorContainer = document.createElement('div');
+    highlightSelectorContainer.style.cssText = `
+        position: relative;
+        display: inline-block;
+        margin-left: 4px;
+    `;
+    panelInstance._highlightSelectorContainer = highlightSelectorContainer;
+
+    panelInstance.currentHighlightButton = document.createElement('button');
+    panelInstance.currentHighlightButton.type = 'button';
+    panelInstance.currentHighlightButton.title = 'Выбрать цвет фона текста';
+    panelInstance.currentHighlightButton.className = 'current-highlight-button';
+
+    const highlightIcon = document.createElement('span');
+    highlightIcon.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.431 13.4828L17.5 6.27586L15.2241 4L8.01724 10.069M11.431 13.4828L6.5 15L8.01724 10.069M11.431 13.4828L8.01724 10.069" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+    highlightIcon.style.cssText = 'width: 24px; height: 24px; pointer-events: none; display: flex; align-items: center; justify-content: center;';
+
+    panelInstance.highlightIndicator = document.createElement('div');
+    panelInstance.highlightIndicator.style.cssText = `
+        width: 18px;
+        height: 5px;
+        position: absolute;
+        bottom: 2px;
+        background: transparent;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
+        border-radius: 2px;
+    `;
+
+    panelInstance.currentHighlightButton.appendChild(highlightIcon);
+    panelInstance.currentHighlightButton.appendChild(panelInstance.highlightIndicator);
+
+    panelInstance.highlightDropdown = document.createElement('div');
+    panelInstance.highlightDropdown.id = `tpp-highlight-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+    panelInstance.highlightDropdown.style.cssText = `
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        padding: 8px;
+        display: none;
+        z-index: 10000;
+        width: max-content;
+    `;
+
+    createHighlightColorGrid(panelInstance, panelInstance.highlightDropdown);
+
+    highlightSelectorContainer.appendChild(panelInstance.currentHighlightButton);
+    highlightSelectorContainer.appendChild(panelInstance.highlightDropdown);
+    panel.appendChild(highlightSelectorContainer);
+}
+
+function createHighlightColorGrid(panelInstance, container) {
+    const presetsGrid = document.createElement('div');
+    presetsGrid.style.cssText = `
+        display: grid;
+        grid-template-columns: repeat(6, 28px);
+        gap: 6px;
+        margin-bottom: 8px;
+        align-items: center;
+        justify-items: center;
+    `;
+
+    panelInstance._highlightPresetButtons = [];
+
+    BACKGROUND_COLOR_PRESETS.forEach((preset) => {
+        const colorButton = document.createElement('button');
+        colorButton.type = 'button';
+        colorButton.title = preset.name;
+        colorButton.dataset.colorValue = preset.color;
+
+        if (preset.color === 'transparent') {
+            colorButton.style.cssText = `
+                width: 28px;
+                height: 28px;
+                border: 1px solid #ddd;
+                border-radius: 50%;
+                background: white;
+                cursor: pointer;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                position: relative;
+            `;
+
+            const img = document.createElement('img');
+            img.src = '/icons/no-color.svg';
+            img.className = 'no-color-icon';
+            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
+            colorButton.appendChild(img);
+        } else {
+            colorButton.style.cssText = `
+                width: 28px;
+                height: 28px;
+                border: 1px solid #ddd;
+                border-radius: 50%;
+                background-color: ${preset.color};
+                cursor: pointer;
+                margin: 0;
+                padding: 0;
+                display: block;
+                box-sizing: border-box;
+                ${preset.color === '#ffffff' ? 'border-color: #ccc;' : ''}
+                position: relative;
+            `;
+
+            const tick = document.createElement('i');
+            tick.style.cssText = `
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                width: 8px;
+                height: 5px;
+                transform: translate(-50%, -50%) rotate(315deg) scaleX(-1);
+                border-right: 2px solid #111;
+                border-bottom: 2px solid #111;
+                display: none;
+                pointer-events: none;
+            `;
+            colorButton.appendChild(tick);
+        }
+
+        presetsGrid.appendChild(colorButton);
+        panelInstance._highlightPresetButtons.push(colorButton);
+    });
+
+    container.appendChild(presetsGrid);
+
+    const separator = document.createElement('div');
+    separator.style.cssText = `
+        height: 1px;
+        background: #eee;
+        margin: 8px 0;
+    `;
+    container.appendChild(separator);
+
+    const customContainer = document.createElement('div');
+    customContainer.style.cssText = `
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    `;
+
+    const customLabel = document.createElement('span');
+    customLabel.textContent = 'Свой цвет:';
+    customLabel.style.cssText = `
+        font-size: 12px;
+        color: #666;
+    `;
+
+    panelInstance.highlightInput = document.createElement('input');
+    panelInstance.highlightInput.type = 'color';
+    panelInstance.highlightInput.style.cssText = `
+        width: 32px;
+        height: 24px;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        cursor: pointer;
+        padding: 0;
+    `;
+
+    customContainer.appendChild(customLabel);
+    customContainer.appendChild(panelInstance.highlightInput);
+    container.appendChild(customContainer);
+}
+
 function createCompactBackgroundSelector(panelInstance, panel) {
     const bgSelectorContainer = document.createElement('div');
     bgSelectorContainer.style.cssText = `
@@ -316,6 +610,7 @@ function createCompactBackgroundSelector(panelInstance, panel) {
     panelInstance.currentBgColorButton.className = 'current-bgcolor-button';
 
     panelInstance.bgColorDropdown = document.createElement('div');
+    panelInstance.bgColorDropdown.id = `tpp-bgcolor-dropdown-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
     panelInstance.bgColorDropdown.style.cssText = `
         position: absolute;
         top: 100%;
@@ -327,7 +622,7 @@ function createCompactBackgroundSelector(panelInstance, panel) {
         padding: 8px;
         display: none;
         z-index: 10000;
-        min-width: 200px;
+        width: max-content;
     `;
 
     createBackgroundColorGrid(panelInstance, panelInstance.bgColorDropdown);
@@ -373,14 +668,11 @@ function createBackgroundColorGrid(panelInstance, container) {
                 position: relative;
             `;
 
-            const line = document.createElement('div');
-            line.style.cssText = `
-                width: 20px;
-                height: 1px;
-                background: #ff0000;
-                transform: rotate(45deg);
-            `;
-            colorButton.appendChild(line);
+            const img = document.createElement('img');
+            img.src = '/icons/no-color.svg';
+            img.className = 'no-color-icon';
+            img.style.cssText = 'width: 20px; height: 20px; pointer-events: none;';
+            colorButton.appendChild(img);
         } else {
             colorButton.style.cssText = `
                 width: 28px;

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

@@ -9,6 +9,9 @@ export function createTextPropertiesPanelState() {
         currentColorButton: null,
         colorDropdown: null,
         colorInput: null,
+        currentHighlightButton: null,
+        highlightDropdown: null,
+        highlightInput: null,
         currentBgColorButton: null,
         bgColorDropdown: null,
         bgColorInput: null,
@@ -24,10 +27,13 @@ export function createTextPropertiesPanelState() {
         _eventBridgeAttached: false,
         _eventBridgeHandlers: null,
         _colorSelectorContainer: null,
+        _highlightSelectorContainer: null,
         _bgSelectorContainer: null,
         _colorPresetButtons: [],
+        _highlightPresetButtons: [],
         _bgPresetButtons: [],
         _onColorDocumentClick: null,
+        _onHighlightDocumentClick: null,
         _onBgDocumentClick: null,
         _docMouseDownAttached: false,
     };

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; }