💄 [feat/perf] correct style on the embedded map

Signed-off-by: JAGFx <contact@jagfx.fr>
JAGFx · Aug 28, 2021 · b5aa571 · b5aa571
1 parent dfd90a3
commit b5aa571
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 67 deletions.
diff --git a/src/assets/scss/dashboard/shared/_map.scss b/src/assets/scss/dashboard/shared/_map.scss
@@ -30,6 +30,14 @@
 			width: 100%;
 			background: $cBlack;
 
+			&.embedded{
+				justify-content: flex-end;
+				.barZone{
+					width: auto;
+					&.embedded{ width: 100%; }
+				}
+			}
+
 			.barZone {
 				width: 100%;
 				display: flex;

diff --git a/src/components/dashboards/shared/Map.vue b/src/components/dashboards/shared/Map.vue
@@ -38,8 +38,14 @@
       class="w-100 h-100"
     />
 
-    <div class="barControls">
-      <div class="barZone justify-content-end">
+    <div
+      class="barControls"
+      :class="{'embedded': embedded }"
+    >
+      <div
+        class="barZone justify-content-end"
+        :class="{'embedded': embedded }"
+      >
         <div
           v-if="!embedded"
           class="barButton mr-auto h-100 menuRoute"
@@ -50,10 +56,7 @@
             <i class="icon-route" />
           </div>
         </div>
-        <div
-          v-if="!embedded"
-          class="barButton disabled w-100 h-100"
-        />
+        <div class="barButton disabled w-100 h-100" />
         <div
           class="barButton m-0 flex-row-reverse h-100 cruise-control"
           :class="{
@@ -197,23 +200,23 @@
           <th>Date</th>
           <td>{{ mapInfo().game.generatedAt }}</td>
         </tr>
-        <tr>
+        <tr v-if="configEnabled('maps_general_debug')">
           <th>Pos</th>
           <td>X: {{ telemetry.truck.position.X.toFixed( 3 ) }} | Y: {{ telemetry.truck.position.Y.toFixed( 3 ) }}</td>
         </tr>
-        <tr>
+        <tr v-if="configEnabled('maps_general_debug')">
           <th>Ready</th>
           <td>{{ ready }}</td>
         </tr>
-        <tr>
+        <tr v-if="configEnabled('maps_general_debug')">
           <th>Last pos</th>
           <td>{{ m.lastPos }}</td>
         </tr>
-        <tr>
+        <tr v-if="configEnabled('maps_general_debug')">
           <th>Map ready</th>
           <td>{{ m.ready }}</td>
         </tr>
-        <tr>
+        <tr v-if="configEnabled('maps_general_debug')">
           <th>Tiles</th>
           <td>{{ m.paths.base }}</td>
         </tr>

diff --git a/src/components/menu/config-categories/ConfigCategoryMap.vue b/src/components/menu/config-categories/ConfigCategoryMap.vue
@@ -1,62 +1,77 @@
 <template>
   <div>
     <div class="fields mb-4">
-      <h4>Elements</h4>
+      <div class="mb-4">
+        <h4>General</h4>
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_general_debug',
+            label: 'Enable debug information',
+            disabled: false,
+            description: 'Display some debug information',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+      </div>
 
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_elements_eta',
-          label: 'ETA information',
-          disabled: false,
-          description: 'Display the remaining or ETA time and the current remaining distance to the destination',
-          values: fieldValues( 'on_off' )
-        }"
-      />
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_elements_speedAndGear',
-          label: 'Speed and gear',
-          disabled: false,
-          description: 'Display the current speed and gear',
-          values: fieldValues( 'on_off' )
-        }"
-      />
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_elements_mapControls',
-          label: 'Map controls',
-          disabled: false,
-          description: 'Display map controls (Recenter, focus on user, zoom in and zoom out)',
-          values: fieldValues( 'on_off' )
-        }"
-      />
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_elements_speedLimit',
-          label: 'Speed limit',
-          disabled: false,
-          description: 'Display current speed limit',
-          values: fieldValues( 'on_off' )
-        }"
-      />
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_elements_rotateWithPlayer',
-          label: 'Map rotation',
-          disabled: !configEnabled( 'maps_elements_mapControls' ),
-          description: 'Enable or disable the map rotation on the first load',
-          values: fieldValues( 'on_off' )
-        }"
-      />
-      <ConfigFieldChoice
-        v-bind="{
-          id: 'maps_map_navigationRemaining',
-          label: 'Navigation ETA',
-          disabled: !configEnabled( 'maps_elements_eta' ),
-          description: 'Display the due date or the remaining time for the current route',
-          values: fieldValues( 'maps_map_navigationRemaining' )
-        }"
-      />
+      <div class="mb-4">
+        <h4>Elements</h4>
+
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_elements_eta',
+            label: 'ETA information',
+            disabled: false,
+            description: 'Display the remaining or ETA time and the current remaining distance to the destination',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_elements_speedAndGear',
+            label: 'Speed and gear',
+            disabled: false,
+            description: 'Display the current speed and gear',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_elements_mapControls',
+            label: 'Map controls',
+            disabled: false,
+            description: 'Display map controls (Recenter, focus on user, zoom in and zoom out)',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_elements_speedLimit',
+            label: 'Speed limit',
+            disabled: false,
+            description: 'Display current speed limit',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_elements_rotateWithPlayer',
+            label: 'Map rotation',
+            disabled: !configEnabled( 'maps_elements_mapControls' ),
+            description: 'Enable or disable the map rotation on the first load',
+            values: fieldValues( 'on_off' )
+          }"
+        />
+        <ConfigFieldChoice
+          v-bind="{
+            id: 'maps_map_navigationRemaining',
+            label: 'Navigation ETA',
+            disabled: !configEnabled( 'maps_elements_eta' ),
+            description: 'Display the due date or the remaining time for the current route',
+            values: fieldValues( 'maps_map_navigationRemaining' )
+          }"
+        />
+      </div>
     </div>
     <div class="fields mb-4">
       <h4>Tiles</h4>

diff --git a/src/data/ets2-dashboard-skin.config.json b/src/data/ets2-dashboard-skin.config.json
@@ -67,5 +67,6 @@
 	"general_damage_accurate" :       "damage-diagnostic",
 	"jagfx_elements_right_map" :      true,
 	"maps_map_tilesRemoteUseCustom": false,
-	"maps_map_tilesRemoteCustomPath": null
+	"maps_map_tilesRemoteCustomPath": null,
+	"maps_general_debug": false
 }