Files
NoGooleApps/replica/uhr/design/components.md
T

80 lines
3.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Komponenten: Uhr (Compose, Material 3 Expressive)
Tokens: `tokens.json` → `Tokens.kt` (`gen_theme.py`). On Android 12+ the accent roles come from dynamic colour (wallpaper), the rest from tokens.
Icons: Material Symbols Rounded (Apache 2.0). Clock faces, launcher icon and bundled sounds are our own. All labels written fresh, in German.
```
BottomNav
items Wecker, Uhr, Timer, Stoppuhr, Schlafenszeit (icon + label)
states selected: pill indicator 64×32 (nav-indicator) behind the icon, label bold
a11y NavigationBar items with role tab, selected state announced
used on S01, S06, S08, S09, S10
TopBar
content screen title (title 22sp) left, overflow menu (Einstellungen, Bildschirmschoner) right
used on all tabs
AlarmCard
collapsed label (label 14sp, muted) + chevron in a small tonal circle; big time "6:00" (alarm-time 56sp/600) + "AM" (alarm-ampm) when 12h;
bottom row: next ring text ("Morgen", "Heute", "Mo, Di, Mi") + Switch
expanded label field with tag icon, time, day text + switch, day chips row, rows: Pausieren (+), Ton (name), Vibration (check), Löschen
states on, off (time text-off), snoozed ("Schlummert bis 7:10" chip), skipping ("Übersprungen bis …"), expanding (spring)
tokens card / dark-card, radius card 28, padding 20, gap 8
a11y card is one button "Wecker 6 Uhr, Morgen, an"; switch separate; expand state announced
used on S01, S02
DayChips
7 circles 36dp, letters by locale and week start; selected chip-on, unselected outline
a11y toggleable, full weekday name
used on S02, S10
Fab
96dp circle, fab colour, "+" icon; centred above the nav bar
used on S01, S06, S08
TimePicker
M3 TimePicker dial with toggle to TimeInput; 24h by system setting
used on S03, S10
SoundPicker (S04)
sections Eigene Töne (picked files, + "Datei hinzufügen"), Wecktöne (system), Mitgeliefert (bundled); radio list, tap previews, playing shows equalizer icon
states playing, selected, missing file (fallback note)
RingingScreen (S11)
bg ring-bg (or dynamic tertiary container), full screen over lock screen
content time (ringing 104sp, light), label; slide control at the bottom
SlideToAct track pill (ring-track) with "Schlummern" left, "Stopp" right, thumb circle with alarm icon in the middle;
drag past 40 % to act, spring back otherwise; tap the side labels also works (accessibility)
a11y custom actions Schlummern / Stopp; volume keys per settings
TimerCard
content label, ring (timer-track / timer-progress, 6dp) with remaining time inside (timer-time) and reset icon, +1:00 secondary pill, play/pause primary pill, close ×
states running (ring shrinks), paused (time blinks), ringing (pulsing, time counts up negative), finished
used on S08
Keypad
display "00h 00m 00s", typed digits fill from the right; 3×4 keys circle 72dp, 00 and backspace; start FAB appears when not empty
used on S08
Stopwatch (S09)
time mm:ss.cc (stopwatch 72sp, tabular), hours appear when needed
buttons full-width pills, primary (stop/start: stop colour), secondaries (Zurücksetzen, Runde: secondary-pill)
laps list "Runde 3 00:12.34 01:02.56", fastest/slowest marked
states idle (Start only), running (Stopp, Runde), stopped (Start, Zurücksetzen)
ClockHeader (S06)
big time clock-big with optional seconds, date, next alarm line; analog face variant (own design: round face, accent hour hand, light minute hand, dot)
CityCard
name, "Morgen · +7 Std.", time; swipe to delete, long press to reorder
used on S06
SettingsKit
same grouped tiles as Wetter (SettingsGroup / Item / Switch / Choice)
Notifications
upcoming (Jetzt beenden), snoozed (Beenden), missed, timer running (chronometer, Pause, +1:00), stopwatch running (chronometer, Runde, Pause)
Widgets
Digital (TextClock big + date + next alarm), Analog (own face as AnalogClock drawables), Next alarm pill; style options like Wetter (palette, theme, opacity)
```