head rotate e selected

Step/wwwroot/assets/styles/base/head.less

@@ -179,6 +179,7 @@
     margin-top: 6px;
     background-color: white;
     border-radius: 2px;
+    box-sizing: border-box;
     box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.4);
     display: flex;
     header {
@@ -192,6 +193,9 @@
         border-bottom: 1px solid #dfdfdf;
         justify-content: space-between;
         font-weight: 600;
+        i{
+              line-height: 24px;
+        }
         span.process {
             color: @color-darkish-blue;
             width: 35px;
@@ -324,6 +328,22 @@
             }
         }
     }
+    &.selected {
+      border: 2px solid rgba(23, 145, 255, 0.75);
+      * {
+          border-color: rgba(23, 145, 255, 0.75) !important;
+      }
+      header{
+        background-color:  rgba(23, 145, 255, 0.75);
+        color:#fff;
+        border-right: none;
+
+        span.process {
+          border-color: #fff !important;
+          color: #fff;
+        }
+      }
+  }
 }
 
 .heads-container {
@@ -338,4 +358,4 @@
 
 .heads-container-lt4 {
     right: -12px;
-}
+}

Step/wwwroot/assets/styles/style.css

@@ -2106,6 +2106,7 @@ footer .container button.big:before {
   margin-top: 6px;
   background-color: white;
   border-radius: 2px;
+  box-sizing: border-box;
   box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.4);
   display: flex;
 }
@@ -2124,6 +2125,9 @@ footer .container button.big:before {
   justify-content: space-between;
   font-weight: 600;
 }
+.head-std header i {
+  line-height: 24px;
+}
 .head-std header span.process {
   color: #002680;
   width: 35px;
@@ -2256,6 +2260,21 @@ footer .container button.big:before {
 .head-std aside .load.warning span {
   color: #f5a623 !important;
 }
+.head-std.selected {
+  border: 2px solid rgba(23, 145, 255, 0.75);
+}
+.head-std.selected * {
+  border-color: rgba(23, 145, 255, 0.75) !important;
+}
+.head-std.selected header {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  border-right: none;
+}
+.head-std.selected header span.process {
+  border-color: #fff !important;
+  color: #fff;
+}
 .heads-container {
   position: absolute;
   top: -6px;

Step/wwwroot/src/modules/heads/head.ts

@@ -50,6 +50,12 @@ export default class head1 extends Vue {
   @Prop({ default: false })
   public overrideDisabled: boolean  ;
 
+  @Prop({default:false})
+  public isActive: boolean  ;
+
+  @Prop({default:false})
+  public isSelected: boolean  ;
+
   public loadStatus(): string {
     if (this.inAlarm) return "danger";
     if (this.inWarning) return "warning";

Step/wwwroot/src/modules/heads/head.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="head-std">
+  <div class="head-std" :class="{selected: isSelected}">
      <section>
       <header>
         {{title}}
+        <i class="fa fa-refresh fa-spin" v-if="isActive"></i>
         <span class="process">
           {{process}}
         </span>

Step/wwwroot/src/modules/mheads.vue

@@ -13,6 +13,8 @@
             :valcuum="getHeadsProperty(h.id).Vacum"
             :overrideDisabled="!getHeadsProperty(h.id).OverrideEditable"
             :pressure="getHeadsProperty(h.id).ActualPressure"
+            :isSelected="getHeadsProperty(h.id).IsSelected"
+            :isActive="getHeadsProperty(h.id).IsActive"
             @overridePlus="overridePlus()" @overrideMinus="overrideMinus()"
             ></head-std>
    <div class="head-place-holder" v-if="heads.length <4"></div>