diff --git a/src/css/main.css b/src/css/main.css
index de3c972f..68c18737 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -225,7 +225,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
#portsinput {
- width: 180px;
+ width: 220px;
margin-right: 15px;
}
@@ -233,6 +233,24 @@ input[type="number"]::-webkit-inner-spin-button {
margin-bottom: 5px;
}
+#auto-connect-and-baud {
+ float: right;
+}
+
+#auto-connect-switch {
+ width: 110px;
+ float: left;
+ margin-top: 4px;
+ margin-left: 5px;
+ margin-right: 20px;
+}
+
+#baudselect {
+ width: 80px;
+ float: right;
+ margin-right: 2px;
+}
+
#port-picker .auto_connect, .gray {
color: var(--subtleAccent);
}
@@ -241,12 +259,13 @@ input[type="number"]::-webkit-inner-spin-button {
height: 76px;
width: 180px;
margin-right: 15px;
+ margin-top: 16px;
display: none;
}
#port-override-option {
height: 76px;
- margin-top: 7px;
+ margin-top: 24px;
margin-right: 15px;
}
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 6ae190ed..ee2fb171 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -15,7 +15,10 @@ const PortHandler = new function () {
};
PortHandler.initialize = function () {
- this.portPickerElement = $('div#port-picker #port');
+ const portPickerElementSelector = "div#port-picker #port";
+ this.portPickerElement = $(portPickerElementSelector);
+ this.selectList = document.querySelector(portPickerElementSelector);
+ this.initialWidth = this.selectList.offsetWidth + 12;
// fill dropdown with version numbers
generateVirtualApiVersions();
@@ -87,11 +90,13 @@ PortHandler.check_usb_devices = function (callback) {
data: {isManual: true},
}));
self.portPickerElement.val('DFU').change();
+ self.setPortsInputWidth();
}
self.dfu_available = true;
} else {
if (dfuElement.length) {
dfuElement.remove();
+ self.setPortsInputWidth();
}
self.dfu_available = false;
}
@@ -234,6 +239,7 @@ PortHandler.updatePortSelect = function (ports) {
data: {isManual: true},
}));
+ this.setPortsInputWidth();
return ports;
};
@@ -255,6 +261,39 @@ PortHandler.selectPort = function(ports) {
}
};
+PortHandler.setPortsInputWidth = function() {
+
+ function getWidthofText(text) {
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+
+ context.font = getComputedStyle(document.body).font;
+
+ return Math.ceil(context.measureText(text).width);
+ }
+
+ function findMaxLengthOption(selectEl) {
+ let max = 0;
+
+ $(selectEl.options).each(function () {
+ const textSize = getWidthofText(this.textContent);
+ if (textSize > max) {
+ max = textSize;
+ }
+ });
+
+ return max;
+ }
+
+ const correction = 24; // account for up/down button and spacing
+ let width = findMaxLengthOption(this.selectList) + correction;
+
+ width = (width > this.initialWidth) ? width : this.initialWidth;
+
+ const portsInput = document.querySelector("div#port-picker #portsinput");
+ portsInput.style.width = `${width}px`;
+};
+
PortHandler.port_detected = function(name, code, timeout, ignore_timeout) {
const self = this;
const obj = {'name': name,
diff --git a/src/main.html b/src/main.html
index a002a548..12bc961b 100644
--- a/src/main.html
+++ b/src/main.html
@@ -193,26 +193,32 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+