Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-19 14:25:14 +03:00
Code Issues Wiki Activity

Fix Port Dropdown Width

Browse source
This commit is contained in:
Mark Haslinghuis 2021-02-19 12:55:47 +01:00
parent 4165f58e36
commit 91e06be19f
3 changed files with 87 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/css/main.css
View file

@ -225,7 +225,7 @@ input[type="number"]::-webkit-inner-spin-button {
} }
#portsinput { #portsinput {
width: 180px; width: 220px;
margin-right: 15px; margin-right: 15px;
} }
@ -233,6 +233,24 @@ input[type="number"]::-webkit-inner-spin-button {
margin-bottom: 5px; 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 { #port-picker .auto_connect, .gray {
color: var(--subtleAccent); color: var(--subtleAccent);
} }
@ -241,12 +259,13 @@ input[type="number"]::-webkit-inner-spin-button {
height: 76px; height: 76px;
width: 180px; width: 180px;
margin-right: 15px; margin-right: 15px;
margin-top: 16px;
display: none; display: none;
} }
#port-override-option { #port-override-option {
height: 76px; height: 76px;
margin-top: 7px; margin-top: 24px;
margin-right: 15px; margin-right: 15px;
} }

41
src/js/port_handler.js
View file

@ -15,7 +15,10 @@ const PortHandler = new function () {
}; };
PortHandler.initialize = 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 // fill dropdown with version numbers
generateVirtualApiVersions(); generateVirtualApiVersions();
@ -87,11 +90,13 @@ PortHandler.check_usb_devices = function (callback) {
data: {isManual: true}, data: {isManual: true},
})); }));
self.portPickerElement.val('DFU').change(); self.portPickerElement.val('DFU').change();
self.setPortsInputWidth();
} }
self.dfu_available = true; self.dfu_available = true;
} else { } else {
if (dfuElement.length) { if (dfuElement.length) {
dfuElement.remove(); dfuElement.remove();
self.setPortsInputWidth();
} }
self.dfu_available = false; self.dfu_available = false;
} }
@ -234,6 +239,7 @@ PortHandler.updatePortSelect = function (ports) {
data: {isManual: true}, data: {isManual: true},
})); }));
this.setPortsInputWidth();
return ports; 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) { PortHandler.port_detected = function(name, code, timeout, ignore_timeout) {
const self = this; const self = this;
const obj = {'name': name, const obj = {'name': name,

46
src/main.html
View file

@ -193,26 +193,32 @@
<!-- port list gets generated here --> <!-- port list gets generated here -->
</select> </select>
</div> </div>
<div class="dropdown dropdown-dark"> <div id="auto-connect-and-baud">
<select class="dropdown-select" id="baud" i18n_title="firmwareFlasherBaudRate"> <div id="auto-connect-switch">
<option value="1000000">1000000</option> <label>
<option value="500000">500000</option> <input class="auto_connect togglesmall" type="checkbox"/>
<option value="250000">250000</option> <span class="auto_connect" i18n="autoConnect"></span>
<option value="115200" selected="selected">115200</option> </label>
<option value="57600">57600</option> </div>
<option value="38400">38400</option> <div id="baudselect">
<option value="28800">28800</option> <div class="dropdown dropdown-dark">
<option value="19200">19200</option> <select class="dropdown-select" id="baud" i18n_title="firmwareFlasherBaudRate">
<option value="14400">14400</option> <option value="1000000">1000000</option>
<option value="9600">9600</option> <option value="500000">500000</option>
<option value="4800">4800</option> <option value="250000">250000</option>
<option value="2400">2400</option> <option value="115200" selected="selected">115200</option>
<option value="1200">1200</option> <option value="57600">57600</option>
</select> <option value="38400">38400</option>
</div> <option value="28800">28800</option>
<div id="autoConnectSwitch"> <option value="19200">19200</option>
<label><input class="auto_connect togglesmall" type="checkbox"/><span <option value="14400">14400</option>
class="auto_connect" i18n="autoConnect"></span></label> <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> </div>
</div> </div>