- optimize UI design

- implement baudrate auto update when port opened and baudrate selector changed
- implement port auto change when port opened and port selector changed
This commit is contained in:
xenkuo 2020-07-23 22:52:40 +08:00
parent b268b95849
commit dd9d071ab3
4 changed files with 30 additions and 45 deletions

View File

@ -94,9 +94,9 @@ ipcRenderer.on("main-cmd", (event, arg) => {
document.getElementById("port-switch").click();
break;
case "ClearLog&SwitchPort": {
let switcher = document.getElementById("port-switch");
switcher.click();
if (true == switcher.checked) {
let portSwitch = document.getElementById("port-switch");
portSwitch.click();
if (true == portSwitch.checked) {
clipboard.writeText(editor.getModel().getValue());
document.getElementById("clear-btn").click();
}
@ -576,50 +576,41 @@ document.getElementById("bar-color-tail").oninput = (e) => {
};
document.getElementById("issue").onclick = (e) => {
console.log("licence click", e);
e.preventDefault();
shell.openExternal(e.target.href);
};
document.getElementById("introduction").onclick = (e) => {
console.log("licence click", e);
e.preventDefault();
shell.openExternal(e.target.href);
};
document.getElementById("comnglang").onclick = (e) => {
console.log("licence click", e);
e.preventDefault();
shell.openExternal(e.target.href);
};
document.getElementById("baud-select").onchange = (e) => {
configUpdate("baudIndex", e.target.selectedIndex);
};
let ele = e.target;
// document.getElementById("path-input").addEventListener(
// "click",
// e => {
// console.log("path select add event");
// if (e.isTrusted === false) return;
// console.log("path x");
// e.stopPropagation();
// // portUpdate();
// setTimeout(() => {
// try {
// let evt = document.createEvent("Event");
// evt.initEvent("click", true, true);
// document.getElementById("path-select").dispatchEvent(evt);
// } catch (e) {
// console.error(e);
// }
// }, 5000);
// },
// true
// );
configUpdate("baudIndex", ele.selectedIndex);
if (port === undefined || port.isOpen === false) return;
let baudRate = parseInt(ele.options[ele.selectedIndex].text);
if (isNaN(baudRate) === true) baudRate = 115200;
port.update({ baudRate: baudRate }, (e) => {
if (e !== null) console.error(e);
});
};
document.getElementById("path-select").onchange = (e) => {
configUpdate("pathIndex", e.target.selectedIndex);
if (port === undefined || port.isOpen === false) return;
port.close();
setTimeout(() => {
document.getElementById("port-switch").click();
}, 400);
};
document.getElementById("refresh-btn").onclick = portUpdate;

View File

@ -298,19 +298,13 @@ input {
}
#refresh-btn {
transform: scale(0.6);
transform: scale(0.62);
transform-origin: left;
line-height: 24px;
}
#downward-btn {
transform: scale(0.4);
transform: scale(0.62);
transform-origin: left;
line-height: 24px;
}
#clear-btn {
line-height: 24px;
}
#baud-input,

View File

@ -445,19 +445,19 @@
</div>
<div class="col s1">
<a class="waves-effect btn-floating" id="refresh-btn"
<a class="waves-effect btn-floating btn-small" id="refresh-btn"
><i class="material-icons">refresh</i></a
>
</div>
<div class="col s4">
<div class="col s3">
<a class="waves-effect btn-floating" id="downward-btn"
><i class="material-icons">arrow_downward</i></a
<div class="col s1">
<a class="waves-effect btn-floating btn-small" id="downward-btn"
><i class="material-icons">trending_down</i></a
>
</div>
<div class="col s3">
<div class="col s6">
<a class="waves-effect btn-floating btn-small red" id="clear-btn"
><i class="material-icons">delete</i></a
>

View File

@ -127,7 +127,7 @@ function serialGetOptions() {
}
function toast(text) {
mcss.toast({ html: text, displayLength: 2000 });
mcss.toast({ html: text, displayLength: 1000 });
// alert(text)
}