Zum Hauptinhalt springen

Screenshots – Noch zu erstellen / Still to Create

Stand: März 2026
Checkliste (nur im Git-Repository): docs/templates/screenshot-checklist.en.md | docs/templates/screenshot-checklist.de.md
Abgleich: Screenshotliste mit Vistameet-Teams-Konzeptdokumenten abgeglichen (u. a. KONZEPT_MATRIX_MEETING_CHAT_ERSATZ: Meeting-Chat-Screens in Config/Checkliste). Geplante Erweiterung: Google als Kalender-/Todo-/Kontakte-Provider → siehe docs/PLAN_GOOGLE_KALENDER_TODO_KONTAKTE_DATEIEN.md; bei Umsetzung optionale Screens für Einstellungen/Konten und Badge-Ansichten ergänzen.

Übersicht​

  • [x] = Vorhanden in docs/screenshots/
  • [~] = In screenshot-config.json konfiguriert, per npm run screenshots erzeugbar
  • [ ] = Noch zu erstellen

Wartezeiten für Datenladen​

Nach Login und Seitenwechsel muss genug Zeit für asynchrone Datenladung sein (Matrix, Kalender-Provider, MS Graph, Call-Log-API). In screenshot-config.json steuern delayAfterNavigation (global 4000 ms) und delayBeforeCapture (pro Screenshot 4500–7500 ms) die Wartezeiten. Zu geringe Werte führen zu Ladeblumen. Empfehlungen und Tabelle: SETUP.md.

Vollständige Liste – Screenshots noch zu erstellen​

Getting Started​

ScreenshotBeschreibungHinweise
initialization-screen.pngInitialisierungsbildschirmNach Login
desktop-app-interface.pngDesktop-App-OberflächeTauri-App
mobile-app-interface.pngMobile-App-OberflächeiOS/Android
web-app-interface.pngWeb-App im Browser
ScreenshotBeschreibungHinweise
sidebar-customization.pngSidebar-Anpassung (Drag & Drop, Rechtsklick)Dialog/Modal

Chat & Messaging​

ScreenshotBeschreibungHinweise
message-input.pngNachrichteneingabe
message-context-menu.pngKontextmenü (Reply, Edit, Delete)Rechtsklick auf Nachricht
create-room-dialog.pngRaum erstellen
room-settings.pngRaumeinstellungen / Room settings drawer
add-people-dialog.pngPersonen hinzufügen (People Picker: Matrix + MS Entra)Neu – Chat öffnen → Personen hinzufügen
invite-external-user-dialog.pngPer E-Mail oder Teams einladen (MS-Nutzer ohne Matrix)Neu – Nach Add People bei MS-Nutzern
add-tab-dialog.pngTab hinzufügen (Integrierte Tabs: Befragung, Whiteboard)Neu
whiteboard-tab.pngWhiteboard-Tab (Excalidraw)Neu
polls-tab.pngBefragung/Polls-TabNeu
ms-chat-interface.pngMicrosoft Teams Chat/ms-chat
ms-channels-interface.pngMicrosoft Teams Channels/ms-channels
advanced-search-dialog.pngErweiterte SucheCtrl+K
search-results-filters.pngSuchergebnisse mit Filtern

Calendar​

ScreenshotBeschreibungHinweise
new-event-dialog.pngNeuer Termin / Create event
event-details.pngTermindetails
scheduling-assistant.pngScheduling AssistantBei Terminen mit Teilnehmern

Planner​

ScreenshotBeschreibungHinweise
create-task-dialog.pngAufgabe erstellen
task-card.pngAufgabenkarte mit Aktionen
planner-filters.pngFilteroptionen

Teams & Channels​

ScreenshotBeschreibungHinweise
channels-list.pngKanallisteNach Team-Auswahl
channel-conversation.pngKanal-Unterhaltung

Calls​

ScreenshotBeschreibungHinweise
call-log.pngAnrufverlauf / Call LogTab in Calls
incoming-call-dialog.pngEingehender Anruf
active-call-interface.pngAktiver Anruf
meeting-room.pngMeeting-Raum
meeting-toolbar.pngMeeting-Toolbar (Chat, Q&A, Polls, Whiteboard)
participant-list.pngTeilnehmerliste
meeting-controls.pngMeeting-Steuerung
pre-join-page.pngPre-Join (Kamera/Mikro prüfen)
join-meeting-dialog.pngMeeting beitreten
whiteboard-in-meeting.pngWhiteboard im Meeting geöffnet

Contacts​

ScreenshotBeschreibungHinweise
contacts-search.pngKontakte mit Suche
priority-contacts.pngPrioritätskontakte/contacts?tab=priority
blocked-contacts.pngBlockierte Kontakte

Settings​

ScreenshotBeschreibungHinweise
settings-general-language.pngAllgemein mit Sprachoptionen
settings-chat.pngChat-Einstellungen
settings-notifications.pngBenachrichtigungen
settings-keyboard-shortcuts.pngTastenkürzel
settings-account.pngKonto-Einstellungen
provider-accounts-tab.pngProvider-Konten / Konten & Organisationen

Security​

ScreenshotBeschreibungHinweise
encryption-setup-wizard.pngVerschlüsselungs-Setup
recovery-key-display.pngRecovery-Key anzeigen
device-verification.pngGeräteverifizierung
user-verification.pngBenutzerverifizierung
key-backup-creation.pngKey-Backup erstellen
key-backup-restoration.pngKey-Backup wiederherstellen
encryption-status.pngVerschlüsselungsstatus
migration-progress.pngMigrationsfortschrittFalls sichtbar

Spaces​

ScreenshotBeschreibungHinweise
space-hierarchy.pngSpace-Hierarchie / Baumansicht
space-settings.pngSpace-Einstellungen
create-space-dialog.pngSpace erstellen
space-nested-rooms.pngSpace mit verschachtelten Räumen

User Profiles​

ScreenshotBeschreibungHinweise
profile-own.pngEigenes Profil
profile-other.pngProfil anderer Nutzer
profile-editor.pngProfil bearbeiten
device-list.pngGeräteverwaltung

Troubleshooting​

ScreenshotBeschreibungHinweise
login-error.pngAnmeldefehler
encryption-validation.pngVerschlüsselungs-Validierung
error-messages.pngFehlermeldungen (Beispiele)
permission-dialogs.pngPlattform-Berechtigungsdialoge
mobile-accessibility.pngMobile Barrierefreiheit

Platform-Specific​

ScreenshotBeschreibungHinweise
desktop-windows.pngDesktop-App Windows
desktop-macos.pngDesktop-App macOS
desktop-linux.pngDesktop-App Linux
mobile-ios.pngMobile-App iOS
mobile-android.pngMobile-App Android
web-browser.pngWeb-App im Browser

Google als Provider (optional, nach Umsetzung in Vistameet-Teams)​

ScreenshotBeschreibungHinweise
settings-accounts-google.pngKonten & Organisationen mit verbundenem Google-AccountEinstellungen → Konten; wenn Google OAuth integriert
Kalender/Planner/Kontakte mit Google-BadgeAnsichten mit aktivem Google-ProviderBadge „Google“ an Terminen, Aufgaben, Kontakten

Konfigurierbar (screenshot-config.json)​

Diese Screenshots können per npm run screenshots automatisch erzeugt werden (falls Login in .env):

Ohne Login​

  • login-screen, keycloak-login-page

Mit Login (E2E_USER1/E2E_PASSWORD1)​

  • Global: delayAfterNavigation 4000 ms, waitTimeout 20000 ms
  • main-interface, chat-list (5–6 s für Matrix-/Chat-Daten)
  • calendar-month-view, calendar-week-view (6,5 s für Kalender-Provider)
  • planner-board-view (6 s für Task-Provider)
  • teams-list (5,5 s)
  • calls-page, call-log (7–7,5 s für Call-Log-API)
  • contacts-page (6 s für Kontakt-Provider)
  • priority-contacts, blocked-contacts (4,5 s)
  • activity (6 s für Activity-Feed)
  • assistant (4,5 s)
  • Einstellungs-Tabs (3,5–4 s, nach Tab-Klick 1,5 s)
  • ms-chat, ms-channels (7 s für MS Graph API)
  • Marketing-Varianten: gleiche Wartezeiten wie oben (marketing-main-interface, marketing-ms-chat, …)

Wichtig – Wartezeiten: Nach Login und Seitenwechsel wartet das Skript automatisch (delayAfterNavigation 4000 ms, delayBeforeCapture pro Screenshot 4500–7500 ms), damit Kalender, Planner, Kontakte, Calls und MS-Chat ihre Daten laden. Zu kurze Wartezeiten führen zu Ladeblumen oder leeren Screenshots. Details: SETUP.md.

Für Tabs (Add Tab, Whiteboard) sind manuelle Aktionen nötig (Chat öffnen → Tab hinzufügen klicken).

E2E-Demo (Vistameet-Teams)​

Aus tests/e2e/demo/screenshots/ übernehmen:

  • 3-participants-grid.png
  • 3-participants-speaker.png
  • 10-participants-grid.png
  • 10-participants-grid-scrolled.png
  • 10-participants-speaker.png
  • 10-participants-controls.png

Marketing / Sparks-Website (aus Vistameet-Teams)​

Diese Screenshots aus der laufenden Vistameet-Teams-App eignen sich für die Sparks-Marketing-Website und Dokumentation. Sie können per Playwright-Script oder manuell erstellt werden.

Priorität Hoch – für Sparks-Website Feature-Seiten​

ScreenshotBeschreibungURL/QuelleVerwendung
marketing-main-interface.pngHauptoberfläche mit Sidebar/ (nach Login)Homepage, Übersicht
marketing-meeting-room.pngMeeting-Raum mit TeilnehmernMeeting beitretenBesprechungen-Seite
marketing-meeting-toolbar.pngMeeting-Toolbar (Chat, Whiteboard, Polls)Im MeetingBesprechungen: Features
marketing-breakout-rooms.pngBreakout-Räume-UIIm Meeting → BreakoutBesprechungen
marketing-screen-share.pngBildschirmfreigabe aktivIm MeetingBesprechungen
marketing-whiteboard-tab.pngWhiteboard-Tab (Excalidraw)Chat → Tab hinzufügenBesprechungen, Zusammenarbeit
marketing-polls-tab.pngBefragung/Polls-TabChat → Tab hinzufügenBesprechungen
marketing-chat-list.pngChat-Liste mit Räumen/Chat-Seite
marketing-ms-chat.pngMicrosoft Teams Chat/ms-chatChat: MS-Integration
marketing-ms-channels.pngMicrosoft Teams Channels/ms-channelsZusammenarbeit
marketing-planner-board.pngPlanner Board-Ansicht/plannerZusammenarbeit
marketing-calendar-view.pngKalender Monatsansicht/calendarZusammenarbeit
marketing-contacts.pngKontakte mit Prioritäten/contactsZusammenarbeit
marketing-assistant.pngKI-Assistent / Assistant/ oder Assistant-BereichKI-Assistent-Seite
marketing-pre-join.pngPre-Join (Kamera/Mikro prüfen)Meeting-Link vor BeitrittBesprechungen
marketing-e2ee-setup.pngE2EE-Setup / VerschlüsselungEinstellungen → SicherheitChat: E2EE

Priorität Mittel – für Detail-Seiten und Docs​

ScreenshotBeschreibungURL/QuelleVerwendung
marketing-create-room.pngRaum erstellen-DialogChat → Raum erstellenDocs
marketing-add-people-dialog.pngPersonen hinzufügen (Matrix + MS Entra)Chat → Raum öffnen → Personen hinzufügenDocs
marketing-add-tab-dialog.pngTab hinzufügen (Whiteboard, Polls)Chat → Tab hinzufügenDocs
marketing-new-event.pngNeuer Termin-DialogKalender → Neuer TerminDocs
marketing-create-task.pngAufgabe erstellenPlanner → AufgabeDocs
marketing-advanced-search.pngErweiterte Suche (Ctrl+K)Suche öffnenDocs
marketing-settings-accounts.pngProvider-Konten (Kalender, etc.)Einstellungen → KontenDocs
marketing-call-log.pngAnrufverlauf/calls → TabDocs

Priorität Niedrig – für Social Media, Blog, Detail-Dokumentation​

ScreenshotBeschreibungURL/QuelleVerwendung
marketing-sidebar-navigation.pngSidebar mit allen Bereichen (Chat, Kalender, Planner, Teams, Calls, Kontakte)/Übersicht, Onboarding
marketing-chat-thread.pngChat mit Thread-AntwortenChat-Raum mit ThreadChat-Seite
marketing-calendar-week.pngKalender Wochenansicht/calendar → WeekZusammenarbeit
marketing-planner-task-detail.pngAufgabenkarte mit DetailsPlanner → Karte öffnenZusammenarbeit
marketing-assistant-chat.pngKI-Assistent mit KonversationAssistant-PanelKI-Assistent-Seite
marketing-settings-security.pngSicherheitseinstellungen (E2EE)Einstellungen → SicherheitChat: E2EE
marketing-mobile-view.pngResponsive Ansicht (falls vorhanden)Mobile ViewportPlattformübersicht

Konfiguration für screenshot-config.json​

Neue Einträge für Marketing-Screenshots (falls noch nicht vorhanden):

{"name":"marketing-main-interface","url":"/","waitFor":".sidebar, main","description":"Main interface for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-ms-chat","url":"/ms-chat","waitFor":"main","description":"MS Teams Chat for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-ms-channels","url":"/ms-channels","waitFor":"main","description":"MS Teams Channels for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-planner-board","url":"/planner","waitFor":".planner, main","description":"Planner for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-calendar-view","url":"/calendar","waitFor":".calendar, main","description":"Calendar for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-contacts","url":"/contacts","waitFor":"main","description":"Contacts for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-sidebar-navigation","url":"/","waitFor":".sidebar","description":"Sidebar with all sections","fullPage":false,"requiresLogin":true},
{"name":"marketing-calendar-week","url":"/calendar","waitFor":".calendar, main","description":"Calendar week view for marketing","fullPage":false,"requiresLogin":true,"actions":[{"type":"click","selector":"button:has-text('Week'), [aria-label*='Week']"},{"type":"wait","timeout":1000}]},
{"name":"marketing-settings-security","url":"/settings","waitFor":".settings-page","description":"Security settings for marketing","fullPage":false,"requiresLogin":true,"actions":[{"type":"click","selector":"button:has-text('Security'), button:has-text('Sicherheit')"},{"type":"wait","timeout":500}]}

Verweis: Sparks-Website Marketing-Images​

Die Sparks-Website (sparks-website) nutzt zusätzlich generierte Illustrationen (keine App-Screenshots) in public/images/:

  • hero-sparks.png, feature-meetings.png, feature-chat.png, feature-collab.png, feature-ai.png
  • meetings-screenshare.png, meetings-breakout.png, chat-matrix-e2ee.png

Vollständige Analyse: sparks-website/docs/MARKETING-IMAGES-MICROSOFT-TEAMS-ANALYSE.md

Zusammenfassung – Marketing-Screenshots gesamt​

PrioritätAnzahlStatus
Hoch16Noch zu erstellen
Mittel7Noch zu erstellen
Niedrig7Noch zu erstellen
Gesamt30