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

Better unit explosion buttons design

Browse Source
This commit is contained in:
Pax1601 2023-11-12 14:08:10 +01:00
parent e02e9de55d
commit ccaea5b9d1
5 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/public/stylesheets/panels/unitcontrol.css
View File

@ -278,37 +278,22 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
#advanced-settings-div>*:nth-child(2) {
margin-left: auto;
margin-right: 58px;
}
#advanced-settings-div button {
#advanced-settings-div>button {
height: 40px;
}
#explosion-types-selector {
padding-right: 5px;
border-radius: var(--border-radius-sm);
#delete-options button {
display: flex;
flex-direction: column;
row-gap: 5px;
background-color: var(--background-steel);
position: absolute;
right: 0px;
bottom: 0px;
height: fit-content;
overflow: hidden;
flex-direction: row;
align-content: center;
}
#explosion-types-selector>*:not(:last-child) {
display: none;
}
#explosion-types-selector:hover {
padding: 5px 5px 0px 5px;
}
#explosion-types-selector:hover>*:not(:last-child) {
display: block;
#delete-options button svg {
margin-right: 10px;
width: 18px;
max-height: 18px;
}
/* Element visibility control */

26
client/public/stylesheets/style/style.css
View File

@ -339,10 +339,32 @@ h4 {
font-weight: normal;
}
button.ol-button-white {
border: 1px solid white;
color: white;
font-weight: bold;
}
button.ol-button-white>svg:first-child {
stroke: white;
fill: white;
}
.ol-select-warning {
border: 1px solid var(--primary-red);
color: var(--primary-red) !important;
font-weight: bold !important;
}
.ol-select-warning::after {
stroke: var(--primary-red);
fill: var(--primary-red);
}
button.ol-button-warning {
border: 1px solid var(--primary-red);
color: var(--primary-red);
font-weight: bold;
color: var(--primary-red) !important;
font-weight: bold !important;
}
button.ol-button-warning>svg:first-child {

1
client/public/themes/olympus/images/icons/smog-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 144c0 79.5 64.5 144 144 144H299.3c22.6 19.9 52.2 32 84.7 32s62.1-12.1 84.7-32H496c61.9 0 112-50.1 112-112s-50.1-112-112-112c-10.7 0-21 1.5-30.8 4.3C443.8 27.7 401.1 0 352 0c-32.6 0-62.4 12.2-85.1 32.3C242.1 12.1 210.5 0 176 0C96.5 0 32 64.5 32 144zM616 368H280c-13.3 0-24 10.7-24 24s10.7 24 24 24H616c13.3 0 24-10.7 24-24s-10.7-24-24-24zm-64 96H440c-13.3 0-24 10.7-24 24s10.7 24 24 24H552c13.3 0 24-10.7 24-24s-10.7-24-24-24zm-192 0H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24zM224 392c0-13.3-10.7-24-24-24H96c-13.3 0-24 10.7-24 24s10.7 24 24 24H200c13.3 0 24-10.7 24-24z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

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

@ -28,6 +28,7 @@ export class UnitControlPanel extends Panel {
#advancedSettingsDialog: HTMLElement;
#units: Unit[] = [];
#selectedUnitsTypes: string[] = [];
#deleteDropdown: Dropdown;
/**
*
@ -113,6 +114,7 @@ export class UnitControlPanel extends Panel {
this.#radioDecimalsDropdown = new Dropdown("radio-decimals", () => {});
this.#radioDecimalsDropdown.setOptions([".000", ".250", ".500", ".750"]);
this.#radioCallsignDropdown = new Dropdown("radio-callsign", () => {});
this.#deleteDropdown = new Dropdown("delete-options", () => { });
/* Events and timer */
window.setInterval(() => {this.update();}, 25);

21
client/views/panels/unitcontrol.ejs
View File

@ -108,14 +108,19 @@
<div id="advanced-settings-div">
<button id="advanced-settings-button" class="ol-button-settings" data-on-click="showAdvancedSettings">Settings</button>
<button class="ol-button-warning" data-on-click="deleteSelectedUnits" title="Immediately remove the unit from the simulation"><img src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button>
<div id="explosion-types-selector">
<button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "secondary" }' title="Explode the unit (secondary explosions, the unit will keep exploding at interval simulating ammunition cooking)"><img src="/resources/theme/images/icons/secondaries.svg" inject-svg></button>
<button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "phosphorous" }' title="Explode the unit (white phosphorous)"><img src="/resources/theme/images/icons/white-phosphorous.svg" inject-svg></button>
<button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "napalm" }' title="Explode the unit (napalm)"><img src="/resources/theme/images/icons/napalm.svg" inject-svg></button>
<button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "normal" }' title="Explode the unit (normal explosion)"><img src="/resources/theme/images/icons/explosion-solid.svg" inject-svg></button>
</div>
<div id="delete-options" class="ol-select">
<div class="ol-select-value ol-select-warning">
Delete unit
</div>
<div class="ol-select-options">
<div><button class="ol-button-white" data-on-click="deleteSelectedUnits" title="Immediately remove the unit from the simulation"><img src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button></div>
<div><hr></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "normal" }' title="Normal explosion"><img src="/resources/theme/images/icons/explosion-solid.svg" inject-svg>Blow up</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "secondary" }' title="The unit will keep exploding at random intervals, simulating ammunition cooking"><img src="/resources/theme/images/icons/burst-solid.svg" inject-svg>Cook off</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "phosphorous" }' title="White phosphorous explosion"><img src="/resources/theme/images/icons/smog-solid.svg" inject-svg>Phosp.</button></div>
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits" data-on-click-params='{ "type": "napalm" }' title="Napalm"><img src="/resources/theme/images/icons/fire-solid.svg" inject-svg>Napalm</button></div>
</div>
</div>
</div>
</div>
<div id="rapid-controls" class="ol-panel">