Skip to content

Commit ec7db08

Browse files
claudeclaude
committed
Redesign RmlUi layout to match Chili tabbed interface
Created proper tabbed interface matching original SpringBoard layout: RML Changes (springboard_main.rml): - Removed old menu bar and bottom bar placeholders - Added tab bar with Objects, Map, Env, Misc tabs - Added editor button panel (horizontal scrollable 70x70 icons) - Added main content area for editor panels - Team selector stays in top right corner RCSS Changes (springboard.rcss): - Team selector at top: 10dp - Tab bar at top: 50dp with tab-button styling - Editor panel wrapper at top: 85dp (80dp height, horizontal scroll) - Editor buttons: 70x70dp with icon + label layout - Main content area starts at top: 170dp - Active tab highlighted with blue bottom border - Pressed editor button shown in green - Removed old menu-bar and bottom-bar styles Next steps: Implement tab switching and dynamic editor button population
1 parent 86afad2 commit ec7db08

File tree

2 files changed

+103
-88
lines changed

2 files changed

+103
-88
lines changed

‎scen_edit/view/rcss/springboard.rcss‎

Lines changed: 86 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,10 @@ body#springboard {
1010
background-color: #1a1a1a;
1111
}
1212

13-
.menu-bar {
14-
position: absolute;
15-
top: 0;
16-
left: 0;
17-
right: 0;
18-
height: 30dp;
19-
background-color: #2a2a2a;
20-
padding: 5dp;
21-
display: flex;
22-
flex-direction: row;
23-
gap: 5dp;
24-
}
25-
26-
.menu-button {
27-
background-color: #3a3a3a;
28-
color: #cccccc;
29-
border: 1dp #555555;
30-
padding: 5dp 15dp;
31-
border-radius: 3dp;
32-
}
33-
34-
.menu-button:hover {
35-
background-color: #4a4a4a;
36-
}
37-
38-
.menu-button:active {
39-
background-color: #555555;
40-
}
41-
13+
/* Team selector (top right corner) */
4214
.team-selector {
4315
position: absolute;
44-
top: 40dp;
16+
top: 10dp;
4517
right: 10dp;
4618
padding: 5dp;
4719
background-color: #2a2a2a;
@@ -64,66 +36,111 @@ body#springboard {
6436
padding: 3dp;
6537
}
6638

67-
.main-content {
68-
position: absolute;
69-
top: 80dp;
70-
left: 10dp;
71-
right: 10dp;
72-
bottom: 50dp;
73-
background-color: #222222;
74-
border: 1dp #555555;
75-
border-radius: 3dp;
76-
display: flex;
77-
flex-direction: column;
78-
}
79-
39+
/* Tab bar */
8040
.tab-bar {
41+
position: absolute;
42+
top: 50dp;
43+
left: 0dp;
44+
right: 0dp;
8145
height: 30dp;
8246
background-color: #2a2a2a;
83-
border-bottom: 1dp #555555;
8447
display: flex;
8548
flex-direction: row;
49+
gap: 2dp;
50+
padding: 2dp;
8651
}
8752

88-
.tab-content {
89-
flex-grow: 1;
90-
padding: 10dp;
53+
.tab-button {
54+
flex: 1;
55+
background-color: #3a3a3a;
56+
color: #999999;
57+
border: 1dp #555555;
58+
padding: 5dp 10dp;
59+
text-align: center;
60+
cursor: pointer;
61+
}
62+
63+
.tab-button:hover {
64+
background-color: #4a4a4a;
9165
color: #cccccc;
9266
}
9367

94-
.bottom-bar {
68+
.tab-button.active {
69+
background-color: #1a1a1a;
70+
color: #ffffff;
71+
border-bottom: 2dp #3a7ebf;
72+
}
73+
74+
/* Editor button panel (scrollable horizontal) */
75+
.editor-panel-wrapper {
9576
position: absolute;
96-
bottom: 0;
97-
left: 0;
98-
right: 0;
99-
height: 40dp;
100-
background-color: #2a2a2a;
101-
border-top: 1dp #555555;
102-
padding: 5dp;
77+
top: 85dp;
78+
left: 0dp;
79+
right: 0dp;
80+
height: 80dp;
81+
overflow-x: auto;
82+
overflow-y: hidden;
83+
background-color: #222222;
84+
border-bottom: 1dp #555555;
85+
}
86+
87+
.editor-button-panel {
10388
display: flex;
10489
flex-direction: row;
105-
justify-content: space-between;
106-
align-items: center;
90+
gap: 1dp;
91+
padding: 5dp;
92+
min-width: 100%;
10793
}
10894

109-
.bottom-bar span {
110-
color: #cccccc;
111-
padding-left: 10dp;
95+
.editor-button {
96+
width: 70dp;
97+
height: 70dp;
98+
background-color: #2a2a2a;
99+
border: 1dp #555555;
100+
border-radius: 3dp;
101+
cursor: pointer;
102+
display: flex;
103+
flex-direction: column;
104+
align-items: center;
105+
justify-content: center;
106+
padding: 5dp;
112107
}
113108

114-
.control-button {
109+
.editor-button:hover {
115110
background-color: #3a3a3a;
111+
border-color: #888888;
112+
}
113+
114+
.editor-button.pressed {
115+
background-color: #1a1a1a;
116+
border-color: #00ff00;
117+
}
118+
119+
.editor-button img {
120+
width: 35dp;
121+
height: 35dp;
122+
margin-bottom: 5dp;
123+
}
124+
125+
.editor-button-label {
126+
font-size: 10dp;
116127
color: #cccccc;
117-
border: 1dp #555555;
118-
padding: 5dp 20dp;
119-
border-radius: 3dp;
120-
margin-left: 5dp;
128+
text-align: center;
121129
}
122130

123-
.control-button:hover {
124-
background-color: #4a4a4a;
131+
.editor-button.pressed .editor-button-label {
132+
color: #00ff00;
125133
}
126134

127-
.control-button:active {
128-
background-color: #555555;
135+
/* Main content area */
136+
.main-content {
137+
position: absolute;
138+
top: 170dp;
139+
left: 0dp;
140+
right: 0dp;
141+
bottom: 0dp;
142+
background-color: #222222;
143+
padding: 10dp;
144+
color: #cccccc;
145+
overflow-y: auto;
129146
}

‎scen_edit/view/rml/springboard_main.rml‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,7 @@
55
<link type="text/rcss" href="../rcss/springboard.rcss"/>
66
</head>
77
<body id="springboard">
8-
<!-- Top menu bar -->
9-
<div id="top-menu" class="menu-bar">
10-
<button id="btn-exit" class="menu-button">Exit</button>
11-
<button id="btn-new-project" class="menu-button">New</button>
12-
<button id="btn-open-project" class="menu-button">Open</button>
13-
<button id="btn-save-project" class="menu-button">Save</button>
14-
</div>
15-
16-
<!-- Team selector -->
8+
<!-- Team selector (top right) -->
179
<div id="team-selector-container" class="team-selector">
1810
<label>Team:</label>
1911
<select id="team-selector">
@@ -22,19 +14,25 @@
2214
</select>
2315
</div>
2416

25-
<!-- Main content area (tabbed window placeholder) -->
26-
<div id="main-content" class="main-content">
27-
<div id="tab-bar" class="tab-bar"></div>
28-
<div id="tab-content" class="tab-content">
29-
<p>SpringBoard RmlUi UI - Ready</p>
17+
<!-- Tab bar -->
18+
<div id="tab-bar" class="tab-bar">
19+
<button id="tab-objects" class="tab-button active" data-tab="Objects" onclick="widget:OnTabClick(event)">Objects</button>
20+
<button id="tab-map" class="tab-button" data-tab="Map" onclick="widget:OnTabClick(event)">Map</button>
21+
<button id="tab-env" class="tab-button" data-tab="Env" onclick="widget:OnTabClick(event)">Env</button>
22+
<button id="tab-misc" class="tab-button" data-tab="Misc" onclick="widget:OnTabClick(event)">Misc</button>
23+
</div>
24+
25+
<!-- Editor button panel (scrollable horizontal) -->
26+
<div id="editor-panel-wrapper" class="editor-panel-wrapper">
27+
<div id="editor-button-panel" class="editor-button-panel">
28+
<!-- Editor buttons populated dynamically -->
3029
</div>
3130
</div>
3231

33-
<!-- Bottom bar -->
34-
<div id="bottom-bar" class="bottom-bar">
35-
<span id="status-text">Ready</span>
36-
<button id="btn-play" class="control-button">Play</button>
37-
<button id="btn-pause" class="control-button">Pause</button>
32+
<!-- Main content area for editors -->
33+
<div id="main-content" class="main-content">
34+
<!-- Editor content populated dynamically -->
35+
<p>Select an editor from the buttons above</p>
3836
</div>
3937
</body>
4038
</rml>

0 commit comments

Comments
 (0)