MyClub/DOCS/MYUIBRIX_IMPROVEMENTS_2025.md

MyUIbrix Vylepšení - Říjen 2025

Přehled změn

Kompletní přepracování MyUIbrix editoru s novými funkcemi, opravami chyb a českým překladem.

---

🎯 Nové Funkce

1. Interaktivní Ovládání na Stránce

• Tlačítka na hover: Při najetí myší se zobrazí akční tlačítka:
  • ⚙️ Upravit styl - Otevře panel se styly
  • ⬆️ Přesunout nahoru - Posune element výš
  • ⬇️ Přesunout dolů - Posune element níž
  • 🗑️ Odstranit - Smaže element (s potvrzením)

2. Drag & Drop na Stránce

• Přetáhněte element přímo na stránce pro změnu pozice
• Vizuální indikátory při přetahování (žlutý okraj)
• Automatické přeuspořádání v DOM

3. Responzivní Viewport Switcher

• Nyní funkční! Přepínání mezi zařízeními:
  • 🖥️ Počítač (100% šířka)
  • 📱 Tablet (768px)
  • 📱 Telefon (375px)
• Šedé pozadí kolem viewportu pro lepší viditelnost
• Modrý okraj pro non-desktop zobrazení
• Indikátor aktuální šířky pod tlačítky

4. Český Překlad

Všechna uživatelská rozhraní nyní v češtině:

• Tlačítka a popisky
• Nápověda a instrukce
• Chybové zprávy
• Tooltips

---

🐛 Opravené Chyby

1. Přesouvání Elementů

Problém: Elementy se přesouvaly na divné pozice Řešení:

• Opravena funkce applyVisualReorder() pro správnou detekci kontejneru
• Nyní funguje s viewport wrapperem
• Používá container.contains() místo přímé kontroly parent

2. Změna Stylů

Problém: Pouze jeden styl fungoval, elementy mizely Řešení:

• Aktualizace configs state při změně varianty
• Vynucení re-renderu elementu pomocí data-variant atributu
• Dispatch variant-change eventu pro posluchače
• Timeout 50ms pro zajištění správného pořadí operací

3. Responzivní Viewport

Problém: Viewport switcher neměnil šířku stránky Řešení:

• Implementace .myuibrix-viewport-wrapper kontejneru
• Dynamické aplikování šířky při změně viewport
• Zachování fixed/absolute elementů mimo wrapper
• Vizuální feedback (border, shadow)

---

🎨 Vylepšené UX

Hover Efekty

- Modrý tečkovaný okraj při najetí
- Průhledné modré pozadí
- Badge s názvem elementu
- Akční tlačítka (opacity 0 → 1)

Drag & Drop Indikátory

- Kurzor: move
- Při dragování: opacity 0.5
- Drop target: žlutý okraj (3px solid)
- Smooth transitions

Viewport Visual Feedback

Desktop:  šedé pozadí, žádný okraj
Tablet:   šedé pozadí, modrý okraj 3px
Mobile:   šedé pozadí, modrý okraj 3px

---

📝 Technické Detaily

Viewport Wrapper

// Vytvoření při aktivaci edit mode
const wrapper = document.createElement('div');
wrapper.className = 'myuibrix-viewport-wrapper';
wrapper.style.cssText = `
  margin: 0 auto;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.15);
  min-height: calc(100vh - 60px);
`;

Variant Change Handler

// Nyní správně aktualizuje configs a vynutí re-render
setConfigs(prevConfigs => {
  const updated = [...prevConfigs];
  updated[configIndex] = { ...updated[configIndex], variant };
  return updated;
});

// Force element update
element.setAttribute('data-variant', variant);
element.dispatchEvent(new CustomEvent('variant-change', { 
  detail: { variant } 
}));

Visual Reorder Fix

// Detekce správného kontejneru
const viewport = document.querySelector('.myuibrix-viewport-wrapper');
const container = viewport || document.querySelector('.container');

// Bezpečná kontrola
if (element && container.contains(element)) {
  container.appendChild(element);
}

---

🎓 Klávesové Zkratky

Zkratka	Akce
ESC	Zavřít panel / Ukončit edit mode
Ctrl+S / ⌘+S	Uložit změny
L	Toggle vrstvy panelu
A	Přidat element
↑	Přesunout vybraný element nahoru
↓	Přesunout vybraný element dolů
Del / Backspace	Odstranit vybraný element

---

🚀 Použití

Aktivace Edit Mode

1. Klikněte na plovoucí tlačítko vlevo dole
2. Nebo přidejte ?myuibrix=edit do URL

Úprava Elementu

1. Najeďte myší na element (zobrazí se akční tlačítka)
2. Klikněte na ⚙️ pro změnu stylu
3. Vyberte styl z panelu
4. Změny se zobrazí okamžitě (preview)

Přesunutí Elementu

Možnost 1: Tlačítka

• Klikněte ⬆️ nebo ⬇️

Možnost 2: Drag & Drop

• Přetáhněte element na novou pozici
• Pustě na cílové místo

Možnost 3: Layers Panel

• Otevřete panel vrstev (L)
• Přetáhněte v seznamu

Odstranění Elementu

• Klikněte 🗑️ (potvrdí se dialogem)
• Nebo Del na vybraném elementu

Uložení Změn

1. Klikněte "Publikovat" v top baru
2. Nebo stiskněte Ctrl+S
3. Stránka se obnoví s uloženými změnami

---

🔍 Testování

Checklist

• [✅] Změna stylu elementu
• [✅] Přesun elementu nahoru/dolů
• [✅] Drag & Drop přesunutí
• [✅] Odstranění elementu
• [✅] Přidání nového elementu
• [✅] Viewport switcher (desktop/tablet/mobile)
• [✅] Uložení a reload
• [✅] Klávesové zkratky
• [✅] Layers panel
• [✅] Hover efekty

---

📦 Soubory

Upravené soubory:

frontend/src/components/editor/MyUIbrixEditor.tsx

Nové funkce:

• Interaktivní tlačítka na hover
• Drag & Drop na stránce
• Viewport wrapper implementace
• Lepší detekce kontejnerů
• Force re-render při změně varianty

---

🎯 Budoucí Vylepšení

• Undo/Redo funkce
• Copy/Paste elementů
• Keyboard navigation mezi elementy
• Custom breakpoints pro responsive
• Export/Import konfigurace
• Element templates
• Pokročilé CSS úpravy (padding, margin, colors)
• Live CSS editor
• Mobile touch gestures pro přesunutí

---

📚 Dokumentace

Pro více informací viz:

• DOCS/MYUIBRIX_QUICK_START.md
• DOCS/MYUIBRIX_ELEMENTOR_FEATURES.md
• DOCS/MYUIBRIX_PREVIEW_MODE.md

---

Datum: 18. října 2025
Verze: 2.0
Status: ✅ Kompletní a otestováno