graph maintenance and improvement header tools

This commit is contained in:
Alessandro Francia
2018-05-25 10:01:21 +02:00
parent 6a298d641e
commit fdd95beec7
5 changed files with 73 additions and 7 deletions
@@ -98,6 +98,7 @@
display: table-row-group;
height: 566px;
tr{
cursor: pointer;
height: 64px;
padding: 10px;
td{
@@ -106,6 +107,42 @@
margin: 0 auto;
}
}
&.selected{
background-color: rgba(23, 145, 255, 0.75);
color: @color-white;
td div.maintenance-progress.selected{
background-color: transparent;
label{
color: @color-white;
}
.progress{
border: solid 2px @color-white;
}
.progress {
&.yellow{
border: solid 2px @color-squash;
}
}
.progress {
&.red{
border: solid 2px @color-scarlet;
}
}
.progress.fill{
background-color: @color-background-white;
}
.progress {
&.yellow.fill{
background-color: @color-squash;
}
}
.progress {
&.red.fill{
background-color: @color-scarlet;
}
}
}
}
}
}
@@ -16,7 +16,7 @@
.header{
font-size: 20px;
color: @color-darkish-blue;
height: 81px;
height: 64px;
display: flex;
align-items: center;
border-bottom: solid 2px @color-white2;
@@ -28,7 +28,7 @@
}
.body{
width: 100%;
height: calc(~'100% - 83px');
height: calc(~'100% - 66px');
border-radius:2px;
background-color: @color-silver;
display: flex;
+31 -2
View File
@@ -4952,7 +4952,7 @@ footer .container button.big:before {
.tooling-magpos-container .tooling-magpos-box .header {
font-size: 20px;
color: #002680;
height: 81px;
height: 64px;
display: flex;
align-items: center;
border-bottom: solid 2px #f1f1f1;
@@ -4994,7 +4994,7 @@ footer .container button.big:before {
.tooling-shanks-container .tooling-magpos-box .body,
.tooling-magpos-container .tooling-magpos-box .body {
width: 100%;
height: calc(100% - 83px);
height: calc(100% - 66px);
border-radius: 2px;
background-color: #bbbcbc;
display: flex;
@@ -7411,6 +7411,7 @@ footer .container button.big:before {
height: 566px;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr {
cursor: pointer;
height: 64px;
padding: 10px;
}
@@ -7420,6 +7421,34 @@ footer .container button.big:before {
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr td div.maintenance-progress {
margin: 0 auto;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected {
background-color: rgba(23, 145, 255, 0.75);
color: #fff;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected {
background-color: transparent;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected label {
color: #fff;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress {
border: solid 2px #fff;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress.yellow {
border: solid 2px #f5a623;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress.red {
border: solid 2px #d0021b;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress.fill {
background-color: #fff;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress.yellow.fill {
background-color: #f5a623;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tbody tr.selected td div.maintenance-progress.selected .progress.red.fill {
background-color: #d0021b;
}
.maintenance-container .maintenance-box .maintenance-body .maintenance-box-left .maintenance-box-left-body table tfoot tr td {
height: 64px;
width: 100%;
+1 -1
View File
@@ -16,7 +16,7 @@ export default class Maintenance extends Vue {
}
else{
this.selectedMaintenance = {};
this.selectedMaintenance = 1;
this.enableMaintenance = false;
}
}
+2 -2
View File
@@ -33,9 +33,9 @@
</tr>
</thead>
<tbody class="scrollable">
<tr @click="test()">
<tr :class="{selected: selectedMaintenance == 1}" @click="test()">
<td colspan="1">Effettuare la pulizia</td>
<td colspan="1"><maintenance-progress></maintenance-progress></td>
<td colspan="1"><maintenance-progress :class="{selected: selectedMaintenance == 1}"></maintenance-progress></td>
<td colspan="1">7 gg</td>
<td colspan="1">In scadenza</td>
</tr>