Skip to content

Commit cecaf4b

Browse files
committed
Add complete skeleton UI for all dialogs and editors (RmlUi)
This commit adds RmlUi skeleton implementations for ALL dialogs and editors - complete UI structure with stub functionality. New RML Templates (UI structure): - dialogs/base_dialog.rml - Base dialog template - dialogs/file_dialog.rml - File browser with directory navigation - dialogs/new_project_dialog.rml - New project creation form - editors/trigger_editor.rml - Full trigger editor UI (events/conditions/actions) - editors/object_editor.rml - Object property editor - editors/heightmap_editor.rml - Heightmap editing tools - editors/texture_editor.rml - Texture painting tools New RCSS Stylesheets: - dialog.rcss - Complete dialog styling (forms, file browser, buttons) - editor.rcss - Complete editor styling (panels, toolbars, split layouts) New Lua Classes (stub implementations): Dialogs: - rmlui_dialogs/base_dialog.lua - Base dialog class with OK/Cancel - rmlui_dialogs/file_dialog.lua - File browsing dialog - rmlui_dialogs/new_project_dialog.lua - New project wizard Editors: - rmlui_editors/trigger_editor.lua - Trigger editor stub - rmlui_editors/object_editor.lua - Object property editor stub - rmlui_editors/heightmap_editor.lua - Heightmap editor stub - rmlui_editors/texture_editor.lua - Texture editor stub Integration: - View.lua now initializes ALL editors and dialogs - Dialogs are functional (show/hide/events work) - Editors are initialized but hidden by default - All buttons connected to dialogs/editors What Works: ✅ All UI displays correctly (if RmlUi available) ✅ Dialogs open when buttons clicked ✅ Forms have proper inputs and validation hooks ✅ Editors have complete UI structure ✅ All styled with dark theme ✅ Event handlers connected (but stubbed) What's Stubbed: - Actual file browsing logic - Actual project creation - Actual trigger/object/map editing logic - Dynamic form population - Data persistence Benefits: - Complete UI skeleton ready - Easy to implement actual functionality later - No crashes, proper fallback to Chili - All UI elements properly styled - Clear separation of UI and logic Next Steps: - Implement actual file browsing - Connect to SpringBoard data model - Implement dynamic form generation - Add remaining editors (grass, metal, water, etc.)
1 parent 2366aa0 commit cecaf4b

17 files changed

+1659
-5
lines changed

scen_edit/view/rcss/dialog.rcss

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* Dialog Styles */
2+
3+
.dialog {
4+
position: absolute;
5+
background-color: #2a2a2a;
6+
border: 2dp #555555;
7+
border-radius: 5dp;
8+
box-shadow: 0 0 20dp rgba(0,0,0,0.5);
9+
min-width: 300dp;
10+
min-height: 200dp;
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
15+
.dialog.large-dialog {
16+
width: 600dp;
17+
height: 500dp;
18+
}
19+
20+
.dialog-header {
21+
background-color: #333333;
22+
padding: 10dp;
23+
border-bottom: 1dp #555555;
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: space-between;
27+
align-items: center;
28+
}
29+
30+
.dialog-title {
31+
color: #eeeeee;
32+
font-size: 16dp;
33+
font-weight: bold;
34+
}
35+
36+
.dialog-close {
37+
background-color: #444444;
38+
color: #eeeeee;
39+
border: none;
40+
border-radius: 3dp;
41+
width: 25dp;
42+
height: 25dp;
43+
font-size: 18dp;
44+
cursor: pointer;
45+
}
46+
47+
.dialog-close:hover {
48+
background-color: #cc4444;
49+
}
50+
51+
.dialog-content {
52+
flex-grow: 1;
53+
padding: 15dp;
54+
overflow-y: auto;
55+
}
56+
57+
.dialog-footer {
58+
padding: 10dp;
59+
border-top: 1dp #555555;
60+
display: flex;
61+
flex-direction: row;
62+
justify-content: flex-end;
63+
gap: 10dp;
64+
}
65+
66+
.dialog-button {
67+
background-color: #444444;
68+
color: #eeeeee;
69+
border: 1dp #666666;
70+
border-radius: 3dp;
71+
padding: 8dp 20dp;
72+
cursor: pointer;
73+
}
74+
75+
.dialog-button:hover {
76+
background-color: #555555;
77+
}
78+
79+
.dialog-button:active {
80+
background-color: #333333;
81+
}
82+
83+
.dialog-button.primary {
84+
background-color: #3a7ebf;
85+
}
86+
87+
.dialog-button.primary:hover {
88+
background-color: #4a8ecf;
89+
}
90+
91+
/* Dialog Form Styles */
92+
93+
.dialog-form {
94+
display: flex;
95+
flex-direction: column;
96+
gap: 15dp;
97+
}
98+
99+
.form-row {
100+
display: flex;
101+
flex-direction: row;
102+
align-items: center;
103+
gap: 10dp;
104+
}
105+
106+
.form-row label {
107+
color: #cccccc;
108+
min-width: 120dp;
109+
text-align: right;
110+
}
111+
112+
.form-input,
113+
.form-select {
114+
flex-grow: 1;
115+
background-color: #1a1a1a;
116+
color: #eeeeee;
117+
border: 1dp #555555;
118+
border-radius: 3dp;
119+
padding: 6dp 10dp;
120+
}
121+
122+
.form-input:focus,
123+
.form-select:focus {
124+
border-color: #3a7ebf;
125+
outline: none;
126+
}
127+
128+
/* File Browser Styles */
129+
130+
.file-browser {
131+
display: flex;
132+
flex-direction: column;
133+
gap: 10dp;
134+
height: 100%;
135+
}
136+
137+
.path-bar {
138+
display: flex;
139+
flex-direction: row;
140+
gap: 5dp;
141+
}
142+
143+
.path-input {
144+
flex-grow: 1;
145+
background-color: #1a1a1a;
146+
color: #eeeeee;
147+
border: 1dp #555555;
148+
border-radius: 3dp;
149+
padding: 6dp 10dp;
150+
}
151+
152+
.path-button {
153+
background-color: #444444;
154+
color: #eeeeee;
155+
border: 1dp #666666;
156+
border-radius: 3dp;
157+
width: 40dp;
158+
padding: 6dp;
159+
}
160+
161+
.path-button:hover {
162+
background-color: #555555;
163+
}
164+
165+
.file-list-container {
166+
flex-grow: 1;
167+
border: 1dp #555555;
168+
border-radius: 3dp;
169+
background-color: #1a1a1a;
170+
overflow-y: auto;
171+
}
172+
173+
.file-list {
174+
padding: 5dp;
175+
}
176+
177+
.file-item {
178+
padding: 8dp;
179+
color: #cccccc;
180+
cursor: pointer;
181+
border-radius: 3dp;
182+
}
183+
184+
.file-item:hover {
185+
background-color: #333333;
186+
}
187+
188+
.file-item.selected {
189+
background-color: #3a7ebf;
190+
color: #ffffff;
191+
}
192+
193+
.file-item.directory::before {
194+
content: "📁 ";
195+
}
196+
197+
.file-item.file::before {
198+
content: "📄 ";
199+
}
200+
201+
.file-name-bar {
202+
display: flex;
203+
flex-direction: row;
204+
align-items: center;
205+
gap: 10dp;
206+
}
207+
208+
.file-name-bar label {
209+
color: #cccccc;
210+
}
211+
212+
.file-name-input {
213+
flex-grow: 1;
214+
background-color: #1a1a1a;
215+
color: #eeeeee;
216+
border: 1dp #555555;
217+
border-radius: 3dp;
218+
padding: 6dp 10dp;
219+
}

0 commit comments

Comments
 (0)