diff --git a/BlueMapAPI b/BlueMapAPI index 2a3cc1c2..812e4b8f 160000 --- a/BlueMapAPI +++ b/BlueMapAPI @@ -1 +1 @@ -Subproject commit 2a3cc1c2709bb13021db9c8064715d569db40ca3 +Subproject commit 812e4b8fce15796c5d67c5f0ff8121a6d7e7657b diff --git a/BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue b/BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue index bd40d988..51767796 100644 --- a/BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue +++ b/BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue @@ -31,7 +31,7 @@ export default { .choice-box { display: flex; - font-size: 0.8rem; + font-size: 0.8em; text-align: center; //margin-bottom: 0.5em; diff --git a/BlueMapCommon/webapp/src/components/Menu/MarkerItem.vue b/BlueMapCommon/webapp/src/components/Menu/MarkerItem.vue index 24c53ad1..12e88300 100644 --- a/BlueMapCommon/webapp/src/components/Menu/MarkerItem.vue +++ b/BlueMapCommon/webapp/src/components/Menu/MarkerItem.vue @@ -105,18 +105,21 @@ export default { .side-menu .marker-item { display: flex; + white-space: nowrap; + user-select: none; + + line-height: 1em; margin: 0.5em 0; + &:first-child { margin-top: 0; } + &:last-child { margin-bottom: 0; } - white-space: nowrap; - user-select: none; - &.marker-hidden { opacity: 0.5; filter: grayscale(1); @@ -132,27 +135,18 @@ export default { } > .info { - position: relative; flex-grow: 1; - overflow-x: hidden; text-overflow: ellipsis; + padding: 0.5em; + .label { - line-height: 2em; - overflow-x: hidden; text-overflow: ellipsis; - margin: 0 0.5em 1.5em 0.5em; } .stats { display: flex; - margin: 0 0.5em; - - position: absolute; - bottom: 0; - font-size: 0.8em; - line-height: 2em; color: var(--theme-fg-light); > div { diff --git a/BlueMapCommon/webapp/src/components/Menu/MarkerSet.vue b/BlueMapCommon/webapp/src/components/Menu/MarkerSet.vue index 3c41eee0..82fd0435 100644 --- a/BlueMapCommon/webapp/src/components/Menu/MarkerSet.vue +++ b/BlueMapCommon/webapp/src/components/Menu/MarkerSet.vue @@ -6,17 +6,19 @@
-
+
{{ markerSet.markers.length }} {{ $t('markers.marker', markerSet.markers.length) }}
-
- {{ filteredMarkerSets.length }} - {{ $t('markers.markerSet', filteredMarkerSets.length) }} +
+ {{ filteredMarkerSetCount }} + {{ $t('markers.markerSet', filteredMarkerSetCount) }}
-
+
@@ -37,14 +39,25 @@ export default { markerSet: Object, }, computed: { - filteredMarkerSets() { - return this.markerSet.markerSets.filter(markerSet => { - return (markerSet.id !== "bm-popup-set"); - }); + filteredMarkerSetCount() { + let count = 0; + for (let markerSet of this.markerSet.markerSets) { + if (markerSet.listed) count++; + } + return count; }, label() { if (this.markerSet.id === "bm-players") return this.$t("players.title"); return this.markerSet.label; + }, + active() { + for (let marker of this.markerSet.markers) { + if (marker.listed) return true; + } + for (let markerSet of this.markerSet.markerSets) { + if (markerSet.listed) return true; + } + return false; } }, methods: { @@ -53,6 +66,11 @@ export default { // eslint-disable-next-line vue/no-mutating-props this.markerSet.visible = !this.markerSet.visible } + }, + more(event) { + if (this.active) { + this.$emit('more', event); + } } } } @@ -63,7 +81,7 @@ export default { display: flex; user-select: none; - line-height: 2em; + line-height: 1em; margin: 0.5em 0; @@ -79,6 +97,8 @@ export default { flex-grow: 1; cursor: pointer; + padding: 0.5em; + &:hover { background-color: var(--theme-bg-hover); } @@ -87,23 +107,19 @@ export default { position: relative; .label { - margin: 0 3em 0 0.5em; + margin: 0 2.5em 0 0; } > .switch { position: absolute; - top: 0.5em; - right: 0.5em; + top: 0; + right: 0; } } > .stats { display: flex; - - margin: 0 0.5em; - font-size: 0.8em; - line-height: 2em; color: var(--theme-fg-light); > div { @@ -118,36 +134,45 @@ export default { > .open-menu-button { width: 2em; - cursor: pointer; - &:hover { - background-color: var(--theme-bg-hover); - } + &.active { + cursor: pointer; - > svg { - position: relative; - fill: var(--theme-fg-light); - - top: 50%; - transform: translate(0, -50%) scale(0.75); - - path:nth-child(1) { - transform-origin: 15px 9px; - transform: translate(0, 10px) rotate(-30deg); + &:hover { + background-color: var(--theme-bg-hover); } - path:nth-child(2) { - transform-origin: 15px 21px; - transform: translate(0, -10px) rotate(30deg); - } - } - - &:active { - background-color: var(--theme-fg-light); - color: var(--theme-bg); - > svg { - fill: var(--theme-bg-light); + position: relative; + fill: var(--theme-fg-light); + + top: 50%; + transform: translate(0, -50%) scale(0.75); + + path:nth-child(1) { + transform-origin: 15px 9px; + transform: translate(0, 10px) rotate(-30deg); + } + + path:nth-child(2) { + transform-origin: 15px 21px; + transform: translate(0, -10px) rotate(30deg); + } + } + + &:active { + background-color: var(--theme-fg-light); + color: var(--theme-bg); + + > svg { + fill: var(--theme-bg-light); + } + } + } + + &:not(.active) { + svg { + display: none; } } } diff --git a/BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue b/BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue index 5b6a1b36..6bc59b6b 100644 --- a/BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue +++ b/BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue @@ -50,7 +50,8 @@ export default { return this.menu.currentPage().markerSet; }, filteredMarkers() { - return [...this.thisMarkerSet.markers].filter(marker => { + return this.thisMarkerSet.markers.filter(marker => { + if (!marker.listed) return false; if (!this.filter.search) return true; if (marker.id.includesCI(this.filter.search)) return true; if (marker.label && marker.label.includesCI(this.filter.search)) return true; @@ -69,7 +70,7 @@ export default { }, filteredMarkerSets() { return this.thisMarkerSet.markerSets.filter(markerSet => { - return (markerSet.id !== "bm-popup-set"); + return markerSet.listed; }).sort((a, b) => { return (a.sorting || 0) - (b.sorting || 0); }); diff --git a/BlueMapCommon/webapp/src/js/BlueMapApp.js b/BlueMapCommon/webapp/src/js/BlueMapApp.js index 31f1ea27..0075e0f3 100644 --- a/BlueMapCommon/webapp/src/js/BlueMapApp.js +++ b/BlueMapCommon/webapp/src/js/BlueMapApp.js @@ -113,6 +113,7 @@ export class BlueMapApp { // popup on click this.popupMarkerSet = new MarkerSet("bm-popup-set"); + this.popupMarkerSet.data.toggleable = false; this.popupMarker = new PopupMarker("bm-popup", this.appState, this.events); this.popupMarkerSet.add(this.popupMarker); this.mapViewer.markers.add(this.popupMarkerSet); diff --git a/BlueMapCommon/webapp/src/js/PopupMarker.js b/BlueMapCommon/webapp/src/js/PopupMarker.js index 34aa0cb5..fc50d3cb 100644 --- a/BlueMapCommon/webapp/src/js/PopupMarker.js +++ b/BlueMapCommon/webapp/src/js/PopupMarker.js @@ -35,6 +35,7 @@ export class PopupMarker extends Marker { this.data.type = "popup"; this.data.label = "Last Map Interaction"; + this.data.listed = false; this.appState = appState; this.events = events; diff --git a/BlueMapCommon/webapp/src/js/markers/HtmlMarker.js b/BlueMapCommon/webapp/src/js/markers/HtmlMarker.js index 68fa289c..2fc03074 100644 --- a/BlueMapCommon/webapp/src/js/markers/HtmlMarker.js +++ b/BlueMapCommon/webapp/src/js/markers/HtmlMarker.js @@ -94,6 +94,7 @@ export class HtmlMarker extends Marker { * position: {x: number, y: number, z: number}, * label: string, * sorting: number, + * listed: boolean, * anchor: {x: number, y: number}, * html: string, * classes: string[], @@ -119,6 +120,11 @@ export class HtmlMarker extends Marker { this.data.sorting = markerData.sorting || 0; } + //update listed + if (this.data.listed !== markerData.listed) { + this.data.listed = markerData.listed === undefined ? true : markerData.listed; + } + // update anchor let anch = markerData.anchor || {}; this.anchor.setX(anch.x || 0); diff --git a/BlueMapCommon/webapp/src/js/markers/Marker.js b/BlueMapCommon/webapp/src/js/markers/Marker.js index b6c47c67..2ee07ce3 100644 --- a/BlueMapCommon/webapp/src/js/markers/Marker.js +++ b/BlueMapCommon/webapp/src/js/markers/Marker.js @@ -38,6 +38,7 @@ export class Marker extends Object3D { id: markerId, type: "marker", sorting: 0, + listed: true, position: this.position, visible: this.visible }); diff --git a/BlueMapCommon/webapp/src/js/markers/MarkerSet.js b/BlueMapCommon/webapp/src/js/markers/MarkerSet.js index 53fd829a..f3aecf8b 100644 --- a/BlueMapCommon/webapp/src/js/markers/MarkerSet.js +++ b/BlueMapCommon/webapp/src/js/markers/MarkerSet.js @@ -54,6 +54,11 @@ export class MarkerSet extends Scene { markerSets: [], markers: [], visible: this.visible, + get listed() { + return this.toggleable || + this.markers.filter(marker => marker.listed).length > 0 || + this.markerSets.filter(markerSet => markerSet.listed).length > 0 + } }); Object.defineProperty(this, "visible", { diff --git a/BlueMapCommon/webapp/src/js/markers/ObjectMarker.js b/BlueMapCommon/webapp/src/js/markers/ObjectMarker.js index 858340bc..81164efe 100644 --- a/BlueMapCommon/webapp/src/js/markers/ObjectMarker.js +++ b/BlueMapCommon/webapp/src/js/markers/ObjectMarker.js @@ -74,6 +74,7 @@ export class ObjectMarker extends Marker { * label: string, * detail: string, * sorting: number, + * listed: boolean, * link: string, * newTab: boolean * }} @@ -95,6 +96,9 @@ export class ObjectMarker extends Marker { //update sorting this.data.sorting = markerData.sorting || 0; + //update listed + this.data.listed = markerData.listed === undefined ? true : markerData.listed; + // update link this.data.link = markerData.link || null; this.data.newTab = !!markerData.newTab; diff --git a/BlueMapCommon/webapp/src/js/markers/PlayerMarkerManager.js b/BlueMapCommon/webapp/src/js/markers/PlayerMarkerManager.js index b5bc5a39..84dbcbd1 100644 --- a/BlueMapCommon/webapp/src/js/markers/PlayerMarkerManager.js +++ b/BlueMapCommon/webapp/src/js/markers/PlayerMarkerManager.js @@ -49,7 +49,8 @@ export class PlayerMarkerManager extends MarkerManager { * @returns {boolean} */ updateFromData(markerFileData) { - let playerMarkerSet = this.getPlayerMarkerSet(); + let playerMarkerSet = this.getPlayerMarkerSet(Array.isArray(markerFileData.players)); + if (!playerMarkerSet) return false; return playerMarkerSet.updateFromPlayerData(markerFileData); } @@ -57,11 +58,11 @@ export class PlayerMarkerManager extends MarkerManager { * @private * @returns {PlayerMarkerSet} */ - getPlayerMarkerSet() { + getPlayerMarkerSet(create = true) { /** @type {PlayerMarkerSet} */ let playerMarkerSet = /** @type {PlayerMarkerSet} */ this.root.markerSets.get(PLAYER_MARKER_SET_ID); - if (!playerMarkerSet) { + if (!playerMarkerSet && create) { playerMarkerSet = new PlayerMarkerSet(PLAYER_MARKER_SET_ID, this.playerheadsUrl); this.root.add(playerMarkerSet); } diff --git a/BlueMapCommon/webapp/src/js/markers/PoiMarker.js b/BlueMapCommon/webapp/src/js/markers/PoiMarker.js index a73fca07..d845e0e0 100644 --- a/BlueMapCommon/webapp/src/js/markers/PoiMarker.js +++ b/BlueMapCommon/webapp/src/js/markers/PoiMarker.js @@ -91,6 +91,7 @@ export class PoiMarker extends HtmlMarker { * label: string, * detail: string, * sorting: number, + * listed: boolean, * icon: string, * classes: string[], * minDistance: number, @@ -122,6 +123,11 @@ export class PoiMarker extends HtmlMarker { this.data.sorting = markerData.sorting || 0; } + //update listed + if (this.data.listed !== markerData.listed) { + this.data.listed = markerData.listed === undefined ? true : markerData.listed; + } + // update detail if (this.data.detail !== markerData.detail){ this.data.detail = markerData.detail || this.data.label;