Skip to content

Commit d7ed904

Browse files
jvde-githubjvde-github
committed
tidy up UI
1 parent e673caa commit d7ed904

9 files changed

Lines changed: 37617 additions & 37269 deletions

File tree

‎Source/Application/WebDB.cpp‎

Lines changed: 37231 additions & 37065 deletions
Large diffs are not rendered by default.

‎frontend/control/js/config-manager.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -564,23 +564,38 @@
564564
const App = {
565565
state: { unsaved: false },
566566

567-
notify(type, message, duration = 6000) {
567+
notify(type, message, duration) {
568568
const container = document.getElementById('toast-container') || this.createToastContainer();
569+
const time = { info: 5000, success: 5000, warning: 7000, error: 9000 };
570+
const icon = {
571+
info: null,
572+
success: ['✓', 'text-emerald-400'],
573+
warning: ['!', 'text-amber-400'],
574+
error: ['!', 'text-white'],
575+
};
576+
if (!(type in time)) type = 'info';
577+
569578
const colorClass = type === 'error'
570579
? 'bg-rose-600 text-white'
571580
: 'bg-slate-800 text-white border border-slate-700';
572581

582+
const close = el('span', 'ml-1 font-bold leading-none cursor-pointer opacity-60 hover:opacity-100', { title: 'Dismiss' }, '×');
573583
const toast = el('div', `mb-3 px-4 py-3 rounded-lg shadow-xl transform transition-all duration-300 translate-y-2 opacity-0 flex items-center gap-3 ${colorClass}`, {},
574-
type === 'success' ? el('span', 'font-bold text-emerald-400', {}, '✓') : el('span', 'font-bold text-white', {}, '!'),
575-
el('span', 'text-sm font-medium', {}, message)
584+
icon[type] ? el('span', 'font-bold ' + icon[type][1], {}, icon[type][0]) : null,
585+
el('span', 'text-sm font-medium flex-1', {}, message),
586+
close
576587
);
577588

578589
container.appendChild(toast);
579590
requestAnimationFrame(() => toast.classList.remove('translate-y-2', 'opacity-0'));
580-
setTimeout(() => {
591+
592+
const dismiss = () => {
593+
clearTimeout(timer);
581594
toast.classList.add('opacity-0', 'translate-y-2');
582595
setTimeout(() => toast.remove(), 300);
583-
}, duration);
596+
};
597+
close.addEventListener('click', dismiss);
598+
const timer = setTimeout(dismiss, duration || time[type]);
584599
},
585600

586601
createToastContainer() {

‎frontend/src/features/measure.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,12 +117,12 @@ export function refreshMeasures() {
117117
measures = measures.filter(measure => {
118118

119119
if ((measure.start_type == 'ship' && !(measure.start_value in shipsDB))) {
120-
deps.showNotification('Ship out of range for measurement.');
120+
deps.showNotification('Ship out of range for measurement.', 'warning');
121121
return false;
122122
}
123123

124124
if (measure.end_type == 'ship' && !(measure.end_value in shipsDB)) {
125-
deps.showNotification('Ship out of range for measurement.');
125+
deps.showNotification('Ship out of range for measurement.', 'warning');
126126
return false;
127127
}
128128

@@ -203,7 +203,7 @@ function endMeasurement(t, v) {
203203

204204
isMeasuring = false;
205205

206-
deps.showNotification('Measurement added.');
206+
deps.showNotification('Measurement added.', 'success');
207207
refreshMeasures();
208208
clearMeasureMode();
209209
}

‎frontend/src/index.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,10 @@
5555
<i id="screentoggle-id" class="fullscreen_icon small-icon"></i>
5656
</div>
5757

58-
<div id="receiver-btn-wrap" style="display:none; position:relative; align-items:center;">
59-
<div id="receiver-btn" class="header-icon" title="Select receiver" data-action="toggleReceiverDropdown">
58+
<div id="receiver-btn-wrap" style="display:none; align-items:center;">
59+
<div id="receiver-btn" class="header-icon" title="Select receiver" data-action="showReceiverDialog">
6060
<i class="radio_icon small-icon"></i>
6161
</div>
62-
<div class="overlay" id="receiver-dropdown-overlay" data-action="closeReceiverDropdown"></div>
63-
<div id="receiver-dropdown" class="receiver-dropdown" style="display:none"></div>
6462
</div>
6563
</div>
6664
<div class="overlay" id="menubar-overlay" data-action="hideMenu"></div>
@@ -1077,32 +1075,36 @@ <h3>NMEA Decoder</h3>
10771075
</div>
10781076

10791077
<div class="tabcontent addscrollbar" id="plots" style="display: none;">
1078+
<div class="plots-tabs" id="plots_modes" style="display: none;">
1079+
<div class="plots-tab active" data-action="setPlotsMode" data-mode="overview">Overview</div>
1080+
<div class="plots-tab" data-action="setPlotsMode" data-mode="compare">Compare</div>
1081+
</div>
10801082
<div class="chart-sources" id="chart_sources" style="display: none;">
1081-
<label>Source<select id="chart_source_a"></select></label>
1082-
<label>Compare with<select id="chart_source_b"></select></label>
1083+
<label>Source A<select id="chart_source_a"></select></label>
1084+
<label>Source B<select id="chart_source_b"></select></label>
10831085
</div>
10841086
<div class="graphtab" data-on-contextmenu="plotsContextMenu">
1085-
<div class="graph-panel compare-panel" style="display: none;">
1087+
<div class="graph-panel compare-panel">
10861088
<header>Messages per Minute — A vs B</header>
10871089
<canvas id="chart-compare-minutes"></canvas>
10881090
</div>
1089-
<div class="graph-panel compare-panel" style="display: none;">
1091+
<div class="graph-panel compare-panel">
10901092
<header>Messages per Hour — A vs B</header>
10911093
<canvas id="chart-compare-hours"></canvas>
10921094
</div>
1093-
<div class="graph-panel compare-panel" style="display: none;">
1095+
<div class="graph-panel compare-panel">
10941096
<header>Message Gain per Minute — B vs A</header>
10951097
<canvas id="chart-compare-gain-minute"></canvas>
10961098
</div>
1097-
<div class="graph-panel compare-panel" style="display: none;">
1099+
<div class="graph-panel compare-panel">
10981100
<header>Message Gain per Hour — B vs A</header>
10991101
<canvas id="chart-compare-gain-hour"></canvas>
11001102
</div>
1101-
<div class="graph-panel compare-panel" style="display: none;">
1103+
<div class="graph-panel compare-panel">
11021104
<header>Vessels per Minute — A vs B</header>
11031105
<canvas id="chart-compare-vessels-minute"></canvas>
11041106
</div>
1105-
<div class="graph-panel compare-panel" style="display: none;">
1107+
<div class="graph-panel compare-panel">
11061108
<header>Vessels per Hour — A vs B</header>
11071109
<canvas id="chart-compare-vessels-hour"></canvas>
11081110
</div>

0 commit comments

Comments
 (0)