diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index 6e930ec0..32399fad 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -122,12 +122,19 @@ nav .ol-select .ol-select-value { text-align: center; } +nav .ol-select-value.icon { + align-content: center; + background-color: transparent; + border-radius: 0px; + padding: 0px; +} + nav .ol-select .ol-select-options { background-color: var(--background-grey); border-radius: var(--border-radius-sm); display: none; list-style: none; - padding: .5em 0; + padding: 20px; margin: 0px; } @@ -327,6 +334,24 @@ nav .ol-select .ol-select-options li button { } .main-logo { - width: 40px; - height: 40px; + width: 50px; + height: 50px; +} + +.version-control { + display: flex; + flex-direction: row; + align-content: center; +} + +.version-control>img { + margin: 5px; +} + +.version-control>div{ + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + height: 100%; } \ No newline at end of file diff --git a/client/src/controls/contextmenu.ts b/client/src/controls/contextmenu.ts deleted file mode 100644 index ab51f0bd..00000000 --- a/client/src/controls/contextmenu.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { getActiveCoalition, setActiveCoalition } from ".."; -import { ContextMenuOption } from "../@types/dom"; - -export class ContextMenu { - #container: HTMLElement | null; - - constructor(id: string,) { - this.#container = document.getElementById(id); - this.#container?.querySelector("#switch")?.addEventListener('change', (e) => this.#onSwitch(e)) - this.hide(); - } - - show(x: number, y: number, title: string, options: ContextMenuOption[], showCoalition: boolean) { - this.#container?.classList.toggle("hide", false); - - this.#container?.querySelector("#list")?.replaceChildren(...options.map((option: ContextMenuOption) => { - var li = document.createElement("li"); - var button = document.createElement("button"); - button.textContent = option.tooltip; - li.appendChild(button); - button.addEventListener("click", (e: MouseEvent) => option.callback((e.target as HTMLButtonElement).innerText)); - return button; - })); - - this.#container?.querySelector("#switch")?.classList.toggle("hide", !showCoalition); - - if (this.#container != null && options.length >= 1) { - var titleDiv = this.#container.querySelector("#title"); - if (titleDiv) - titleDiv.textContent = title; - - if (x - this.#container.offsetWidth / 2 + this.#container.offsetWidth < window.innerWidth) - this.#container.style.left = x - this.#container.offsetWidth / 2 + "px"; - else - this.#container.style.left = window.innerWidth - this.#container.offsetWidth + "px"; - - if (y - 20 + this.#container.offsetHeight < window.innerHeight) - this.#container.style.top = y - 20 + "px"; - else - this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px"; - } - } - - hide() { - this.#container?.classList.toggle("hide", true); - } - - #onSwitch(e: any) { - if (this.#container != null) { - if (e.currentTarget.checked) - setActiveCoalition("red"); - else - setActiveCoalition("blue"); - } - } -} \ No newline at end of file diff --git a/client/src/controls/slider.ts b/client/src/controls/slider.ts deleted file mode 100644 index b1564e9a..00000000 --- a/client/src/controls/slider.ts +++ /dev/null @@ -1,83 +0,0 @@ -export class Slider { - #container: HTMLElement | null; - #callback: CallableFunction; - #slider: HTMLInputElement | null = null; - #value: HTMLElement | null = null; - #minValue: number; - #maxValue: number; - #minValueDiv: HTMLElement | null = null; - #maxValueDiv: HTMLElement | null = null; - #unit: string; - #display: string = ""; - - constructor(ID: string, minValue: number, maxValue: number, unit: string, callback: CallableFunction) { - this.#container = document.getElementById(ID); - this.#callback = callback; - this.#minValue = minValue; - this.#maxValue = maxValue; - this.#unit = unit; - if (this.#container != null) { - this.#display = this.#container.style.display; - this.#slider = this.#container.querySelector("input"); - if (this.#slider != null) - { - this.#slider.addEventListener("input", (e: any) => this.#onInput()); - this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize()); - } - this.#value = this.#container.querySelector("#value"); - } - } - - #onValue() - { - if (this.#value != null && this.#slider != null) - this.#value.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)) + this.#unit - this.setActive(true); - } - - #onInput() - { - this.#onValue(); - } - - #onFinalize() - { - if (this.#slider != null) - this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)); - } - - show() - { - if (this.#container != null) - this.#container.style.display = this.#display; - } - - hide() - { - if (this.#container != null) - this.#container.style.display = 'none'; - } - - setActive(newActive: boolean) - { - if (this.#container) - { - this.#container.classList.toggle("active", newActive); - if (!newActive && this.#value != null) - this.#value.innerText = "Mixed values"; - } - } - - setMinMax(newMinValue: number, newMaxValue: number) - { - this.#minValue = newMinValue; - this.#maxValue = newMaxValue; - } - - setValue(newValue: number) - { - if (this.#slider != null) - this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100); - this.#onValue() - } -} \ No newline at end of file diff --git a/client/views/settings.ejs b/client/views/settings.ejs index 8c64112d..28de450d 100644 --- a/client/views/settings.ejs +++ b/client/views/settings.ejs @@ -1,5 +1,27 @@
- +