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

Added scrollable to selected units' list; bit of tidying up.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-31 21:06:46 +01:00
parent ff20eec472
commit 6b22c1ef63
4 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/public/stylesheets/olympus.css
View File

@ -76,6 +76,23 @@ form > div {
}
.ol-scrollable::-webkit-scrollbar {
width: 10px;
}
.ol-scrollable::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 100px;
}
.ol-scrollable::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 100px;
opacity: 0.8;
margin-top: 10px;
}
.ol-panel {
background-color: var(--background-steel);
border-radius: 15px;
@ -210,22 +227,6 @@ form > div {
text-decoration: underline;
}
.ol-select>.ol-select-options::-webkit-scrollbar {
width: 10px;
}
.ol-select>.ol-select-options::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 100px;
}
.ol-select>.ol-select-options::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 100px;
opacity: 0.8;
margin-top: 10px;
}
.ol-panel-list {
border-radius: var(--border-radius-sm);

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

@ -12,11 +12,17 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
z-index: 1000;
}
#unit-control-panel h3 {
margin-bottom:8px;
}
#unit-control-panel #selected-units-container {
align-items: left;
border-radius: var( --border-radius-md );
display:flex;
flex-direction: column;
max-height: 136px;
overflow-y:auto;
row-gap: 4px;
}
@ -85,5 +91,10 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
#unit-control-panel h4 {
margin-bottom:8px;
margin-top:20px;
}
#unit-control-panel #threat,
#unit-control-panel #roe {
margin-top:12px;
}

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

@ -73,23 +73,11 @@ export class UnitControlPanel extends Panel {
else
database = null; // TODO add databases for other unit types
if (index === 0) {
this.getElement().querySelectorAll(`[data-object|="unit"]`).forEach(marker => {
marker.setAttribute("data-coalition", unit.getMissionData().coalition);
dataPointMap( this.getElement(), {
"shortLabel" : database?.getByName(unit.getBaseData().name)?.shortLabel,
"unitName": unit.getBaseData().unitName
});
});
}
console.log( unit.getBaseData() );
var button = document.createElement("button");
var callsign = unit.getBaseData().unitName || "";
button.innerText = unit.getBaseData().unitName;
button.setAttribute("data-short-label", database?.getByName(unit.getBaseData().name)?.shortLabel || "");
button.setAttribute("data-callsign", callsign);

25
client/views/unitcontrolpanel.ejs
View File

@ -1,23 +1,16 @@
<div id="unit-control-panel" class="ol-panel ol-panel-padding-lg">
<h3>Selected Units</h3>
<div id="unit-selection">
<div id="unit-identification">
<div data-object="unit-aircraft">
<div class="unit-marker"></div>
<div class="unit-short-label" data-point="shortLabel"></div>
</div>
<input id="unit-name" value="" data-point="unitName" readonly disabled />
<!-- <button id="edit-unit-name" data-on-click="editUnitName"></button> -->
</div>
<div id="selected-units-container" class="ol-scroll">
<div id="selected-units-container" class="ol-scrollable">
<!-- This is where all the unit selection buttons will be shown-->
<!-- <button class="pill highlight-coalition" data-coalition="blue" data-short-label="18">Olympus 1-1</button> -->
</div>
<hr />
<div id="flight-data">
<h4>Flight controls</h4>
<div class="slider-container flight-control-slider" id="airspeed-slider">
@ -52,9 +45,11 @@
</div>
</div>
<h4>Reaction to threat</h4>
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
<!-- This is where the reaction to threat buttons will be shown -->
<div id="threat">
<h4>Reaction to threat</h4>
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
<!-- This is where the reaction to threat buttons will be shown -->
</div>
</div>
<hr />