added Open button for Vehicle Status widget. Adjusted sizing of other components in Status widget
This commit is contained in:
Justin Nguyen
parent
2d8f27cf7a
commit
294ffead44
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="outer_div">
|
||||
|
||||
<div class="emergency-stop-div">
|
||||
<button class="emergency-button"> EMERGENCY STOP </button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
|
|
@ -11,53 +11,33 @@
|
|||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
latency: { required: true, type: Number},
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
// props: {
|
||||
// },
|
||||
// computed: {
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.outer_div {
|
||||
display: flex;
|
||||
.emergency-stop-div {
|
||||
position: relative;
|
||||
height: 25%;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
height: 20%;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
.connection-container {
|
||||
|
||||
.emergency-button {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
gap: 0.05em;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius: 12%;
|
||||
/* background-color: white; */
|
||||
height: 100%;
|
||||
background-color: rgb(255, 57, 57);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.emergency-button:hover {
|
||||
background-color: rgb(192, 40, 40);
|
||||
}
|
||||
.bar {
|
||||
width:100%;
|
||||
background-color: white;
|
||||
border: 0.1em solid black;
|
||||
margin-top: auto;
|
||||
border-radius: 20%;
|
||||
}
|
||||
.grayed_bar {
|
||||
width:100%;
|
||||
background-color: rgb(136, 135, 135);
|
||||
border: 0.1em solid black;
|
||||
margin-top: auto;
|
||||
opacity: 0.2;
|
||||
border-radius: 20%;
|
||||
}
|
||||
.connection_number {
|
||||
position: absolute;
|
||||
left: 110%;
|
||||
bottom: 0%;
|
||||
width: 180%;
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<!-- <div class="open-button-div">
|
||||
<button class="open-button">OPEN</button>
|
||||
</div> -->
|
||||
<button class="test-open-button">OPEN</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
// props: {
|
||||
// },
|
||||
// computed: {
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.open-button-div {
|
||||
position: relative;
|
||||
height: 25%;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.open-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #011949;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.test-open-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
background-color: #011949;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.test-open-button:hover {
|
||||
background-color: #03369b;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="vehicle-title-container">
|
||||
<div class="vehicle-name-div"> {{ vehicleName }}</div>
|
||||
<div class="vehicle-name-div"> {{ vehicleName }} </div>
|
||||
|
||||
<div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -11,7 +12,8 @@
|
|||
export default {
|
||||
props: {
|
||||
vehicleName: { required: true, type: String },
|
||||
vehicleStatus: { required: true, type: String }
|
||||
vehicleStatus: { required: true, type: String },
|
||||
vehicleIcon: { type: Object }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -28,13 +30,20 @@
|
|||
|
||||
.vehicle-name-div {
|
||||
position: relative;
|
||||
font-size: 2.5em;
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
.vehicle-status-div {
|
||||
position: relative;
|
||||
font-size: 1.5em;
|
||||
margin-top: 5%;;
|
||||
font-size: 1.6em;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.vehicle-icon {
|
||||
position: relative;
|
||||
width: 12%;
|
||||
height: 12%;
|
||||
/* vertical-align: middle; */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
import Battery from './VehicleStatus/Battery.vue';
|
||||
import Connection from './VehicleStatus/Connection.vue';
|
||||
import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
|
||||
import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
|
||||
import Open from './VehicleStatus/Open.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -12,7 +14,9 @@
|
|||
components: {
|
||||
VehicleTitle,
|
||||
Battery,
|
||||
Connection
|
||||
Connection,
|
||||
EmergencyStop,
|
||||
Open
|
||||
},
|
||||
// computed: {
|
||||
// batteryPercentage(): number {
|
||||
|
|
@ -33,7 +37,8 @@
|
|||
</div>
|
||||
|
||||
<div class="right-container">
|
||||
|
||||
<Open class="adjust-open-button"></Open>
|
||||
<EmergencyStop class="adjust-emergency-button"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -70,19 +75,29 @@
|
|||
}
|
||||
|
||||
.adjust-battery {
|
||||
height: 19%;
|
||||
width: 36%;
|
||||
height: 17%;
|
||||
width: 34.5%;
|
||||
margin-top: auto;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
.adjust-connection {
|
||||
height: 30%;
|
||||
width: 28%;
|
||||
margin-top: 1%;
|
||||
height: 28%;
|
||||
width: 26%;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 4%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
|
||||
.adjust-emergency-button {
|
||||
margin-top: auto;
|
||||
margin-bottom: 4%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.adjust-open-button {
|
||||
margin-top: 4%;
|
||||
margin-left: 60%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue