✨ [dash/map] reskin of map

Signed-off-by: JAGFx <contact@jagfx.fr>
JAGFx · Aug 11, 2021 · df8baea · df8baea · JAGFx · Aug 12, 2021
1 parent e3932c2
commit df8baea
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 39 deletions.
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -15,6 +15,7 @@
 // --- Color
 
 $cBlack: #002b36;
+$cBlack2:  #272727;
 $cBlackTransparentMid: lighten($cBlack, 0.5);
 $cBlackTransparentHigh: lighten($cBlack, 3%);
 $cWhite: #eee8d5;

diff --git a/src/assets/scss/dashboard/shared/_map.scss b/src/assets/scss/dashboard/shared/_map.scss
@@ -21,6 +21,71 @@
 			background: $cBlackTransparentMid;
 		}
 
+		.barControls{
+			display: flex;
+			justify-content: center;
+			align-content: center;
+			position: absolute;
+			bottom: 0px;
+			width: 100%;
+			background: $cBlack;
+
+			.barZone {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				&.spacer {
+					width: 27rem;
+					background: $cBlackTransparentHigh;
+				}
+
+				.barButton{
+					background: $cBlackTransparentHigh;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					outline: 0;
+					font-size: 1.1rem;
+
+					border-bottom: 2px solid $cRed;
+
+					min-width: auto !important;
+
+					.round > i { padding-top: .3rem; display: block; }
+
+					&.blue {
+						color: $cBlue;
+						border-color: $cBlue;
+					}
+
+					&.orange {
+						color: $cOrange;
+						border-color: $cOrange;
+					}
+
+					&.green {
+						color: $cGreen;
+						border-color: $cGreen;
+					}
+
+					&.default, &.white {
+						color: $cWhiteGray;
+						border-color: $cRed;
+					}
+
+					&.disabled {
+						color: $cGray;
+						border-color: $cGray;
+					}
+
+					&.fuel { min-width: 5rem !important; }
+					&.cruise-control { min-width: 8rem !important; }
+				}
+			}
+		}
+
 		#controls-wrapper, .ol-zoom, .eta-wrapper, #speed-area {
 			display:         flex;
 			justify-content: center;
@@ -82,6 +147,7 @@
 			height:   auto;
 			width:    auto;
 			z-index:  2;
+			margin-bottom: 2rem;
 
 			button, .button {
 				font-size:     1.4rem;
@@ -91,7 +157,6 @@
 
 			.ol-zoom {
 				display: block;
-				//flex-direction: column;
 				height:  100%;
 
 				.ol-zoom-in, .ol-zoom-out {
@@ -107,6 +172,7 @@
 			left:     0;
 			width:    auto;
 			bottom:   0;
+			margin-bottom: 2rem;
 
 			.button {
 				width:         auto;
@@ -201,6 +267,8 @@
 			height:   auto;
 
 			.button {
+				background: $cBlack;
+				border-top: 2px solid $cRed;
 				height:  auto;
 				width:   auto;
 				padding: .3rem;
@@ -231,13 +299,13 @@
 			&:before {
 				content:     " ";
 				position:    relative;
-				bottom:      -1px;
+				bottom:      0;
 				width:       2rem;
 				height:      3rem;
 				padding:     .3rem;
-				left:        -0.1rem;
-				background:  $cBlackTransparentMid;
-				border-left: 1px solid $cRed;
+				left:        0;
+				background:  $cBlack;
+				border-left: 2px solid $cRed;
 				border-top:  2px solid $cRed;
 				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
 				@include prefixer(transform, skew(-30deg, 0deg), ("webkit", "moz", "o"));
@@ -246,13 +314,13 @@
 			&:after {
 				content:      " ";
 				position:     relative;
-				bottom:       -1px;
+				bottom:       0;
 				width:        2rem;
 				height:       3rem;
 				padding:      .3rem;
-				right:        -0.1rem;
-				background:   $cBlackTransparentMid;
-				border-right: 1px solid $cRed;
+				right:        0;
+				background:   $cBlack;
+				border-right: 2px solid $cRed;
 				border-top:   2px solid $cRed;
 				@include prefixer(transform-origin, bottom left, ("webkit", "moz", "o"));
 				@include prefixer(transform, skew(30deg, 0deg), ("webkit", "moz", "o"));

diff --git a/src/components/dashboards/shared/Map.vue b/src/components/dashboards/shared/Map.vue
@@ -38,6 +38,80 @@
       class="w-100 h-100"
     />
 
+    <div class="barControls">
+      <div class="barZone justify-content-end">
+        <div
+          class="barButton mr-auto h-100"
+          :class="{ disabled: !$haveAnActiveNavigation() || !displayNavigationInfo }"
+          @click="displayNavigationInfo = !displayNavigationInfo"
+        >
+          <div class="round px-2 py-0">
+            <i class="fas fa-route" />
+          </div>
+        </div>
+        <div class="barButton disabled w-100 h-100" />
+        <div
+          class="barButton m-0 flex-row-reverse h-100 cruise-control"
+          :class="{
+            'green' : telemetry.truck.cruiseControl.enabled,
+            'disabled' : !telemetry.truck.cruiseControl.enabled
+          }"
+        >
+          <div class="round px-2 py-0">
+            <i class="icon-cruise_control" />
+          </div>
+          <span
+            v-if="!telemetry.truck.cruiseControl.enabled"
+            class="pl-2"
+          >OFF</span>
+          <span
+            v-else
+            class="pl-2"
+          >{{ unit_speed( telemetry.truck.cruiseControl ) }}</span>
+        </div>
+      </div>
+      <div class="barZone spacer" />
+      <div
+        id="speed-area"
+      >
+        <div class="d-flex justify-content-center align-items-center bottom button">
+          <div class="speed">
+            <span class="value d-block">{{ unit_speed( telemetry.truck.speed, true, false ) | $toFixed( 0 ) }}</span>
+          </div>
+
+          <div
+            :class="telemetry.truck.transmission.shifterType"
+            class="truck-gear ml-2"
+          >
+            {{ $trukGear( telemetry.truck.transmission, telemetry.truck.brand ) }}
+          </div>
+        </div>
+      </div>
+      <div class="barZone justify-content-start">
+        <div
+          class="barButton m-0 blue h-100 fuel"
+          :class="{
+            'orange': telemetry.truck.fuel.warning.enabled
+          }"
+        >
+          <div class="round px-2 py-0">
+            <i class="icon-fuel" />
+          </div>
+          <span class="pr-2">{{ unit_volume( telemetry.truck.fuel.value ) }}</span>
+        </div>
+        <div class="barButton disabled w-100 h-100" />
+        <div
+          class="barButton ml-auto h-100"
+          :class="{ disabled: !displayControls }"
+          @click="displayControls = !displayControls"
+        >
+          <div class="round px-2 py-0">
+            <i class="fas fa-cog" />
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Speed limit -->
     <div
       v-if="$haveAnActiveSpeedLimit() && configEnabled('maps_elements_speedLimit') && showSpeedLimit"
@@ -50,7 +124,7 @@
 
     <!-- Control map buttons -->
     <div
-      v-if="configEnabled('maps_elements_mapControls') && showControls"
+      v-show="displayControls"
       id="controls-wrapper"
       class="left h-100 flex-column justify-content-end"
     >
@@ -112,29 +186,11 @@
     <!-- ./Map info overlay -->
 
     <!-- Speed area-->
-    <div
-      v-if="configEnabled('maps_elements_speedAndGear') && showSpeed"
-      id="speed-area"
-      class="top button"
-    >
-      <div class="d-flex justify-content-center align-items-center bottom button">
-        <div class="speed">
-          <span class="value d-block">{{ unit_speed( telemetry.truck.speed, true, false ) | $toFixed( 0 ) }}</span>
-        </div>
-
-        <div
-          :class="telemetry.truck.transmission.shifterType"
-          class="truck-gear ml-2"
-        >
-          {{ $trukGear( telemetry.truck.transmission, telemetry.truck.brand ) }}
-        </div>
-      </div>
-    </div>
     <!-- ./Speed area -->
 
     <!-- Navigation ETA -->
     <div
-      v-if="$haveAnActiveNavigation() && configEnabled('maps_elements_eta') && showNavigationEta"
+      v-if="$haveAnActiveNavigation() && displayNavigationInfo"
       class="eta-wrapper d-flex justify-content-end align-items-start flex-column"
     >
       <span
@@ -197,6 +253,8 @@ export default {
   },
   data() {
     return {
+      displayControls: this.$store.getters['config/enabled']( 'maps_elements_mapControls' ),
+      displayNavigationInfo: this.$store.getters['config/enabled']( 'maps_elements_eta' ),
       displayMapInfo:   false,
       rotateWithPlayer: map.d.gBehaviorRotateWithPlayer,
       ready:            false,

diff --git a/src/components/menu/config-categories/ConfigCategoryEvents.vue b/src/components/menu/config-categories/ConfigCategoryEvents.vue
@@ -86,15 +86,6 @@
         values: fieldValues( 'on_off' )
       }"
     />
-    <ConfigFieldChoice
-      v-bind="{
-        id: 'events_job.finished',
-        label: 'Job finished',
-        disabled: false,
-        description: 'Show a pop-up when a job was finished',
-        values: fieldValues( 'on_off' )
-      }"
-    />
     <ConfigFieldChoice
       v-bind="{
         id: 'events_job.started',

diff --git a/src/data/ets2-dashboard-skin.config.json b/src/data/ets2-dashboard-skin.config.json
@@ -1,7 +1,7 @@
 {
 	"general_region" :                         "eu",
 	"general_refresh_rate" :                   100,
-	"general_skin_on_load" :                   "JAGFx",
+	"general_skin_on_load" :                   "Map",
 	"general_unit_auto" :                      false,
 	"general_h-shift-layout" :                 "h-shifter",
 	"unit_weight" :                            "kg",