mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
Tomáš Dvořák
186 lines
5.5 KiB
Markdown
186 lines
5.5 KiB
Markdown
# MyUIbrix Editor - Vylepšení / Improvements
|
|
|
|
## 🎨 Přehled změn / Changes Overview
|
|
|
|
MyUIbrix byl kompletně vylepšen s českým jazykem, lepší UX a snadnějším přístupem.
|
|
|
|
---
|
|
|
|
## ✅ Implementované změny / Implemented Changes
|
|
|
|
### 1. **Oprava databáze / Database Fix**
|
|
**Problém:** Endpoint `/api/v1/page-elements` vracel 500 Internal Server Error
|
|
**Řešení:**
|
|
- ✅ Přidán `PageElementConfig` model do auto-migrace v `database/migrate.go`
|
|
- ✅ Aktualizována SQL migrace `000020_create_page_element_configs.up.sql` s chybějícími sloupci:
|
|
- `visible BOOLEAN DEFAULT true`
|
|
- `display_order INTEGER DEFAULT 0`
|
|
- `deleted_at TIMESTAMP`
|
|
|
|
**Restart backend je potřeba pro aplikaci migrace!**
|
|
|
|
---
|
|
|
|
### 2. **České překlady / Czech Translations**
|
|
|
|
Všechny texty v MyUIbrix editoru byly přeloženy do češtiny:
|
|
|
|
| Anglicky | Česky |
|
|
|----------|-------|
|
|
| Enter Edit Mode | Aktivovat režim úprav |
|
|
| Exit Edit Mode (ESC) | Ukončit režim úprav (ESC) |
|
|
| Add Element (A) | Přidat element (A) |
|
|
| Element Layers (L) | Vrstvy elementů (L) |
|
|
| Save Changes (Ctrl+S) | Uložit změny (Ctrl+S) |
|
|
| Publish | Publikovat |
|
|
| Changes saved successfully! | Změny úspěšně uloženy! |
|
|
| All settings updated | Všechna nastavení byla aktualizována |
|
|
| Failed to save changes | Nepodařilo se uložit změny |
|
|
| Try again or contact support | Zkuste to prosím znovu nebo kontaktujte podporu |
|
|
|
|
---
|
|
|
|
### 3. **Admin navigace / Admin Navigation**
|
|
|
|
✅ **Přidán odkaz v admin sidebaru** (sekce Nastavení):
|
|
- Ikona: 🎨 `FaPaintBrush`
|
|
- Název: **MyUIbrix Editor**
|
|
- Funkce: Otevře homepage v novém okně s aktivovaným editorem
|
|
- Umístění: `Admin Panel → Nastavení → MyUIbrix Editor`
|
|
|
|
**Soubor:** `frontend/src/components/admin/AdminSidebar.tsx`
|
|
|
|
---
|
|
|
|
### 4. **Auto-aktivace editoru / Auto-activation**
|
|
|
|
✅ **URL parametr pro přímý vstup do editoru:**
|
|
```
|
|
http://localhost:3000/?myuibrix=edit
|
|
```
|
|
|
|
**Funkce:**
|
|
- Automaticky aktivuje režim úprav
|
|
- Zobrazí informační toast s návodem
|
|
- Odstraní parametr z URL (clean URL)
|
|
- Ideální pro odkaz z admin panelu
|
|
|
|
---
|
|
|
|
### 5. **Vylepšené UX / Improved UX**
|
|
|
|
**Floating tlačítko (pravý dolní roh):**
|
|
- 🎨 Větší a výraznější tlačítko pro zapnutí editoru
|
|
- 🔴 Červené pro vypnutí / 🟣 Fialové pro zapnutí
|
|
- ✨ Animace a hover efekty
|
|
- 📍 Vždy viditelné na všech stránkách
|
|
|
|
**Klávesové zkratky:**
|
|
- `ESC` - Zavřít editor / zrušit výběr
|
|
- `Ctrl+S` - Uložit změny
|
|
- `L` - Zobrazit/skrýt vrstvy
|
|
- `A` - Přidat element
|
|
|
|
**Vizuální vylepšení:**
|
|
- 🟦 Modré ohraničení při najetí myší
|
|
- 🔵 Modrý overlay u vybraného elementu
|
|
- 🏷️ Plovoucí štítky s názvy elementů
|
|
- 📱 Responzivní režim (Desktop/Tablet/Mobile)
|
|
|
|
---
|
|
|
|
## 🚀 Jak používat / How to Use
|
|
|
|
### Metoda 1: Z Admin Panelu
|
|
1. Přihlaste se jako admin
|
|
2. Otevřete Admin Panel
|
|
3. V sekci "Nastavení" klikněte na **"MyUIbrix Editor"**
|
|
4. Otevře se homepage v novém okně s aktivním editorem
|
|
|
|
### Metoda 2: Přímý odkaz
|
|
Přejděte na: `http://localhost:3000/?myuibrix=edit`
|
|
|
|
### Metoda 3: Floating tlačítko
|
|
1. Přejděte na libovolnou stránku (jako admin)
|
|
2. V pravém dolním rohu klikněte na fialové tlačítko ✏️
|
|
3. Režim úprav se aktivuje
|
|
|
|
---
|
|
|
|
## 🎯 Funkce editoru / Editor Features
|
|
|
|
### Upravování elementů:
|
|
1. **Klikněte na element** - Vybere ho a zobrazí varianty
|
|
2. **Zvolte variantu** - Změňte vzhled (unified, edge, minimal, modern)
|
|
3. **Skrýt/Zobrazit** - Zapněte/vypněte viditelnost
|
|
4. **Přeuspořádat** - Změňte pořadí pomocí drag & drop
|
|
5. **Uložit** - Klikněte "Publikovat" pro uložení změn
|
|
|
|
### Dostupné panely:
|
|
- **Levý panel:** Vizuální styly (barvy, velikosti, mezery)
|
|
- **Pravý panel:** Vrstvy elementů (pořadí, viditelnost)
|
|
- **Horní lišta:** Ovládací tlačítka (uložit, zrušit, viewport)
|
|
|
|
---
|
|
|
|
## 🛠️ Technické detaily / Technical Details
|
|
|
|
### Změněné soubory:
|
|
|
|
1. **Frontend:**
|
|
- `frontend/src/components/editor/MyUIbrixEditor.tsx` - Hlavní editor
|
|
- `frontend/src/components/admin/AdminSidebar.tsx` - Admin navigace
|
|
|
|
2. **Backend:**
|
|
- `database/migrate.go` - Auto-migrace
|
|
- `database/migrations/000020_create_page_element_configs.up.sql` - SQL migrace
|
|
|
|
3. **API Endpoint:**
|
|
- `GET /api/v1/page-elements?page_type=homepage` - Načte konfiguraci
|
|
- `POST /api/v1/admin/page-elements/batch` - Uloží změny
|
|
|
|
---
|
|
|
|
## ⚠️ Důležité poznámky / Important Notes
|
|
|
|
### Po změnách je potřeba:
|
|
1. **Restartovat backend** - Aby se aplikovala databázová migrace
|
|
2. **Obnovit frontend** - Pokud byl běžící (`npm start`)
|
|
|
|
### CORS chyby jsou očekávané:
|
|
- Logo API a externí obrázky mohou mít CORS problémy
|
|
- To je normální chování pro externí zdroje
|
|
- Použijte backend proxy pro obcházení: `/api/v1/proxy/image?url=...`
|
|
|
|
---
|
|
|
|
## 📋 Checklist nasazení / Deployment Checklist
|
|
|
|
- [x] Databázová migrace aktualizována
|
|
- [x] Auto-migrace nastavena
|
|
- [x] České překlady implementovány
|
|
- [x] Admin link přidán
|
|
- [x] URL parametr funguje
|
|
- [x] Floating tlačítko vylepšeno
|
|
- [x] Toast notifikace přeloženy
|
|
- [ ] **Backend restart** (udělá uživatel)
|
|
- [ ] **Frontend refresh** (udělá uživatel)
|
|
|
|
---
|
|
|
|
## 🎨 Další vylepšení (volitelné)
|
|
|
|
Možná budoucí vylepšení:
|
|
1. ✨ Drag & drop přímo na stránce
|
|
2. 🎨 Color picker pro barvy
|
|
3. 📐 Visual spacing editor
|
|
4. 💾 Undo/Redo funkcionalita
|
|
5. 📱 Live preview na mobilních zařízeních
|
|
6. 🌐 Export/Import konfigurací
|
|
|
|
---
|
|
|
|
**Vytvořeno:** 14. října 2025
|
|
**Verze:** 1.0.0
|
|
**Status:** ✅ Připraveno k použití
|