68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
# UI Assets Structure
|
|
|
|
All UI assets are in `src/main/assets/`:
|
|
|
|
```
|
|
assets/
|
|
├── apps/ # System apps (RML documents)
|
|
│ ├── home/home.rml # Home screen launcher
|
|
│ ├── dialer/dialer.rml # Phone dialer
|
|
│ ├── messages/ # Messages app
|
|
│ ├── contacts/ # Contacts app
|
|
│ ├── settings/ # Settings app
|
|
│ └── browser/ # Web browser
|
|
├── ui/ # Shared stylesheets
|
|
│ ├── html.rcss # Base HTML element styles
|
|
│ ├── theme.rcss # Design tokens (colors, typography)
|
|
│ └── components.rcss # Reusable UI components
|
|
├── scripts/ # Lua scripts
|
|
│ └── navigation.lua # Navigation system
|
|
├── icons/ # TGA icon files (24x24, 32x32)
|
|
└── fonts/ # TTF fonts (LatoLatin, Roboto)
|
|
```
|
|
|
|
## Navigation System
|
|
|
|
Navigation is handled by `scripts/navigation.lua`:
|
|
|
|
```lua
|
|
-- Navigate to a screen
|
|
navigateTo('dialer') -- Push to history, animate forward
|
|
|
|
-- Go back
|
|
goBack() -- Pop from history, animate back
|
|
|
|
-- Go home
|
|
goHome() -- Clear history, return to home
|
|
```
|
|
|
|
## Element IDs for Testing
|
|
|
|
Key elements have IDs for automated testing:
|
|
|
|
| ID | Location | Purpose |
|
|
|----|----------|---------|
|
|
| `dock-phone` | home.rml | Phone dock icon |
|
|
| `dock-messages` | home.rml | Messages dock icon |
|
|
| `dock-contacts` | home.rml | Contacts dock icon |
|
|
| `dock-browser` | home.rml | Browser dock icon |
|
|
| `app-settings` | home.rml | Settings app icon |
|
|
|
|
## CSS Classes for Navigation
|
|
|
|
Back buttons use `app-bar-nav` class for automated GoHome:
|
|
```html
|
|
<div class="app-bar-nav btn-icon" onclick="goBack()">
|
|
<img src="../../icons/back.tga"/>
|
|
</div>
|
|
```
|
|
|
|
Browser uses `browser-nav-btn` class for its toolbar back button:
|
|
```html
|
|
<div class="app-bar-nav browser-nav-btn" onclick="goBack()">
|
|
<img src="../../icons/back.tga"/>
|
|
</div>
|
|
```
|
|
|
|
The test framework's `FindBackButton()` searches for both classes to handle all screen layouts.
|