mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Some styling to the unit control panel and changeable unit name.
This commit is contained in:
PeekabooSteam
parent
6c488dba63
commit
549eeb7c2e
3
client/public/images/buttons/edit.svg
Normal file
3
client/public/images/buttons/edit.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4766 9.25718L11.3099 8.44468C11.4401 8.31772 11.6667 8.40659 11.6667 8.58941V12.2812C11.6667 12.9541 11.1068 13.5 10.4167 13.5H1.25C0.559896 13.5 0 12.9541 0 12.2812V3.3437C0 2.67085 0.559896 2.12495 1.25 2.12495H8.3724C8.55729 2.12495 8.65104 2.34331 8.52083 2.4728L7.6875 3.2853C7.64844 3.32339 7.59635 3.3437 7.53906 3.3437H1.25V12.2812H10.4167V9.39937C10.4167 9.34605 10.4375 9.29526 10.4766 9.25718ZM14.5547 4.13335L7.71615 10.8009L5.36198 11.0548C4.67969 11.1285 4.09896 10.5673 4.17448 9.89702L4.4349 7.60171L11.2734 0.934131C11.8698 0.352686 12.8333 0.352686 13.4271 0.934131L14.5521 2.03101C15.1484 2.61245 15.1484 3.55444 14.5547 4.13335ZM11.9818 4.91792L10.4688 3.44272L5.63021 8.16284L5.4401 9.82085L7.14063 9.6355L11.9818 4.91792ZM13.6693 2.89429L12.5443 1.79741C12.4375 1.69331 12.263 1.69331 12.1589 1.79741L11.3542 2.58198L12.8672 4.05718L13.6719 3.27261C13.776 3.16597 13.776 2.99839 13.6693 2.89429Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -57,6 +57,32 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
|
||||
position: static;
|
||||
}
|
||||
|
||||
|
||||
.ol-button-box {
|
||||
column-gap: 6px;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin:5px 0;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.ol-button-box button {
|
||||
border:1px solid var( --accent-light-blue );
|
||||
color: var( --accent-light-blue );
|
||||
}
|
||||
|
||||
.ol-button-box button:first-of-type, .ol-button-box button.selected {
|
||||
border-color: white;
|
||||
background-color: white;
|
||||
color: var( --background-steel );
|
||||
}
|
||||
|
||||
.ol-button-box button:after {
|
||||
content: "[]";
|
||||
}
|
||||
|
||||
|
||||
#connection-status-panel {
|
||||
bottom: 20px;
|
||||
height: 30px;
|
||||
|
||||
@ -82,6 +82,10 @@ button[disabled="disabled"] {
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
.ol-panel-padding-lg {
|
||||
padding:24px 30px;
|
||||
}
|
||||
|
||||
.ol-select {
|
||||
color: var( --nav-text );
|
||||
}
|
||||
@ -228,7 +232,6 @@ button[disabled="disabled"] {
|
||||
}
|
||||
|
||||
.ol-panel-board h1, .ol-panel-board h2 {
|
||||
font-size:18px;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
margin: 0;
|
||||
padding:0 0 5px 0;
|
||||
@ -238,15 +241,31 @@ button[disabled="disabled"] {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:36px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size:14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
nav.ol-panel {
|
||||
column-gap: 20px;
|
||||
display:flex;
|
||||
@ -266,10 +285,6 @@ nav.ol-panel > :last-child {
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group button {
|
||||
border:1px solid white;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group {
|
||||
border-radius: var( --border-radius-sm );
|
||||
}
|
||||
@ -437,12 +452,54 @@ nav.ol-panel > :last-child {
|
||||
font-weight: var(--font-weight-bolder);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#unit-info-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#unit-info-panel #unit-identification {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
margin-bottom:11px;
|
||||
}
|
||||
|
||||
#unit-info-panel #unit-identification .unit {
|
||||
height:28px;
|
||||
margin-right:10px;
|
||||
width:28px;
|
||||
}
|
||||
|
||||
#unit-info-panel #unit-identification .unit .unit-marker {
|
||||
background-size: 28px 28px;
|
||||
height:28px;
|
||||
width:28px;
|
||||
}
|
||||
|
||||
#unit-info-panel #unit-identification .unit .unit-short-label {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
#unit-info-panel #unit-identification #unit-name {
|
||||
background-color:transparent;
|
||||
border:none;
|
||||
color:white;
|
||||
font-size:18px;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
outline:none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#edit-unit-name {
|
||||
background-image: url( "/images/buttons/edit.svg" );
|
||||
background-repeat: no-repeat;
|
||||
height:14px;
|
||||
margin-left:10px;
|
||||
width:15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -15,12 +15,15 @@
|
||||
|
||||
div.unit {
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
div.unit:not( .no-function ) {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
[data-hide-aircraft] div.unit-air,
|
||||
[data-hide-ground] div.unit-ground,
|
||||
[data-hide-sam] div.unit-sam,
|
||||
@ -117,7 +120,7 @@ div.unit-air .unit-marker {
|
||||
width: var( --unit-air-marker-width );
|
||||
}
|
||||
|
||||
div.unit-air:hover .unit-marker, div.unit-air[data-is-selected="true"] .unit-marker {
|
||||
div.unit-air:not( .no-function ):hover .unit-marker, div.unit-air[data-is-selected="true"] .unit-marker {
|
||||
background-image: var( --unit-air-marker-neutral-hover-url );
|
||||
}
|
||||
|
||||
@ -126,7 +129,7 @@ div.unit-air[data-coalition="blue"] .unit-marker {
|
||||
background-image: var( --unit-air-marker-blue-url );
|
||||
}
|
||||
|
||||
div.unit-air[data-coalition="blue"]:hover .unit-marker, div.unit-air[data-coalition="blue"][data-is-selected="true"] .unit-marker {
|
||||
div.unit-air[data-coalition="blue"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="blue"][data-is-selected="true"] .unit-marker {
|
||||
background-image: var( --unit-air-marker-blue-hover-url );
|
||||
}
|
||||
|
||||
@ -135,7 +138,7 @@ div.unit-air[data-coalition="red"] .unit-marker {
|
||||
background-image: var( --unit-air-marker-red-url );
|
||||
}
|
||||
|
||||
div.unit-air[data-coalition="red"]:hover .unit-marker, div.unit-air[data-coalition="red"][data-is-selected="true"] .unit-marker {
|
||||
div.unit-air[data-coalition="red"]:not( .no-function ):hover .unit-marker, div.unit-air[data-coalition="red"][data-is-selected="true"] .unit-marker {
|
||||
background-image: var( --unit-air-marker-red-hover-url );
|
||||
}
|
||||
|
||||
@ -218,6 +221,7 @@ div.unit-building[data-coalition="red"] .unit-marker {
|
||||
|
||||
|
||||
div.unit .unit-short-label {
|
||||
color: var( --secondary-gunmetal-grey );
|
||||
font-size: var(--unit-font-size);
|
||||
font-weight: var(--unit-font-weight);
|
||||
position: absolute;
|
||||
|
||||
@ -101,6 +101,31 @@ function setup() {
|
||||
|
||||
});
|
||||
|
||||
|
||||
const unitName = document.getElementById( "unit-name" );
|
||||
|
||||
if ( unitName instanceof HTMLInputElement ) {
|
||||
|
||||
unitName.addEventListener( "change", ev => {
|
||||
unitName.setAttribute( "disabled", "true" );
|
||||
unitName.setAttribute( "readonly", "true" );
|
||||
|
||||
// Do something with this:
|
||||
console.log( unitName.value );
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener( "editUnitName", ev => {
|
||||
|
||||
unitName.removeAttribute( "disabled" );
|
||||
unitName.removeAttribute( "readonly" );
|
||||
unitName.focus();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.addEventListener( "toggleCoalitionVisibility", ( ev:CustomEventInit ) => {
|
||||
document.body.toggleAttribute( "data-hide-" + ev.detail.coalition );
|
||||
|
||||
@ -25,15 +25,15 @@ export class UnitControlPanel extends Panel {
|
||||
/* Option buttons */
|
||||
this.#optionButtons["ROE"] = ROEs.map((option: string) => {
|
||||
var button = document.createElement("button");
|
||||
button.innerText = option;
|
||||
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.value));
|
||||
button.title = option;
|
||||
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
|
||||
return button;
|
||||
})
|
||||
|
||||
this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string) => {
|
||||
var button = document.createElement("button");
|
||||
button.innerText = option;
|
||||
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.value));
|
||||
button.title = option;
|
||||
button.addEventListener("click", () => getUnitsManager().selectedUnitsSetROE(button.title));
|
||||
return button;
|
||||
})
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Primary nav</div>
|
||||
<div class="content-header">Unit Control Panel</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
@ -1612,15 +1612,15 @@
|
||||
<div class="ol-panel">
|
||||
<div class="ol-panel-board">
|
||||
<div class="panel-section">
|
||||
<h1>Unit Callsign</h1>
|
||||
<h3>Unit Callsign</h3>
|
||||
<div class="pill highlight-primary">Airframe</div>
|
||||
<div class="pill highlight-neutral">Group</div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h2>Flight data</h2>
|
||||
<h4>Flight data</h4>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<h2>Loadout</h2>
|
||||
<h4>Loadout</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1734,6 +1734,21 @@
|
||||
|
||||
});
|
||||
|
||||
|
||||
const $roe = document.getElementById( "roe-buttons-container" );
|
||||
[ "Free", "Designated free", "Designated", "Return", "Hold" ].forEach( option => {
|
||||
let $btn = document.createElement( "button" );
|
||||
$btn.title = option;
|
||||
$roe.appendChild( $btn );
|
||||
});
|
||||
|
||||
const $threat = document.getElementById( "reaction-to-threat-buttons-container" );
|
||||
[ "None", "Passive", "Evade", "Escape", "Abort" ].forEach( option => {
|
||||
let $btn = document.createElement( "button" );
|
||||
$btn.title = option;
|
||||
$threat.appendChild( $btn );
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,22 +1,30 @@
|
||||
<div id="unit-control-panel" class="ol-panel ol-panel-padded">
|
||||
<h2>Selected units</h2>
|
||||
|
||||
<div id="unit-control-panel" class="ol-panel ol-panel-padding-lg">
|
||||
|
||||
<div id="unit-info-panel">
|
||||
<div id="general" class="panel-section">
|
||||
<h3>
|
||||
<div id="unit-name">Olympus 1-1</div>
|
||||
<button>[e]</button>
|
||||
</h3>
|
||||
|
||||
<div id="unit-identification">
|
||||
<div class="unit unit-air no-function">
|
||||
<div class="unit-marker"></div>
|
||||
<div class="unit-short-label">18</div>
|
||||
</div>
|
||||
|
||||
<input id="unit-name" value="Olympus 1-1" readonly disabled />
|
||||
|
||||
<button id="edit-unit-name" data-on-click="editUnitName"></button>
|
||||
</div>
|
||||
|
||||
<div id="name" class="pill highlight-primary">Name</div>
|
||||
<div id="group-name" class="pill highlight-primary">Group</div>
|
||||
<div id="task" class="pill highlight-primary">Task</div>
|
||||
</div>
|
||||
|
||||
<div id="selected-units-container" class="ol-scroll">
|
||||
<!-- This is where all the unit selection buttons will be shown-->
|
||||
</div>
|
||||
<!-- This is where all the unit selection buttons will be shown-->
|
||||
</div>
|
||||
|
||||
<div id="flight-data" class="panel-section">
|
||||
<h3 id="flight-data-label">Flight data</h3>
|
||||
<h4 id="flight-data-label">Flight data</h4>
|
||||
<div id="latitude"></div>
|
||||
<div id="longitude"></div>
|
||||
<div class="data-grid">
|
||||
@ -26,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="loadout-data" class="panel-section">
|
||||
<h3 id="loadout-label">Loadout</h3>
|
||||
<h4 id="loadout-label">Loadout</h4>
|
||||
<div class="data-grid">
|
||||
<div class="data-row"><img class="icon-small" src="images/icons/fuel.svg"><h5>Fuel</h5><h4 id="fuel"></h4></div>
|
||||
</div>
|
||||
@ -49,18 +57,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Formation</h3>
|
||||
<div id="formation-buttons-container">
|
||||
<!-- <h3>Formation</h3> -->
|
||||
<!-- <div id="formation-buttons-container"> -->
|
||||
<!-- This is where all the formation control buttons will be shown -->
|
||||
<!-- </div> -->
|
||||
|
||||
<div id="roe">
|
||||
<h4>Rules of engagement</h4>
|
||||
<div id="roe-buttons-container" class="ol-group ol-button-box">
|
||||
<!-- This is where the roe buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Rules of engagement</h3>
|
||||
<div id="roe-buttons-container">
|
||||
<!-- This is where the roe buttons will be shown -->
|
||||
</div>
|
||||
|
||||
<h3>Reaction to threat</h3>
|
||||
<div id="reaction-to-threat-buttons-container">
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user