weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made the unit list in selection panel look nicer.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-22 19:09:25 +00:00
parent eeace17da9
commit bd9eb4b827
3 changed files with 67 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/public/stylesheets/unitcontrolpanel.css
View File

@ -13,7 +13,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
#unit-control-panel #selected-units-container {
align-items: center;
align-items: left;
border-radius: var( --border-radius-md );
display:flex;
flex-direction: column;
@ -21,7 +21,11 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
#unit-control-panel #selected-units-container button {
font-size: 12px;
align-items: center;
border-radius: var( --border-radius-lg );
display:flex;
font-size: 11px;
height:30px;
padding:8px 0;
position: relative;
width:90%;
@ -29,15 +33,42 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
#unit-control-panel #selected-units-container button::before {
background-color: var( --accent-light-blue );
border-radius: var( --border-radius-sm );
border-radius: var( --border-radius-md );
content: attr( data-short-label );
padding:4px;
position: absolute;
translate:-40px -4px;
margin:0 5px;
padding:4px 6px;
white-space: nowrap;
width:fit-content;
}
#unit-control-panel #selected-units-container button::after {
content: attr( data-callsign );
display: block;
overflow: hidden;
padding:4px;
padding-left:0;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width:fit-content;
}
#unit-control-panel #selected-units-container button:hover::after {
overflow: visible;
text-overflow:initial;
}
#unit-control-panel #selected-units-container button:hover::after {
background-color: var( --background-grey );
}
#unit-control-panel #selected-units-container button[data-coalition="blue"]:hover::after {
background-color: var( --primary-blue );
}
#unit-control-panel #selected-units-container button[data-coalition="red"]:hover::after {
background-color: var( --primary-red );
}
#unit-control-panel h4 {

37
client/src/panels/unitcontrolpanel.ts
View File

@ -59,17 +59,38 @@ export class UnitControlPanel extends Panel {
if (this.getElement() != null && units.length > 0)
{
this.#showFlightControlSliders(units);
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit) =>
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index:number) =>
{
var button = document.createElement("button");
button.innerText = unit.getBaseData().unitName;
if (unit instanceof Aircraft)
button.setAttribute( "data-short-label", aircraftDatabase.getShortLabelByName(unit.getBaseData().name));
else if (unit instanceof GroundUnit)
button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(unit.getBaseData().name));
else
const baseData = unit.getBaseData();
if ( index === 0 ) {
this.getElement().querySelectorAll(`[data-object|="unit"]`).forEach( marker => {
marker.setAttribute( "data-coalition", unit.getMissionData().coalition );
const shortLabel = <HTMLElement>marker.querySelector( ".unit-short-label" );
if ( shortLabel ) {
shortLabel.innerText = aircraftDatabase.getShortLabelByName( baseData.name );
}
});
}
var button = document.createElement("button");
button.innerText = baseData.unitName;
if (unit instanceof Aircraft) {
button.innerText = "";
button.setAttribute( "data-short-label", aircraftDatabase.getLabelByName( baseData.name ) );
button.setAttribute( "data-callsign", aircraftDatabase.getLabelByName( baseData.unitName ) );
} else if (unit instanceof GroundUnit) {
button.setAttribute( "data-short-label", groundUnitsDatabase.getShortLabelByName(baseData.name));
button.setAttribute( "data-callsign", groundUnitsDatabase.getLabelByName( baseData.unitName ) );
} else {
button.setAttribute( "data-short-label", "");
button.setAttribute( "data-callsign", "" );
}
button.setAttribute( "data-coalition", unit.getMissionData().coalition );
button.classList.add( "pill", "highlight-coalition" )

2
client/views/unitcontrolpanel.ejs
View File

@ -5,7 +5,7 @@
<div id="unit-identification">
<div data-object="unit-air-aircraft">
<div class="unit-marker"></div>
<div class="unit-short-label">18</div>
<div class="unit-short-label"></div>
</div>
<input id="unit-name" value="Olympus 1-1" readonly disabled />