Skip to content

Commit 6769cc9

Browse files
claudeclaude
committed
Add implementation-agnostic field system for RmlUi
Complete field type implementation with original API maintained: Field Types (13 classes): - StringField, NumericField, BooleanField, ChoiceField - ColorField, AssetField, MaterialField - ObjectField, ObjectTypeField, TeamField - ArrayField, GroupField - All maintain exact same API as Chili: AddField(StringField({...})) Picker Windows (3 RML templates + classes): - Asset Picker (with filters and grid) - Color Picker (RGBA sliders + hex input) - Material Picker (grid browser) Architecture: - RmlUiEditorBase: Provides AddField() + Finalize() API - Fields generate RML programmatically (no templates needed) - Editors call AddField() to collect, Finalize() to render all at once - Compatibility layer makes StringField etc. work without code changes Key Features: - Implementation-agnostic: Editors never touch RML/HTML - Efficient: Single DOM update via Finalize() not per-field - API-compatible: Existing editor code works unchanged - Extensible: Easy to add new field types Added files: - rmlui_editor_base.lua (base class for all editors) - rmlui_fields.lua (13 field type classes) - rmlui_field_compat.lua (API compatibility layer) - rml/fields/*.rml (3 picker window templates) - rcss/fields.rcss (field styling) This completes the skeleton UI - ALL SpringBoard components now have RmlUi equivalents!
1 parent 8bf6612 commit 6769cc9

File tree

8 files changed

+756
-0
lines changed

8 files changed

+756
-0
lines changed

‎scen_edit/view/rcss/fields.rcss‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
/* Field Type Styles */
2+
3+
/* Asset Picker */
4+
.asset-browser {
5+
display: flex;
6+
flex-direction: column;
7+
gap: 10dp;
8+
}
9+
10+
.asset-filters {
11+
display: flex;
12+
gap: 10dp;
13+
align-items: center;
14+
}
15+
16+
.asset-grid {
17+
display: grid;
18+
grid-template-columns: repeat(auto-fill, minmax(100dp, 1fr));
19+
gap: 10dp;
20+
max-height: 400dp;
21+
overflow-y: auto;
22+
background-color: #1a1a1a;
23+
padding: 10dp;
24+
}
25+
26+
.asset-item {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
padding: 10dp;
31+
background-color: #2a2a2a;
32+
border: 1dp #555555;
33+
cursor: pointer;
34+
}
35+
36+
.asset-item:hover {
37+
background-color: #3a3a3a;
38+
border-color: #3a7ebf;
39+
}
40+
41+
.asset-item.selected {
42+
background-color: #3a7ebf;
43+
border-color: #4a8ecf;
44+
}
45+
46+
.asset-thumbnail {
47+
width: 80dp;
48+
height: 80dp;
49+
background-color: #1a1a1a;
50+
margin-bottom: 5dp;
51+
}
52+
53+
.asset-name {
54+
font-size: 10dp;
55+
text-align: center;
56+
word-wrap: break-word;
57+
}
58+
59+
/* Color Picker */
60+
.color-picker-panel {
61+
display: flex;
62+
flex-direction: column;
63+
gap: 15dp;
64+
}
65+
66+
.color-preview {
67+
width: 200dp;
68+
height: 100dp;
69+
background-color: #ffffff;
70+
border: 2dp #555555;
71+
margin: 0 auto;
72+
}
73+
74+
.color-inputs {
75+
display: flex;
76+
flex-direction: column;
77+
gap: 10dp;
78+
}
79+
80+
.color-inputs .form-row {
81+
display: flex;
82+
align-items: center;
83+
gap: 10dp;
84+
}
85+
86+
.color-inputs .form-row label {
87+
width: 30dp;
88+
}
89+
90+
.color-inputs .form-row input[type="range"] {
91+
flex: 1;
92+
}
93+
94+
.color-inputs .form-row input[type="number"] {
95+
width: 60dp;
96+
}
97+
98+
/* Material Picker */
99+
.material-browser {
100+
display: flex;
101+
flex-direction: column;
102+
gap: 10dp;
103+
}
104+
105+
.material-filters {
106+
display: flex;
107+
gap: 10dp;
108+
align-items: center;
109+
}
110+
111+
.material-grid {
112+
display: grid;
113+
grid-template-columns: repeat(auto-fill, minmax(120dp, 1fr));
114+
gap: 10dp;
115+
max-height: 400dp;
116+
overflow-y: auto;
117+
background-color: #1a1a1a;
118+
padding: 10dp;
119+
}
120+
121+
.material-item {
122+
display: flex;
123+
flex-direction: column;
124+
align-items: center;
125+
padding: 10dp;
126+
background-color: #2a2a2a;
127+
border: 1dp #555555;
128+
cursor: pointer;
129+
}
130+
131+
.material-item:hover {
132+
background-color: #3a3a3a;
133+
border-color: #3a7ebf;
134+
}
135+
136+
.material-item.selected {
137+
background-color: #3a7ebf;
138+
border-color: #4a8ecf;
139+
}
140+
141+
.material-preview {
142+
width: 100dp;
143+
height: 100dp;
144+
background-color: #1a1a1a;
145+
margin-bottom: 5dp;
146+
}
147+
148+
.material-name {
149+
font-size: 10dp;
150+
text-align: center;
151+
word-wrap: break-word;
152+
}
153+
154+
/* Field Components */
155+
.field-group {
156+
display: flex;
157+
flex-direction: column;
158+
gap: 5dp;
159+
margin-bottom: 10dp;
160+
}
161+
162+
.field-row {
163+
display: flex;
164+
align-items: center;
165+
gap: 10dp;
166+
}
167+
168+
.field-label {
169+
min-width: 100dp;
170+
font-size: 12dp;
171+
color: #cccccc;
172+
}
173+
174+
.field-input {
175+
flex: 1;
176+
padding: 5dp;
177+
background-color: #1a1a1a;
178+
border: 1dp #555555;
179+
color: #ffffff;
180+
}
181+
182+
.field-input:focus {
183+
border-color: #3a7ebf;
184+
}
185+
186+
.field-button {
187+
padding: 5dp 10dp;
188+
background-color: #3a3a3a;
189+
border: 1dp #555555;
190+
}
191+
192+
.field-button:hover {
193+
background-color: #4a4a4a;
194+
}
195+
196+
/* Array Field */
197+
.array-field {
198+
display: flex;
199+
flex-direction: column;
200+
gap: 5dp;
201+
}
202+
203+
.array-item {
204+
display: flex;
205+
gap: 5dp;
206+
align-items: center;
207+
}
208+
209+
.array-item-input {
210+
flex: 1;
211+
}
212+
213+
.array-item-remove {
214+
width: 25dp;
215+
height: 25dp;
216+
background-color: #bf3a3a;
217+
}
218+
219+
.array-add-button {
220+
align-self: flex-start;
221+
margin-top: 5dp;
222+
}

‎scen_edit/view/rml/fields/asset_picker.rml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<rml>
2+
<head>
3+
<title>Asset Picker</title>
4+
<link type="text/rcss" href="../dialog.rcss"/>
5+
</head>
6+
<body id="asset-picker" class="dialog large-dialog">
7+
<div class="dialog-header">
8+
<span class="dialog-title">Select Asset</span>
9+
<button class="dialog-close" id="btn-close">×</button>
10+
</div>
11+
<div class="dialog-content">
12+
<div class="asset-browser">
13+
<div class="asset-filters">
14+
<label>Filter:</label>
15+
<input type="text" id="filter-input" class="form-input" placeholder="Search..."/>
16+
<select id="type-filter">
17+
<option value="">All Types</option>
18+
<option value="model">Models</option>
19+
<option value="texture">Textures</option>
20+
<option value="sound">Sounds</option>
21+
</select>
22+
</div>
23+
<div id="asset-grid" class="asset-grid">
24+
<!-- Assets populated dynamically -->
25+
</div>
26+
</div>
27+
</div>
28+
<div class="dialog-footer">
29+
<button id="btn-ok" class="dialog-button primary">Select</button>
30+
<button id="btn-cancel" class="dialog-button">Cancel</button>
31+
</div>
32+
</body>
33+
</rml>

‎scen_edit/view/rml/fields/color_picker.rml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<rml>
2+
<head>
3+
<title>Color Picker</title>
4+
<link type="text/rcss" href="../dialog.rcss"/>
5+
</head>
6+
<body id="color-picker" class="dialog">
7+
<div class="dialog-header">
8+
<span class="dialog-title">Pick Color</span>
9+
<button class="dialog-close" id="btn-close">×</button>
10+
</div>
11+
<div class="dialog-content">
12+
<div class="color-picker-panel">
13+
<div class="color-preview" id="color-preview"></div>
14+
<div class="color-inputs">
15+
<div class="form-row"><label>R:</label><input type="range" id="r-slider" min="0" max="255" value="255"/><input type="number" id="r-value" min="0" max="255" value="255"/></div>
16+
<div class="form-row"><label>G:</label><input type="range" id="g-slider" min="0" max="255" value="255"/><input type="number" id="g-value" min="0" max="255" value="255"/></div>
17+
<div class="form-row"><label>B:</label><input type="range" id="b-slider" min="0" max="255" value="255"/><input type="number" id="b-value" min="0" max="255" value="255"/></div>
18+
<div class="form-row"><label>A:</label><input type="range" id="a-slider" min="0" max="255" value="255"/><input type="number" id="a-value" min="0" max="255" value="255"/></div>
19+
</div>
20+
<div class="form-row"><label>Hex:</label><input type="text" id="hex-input" class="form-input" value="#FFFFFF"/></div>
21+
</div>
22+
</div>
23+
<div class="dialog-footer">
24+
<button id="btn-ok" class="dialog-button primary">OK</button>
25+
<button id="btn-cancel" class="dialog-button">Cancel</button>
26+
</div>
27+
</body>
28+
</rml>

‎scen_edit/view/rml/fields/material_picker.rml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<rml>
2+
<head>
3+
<title>Material Picker</title>
4+
<link type="text/rcss" href="../dialog.rcss"/>
5+
</head>
6+
<body id="material-picker" class="dialog large-dialog">
7+
<div class="dialog-header">
8+
<span class="dialog-title">Select Material</span>
9+
<button class="dialog-close" id="btn-close">×</button>
10+
</div>
11+
<div class="dialog-content">
12+
<div class="material-browser">
13+
<div class="material-filters">
14+
<label>Filter:</label>
15+
<input type="text" id="filter-input" class="form-input" placeholder="Search materials..."/>
16+
</div>
17+
<div id="material-grid" class="material-grid">
18+
<!-- Materials populated dynamically -->
19+
</div>
20+
</div>
21+
</div>
22+
<div class="dialog-footer">
23+
<button id="btn-ok" class="dialog-button primary">Select</button>
24+
<button id="btn-cancel" class="dialog-button">Cancel</button>
25+
</div>
26+
</body>
27+
</rml>

0 commit comments

Comments
 (0)