Skip to content

Commit 6a31d2d

Browse files
tjvandamtjvandam
committed
Update Menu process and buttons
1 parent a89a0e3 commit 6a31d2d

File tree

3 files changed

+129
-26
lines changed

3 files changed

+129
-26
lines changed

‎composer.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<script src="functions.js"></script>
1818
</head>
1919

20-
<body>
20+
<body class="composer-page">
2121
<div id="header-section" class="page-section">
2222
<div class="header-top">
2323
<div class="brand">
@@ -29,14 +29,11 @@
2929
</div>
3030
<div class="app-menu">
3131
<button id="app-menu-toggle" class="menu-toggle" aria-expanded="false" aria-controls="app-menu-panel" aria-label="Open menu">
32-
<span class="icon bars" aria-hidden="true"></span>
32+
<svg class="menu-toggle-icon" viewBox="0 0 448 512" aria-hidden="true" focusable="false">
33+
<path fill="currentColor" d="M0 80C0 62.3 14.3 48 32 48l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 112C14.3 112 0 97.7 0 80zM0 240c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 272c-17.7 0-32-14.3-32-32zM448 400c0 17.7-14.3 32-32 32L32 432c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
34+
</svg>
3335
</button>
3436
<div id="app-menu-panel" class="menu-panel" role="menu" aria-label="App menu">
35-
<a href="#header-section" role="menuitem"><span class="icon square-caret-up" aria-hidden="true"></span><span>Top</span></a>
36-
<a href="#settings-area" role="menuitem"><span class="icon hw-version" aria-hidden="true"></span><span>Settings</span></a>
37-
<a href="#composer-commands" role="menuitem"><span class="icon messages" aria-hidden="true"></span><span>Commands</span></a>
38-
<a href="#composer-messenger" role="menuitem"><span class="icon envelope" aria-hidden="true"></span><span>Messenger</span></a>
39-
<a href="#composer-firmware-notes" role="menuitem"><span class="icon book" aria-hidden="true"></span><span>Firmware Notes</span></a>
4037
<a href="index.html" role="menuitem"><span class="icon house" aria-hidden="true"></span><span>Home</span></a>
4138
</div>
4239
</div>

‎index.html‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,18 @@
4444
<span class="brand-subtitle">OpenCollar Edge BLE Web Connect</span>
4545
</div>
4646
</div>
47-
<div class="app-menu">
47+
<div class="app-menu hidden">
4848
<button id="app-menu-toggle" class="menu-toggle" aria-expanded="false" aria-controls="app-menu-panel" aria-label="Open menu">
49-
<span class="icon bars" aria-hidden="true"></span>
49+
<svg class="menu-toggle-icon" viewBox="0 0 448 512" aria-hidden="true" focusable="false">
50+
<path fill="currentColor" d="M0 80C0 62.3 14.3 48 32 48l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 112C14.3 112 0 97.7 0 80zM0 240c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 272c-17.7 0-32-14.3-32-32zM448 400c0 17.7-14.3 32-32 32L32 432c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
51+
</svg>
5052
</button>
5153
<div id="app-menu-panel" class="menu-panel" role="menu" aria-label="App menu">
52-
<a href="#header-section" role="menuitem"><span class="icon square-caret-up" aria-hidden="true"></span><span>Top</span></a>
53-
<a href="#status-area" class="hidden-when-disconnected" role="menuitem"><span class="icon square-poll-horizontal" aria-hidden="true"></span><span>Status</span></a>
54-
<a href="#actions-area" class="hidden-when-disconnected" role="menuitem"><span class="icon power-off" aria-hidden="true"></span><span>Actions</span></a>
55-
<a href="#settings-area" class="hidden-when-disconnected lr-update-hide" role="menuitem"><span class="icon hw-version" aria-hidden="true"></span><span>Settings</span></a>
56-
<a href="#other-commands" class="hidden-when-disconnected lr-update-hide" role="menuitem"><span class="icon messages" aria-hidden="true"></span><span>Commands</span></a>
57-
<a href="#logs-area" class="hidden-when-disconnected" role="menuitem"><span class="icon bug" aria-hidden="true"></span><span>Logs</span></a>
58-
<a href="#map-area" class="hidden-when-disconnected lr-update-hide" role="menuitem"><span class="icon ublox-location" aria-hidden="true"></span><span>Map</span></a>
59-
<button type="button" class="hidden-when-disconnected dfu-hide" role="menuitem" onclick="openDfuPage()"><span class="icon screwdriver-wrench" aria-hidden="true"></span><span>DFU</span></button>
60-
<button type="button" class="hidden-when-disconnected" role="menuitem" onclick="toggleLog()"><span class="icon toggle-log" aria-hidden="true"></span><span>Debug Log</span></button>
54+
<a href="#header-section" role="menuitem"><span class="icon house" aria-hidden="true"></span><span>Home</span></a>
6155
<a href="composer.html" role="menuitem"><span class="icon keyboard" aria-hidden="true"></span><span>Composer</span></a>
56+
<button type="button" id="menu-debug-toggle" class="hidden-when-disconnected menu-debug-toggle" role="menuitem" onclick="toggleLog()">
57+
<span class="icon toggle-log" aria-hidden="true"></span><span>Debug</span>
58+
</button>
6259
</div>
6360
</div>
6461
</div>
@@ -322,6 +319,10 @@ <h3 id="import-preview-title">Import preview</h3>
322319

323320
<div id="toast"></div>
324321

322+
<button id="debug-toggle-fab" class="debug-toggle-fab hidden hidden-when-disconnected dfu-keep-visible" type="button" onclick="toggleLog()" aria-label="Toggle debug log">
323+
<span class="icon toggle-log" aria-hidden="true"></span>
324+
</button>
325+
325326
<div id="map-tracks-overlay" class="dfu-waiting-overlay hidden" role="dialog" aria-modal="true">
326327
<div class="dfu-waiting-card">
327328
<div id="map-tracks-spinner" class="dfu-spinner hidden"></div>
@@ -646,13 +647,36 @@ <h3 id="import-preview-title">Import preview</h3>
646647
let flashLogCountTotal = null;
647648

648649
const logFooter = document.getElementById('logFooter');
650+
const menuDebugToggle = document.getElementById('menu-debug-toggle');
651+
const debugFab = document.getElementById('debug-toggle-fab');
652+
653+
function updateMenuDebugState() {
654+
if (!menuDebugToggle || !logFooter) {
655+
return;
656+
}
657+
const enabled = logFooter.classList.contains('open');
658+
menuDebugToggle.classList.toggle('debug-enabled', enabled);
659+
menuDebugToggle.classList.toggle('debug-disabled', !enabled);
660+
}
661+
662+
function updateDebugFabState() {
663+
if (!debugFab || !logFooter) {
664+
return;
665+
}
666+
const enabled = logFooter.classList.contains('open');
667+
debugFab.classList.toggle('debug-enabled', enabled);
668+
debugFab.classList.toggle('debug-disabled', !enabled);
669+
debugFab.classList.toggle('hidden', !document.body.classList.contains('connected'));
670+
}
649671

650672
function toggleLog() {
651673
const basePadding = getComputedStyle(document.documentElement).getPropertyValue('--body-bottom-padding').trim() || '50px';
652674
logFooter.classList.toggle('open');
653675
document.body.style.paddingBottom = logFooter.classList.contains('open') ? logFooter.clientHeight + "px" : basePadding;
654676
const logElement = document.getElementById('log');
655677
logElement.scrollTop = logElement.scrollHeight;
678+
updateMenuDebugState();
679+
updateDebugFabState();
656680
}
657681
window.toggleLog = toggleLog;
658682

@@ -2993,6 +3017,7 @@ <h4>${setting.display_name} <small>${key} (${setting.id})</small></h4>
29933017
mapInstance.removeLayer(mapMarker);
29943018
}
29953019
mapMarker = null;
3020+
updateDebugFabState();
29963021
}
29973022

29983023
const connectButton = document.getElementById('connect-button');
@@ -3078,6 +3103,7 @@ <h4>${setting.display_name} <small>${key} (${setting.id})</small></h4>
30783103
document.body.classList.add('connected');
30793104
log(`Connected to device: ${device.name}`);
30803105
lastConnectedDeviceName = device && device.name ? device.name : null;
3106+
updateDebugFabState();
30813107

30823108
loadAvailableSettings();
30833109
await checkPin(document.getElementById('pincode').value);
@@ -4064,6 +4090,9 @@ <h4>${setting.display_name} <small>${key} (${setting.id})</small></h4>
40644090

40654091
initAppMenu();
40664092

4093+
updateMenuDebugState();
4094+
updateDebugFabState();
4095+
40674096
const flashLogOkButton = document.getElementById('flash-log-ok');
40684097
if (flashLogOkButton) {
40694098
flashLogOkButton.addEventListener('click', () => {

‎style.css‎

Lines changed: 85 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,16 @@ body.map-fullscreen #map-area .map-frame {
333333
flex: 1 1 280px;
334334
}
335335

336+
.composer-page .header-actions {
337+
flex-direction: column;
338+
align-items: stretch;
339+
}
340+
341+
.composer-page .header-select {
342+
width: 100%;
343+
flex: 1 1 auto;
344+
}
345+
336346
.primary-actions {
337347
display: grid;
338348
grid-template-columns: minmax(0, 1fr);
@@ -873,6 +883,17 @@ button.secondary:hover,
873883
box-shadow: 0 6px 14px rgba(185, 28, 28, 0.25);
874884
}
875885

886+
#disconnect-button,
887+
#dfu-button,
888+
#dfu-back-top {
889+
height: 42px;
890+
padding: 0 16px;
891+
display: inline-flex;
892+
align-items: center;
893+
justify-content: center;
894+
line-height: 1;
895+
}
896+
876897
#disconnect-button:hover {
877898
background: linear-gradient(145deg, #e35d5d, #a51616);
878899
}
@@ -1139,12 +1160,13 @@ h2 {
11391160
display: inline-flex;
11401161
align-items: center;
11411162
justify-content: center;
1142-
width: 42px;
1143-
height: 42px;
1144-
border-radius: 50%;
1163+
width: 54px;
1164+
height: 54px;
1165+
border-radius: var(--radius-md);
11451166
border: 1px solid rgba(31, 42, 35, 0.18);
11461167
background: rgba(255, 255, 255, 0.82);
11471168
box-shadow: 0 10px 18px rgba(31, 42, 35, 0.12);
1169+
color: var(--sp-ink);
11481170
cursor: pointer;
11491171
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
11501172
}
@@ -1154,11 +1176,10 @@ h2 {
11541176
box-shadow: 0 14px 22px rgba(31, 42, 35, 0.16);
11551177
}
11561178

1157-
.menu-toggle .icon {
1158-
width: 20px;
1159-
height: 20px;
1160-
background-size: 20px 20px;
1161-
filter: none;
1179+
.menu-toggle-icon {
1180+
width: 30px;
1181+
height: 30px;
1182+
display: block;
11621183
}
11631184

11641185
.menu-panel {
@@ -1197,6 +1218,58 @@ h2 {
11971218
cursor: pointer;
11981219
}
11991220

1221+
.menu-panel .menu-debug-toggle.debug-enabled {
1222+
background: rgba(200, 40, 40, 0.18);
1223+
border-color: rgba(200, 40, 40, 0.35);
1224+
color: #7a1111;
1225+
}
1226+
1227+
.menu-panel .menu-debug-toggle.debug-disabled {
1228+
background: rgba(28, 132, 70, 0.16);
1229+
border-color: rgba(28, 132, 70, 0.3);
1230+
color: #0f5a2d;
1231+
}
1232+
1233+
.debug-toggle-fab {
1234+
position: fixed;
1235+
right: 16px;
1236+
bottom: 20px;
1237+
display: inline-flex;
1238+
align-items: center;
1239+
gap: 8px;
1240+
padding: 10px;
1241+
border-radius: var(--radius-md);
1242+
border: 1px solid rgba(30, 86, 196, 0.55);
1243+
background: rgba(37, 99, 235, 0.2);
1244+
color: #1f4fd1;
1245+
box-shadow: 0 14px 24px rgba(31, 42, 35, 0.18);
1246+
cursor: pointer;
1247+
z-index: 3000;
1248+
}
1249+
1250+
.debug-toggle-fab .icon {
1251+
width: 18px;
1252+
height: 18px;
1253+
background-size: 18px 18px;
1254+
filter: none;
1255+
}
1256+
1257+
.debug-toggle-fab.debug-enabled {
1258+
background: rgba(37, 99, 235, 0.85);
1259+
border-color: rgba(30, 86, 196, 0.9);
1260+
color: #fff;
1261+
}
1262+
1263+
.debug-toggle-fab.debug-disabled {
1264+
background: rgba(37, 99, 235, 0.2);
1265+
border-color: rgba(30, 86, 196, 0.55);
1266+
color: #1f4fd1;
1267+
}
1268+
1269+
.debug-toggle-fab.hidden {
1270+
display: none;
1271+
}
1272+
12001273
.menu-panel a:hover,
12011274
.menu-panel button:hover {
12021275
background: rgba(82, 115, 94, 0.16);
@@ -1209,6 +1282,10 @@ h2 {
12091282
background-size: 18px 18px;
12101283
}
12111284

1285+
.menu-panel .icon.toggle-log {
1286+
filter: invert(1);
1287+
}
1288+
12121289
.brand-logo {
12131290
width: 54px;
12141291
height: 54px;

0 commit comments

Comments
 (0)