mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-03 18:22:57 +00:00
Tomas Dvorak
248 lines
6.1 KiB
Markdown
248 lines
6.1 KiB
Markdown
# 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
|
|
```typescript
|
|
- 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
|
|
```typescript
|
|
- Kurzor: move
|
|
- Při dragování: opacity 0.5
|
|
- Drop target: žlutý okraj (3px solid)
|
|
- Smooth transitions
|
|
```
|
|
|
|
### Viewport Visual Feedback
|
|
```typescript
|
|
Desktop: šedé pozadí, žádný okraj
|
|
Tablet: šedé pozadí, modrý okraj 3px
|
|
Mobile: šedé pozadí, modrý okraj 3px
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Technické Detaily
|
|
|
|
### Viewport Wrapper
|
|
```typescript
|
|
// 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
|
|
```typescript
|
|
// 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
|
|
```typescript
|
|
// 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
|