mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
(WiP) More work on contextmenu
This commit is contained in:
dpassoni
parent
8e5ca6c992
commit
60d7b364b6
@ -2,28 +2,44 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.content #contextmenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#aircraft-spawn-menu {
|
||||
height: 191px;
|
||||
}
|
||||
|
||||
#active-coalition-label {
|
||||
position: absolute;
|
||||
top: -28px;
|
||||
border-radius: 999px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-weight: 600;
|
||||
color: var(--nav-text);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#context-menu-switch {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ol-contextmenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
width: 200px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ol-contextmenu>div:first-child{
|
||||
.ol-contextmenu>div:nth-child(2){
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.ol-contextmenu>ul{
|
||||
@ -41,12 +57,12 @@
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.ol-contextmenu button {
|
||||
.ol-contextmenu>div:nth-child(3)>button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ol-contextmenu>div:nth-child(2){
|
||||
.ol-contextmenu>div:nth-child(3){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -68,20 +84,65 @@
|
||||
|
||||
#unit-spawn-aircraft {
|
||||
background-image: var( --spawn-aircraft-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#unit-spawn-ground {
|
||||
background-image: var( --spawn-ground-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
#unit-spawn button {
|
||||
#unit-spawn-smoke {
|
||||
background-image: var( --spawn-smoke-url );
|
||||
background-size: 48px;
|
||||
}
|
||||
|
||||
.unit-spawn-button {
|
||||
border: none;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#unit-spawn button:not(:hover){
|
||||
background-color: transparent !important;
|
||||
.unit-spawn-button:last-of-type {
|
||||
border-top-right-radius: var(--border-radius-sm);
|
||||
border-bottom-right-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
[data-active-coalition=blue].toggle-fill,
|
||||
[data-active-coalition=blue].unit-spawn-button:hover,
|
||||
[data-active-coalition=blue].unit-spawn-button.is-open,
|
||||
[data-active-coalition=blue]#active-coalition-label,
|
||||
[data-active-coalition=blue]#deploy-unit-button
|
||||
{
|
||||
background-color: var(--primary-blue)
|
||||
}
|
||||
|
||||
[data-active-coalition=red].toggle-fill,
|
||||
[data-active-coalition=red].unit-spawn-button:hover,
|
||||
[data-active-coalition=red].unit-spawn-button.is-open,
|
||||
[data-active-coalition=red]#active-coalition-label,
|
||||
[data-active-coalition=red]#deploy-unit-button
|
||||
{
|
||||
background-color: var(--primary-red)
|
||||
}
|
||||
|
||||
[data-active-coalition=blue]#deploy-unit-button:disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--primary-blue);
|
||||
cursor: default;
|
||||
}
|
||||
[data-active-coalition=red]#deploy-unit-button:disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--primary-red);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[data-active-coalition=blue]#active-coalition-label::after {
|
||||
content: "Create blue unit";
|
||||
}
|
||||
[data-active-coalition=red]#active-coalition-label::after {
|
||||
content: "Create red unit";
|
||||
}
|
||||
@ -558,8 +558,6 @@ nav.ol-panel> :last-child {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#unit-visibility-control {
|
||||
align-items: center;
|
||||
}
|
||||
@ -655,5 +653,4 @@ body[data-hide-naval] #unit-visibility-control-naval {
|
||||
transform: translateX(var(--height));
|
||||
}
|
||||
|
||||
[data-coalition=blue], [data-active-coalition=blue] {background-color: var(--primary-blue)}
|
||||
[data-coalition=red], [data-active-coalition=red] {background-color:var(--primary-red)}
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="spawn_aircraft.svg"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
fill="none"
|
||||
viewBox="0 0 32 32"
|
||||
width="32"
|
||||
height="32"
|
||||
width="32">
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
sodipodi:docname="spawn_aircraft.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
|
||||
<metadata
|
||||
id="metadata14">
|
||||
<rdf:RDF>
|
||||
@ -23,53 +23,54 @@
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs12" />
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:cy="22.261162"
|
||||
inkscape:cx="31.929932"
|
||||
inkscape:zoom="18.782524"
|
||||
showgrid="false"
|
||||
id="namedview10"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
inkscape:document-rotation="0"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
id="namedview10"
|
||||
showgrid="false"
|
||||
inkscape:zoom="18.782524"
|
||||
inkscape:cx="26.073424"
|
||||
inkscape:cy="15.446316"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg8" />
|
||||
<rect
|
||||
style="fill:none"
|
||||
id="rect2"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="31"
|
||||
height="31"
|
||||
rx="7.5"
|
||||
fill="white"
|
||||
rx="7.5"
|
||||
height="31"
|
||||
width="31"
|
||||
y="0.5"
|
||||
x="0.5" />
|
||||
id="rect2"
|
||||
style="fill:none" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
id="path4"
|
||||
d="m 22.011184,13.780381 c 1.003947,0 2.775568,0.85633 2.775568,1.889757 0,1.063016 -1.771621,1.889759 -2.775568,1.889759 h -3.454693 l -2.952773,5.196833 c -0.177205,0.295233 -0.502027,0.472439 -0.826742,0.472439 h -1.653592 c -0.324822,0 -0.560988,-0.295235 -0.472439,-0.590577 l 1.446906,-5.078695 H 11.086009 L 9.786807,19.272448 C 9.698217,19.390585 9.58011,19.449654 9.432472,19.449654 H 8.192315 c -0.236219,0 -0.413381,-0.177206 -0.413381,-0.413371 0,-0.02959 0,-0.05907 0,-0.08855 L 8.723813,15.670138 7.778934,12.422131 c 0,-0.02959 0,-0.05907 0,-0.118137 0,-0.206685 0.177162,-0.413371 0.413381,-0.413371 h 1.240157 c 0.147638,0 0.265743,0.08855 0.354335,0.206686 l 1.299202,1.683072 h 3.011842 L 12.650945,8.7311863 C 12.562399,8.435909 12.798562,8.1111082 13.123384,8.1111082 h 1.653592 c 0.324715,0 0.649537,0.2066963 0.826742,0.5019629 l 2.952773,5.1673099 z"
|
||||
fill="#202831"
|
||||
d="M21.3047 14C22.2344 14 23.875 14.793 23.875 15.75C23.875 16.7344 22.2344 17.5 21.3047 17.5H18.1055L15.3711 22.3125C15.207 22.5859 14.9062 22.75 14.6055 22.75H13.0742C12.7734 22.75 12.5547 22.4766 12.6367 22.2031L13.9766 17.5H11.1875L9.98438 19.0859C9.90234 19.1953 9.79297 19.25 9.65625 19.25H8.50781C8.28906 19.25 8.125 19.0859 8.125 18.8672C8.125 18.8398 8.125 18.8125 8.125 18.7852L9 15.75L8.125 12.7422C8.125 12.7148 8.125 12.6875 8.125 12.6328C8.125 12.4414 8.28906 12.25 8.50781 12.25H9.65625C9.79297 12.25 9.90234 12.332 9.98438 12.4414L11.1875 14H13.9766L12.6367 9.32422C12.5547 9.05078 12.7734 8.75 13.0742 8.75H14.6055C14.9062 8.75 15.207 8.94141 15.3711 9.21484L18.1055 14H21.3047Z" />
|
||||
id="path4"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.07987" />
|
||||
<rect
|
||||
style="fill:none;stroke:none"
|
||||
id="rect6"
|
||||
stroke="white"
|
||||
rx="7.5"
|
||||
height="31"
|
||||
width="31"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
x="0.5" />
|
||||
width="31"
|
||||
height="31"
|
||||
rx="7.5"
|
||||
stroke="white"
|
||||
id="rect6"
|
||||
style="fill:none;stroke:none" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.8 KiB |
76
client/public/themes/olympus/images/spawn_smoke.svg
Normal file
76
client/public/themes/olympus/images/spawn_smoke.svg
Normal file
@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg15"
|
||||
sodipodi:docname="spawn_smoke.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
|
||||
<metadata
|
||||
id="metadata19">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
inkscape:document-rotation="0"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
id="namedview17"
|
||||
showgrid="false"
|
||||
inkscape:zoom="18.782524"
|
||||
inkscape:cx="15.515904"
|
||||
inkscape:cy="14.452888"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg15" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.0296135;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 7.4791847,12.531786 c 0,2.38189 1.8897313,4.31437 4.2189373,4.31437 h 3.612465 c 0.662138,0.596221 1.529364,0.958747 2.481554,0.958747 0.952191,0 1.819416,-0.362526 2.481555,-0.958747 h 0.799841 c 1.813557,0 3.281394,-1.501042 3.281394,-3.355622 0,-1.85458 -1.467837,-3.355621 -3.281394,-3.355621 -0.313492,0 -0.615263,0.04495 -0.902385,0.128832 -0.626981,-1.2164128 -1.878013,-2.04633 -3.316553,-2.04633 -0.95512,0 -1.828206,0.3655228 -2.493274,0.9677373 C 13.634731,8.5799418 12.708908,8.217415 11.698122,8.217415 c -2.329206,0 -4.2189373,1.932479 -4.2189373,4.314371 z m 17.1101313,6.711242 h -9.844184 c -0.389665,0 -0.703157,0.320582 -0.703157,0.719061 0,0.398479 0.313492,0.719062 0.703157,0.719062 h 9.844184 c 0.389667,0 0.703157,-0.320583 0.703157,-0.719062 0,-0.398479 -0.31349,-0.719061 -0.703157,-0.719061 z m -1.875082,2.876246 H 19.43284 c -0.389666,0 -0.703158,0.320582 -0.703158,0.719063 0,0.398479 0.313492,0.71906 0.703158,0.71906 h 3.281394 c 0.389665,0 0.703156,-0.320581 0.703156,-0.71906 0,-0.398481 -0.313491,-0.719063 -0.703156,-0.719063 z m -5.625249,0 H 7.2447992 c -0.3896663,0 -0.7031566,0.320582 -0.7031566,0.719063 0,0.398479 0.3134903,0.71906 0.7031566,0.71906 h 9.8441858 c 0.389666,0 0.703156,-0.320581 0.703156,-0.71906 0,-0.398481 -0.31349,-0.719063 -0.703156,-0.719063 z m -3.984552,-2.157185 c 0,-0.398479 -0.313489,-0.719061 -0.703155,-0.719061 H 9.354267 c -0.389665,0 -0.703155,0.320582 -0.703155,0.719061 0,0.398479 0.31349,0.719062 0.703155,0.719062 h 3.047011 c 0.389666,0 0.703155,-0.320583 0.703155,-0.719062 z"
|
||||
id="path2-7" />
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="31"
|
||||
height="31"
|
||||
rx="7.5"
|
||||
stroke="white"
|
||||
id="rect8"
|
||||
style="fill:none;stroke:none" />
|
||||
<defs
|
||||
id="defs13">
|
||||
<clipPath
|
||||
id="clip0_277_1705">
|
||||
<rect
|
||||
width="19"
|
||||
height="19"
|
||||
fill="white"
|
||||
transform="translate(6.5 6.5)"
|
||||
id="rect10" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@ -167,5 +167,6 @@
|
||||
|
||||
--spawn-aircraft-url: url( "/themes/olympus/images/spawn_aircraft.svg" );
|
||||
--spawn-ground-url: url( "/themes/olympus/images/spawn_ground.svg" );
|
||||
--spawn-smoke-url: url( "/themes/olympus/images/spawn_smoke.svg" );
|
||||
|
||||
}
|
||||
@ -34,7 +34,8 @@ export class ContextMenu {
|
||||
//this.#unitsNumberDropdown = new Dropdown("#units-options", this.#setAircraftType, [""]);
|
||||
|
||||
document.addEventListener("contextMenuShow", (e: any) => {
|
||||
this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.unitType !== "aircraft");
|
||||
this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
|
||||
this.#container?.querySelector("#unit-spawn-aircraft")?.classList.toggle("is-open", e.detail.type === "aircraft");
|
||||
})
|
||||
|
||||
document.addEventListener("contextMenuDeployAircraft", () => {
|
||||
@ -100,7 +101,10 @@ export class ContextMenu {
|
||||
{
|
||||
var loadout = aircraftDatabase.getLoadoutsByName(this.#spawnOptions.type, loadoutName);
|
||||
if (loadout)
|
||||
{
|
||||
this.#spawnOptions.loadout = loadout.code;
|
||||
(<HTMLButtonElement>this.#container?.querySelector("#deploy-unit-button")).disabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<div id="contextmenu" class="ol-contextmenu">
|
||||
<div id="active-coalition-label" data-active-coalition="blue"></div>
|
||||
<div class="ol-panel">
|
||||
<label id="context-menu-switch" class="toggle" for="context-menu-toggle">
|
||||
<input class="toggle-input" name="" type="checkbox" id="context-menu-toggle">
|
||||
<div data-active-coalition="blue" class="toggle-fill"></div>
|
||||
</label>
|
||||
|
||||
<div id="unit-spawn" class="ol-group">
|
||||
<button data-active-coalition="blue" id="unit-spawn-aircraft" title="Spawn aircraft" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "unitType": "aircraft" }'></button>
|
||||
<button data-active-coalition="blue" id="unit-spawn-ground" title="Spawn ground unit" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "unitType": "ground" }'></button>
|
||||
</div>
|
||||
<button data-active-coalition="blue" id="unit-spawn-aircraft" title="Spawn aircraft" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="unit-spawn-ground" title="Spawn ground unit" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "ground" }' class="unit-spawn-button"></button>
|
||||
<button data-active-coalition="blue" id="unit-spawn-smoke" title="Spawn smoke" data-on-click="contextMenuShow"
|
||||
data-on-click-params='{ "type": "smoke" }' class="unit-spawn-button"></button>
|
||||
</div>
|
||||
<div id="aircraft-spawn-menu" class="ol-panel hide">
|
||||
<div class="ol-select-container">
|
||||
@ -39,6 +39,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployUnit">Deploy units</button>
|
||||
<button id="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployUnit" disabled>Deploy units</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user