Upstream
/
BlueMap
mirror of https://github.com/BlueMap-Minecraft/BlueMap.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement unlisting markers and improve marker-list styling

This commit is contained in:
Lukas Rieger (Blue) 2023-02-07 19:43:59 +01:00
parent 6ea755d366
commit 87c868b1a9
No known key found for this signature in database
GPG Key ID: 2D09EC5ED2687FF2
13 changed files with 108 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BlueMapAPI

@ -1 +1 @@
Subproject commit 2a3cc1c2709bb13021db9c8064715d569db40ca3
Subproject commit 812e4b8fce15796c5d67c5f0ff8121a6d7e7657b

2
BlueMapCommon/webapp/src/components/Menu/ChoiceBox.vue
View File

@ -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;

22
BlueMapCommon/webapp/src/components/Menu/MarkerItem.vue
View File

@ -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 {

109
BlueMapCommon/webapp/src/components/Menu/MarkerSet.vue
View File

@ -6,17 +6,19 @@
<SwitchHandle :on="markerSet.visible" v-if="markerSet.toggleable"/>
</div>
<div class="stats">
<div>
<div v-if="markerSet.markers.length > 0">
{{ markerSet.markers.length }}
{{ $t('markers.marker', markerSet.markers.length) }}
</div>
<div v-if="filteredMarkerSets.length > 0">
{{ filteredMarkerSets.length }}
{{ $t('markers.markerSet', filteredMarkerSets.length) }}
<div v-if="filteredMarkerSetCount > 0">
{{ filteredMarkerSetCount }}
{{ $t('markers.markerSet', filteredMarkerSetCount) }}
</div>
</div>
</div>
<div class="open-menu-button" @click="$emit('more', $event)">
<div class="open-menu-button"
:class="{active: active}"
@click="more($event)">
<svg viewBox="0 0 30 30">
<path d="M25.004,9.294c0,0.806-0.75,1.46-1.676,1.46H6.671c-0.925,0-1.674-0.654-1.674-1.46l0,0
c0-0.807,0.749-1.461,1.674-1.461h16.657C24.254,7.833,25.004,8.487,25.004,9.294L25.004,9.294z"/>
@ -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;
}
}
}

5
BlueMapCommon/webapp/src/components/Menu/MarkerSetMenu.vue
View File

@ -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);
});

1
BlueMapCommon/webapp/src/js/BlueMapApp.js
View File

@ -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);

1
BlueMapCommon/webapp/src/js/PopupMarker.js
View File

@ -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;

6
BlueMapCommon/webapp/src/js/markers/HtmlMarker.js
View File

@ -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);

1
BlueMapCommon/webapp/src/js/markers/Marker.js
View File

@ -38,6 +38,7 @@ export class Marker extends Object3D {
id: markerId,
type: "marker",
sorting: 0,
listed: true,
position: this.position,
visible: this.visible
});

5
BlueMapCommon/webapp/src/js/markers/MarkerSet.js
View File

@ -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", {

4
BlueMapCommon/webapp/src/js/markers/ObjectMarker.js
View File

@ -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;

7
BlueMapCommon/webapp/src/js/markers/PlayerMarkerManager.js
View File

@ -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);
}

6
BlueMapCommon/webapp/src/js/markers/PoiMarker.js
View File

@ -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;