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

3.9 KiB
Raw Blame History

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)