Skip to content

Commit

Permalink
💄 [feat/scania-next-gen] #78 update icons for next gen scania skin
Browse files Browse the repository at this point in the history
Signed-off-by: JAGFx <[email protected]>
  • Loading branch information
JAGFx committed Apr 14, 2022
1 parent 900fb26 commit 8b8beac
Show file tree
Hide file tree
Showing 16 changed files with 5,429 additions and 4,139 deletions.
9,386 changes: 5,298 additions & 4,088 deletions resources/icons/scania-icon.ai

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions resources/icons/svgs/scania-next-gen-esp.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/icons/svgs/scania-next-gen-media.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/icons/svgs/scania-next-gen-settings.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions resources/icons/svgs/scania-next-gen-trip-information.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 17 additions & 18 deletions src/assets/scss/dashboard/scania-next-gen/_bars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,43 +12,42 @@
//margin: .5rem 0;

.icon {
font-size: 2rem;
font-size: 1.2rem;
line-height: 0;
margin: 0 .5rem;
margin: 0 .5rem 0 0;
}

.line {
background: $cGreen;
height: .3rem;
background: $cWhite;
height: .1rem;
color: transparent;
margin: .2rem 1rem;
margin: 0 1rem;
}

.squares {
margin: 0 1rem;

.square {
background: $cWhite;
background: $cGreyLight;
color: transparent;
height: .4rem;
width: .85rem;
height: .7rem;
width: .7rem;
margin: .15rem;

&:first-child { margin-left: 0 }
&:last-child { margin-right: 0 }
&.active {
background: $cWhite;
}
}
}

.labels {
.start, .middle, .end {
font-size: 1rem;
background: #000;
width: 2rem;
font-size: .5rem;
text-align: center;
border-radius: 1rem;
//border-radius: 1rem;
font-weight: bold;
margin-top: -0.3rem;
}
//margin-top: -0.3rem;
}

.raw {
Expand All @@ -62,9 +61,9 @@
}

.value, .unit{
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
font-size: 1rem;
height: 1rem;
line-height: 1rem;
}
}

Expand Down
13 changes: 9 additions & 4 deletions src/assets/scss/dashboard/scania-next-gen/_display.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,16 @@

width: 3rem;
height: 3rem;
font-size: 1.7rem;

&.tiny {
width: 3.5rem;
height: 2.5rem;
font-size: 1.4rem;

&.left {
transform: skewX($menuButtonSkewAngle);
> span {
> i {
transform: skewX(-$menuButtonSkewAngle);
}
padding-right: .5rem;
Expand All @@ -61,11 +63,12 @@

&.right {
transform: skewX(-$menuButtonSkewAngle);
> span {
> i {
transform: skewX($menuButtonSkewAngle);
}
padding-left: .5rem;
border-radius: 0 0 $menuButtonRadius 0;
background: linear-gradient(to top, $menuButtonActiveColor, lighten($menuButtonActiveColor, $menuButtonDarkenAmount));
}

&.active:after{
Expand Down Expand Up @@ -126,7 +129,7 @@
//clip-path: polygon(50% 0, 100% 100%, 100% 0);
z-index: 0;
transform: skewX($menuButtonSkewAngle);
box-shadow: -0.5rem 0px 0.5rem #000;
box-shadow: -0.5rem -.2rem 0.5rem #000;
border-radius: 0 0 0 $menuButtonRadius;
}

Expand All @@ -140,7 +143,7 @@
//clip-path: polygon(50% 0, 0 100%, 0 0);
z-index: -1;
transform: skewX(-$menuButtonSkewAngle);
box-shadow: 0.5rem 0 0.5rem #000;
box-shadow: 0.5rem -.2rem 0.5rem #000;
border-radius: 0 0 $menuButtonRadius 0;
}

Expand Down Expand Up @@ -172,6 +175,8 @@
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 1.5rem;
line-height: 1.5rem;

&.shifter {
top: 6.3rem;
Expand Down
5 changes: 5 additions & 0 deletions src/assets/scss/dashboard/scania-next-gen/_menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
align-items: center;
flex-direction: column;

&.default {
background: url("/img/dashboard/scania-next-gen/6482891_619566292.png") center center no-repeat;
background-size: contain;
}

&.drivingAssistance{
.item {
font-size: 1.1rem;
Expand Down
4 changes: 2 additions & 2 deletions src/assets/scss/dashboard/scania-next-gen/_variable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $cBlue: #004dff;
$cRed: #ED0F02;

$menuButtonDarkenAmount: 10%;
$menuButtonActiveColor: #82de91;
$menuButtonDefaultColor: #203e51;
$menuButtonActiveColor: #53ae32;
$menuButtonDefaultColor: #293e4e;
$menuButtonRadius: .2rem;
$menuButtonSkewAngle: 15deg;
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<div class="scania-bar flex-area flex-column w-75">
<div class="d-flex justify-content-between align-items-center w-100">
<slot />
<div class="flex-area w-100 raw">
<span class="value">{{ value.toFixed(1) }}</span>
<span class="unit">{{ unit }}</span>
</div>
</div>
<div class="flex-area w-100 squares">
<div
v-for="i in squaresCount"
class="square"
:class="{ active: squareIsActive(i) }"
></div>
</div>
<div class="line w-100"></div>
<div class="d-flex justify-content-between align-items-center w-100 labels">
<span>{{ min.toFixed(0) }}</span>
<span v-if="displayMidLabel">{{
Math.ceil((min + max) / 2).toFixed(0)
}}</span>
<span>{{ max.toFixed(0) }}</span>
</div>
</div>
</template>

<script>
export default {
name: 'ScaniaNextGenBar',
props: {
displayMidLabel: {
type: Boolean,
required: false,
default: true
},
squaresCount: {
type: Number,
required: false,
default: 10
},
min: {
type: Number,
required: true
},
max: {
type: Number,
required: true
},
value: {
type: Number,
required: true
},
unit: {
type: String,
required: false,
default: '--'
}
},
methods: {
squareIsActive(number) {
const valueBySquare = (this.max - this.min) / this.squaresCount;
return this.value >= valueBySquare * number + this.min;
}
}
};
</script>
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
<template>
<div class="display on">
<div class="squareArea driveMode">
<div>TM</div>
<div>?</div>
<div><i class="icon icon-scania-next-gen-standard-mode_white" /></div>
<div><i class="icon icon-scania-cruise_control_white" /></div>
</div>
<div class="menu-selector w-100">
<div class="button tiny left white">
<span>WA</span>
<i class="icon icon-scania-next-gen-menu-warning_white_yellow_red" />
</div>
<div class="wrapper">
<div class="button">TI</div>
<div class="button">
<i class="icon icon-scania-next-gen-vehicle-information" />
</div>
<div
class="button"
:class="{
active: currentMenu === 'ScaniaNextGenDrivingAssistanceMenu'
}"
@click="toggleMenu('ScaniaNextGenDrivingAssistanceMenu')"
>
DA
<i class="icon icon-scania-next-gen-trip-information" />
</div>
<div
class="button"
Expand All @@ -26,19 +28,16 @@
}"
@click="toggleMenu('ScaniaNextGenInstantaneousDataMenu')"
>
ID
<i class="icon icon-scania-next-gen-instantaneous-data" />
</div>
<div class="button">ME</div>
<div class="button"><i class="icon icon-scania-next-gen-media" /></div>
</div>
<div class="button tiny right">
<span>SE</span>
<i class="icon icon-scania-next-gen-settings" />
</div>
</div>
<!-- <div class="menu h-100"></div>-->
<!-- <ScaniaNextGenInstantaneousDataMenu />-->
<!-- <ScaniaNextGenDrivingAssistanceMenu />-->
<component :is="currentMenu" v-if="currentMenu !== null" />
<div v-else class="menu h-100">Toto</div>
<div v-else class="menu h-100 default"></div>
<div class="programmable-field">programmable-field-bottom</div>
<div class="squareArea shifter">
<div>{{ telemetry2.truck.gearDisplayedWithoutShifterType }}</div>
Expand All @@ -50,7 +49,6 @@
<script>
import ScaniaNextGenDrivingAssistanceMenu from '@/components/dashboards/scania-next-gen/display/menu/ScaniaNextGenDrivingAssistanceMenu';
import ScaniaNextGenInstantaneousDataMenu from '@/components/dashboards/scania-next-gen/display/menu/ScaniaNextGenInstantaneousDataMenu';
import ScaniaBar from '@/components/dashboards/scania/ScaniaBar';
import TelemetryMixin from '@/mixins/TelemetryMixin';
export default {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,51 +1,49 @@
<template>
<div class="menu h-100">
<ScaniaBar
<ScaniaNextGenBar
v-bind="{
min: 20,
max: 36,
value: telemetry2.truck.batteryVoltage,
unit: 'V',
displayMidLabel: false,
displayValue: false
displayMidLabel: false
}"
>
<i class="icon icon-scania-battery_red" />
</ScaniaBar>
<ScaniaBar
</ScaniaNextGenBar>
<ScaniaNextGenBar
class="py-1"
v-bind="{
min: 0,
max: 175,
value: telemetry2.truck.brakeAirPressure,
unit: $unitReadable('unit_pressure'),
displayValue: false
unit: $unitReadable('unit_pressure')
}"
>
<i class="icon icon-scania-parking-break_red" />
</ScaniaBar>
<ScaniaBar
</ScaniaNextGenBar>
<ScaniaNextGenBar
v-bind="{
min: 0,
max: 100,
value:
(telemetry2.truck.adBlueLevel * 100) /
telemetry2.truck.adBlueCapacity,
unit: '%',
displayValue: false
unit: '%'
}"
>
<i class="icon icon-scania-ad-blue-low_yellow" />
</ScaniaBar>
</ScaniaNextGenBar>
</div>
</template>

<script>
import ScaniaBar from '@/components/dashboards/scania/ScaniaBar';
import ScaniaNextGenBar from '@/components/dashboards/scania-next-gen/display/ScaniaNextGenBar';
import TelemetryMixin from '@/mixins/TelemetryMixin';
export default {
name: 'ScaniaNextGenInstantaneousDataMenu',
components: { ScaniaBar },
components: { ScaniaNextGenBar },
mixins: [TelemetryMixin]
};
</script>

0 comments on commit 8b8beac

Please sign in to comment.