Fix Port Dropdown Width
Mark Haslinghuis
parent
4165f58e36
commit
91e06be19f
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -193,26 +193,32 @@
|
|||
<!-- port list gets generated here -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="dropdown dropdown-dark">
|
||||
<select class="dropdown-select" id="baud" i18n_title="firmwareFlasherBaudRate">
|
||||
<option value="1000000">1000000</option>
|
||||
<option value="500000">500000</option>
|
||||
<option value="250000">250000</option>
|
||||
<option value="115200" selected="selected">115200</option>
|
||||
<option value="57600">57600</option>
|
||||
<option value="38400">38400</option>
|
||||
<option value="28800">28800</option>
|
||||
<option value="19200">19200</option>
|
||||
<option value="14400">14400</option>
|
||||
<option value="9600">9600</option>
|
||||
<option value="4800">4800</option>
|
||||
<option value="2400">2400</option>
|
||||
<option value="1200">1200</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="autoConnectSwitch">
|
||||
<label><input class="auto_connect togglesmall" type="checkbox"/><span
|
||||
class="auto_connect" i18n="autoConnect"></span></label>
|
||||
<div id="auto-connect-and-baud">
|
||||
<div id="auto-connect-switch">
|
||||
<label>
|
||||
<input class="auto_connect togglesmall" type="checkbox"/>
|
||||
<span class="auto_connect" i18n="autoConnect"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="baudselect">
|
||||
<div class="dropdown dropdown-dark">
|
||||
<select class="dropdown-select" id="baud" i18n_title="firmwareFlasherBaudRate">
|
||||
<option value="1000000">1000000</option>
|
||||
<option value="500000">500000</option>
|
||||
<option value="250000">250000</option>
|
||||
<option value="115200" selected="selected">115200</option>
|
||||
<option value="57600">57600</option>
|
||||
<option value="38400">38400</option>
|
||||
<option value="28800">28800</option>
|
||||
<option value="19200">19200</option>
|
||||
<option value="14400">14400</option>
|
||||
<option value="9600">9600</option>
|
||||
<option value="4800">4800</option>
|
||||
<option value="2400">2400</option>
|
||||
<option value="1200">1200</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue