Fix double-gap if control-switch is hidden and hide controls-group in the settings menu as well

Author: TBlueF

common/webapp/src/components/ControlBar/ControlBar.vue

@@ -45,8 +45,8 @@
     <div class="space thin-hide greedy"></div>
     <DayNightSwitch v-if="showMapMenu" class="thin-hide" :title="$t('lighting.dayNightSwitch.tooltip')" />
     <div class="space thin-hide"></div>
-    <ControlsSwitch v-if="showMapMenu" class="thin-hide"></ControlsSwitch>
-    <div class="space thin-hide"></div>
+    <ControlsSwitch v-if="showMapMenu && showViewControls" class="thin-hide"></ControlsSwitch>
+    <div class="space thin-hide" v-if ="showViewControls"></div>
     <SvgButton v-if="showMapMenu" class="thin-hide" :title="$t('resetCamera.tooltip')" @action="$bluemap.resetCamera()">
       <svg viewBox="0 0 30 30">
         <rect x="7.085" y="4.341" transform="matrix(0.9774 0.2116 -0.2116 0.9774 3.2046 -1.394)" width="2.063" height="19.875"/>
@@ -102,6 +102,10 @@
       showMapMenu() {
         return this.mapViewer.mapState === "loading" || this.mapViewer.mapState === "loaded";
       },
+      showViewControls() {
+        if (!this.mapViewer.map) return false;
+        return this.mapViewer.map.views.length > 1;
+      },
       showMarkerMenu() {
         return this.hasMarkers(this.markers)
       }

common/webapp/src/components/ControlBar/ControlsSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="controls-switch" v-if="showViewControls">
+  <div class="controls-switch">
     <SvgButton v-if="mapViewer.map.perspectiveView" :active="isPerspectiveView" @action="setPerspectiveView" :title="$t('controls.perspective.tooltip')">
       <svg viewBox="0 0 30 30">
         <path d="M19.475,10.574c-0.166-0.021-0.337-0.036-0.51-0.045c-0.174-0.009-0.35-0.013-0.525-0.011
@@ -52,10 +52,6 @@
       },
       isFreeFlight() {
         return this.controls.state === "free";
-      },
-      showViewControls() {
-        if (!this.mapViewer.map) return 0;
-        return this.mapViewer.map.views.length > 1;
       }
     },
     methods: {

common/webapp/src/components/Menu/SettingsMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Group :title="$t('controls.title')">
+    <Group v-if="showViewControls" :title="$t('controls.title')" >
       <SimpleButton v-if="mapViewer.map.perspectiveView" :active="appState.controls.state === 'perspective'" @action="$bluemap.setPerspectiveView(500, appState.controls.state === 'free' ? 100 : 0)">{{$t('controls.perspective.button')}}</SimpleButton>
       <SimpleButton v-if="mapViewer.map.flatView" :active="appState.controls.state === 'flat'" @action="$bluemap.setFlatView(500, appState.controls.state === 'free' ? 100 : 0)">{{$t('controls.flatView.button')}}</SimpleButton>
       <SimpleButton v-if="mapViewer.map.freeFlightView" :active="appState.controls.state === 'free'" @action="$bluemap.setFreeFlight(500)">{{$t('controls.freeFlight.button')}}</SimpleButton>
@@ -106,6 +106,12 @@ name: "SettingsMenu",
       themes: themes,
     }
   },
+  computed: {
+    showViewControls() {
+      if (!this.mapViewer.map) return false;
+      return this.mapViewer.map.views.length > 1;
+    }
+  },
   methods: {
     switchChunkBorders() {
       this.$bluemap.setChunkBorders(!this.mapViewer.uniforms.chunkBorders.value);