Skip to content

Commit 90023f8

Browse files
ssnivyssnivy
committed
fixed-all-icons
1 parent 71d0a43 commit 90023f8

3 files changed

Lines changed: 86 additions & 42 deletions

File tree

‎sim/simulation.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@ input, button, select {
3838
display: none;
3939
}
4040

41+
.material-symbols-outlined {
42+
font-variation-settings:
43+
'FILL' 0,
44+
'wght' 300,
45+
'GRAD' 0,
46+
'opsz' 24
47+
}
48+
4149
/* Animations */
4250
@keyframes scale {
4351
0% {
@@ -110,18 +118,29 @@ input, button, select {
110118

111119
/* Action Buttons Overall */
112120
.actionButton {
121+
display: inline-flex;
122+
align-items: center;
123+
justify-content: center;
124+
gap: 0.3em;
125+
113126
height: 5vh;
114127
padding: 0.5svh 1svw;
115128
font-size: 0.9rem;
116129
width: 6.7vw;
117130
border-radius: 8px;
131+
118132
background-color: rgba(60, 84, 148, 0.5);
119133
border: none;
120134
color: white;
121135
cursor: pointer;
122136
transition: background-color 0.2s ease;
123137
}
124138

139+
.actionButton .material-icons {
140+
font-size: 1em; /* scale icon to match text */
141+
line-height: 1; /* prevent extra spacing */
142+
}
143+
125144
.actionButton:hover {
126145
background-color: rgba(60, 84, 148, 1);
127146
}
@@ -1559,3 +1578,8 @@ input.settings-input.invalid:focus {
15591578
margin-top: 0.5rem;
15601579
}
15611580

1581+
.material-icons {
1582+
font-size: 10px; /* adjust as needed */
1583+
vertical-align: middle;
1584+
margin-right: 4px;
1585+
}

‎sim/systemDynamics.html‎

Lines changed: 58 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,12 @@
4141

4242
<!-- svg favicon -->
4343
<link rel="icon" type="image/svg+xml" href="../img/favicons/lunaLogo.svg">
44-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
45-
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.7.2/css/all.css">
44+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
45+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
46+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
47+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
48+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">
49+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
4650
</head>
4751
<body>
4852

@@ -70,13 +74,29 @@
7074
<!-- ================== Action Bar ================== -->
7175
<div class="actions">
7276
<p id="saveStatus">Last Cloud Save: -<br>Last Export: -</p>
73-
<button class="actionButton" id="runButton"><i class="fa-light fa-play"></i> Run</button>
77+
78+
<!-- Run button -->
79+
<button class="actionButton" id="runButton">
80+
<span class="material-symbols-outlined" style="font-size: 20px;">play_arrow</span> Run
81+
</button>
82+
83+
<!-- Load button -->
7484
<input type="file" id="load-actual-button" accept=".luna, .txt" hidden/>
75-
<button class="actionButton" id="loadButton"><i class="fa-light fa-file-import"></i> Load</button>
76-
<button class="actionButton" id="expButton" onclick="openSettings(event, 'exportPopup')"><i class="fa-light fa-file-export"></i> Save</button>
77-
<button class="actionButton" id="clearButton"><i class="fa-light fa-trash"></i> Clear</button>
85+
<button class="actionButton" id="loadButton">
86+
<span class="material-symbols-outlined" style="font-size: 20px;">file_upload</span> Load
87+
</button>
88+
89+
<!-- Save button -->
90+
<button class="actionButton" id="expButton" onclick="openSettings(event, 'exportPopup')">
91+
<span class="material-symbols-outlined" style="font-size: 20px;">save</span> Save
92+
</button>
93+
94+
<!-- Clear button -->
95+
<button class="actionButton" id="clearButton">
96+
<span class="material-symbols-outlined" style="font-size: 20px;">delete</span> Clear
97+
</button>
7898
</div>
79-
99+
80100
<input type="text" id="model_name" name="model_name" placeholder="Model Name" value="New Project">
81101
<img id="logoImage" src="../img/favicons/lunaLogo.svg" alt="LunaSim Logo" />
82102
</div>
@@ -98,74 +118,74 @@
98118

99119
<!-- Pointer Tool -->
100120
<li><a href="#" id="pointer_button" class="pointer_selected tool">
101-
<i class="fa-light fa-arrow-pointer"></i><span>Pointer [P]</span>
121+
<i class="material-symbols-outlined">arrow_selector_tool</i><span>Pointer [P]</span>
102122
</a></li>
103123

104124
<li><a href="#" id="stock_button" class="node_normal tool">
105-
<i class="fa-light fa-rectangle"></i><span>Stock [S]</span>
125+
<i class="material-symbols-outlined">rectangle</i><span>Stock [S]</span>
106126
</a></li>
107127

108128
<!-- Stock Tool with Variants -->
109129
<!--<li class="variant-group">
110130
<a href="#" id="stock_button" class="node_normal tool">
111-
<i class="fa-light fa-rectangle"></i><span>Stock [S]</span>
131+
<i class="material-symbols-outlined">crop_square</i><span>Stock [S]</span>
112132
</a>
113133
114134
<div class="variant-popup" id="stock_variants">
115135
<a href="#" id="conveyor_button" class="node_normal tool">
116-
<i class="fa-light fa-conveyor-belt-boxes"></i><span>Conveyor</span>
136+
<i class="material-symbols-outlined">view_stream</i><span>Conveyor</span>
117137
</a>
118138
<a href="#" id="queue_button" class="node_normal tool">
119-
<i class="fa-light fa-users-rectangle"></i><span>Queue</span>
139+
<i class="material-symbols-outlined">groups</i><span>Queue</span>
120140
</a>
121141
<a href="#" id="microwave_button" class="node_normal tool">
122-
<i class="fa-light fa-microwave"></i><span>Microwave</span>
142+
<i class="material-symbols-outlined">microwave</i><span>Microwave</span>
123143
</a>
124144
</div>
125145
</li>-->
126146

127147
<!-- Other Tools -->
128148
<li><a href="#" id="cloud_button" class="node_normal tool">
129-
<i class="fa-light fa-cloud"></i><span>Cloud [C]</span>
149+
<i class="material-symbols-outlined">cloud</i><span>Cloud [C]</span>
130150
</a></li>
131151

132152
<li><a href="#" id="variable_button" class="node_normal tool">
133-
<i class="fa-light fa-circle"></i><span>Variable [V]</span>
153+
<i class="material-symbols-outlined">circle</i><span>Variable [V]</span>
134154
</a></li>
135155

136156
<li><a href="#" id="flow_button" class="link_normal tool">
137-
<i class="fa-light fa-arrows-left-right"></i><span>Flow [F]</span>
157+
<i class="material-symbols-outlined">sync_alt</i><span>Flow [F]</span>
138158
</a></li>
139159

140160
<li><a href="#" id="influence_button" class="link_normal tool">
141-
<i class="fa-light fa-repeat"></i><span>Influence [I]</span>
161+
<i class="material-symbols-outlined">replay</i><span>Influence [I]</span>
142162
</a></li>
143163

144164
<!--<li class="variant-group">
145165
<a href="#" id="influence_button" class="link_normal tool">
146-
<i class="fa-light fa-repeat"></i><span>Influence [I]</span>
166+
<i class="material-symbols-outlined">repeat</i><span>Influence [I]</span>
147167
</a>
148168
149169
<div class="variant-popup" id="text_variants">
150170
<a href="#" id="info_influence_button" class="link_normal tool">
151-
<i class="fa-light fa-circle-info"></i><span>Info Influence</span>
171+
<i class="material-symbols-outlined">info</i><span>Info Influence</span>
152172
</a>
153173
</div>
154174
</li>-->
155175

156176
<li><a href="#" id="text_button" class="node_normal tool">
157-
<i class="fa-light fa-text"></i><span>Text [T]</span>
177+
<i class="material-symbols-outlined">text_fields</i><span>Text [T]</span>
158178
</a></li>
159179

160180
<!-- Text Tool with Variants -->
161181
<!--<li class="variant-group">
162182
<a href="#" id="text_button" class="node_normal tool">
163-
<i class="fa-light fa-text"></i><span>Text [T]</span>
183+
<i class="material-symbols-outlined">text_fields</i><span>Text [T]</span>
164184
</a>
165185
166186
<div class="variant-popup" id="text_variants">
167187
<a href="#" id="loop_label_button" class="node_normal tool">
168-
<i class="fa-light fa-rotate-left fa-flip-horizontal"></i><span>Loop Label</span>
188+
<i class="material-symbols-outlined">autorenew</i><span>Loop Label</span>
169189
</a>
170190
</div>
171191
</li>-->
@@ -175,15 +195,15 @@
175195
<!-- Settings (Theme, Help, Simulation Parameters) -->
176196
<div class="settings-section">
177197
<li><a href="#" onclick="openSettings(event, 'themePopup')" class="no-active">
178-
<i class="fa-light fa-paint-roller"></i><span>Theme</span>
198+
<i class="material-symbols-outlined">palette</i><span>Theme</span>
179199
</a></li>
180200

181201
<li><a href="../UserDocs.html" class="no-active" target="_blank">
182-
<i class="fa-light fa-question"></i><span>Help</span>
202+
<i class="material-symbols-outlined">help</i><span>Help</span>
183203
</a></li>
184204

185205
<li><a href="#" onclick="openSettings(event, 'settingsPopup')" class="no-active">
186-
<i class="fa-light fa-gear"></i><span>Settings</span>
206+
<i class="material-symbols-outlined">settings</i><span>Settings</span>
187207
</a></li>
188208
</div>
189209
</ul>
@@ -201,7 +221,7 @@
201221
</div>
202222
<!-- Center Model Button -->
203223
<button id="centerModelBtn" class="center-btn" title="Center Model">
204-
<i class="fa-light fa-home"></i>
224+
<i class="material-symbols-outlined" style="font-size: 20px;">home</i>
205225
</button>
206226
</div>
207227

@@ -210,7 +230,7 @@
210230
<div id="eqEditor">
211231
<div class="equation-editor-header">
212232
<p class="equation-editor-title">Equation Editor</p>
213-
<i class="fa-light fa-expand equation-editor-zoom-icon" onclick="openEquationEditorPopup()"></i>
233+
<i class="material-symbols-outlined equation-editor-zoom-icon" onclick="openEquationEditorPopup()">open_in_full</i>
214234
</div>
215235
<div id = "eqTableDiv">
216236
<table class="equation-editor-table" id="eqTable">
@@ -242,9 +262,9 @@
242262

243263
<!-- Settings Area -->
244264
<div class="settings-section">
245-
<li><a href="#" onclick="openSettings(event, 'themePopup')" class="no-active"><i class="fa-light fa-paint-roller"></i><span>Theme</span></a></li>
246-
<li><a href="../UserDocs.html" class="no-active"><i class="fa-light fa-question"></i><span>Help</span></a></li>
247-
<li><a href="#" onclick="openSettings(event, 'settingsPopup')" class="no-active"><i class="fa-light fa-gear"></i><span>Settings</span></a></li>
265+
<li><a href="#" onclick="openSettings(event, 'themePopup')" class="no-active"><i class="material-symbols-outlined">palette</i><span>Theme</span></a></li>
266+
<li><a href="../UserDocs.html" class="no-active"><i class="material-symbols-outlined">help</i><span>Help</span></a></li>
267+
<li><a href="#" onclick="openSettings(event, 'settingsPopup')" class="no-active"><i class="material-symbols-outlined">settings</i><span>Settings</span></a></li>
248268
</div>
249269
</ul>
250270
</div>
@@ -295,7 +315,7 @@
295315
<div id="settingsPopup" class="settings-popup hidden">
296316
<div class="settings-header">
297317
<h2>Simulation Settings</h2>
298-
<button class="close-btn" onclick="closeSettings('settingsPopup')"><i class="fa-light fa-xmark"></i></button>
318+
<button class="close-btn" onclick="closeSettings('settingsPopup')"><i class="material-symbols-outlined close-icon">close</i></button>
299319
</div>
300320
<div class="setting-group">
301321
<label for="startTime">Start Time</label>
@@ -330,7 +350,7 @@ <h2>Simulation Settings</h2>
330350
<div id="themePopup" class="theme-popup hidden">
331351
<div class="settings-header">
332352
<h2>Theme Settings</h2>
333-
<button class="close-btn" onclick="closeSettings('themePopup')"><i class="fa-light fa-xmark"></i></button>
353+
<button class="close-btn" onclick="closeSettings('themePopup')"><i class="material-symbols-outlined close-icon">close</i></button>
334354
</div>
335355
<div class="setting-group">
336356
<label for="themeSelect">Theme</label>
@@ -363,9 +383,9 @@ <h2>Theme Settings</h2>
363383
<option value="Wingdings" style="font-family: 'Wingdings';">Wingdings/option>
364384
</select>
365385
<label for="labelFontSizeInput">Label Font Size</label>
366-
<input type="number" id="labelFontSizeInput" class="settings-input" value="11" min="6" max="36" step="1" style="width: 80%;" autocomplete="off">
386+
<input type="number" id="labelFontSizeInput" class="settings-input" value="11" min="6" max="36" step="1" style="width: 60%;" autocomplete="off">
367387
<label>Polarity Label Offset</label>
368-
<div style="display:flex; gap:6px; width:80%;">
388+
<div style="display:flex; gap:6px; width:45%;">
369389
<input type="number" id="polarityOffsetX" class="settings-input" value="0" step="1" style="width:50%;" autocomplete="off" title="X offset from arrowhead (pixels, negative = left)">
370390
<input type="number" id="polarityOffsetY" class="settings-input" value="0" step="1" style="width:50%;" autocomplete="off" title="Y offset from arrowhead (pixels, negative = up)">
371391
</div>
@@ -378,7 +398,7 @@ <h2>Theme Settings</h2>
378398
<div id="chartsPopup" class="charts-popup hidden">
379399
<div class="settings-header">
380400
<h2>Create Visual</h2>
381-
<button class="close-btn" onclick="closeSettings('chartsPopup')"><i class="fa-light fa-xmark"></i></button>
401+
<button class="close-btn" onclick="closeSettings('chartsPopup')"><i class="material-symbols-outlined close-icon">close</i></button>
382402
</div>
383403
<div id="popForm">
384404
<form id="tabConfig" name = "tabConfig" onsubmit="return false"> <!-- Will not refresh page -->
@@ -415,7 +435,7 @@ <h2>Create Visual</h2>
415435
<div id="exportPopup" class="export-popup hidden">
416436
<div class="settings-header">
417437
<h2>Export Settings</h2>
418-
<button class="close-btn" onclick="closeSettings('exportPopup')"><i class="fa-light fa-xmark"></i></button>
438+
<button class="close-btn" onclick="closeSettings('exportPopup')"><i class="material-symbols-outlined close-icon">close</i></button>
419439
</div>
420440
<div class="setting-group">
421441
<label for="fileSelect">File Type</label>
@@ -441,7 +461,7 @@ <h2>Export Settings</h2>
441461
<div id="simErrorPopup" class="sims-popup hidden">
442462
<div class="settings-header">
443463
<h2 id="simErrorPopupTitle">Simulation Error!</h2>
444-
<button class="close-btn" onclick="closeSettings('simErrorPopup')"><i class="fa-light fa-xmark"></i></button>
464+
<button class="close-btn" onclick="closeSettings('simErrorPopup')"><i class="material-symbols-outlined close-icon">close</i></button>
445465
</div>
446466
<div class="setting-group">
447467
<p id="simErrorPopupDesc">This is the default popup. This should only appear during the debug process.</p>
@@ -469,7 +489,7 @@ <h2 id="customConfirmTitle">Are you sure?</h2>
469489
<div class="equation-editor-popup-content">
470490
<div class="equation-editor-popup-header">
471491
<p class="equation-editor-title">Equation Editor</p>
472-
<i class="fa-light fa-xmark close-icon" onclick="closePopup()"></i>
492+
<i class="material-symbols-outlined close-icon" onclick="closePopup()">close</i>
473493
</div>
474494
<div id="equationEditorPopupContent"></div>
475495
</div>

‎sim/tabsManagement.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -317,10 +317,10 @@ function configTabs() {
317317
tabLink.href = "#";
318318

319319
const icon = document.createElement("i");
320-
// Use different icon classes based on tab type
321-
icon.className = (tabs[j].type === "table")
322-
? "fa-light fa-table"
323-
: "fa-light fa-chart-sine";
320+
icon.className = "material-symbols-outlined"; // Google Material Symbols
321+
322+
// Set the appropriate icon text for each type
323+
icon.textContent = (tabs[j].type === "table") ? "table" : "bar_chart_4_bars";
324324

325325
const label = document.createElement("span");
326326
const chartName = tabs[j].name || ((j === 0) ? "Default" : "Chart " + j);

0 commit comments

Comments
 (0)