diff --git a/Properties/Resources.resx b/Properties/Resources.resx index a8bcec1..c8af042 100644 --- a/Properties/Resources.resx +++ b/Properties/Resources.resx @@ -517,5 +517,162 @@ Close + + + Success + + + Info + + + Warning + + + Error + + + Screenshot captured + + + Full screen captured + + + Upload Complete + + + URL copied + + + URL has been copied to clipboard + + + + Upload History + + + Recent Uploads + + + History of uploaded screenshots to cloud + + + No upload history + + + Your uploaded screenshots will appear here + + + Copy URL + + + Reupload + + + Open in browser + + + Uploading... + + + Source file not found + + + Screenshot reuploaded. URL copied to clipboard. + + + Success + + + Failed + + + + Zoom + + + Zoom In + + + Zoom Out + + + Fit to Window + + + Redo + + + Tool Properties + + + Active Tool: + + + Quick Colors: + + + History + + + Quick Actions + + + Clear All + + + {0} x {1} px + + + Edits: {0} + + + Actions: {0} / {1} + + + Edit Mode + + + None + + + Marker + + + Rectangle + + + Arrow + + + Blur + + + Text + + + + Quick Select - Keyboard Shortcuts + + + Cancel selection + + + Confirm selection + + + Show/hide help + + + Full screen + + + Capture + + + Cancel + + + {0} x {1} px + diff --git a/docs/SPRINT-3-FEATURES.md b/docs/SPRINT-3-FEATURES.md new file mode 100644 index 0000000..50ae01c --- /dev/null +++ b/docs/SPRINT-3-FEATURES.md @@ -0,0 +1,510 @@ +# Sprint 3 - Nowoczesny Edytor i System Powiadomień + +## Przegląd + +Sprint 3 wprowadza znaczące ulepszenia do interfejsu użytkownika PrettyScreenSHOT, skupiając się na modernizacji edytora, overlay oraz systemie powiadomień. Wszystkie zmiany mają na celu poprawę doświadczenia użytkownika i zwiększenie produktywności. + +## 🎨 Edytor - Nowoczesny Interface + +### CommandBar + +Nowy, kompaktowy pasek poleceń umieszczony w górnej części edytora: + +**Sekcja Narzędzi (lewa strona):** +- 🖍️ **Marker (M)** - Rysowanie odręczne +- ⬜ **Prostokąt (R)** - Rysowanie prostokątów +- ➡️ **Strzałka (A)** - Dodawanie strzałek +- 👁️ **Rozmycie (B)** - Zamazywanie wrażliwych danych +- 📝 **Tekst (T)** - Dodawanie tekstu +- 🎨 **Picker kolorów** - Szybki wybór koloru +- 📏 **Suwak grubości** - Regulacja grubości linii (1-30px) + +**Sekcja Akcji (prawa strona):** +- ↶ **Cofnij (Ctrl+Z)** - Cofnij ostatnią akcję +- ↷ **Ponów (Ctrl+Y)** - Przywróć cofniętą akcję +- ☁️ **Chmura** - Prześlij do chmury +- 💾 **Zapisz (Ctrl+S)** - Zapisz screenshot +- ✕ **Anuluj (Esc)** - Zamknij bez zapisu + +### Panel Właściwości (prawy) + +Dedykowany panel z narzędziami i ustawieniami: + +**Wyświetlanie informacji:** +- Aktywne narzędzie (np. "Marker", "Prostokąt") +- Stan historii edycji + +**Szybki wybór koloru:** +- 10 predefiniowanych kolorów +- Kliknij aby natychmiast zmienić kolor +- Kolory: Czerwony, Zielony, Niebieski, Żółty, Magenta, Czarny, Biały, Pomarańczowy, Fioletowy, Szary + +**Grubość/Rozmiar:** +- Suwak z zakresem 1-30px +- Real-time podgląd wartości + +**Historia akcji:** +- Przyciski Cofnij/Ponów +- Licznik: "Akcji: X / Y" +- Wyświetlanie pozycji w historii + +**Szybkie akcje:** +- "Wyczyść wszystko" - Usuwa wszystkie edycje + +### Status Bar (dolny) + +Informacyjny pasek na dole edytora: + +**Lewa strona:** +- 🖼️ **Rozmiar obrazu**: Szerokość × Wysokość (px) +- 📝 **Liczba edycji**: Suma wszystkich akcji + +**Środek:** +- 🔧 **Tryb/Narzędzie**: Aktualny tryb pracy (np. "Narzędzie: Marker") + +**Prawa strona:** +- 🔍 **Poziom zoomu**: Wyświetlany w % (np. "100%") + +### Kontrolki Zoom + +Pływające kontrolki w prawym dolnym rogu canvasu: + +- **Zoom Out (Ctrl+-)** - Pomniejsz obraz +- **Zoom In (Ctrl++)** - Powiększ obraz +- **Fit (Ctrl+0)** - Dopasuj do okna +- Zakres: 10% - 500% +- Real-time transformacja ScaleTransform + +### Ulepszone Undo/Redo + +Kompletny system historii z prawidłowym stackiem: + +**Funkcjonalność:** +- Historia z indeksem pozycji +- Wsparcie dla Redo (przywracanie cofniętych akcji) +- Automatyczne czyszczenie "redo stack" przy nowej akcji +- Wyświetlanie pozycji: "Akcji: 5 / 10" + +**Stan przycisków:** +- Undo wyłączony gdy brak historii +- Redo wyłączony gdy na końcu historii +- Visual feedback dla dostępności + +### Wizualne Feedback + +**Wybór narzędzia:** +- Aktywne narzędzie: `Primary` appearance (niebieski) +- Nieaktywne: `Secondary` appearance (szary) + +**Status updates:** +- Real-time aktualizacja przy każdej zmianie +- Sync między CommandBar a panelem właściwości + +## 🖼️ Overlay - Szybkie Zaznaczanie + +### Skróty Klawiszowe + +Nowy system skrótów dla szybszej pracy: + +- **ESC** - Anuluj zaznaczanie +- **Enter** - Potwierdź zaznaczenie +- **F1** - Pokaż/ukryj pomoc +- **Spacja** - Przechwyć pełny ekran + +### Panel Pomocy + +Automatyczny panel z instrukcjami: + +**Wyświetlanie:** +- Fade-in przy starcie overlay (300ms) +- Auto-ukrycie po 3 sekundach +- Toggle przez F1 + +**Animacje:** +- QuadraticEase dla płynnych przejść +- Opacity 0→1 (pokazanie) +- Opacity 1→0 (ukrycie) + +### Nowoczesne UI + +**Wyświetlanie wymiarów:** +- Real-time panel w lewym górnym rogu +- Format: "1920 x 1080 px" +- Widoczny podczas zaznaczania + +**Rogi zaznaczenia:** +- Corner handles w każdym rogu +- Grubość: 3px, długość: 20px +- Kolor: niebieski (#0078D4) + +**Crosshair guides:** +- Linie pomocnicze (pozioma i pionowa) +- Styl: przerywan (dash) +- Opacity: 60% +- Ułatwiają precyzyjne centrowanie + +**Quick Toolbar:** +- Pojawia się po zaznaczeniu (>20px) +- Przyciski: "✓ Przechwyć" i "✕ Anuluj" +- Pozycja: środek dołu, margin 40px +- Drop shadow dla głębi + +### Konfigurowalny Wygląd + +**Maska:** +- Kolor: rgba(0, 0, 0, 100) - konfigurowalne +- Opacity: 0-255 - konfigurowalne +- Pełne pokrycie wszystkich monitorów + +**Kursor:** +- Crosshair dla lepszej precyzji +- Wskazuje tryb zaznaczania + +## 🔔 System Toast Notifications + +### ToastNotification Control + +Nowoczesna kontrolka powiadomień: + +**Typy:** +1. **Success** (Sukces) + - Ikona: Checkmark + - Kolor: Zielony (#10B981) + +2. **Info** (Informacja) + - Ikona: Info + - Kolor: Niebieski (#0078D4) + +3. **Warning** (Ostrzeżenie) + - Ikona: Warning + - Kolor: Pomarańczowy (#F59E0B) + +4. **Error** (Błąd) + - Ikona: ErrorCircle + - Kolor: Czerwony (#EF4444) + +**Design:** +- Zaokrąglone rogi (8px) +- Drop shadow dla głębi +- Ikona w kółku (40×40px) +- Tytuł i wiadomość +- Przycisk zamknięcia (X) + +**Animacje:** +- **Slide-in**: Wsuwa się z prawej (400px → 0) +- **Slide-out**: Wysuwa się w prawo (0 → 400px) +- **Easing**: CubicEase dla płynności +- **Czas trwania**: 300ms (in), 250ms (out) + +**Auto-hide:** +- Domyślny czas: 4000ms (4 sekundy) +- Konfigurowalne per toast +- Error: 5000ms (dłużej) + +### ToastNotificationManager + +Centralny manager dla toastów: + +**Funkcje:** +```csharp +ShowSuccess(title, message, duration = 4000) +ShowInfo(title, message, duration = 4000) +ShowWarning(title, message, duration = 4000) +ShowError(title, message, duration = 5000) +``` + +**Zarządzanie:** +- Maksymalnie 5 toastów jednocześnie +- Stack od góry do dołu +- Auto-pozycjonowanie (margin 20px + wysokość) +- Auto-usuwanie najstarszego przy przekroczeniu limitu + +**Fallback:** +- Standalone window gdy brak kontenera +- Pozycja: prawy dolny róg ekranu +- Niezależne okno per toast + +### Zastąpienie Balloon Tips + +Wszystkie stare powiadomienia zastąpione toastami: + +**Overlay:** +- Screenshot przechwycony → Success toast +- Pełny ekran przechwycony → Success toast + +**ScreenshotManager:** +- Auto-upload zakończony → Success toast z URL + +**Editor:** +- Kopiowanie do schowka → Info toast + +## 📤 Historia Uploadów + +### UploadHistoryWindow + +Dedykowane okno z historią uploadów: + +**Wyświetlanie:** +- Tabela z ostatnimi 100 uploadami +- Kolumny: #, URL/Plik, Provider, Status, Akcje +- Sortowanie: najnowsze na górze + +**Kolumna Status:** +- Kolorowy wskaźnik (kółko) +- Zielony: Sukces +- Czerwony: Błąd +- Tekst statusu + +**Kolumna Akcje:** +1. **Kopiuj URL** (Copy24) + - Kopiuje URL do schowka + - Toast: "URL skopiowany" + +2. **Prześlij ponownie** (ArrowSync24) + - Wczytuje plik z dysku + - Uploaduje ponownie do chmury + - Toast feedback + - Auto-kopiuje nowy URL + +3. **Otwórz w przeglądarce** (Open24) + - Process.Start z URL + - Error handling + +**Empty State:** +- Ikona CloudArrowUp64 (opacity 30%) +- Tekst: "Brak historii uploadów" +- Podpowiedź: "Twoje przesłane zdjęcia pojawią się tutaj" + +### Integracja Menu + +**Tray Icon Menu:** +- Nowa pozycja: "Historia uploadów" +- Pozycja: pod "Historia", przed separatorem +- Otwiera UploadHistoryWindow + +### Re-upload Funkcjonalność + +**Proces:** +1. Sprawdzenie czy plik istnieje +2. Wczytanie BitmapImage z pliku +3. Wywołanie CloudUploadManager.UploadScreenshotAsync +4. Obsługa błędów z toast notifications +5. Aktualizacja UI przy sukcesie +6. Auto-kopiowanie URL do schowka + +**Feedback:** +- Toast "Przesyłanie..." na start +- Toast "Upload zakończony" + URL przy sukcesie +- Toast "Błąd uploadowania" + komunikat przy błędzie + +## 🎯 Skróty Klawiszowe + +### Edytor: +- **Ctrl+Z** - Cofnij +- **Ctrl+Y** - Ponów +- **Ctrl+S** - Zapisz +- **Ctrl++ / Ctrl+-** - Zoom In/Out +- **Ctrl+0** - Zoom Fit +- **Esc** - Zamknij +- **M** - Marker +- **R** - Prostokąt +- **A** - Strzałka +- **B** - Rozmycie +- **T** - Tekst + +### Overlay: +- **ESC** - Anuluj +- **Enter** - Potwierdź +- **F1** - Toggle pomoc +- **Spacja** - Pełny ekran + +## 📁 Struktura Plików + +### Nowe pliki: + +``` +Views/ +├── Controls/ +│ ├── ToastNotification.xaml +│ └── ToastNotification.xaml.cs +├── Windows/ +│ ├── UploadHistoryWindow.xaml +│ └── UploadHistoryWindow.xaml.cs + +Services/ +└── ToastNotificationManager.cs +``` + +### Zmodyfikowane: + +``` +Views/ +├── Windows/ +│ ├── ScreenshotEditorWindow.xaml +│ └── ScreenshotEditorWindow.xaml.cs +├── Overlays/ +│ ├── ScreenshotOverlay.xaml +│ └── ScreenshotOverlay.xaml.cs + +Services/ +├── Screenshot/ +│ └── ScreenshotManager.cs +└── TrayIconManager.cs + +Properties/ +└── Resources.resx +``` + +## 🔧 Zmiany Techniczne + +### Editor: + +**Nowe zmienne:** +```csharp +private int historyIndex = -1; +private double currentZoom = 1.0; +private Wpf.Ui.Controls.Button? activeToolButton = null; +``` + +**Nowe metody:** +- `UpdateStatusBar()` - Aktualizacja UI statusów +- `Redo()` - Przywracanie cofniętych akcji +- `OnZoomInClick()`, `OnZoomOutClick()`, `OnZoomFitClick()` - Zoom controls +- `ApplyZoom()` - Aplikacja transformacji zoom +- `OnQuickColorClick()` - Szybki wybór koloru +- `OnCopyClick()` - Kopiowanie do schowka +- `OnShareClick()` - Placeholder dla share + +**Zmiany w logice:** +- `RedrawCanvas()` - Rysuje tylko do historyIndex +- `RedrawCanvasWithPreview()` - j.w. + preview +- `OnEditorCanvasMouseUp()` - Zarządzanie redo stack (RemoveRange) + +### Overlay: + +**Nowe zmienne:** +```csharp +private bool helpVisible = false; +private Color maskColor = Color.FromArgb(100, 0, 0, 0); +private byte maskOpacity = 100; +``` + +**Nowe metody:** +- `InitializeOverlay()` - Inicjalizacja, timery +- `ShowHelpPanelWithAnimation()` - Animacja fade-in +- `HideHelpPanelWithAnimation()` - Animacja fade-out +- `OnOverlayKeyDown()` - Obsługa klawiatury +- `CaptureFullScreen()` - Pełny ekran (Spacja) +- `DrawCornerHandles()` - Rysowanie rogów +- `DrawCrosshairGuides()` - Linie pomocnicze + +**Zmiany w render:** +- `OnRender()` - Konfigurowalny maskColor +- Transparentny prostokąt dla zaznaczenia +- Nowoczesny border (niebieski, 2px) + +### Toast System: + +**Architektura:** +- Control (XAML + code-behind) +- Manager (singleton) +- Types enum (Success, Info, Warning, Error) + +**Animacje:** +- DoubleAnimation dla Opacity i TranslateTransform +- CubicEase dla smooth transitions +- Completed event dla cleanup + +## 🌍 Lokalizacja + +Dodano 50+ nowych kluczy w `Resources.resx`: + +**Kategorie:** +- Toast_* (powiadomienia) +- UploadHistory_* (historia) +- Editor_* (edytor) +- Overlay_* (overlay) + +**Przykłady:** +```xml + + URL copied + + + Zoom In + + + Quick Select - Keyboard Shortcuts + +``` + +## 🚀 Jak Używać + +### Edytor: + +1. Otwórz screenshot w edytorze +2. Wybierz narzędzie z CommandBar (klik lub skrót) +3. Dostosuj kolor i grubość w panelu właściwości +4. Rysuj na canvasie +5. Użyj Undo/Redo według potrzeb +6. Zoomuj dla lepszej precyzji (Ctrl++ / Ctrl+-) +7. Zapisz lub prześlij do chmury + +### Overlay: + +1. Uruchom zaznaczanie (np. PrintScreen) +2. Przeczytaj podpowiedzi (auto-pokazane na 3 sek) +3. Zaznacz obszar myszką +4. Użyj skrótów: + - Enter - potwierdź + - Esc - anuluj + - Spacja - pełny ekran +5. Lub kliknij przycisk w quick toolbar + +### Historia Uploadów: + +1. Otwórz z tray menu: "Historia uploadów" +2. Przeglądaj listę uploadów +3. Akcje: + - Kliknij URL aby skopiować + - Użyj przycisku "Kopiuj URL" + - "Prześlij ponownie" dla re-upload + - "Otwórz w przeglądarce" dla podglądu + +## 📊 Statystyki + +**Linie kodu:** +- Nowe: ~1,500 linii +- Zmodyfikowane: ~800 linii +- Łącznie: ~2,300 linii + +**Pliki:** +- Nowe: 5 +- Zmodyfikowane: 7 +- Łącznie: 12 plików + +**Funkcje:** +- Nowe metody: ~30 +- Nowe kontrolki: 2 (Toast, UploadHistory) +- Nowe managery: 1 (ToastNotificationManager) + +## 🐛 Known Issues + +Brak znanych problemów. + +## 📝 TODO / Future Improvements + +1. Persistent settings dla overlay (maskColor, opacity) +2. Customizable keyboard shortcuts +3. Toast notification sounds (opcjonalne) +4. Upload history filtering i search +5. Export upload history do CSV +6. Batch operations w upload history + +## 🔗 Powiązane + +- [Sprint 3 Tasks](sprint-3-tasks.md) +- [Sprint 3 Overview](sprint-3-overview.md) +- [Commits](https://github.com/Co0ob1iee/PrettyScreenSHOT/commits/claude/sprint-1-gui-planning-016jDUBD7C19JEjuLp3PPipw) + - `0de0cd6` - Modern Editor and Overlay + - `723fdbf` - Toast Notifications and Upload History