grafica allegati e note

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

@@ -48,6 +48,7 @@
             bottom: 10px;
             left: 16px;
             height: 50px;
+            margin-bottom: 12px;
             width: calc(~"100% - 72px");
             transition: margin-left 200ms ease-in-out;
             &.collapsed {
@@ -206,10 +207,62 @@
     }
 }
 
+.accordion {
+    header {
+        height: 64px;
+        border-radius: 2px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        small {
+          border: 2px solid #fff;
+          border-radius: 100px;
+          min-width: 28px;
+          min-height: 28px;
+          font-size: 12px;
+          display: block;
+          text-align: center;
+          line-height: 28px;
+          margin: 0 12px;
+        }
+        strong {
+          width: 100%;
+        }
+        .expander{
+          margin: 0 12px;
+          line-height: 28px;
+          height: 28px;
+          width: 28px;
+          font-size: 28px;
+        }
+    }
+    section{
+      min-height: 0;
+      max-height: 0;
+      transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+      overflow: hidden;
+      &.expanded{
+        min-height: 64px;
+        background-color: rgba(255, 255, 255, 0.1);
+        max-height: 1000px;
+      }
+
+      .item{
+        height: 64px;
+        width: 100%;
+        text-align: center;
+        line-height: 64px;
+      }
+    }
+}
+
 #service-list {
     width: 584px;
     height: 0;
     padding: 0 24px;
+
     &.expanded {
         width: 618px;
     }

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

@@ -50,3 +50,7 @@
 
 @color-button-oval-background-image: linear-gradient(to bottom, #cce8f8, #93cbfc);
 @color-button-oval-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.7);
+
+.text-success{
+  color:@color-darkish-blue;
+}

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

@@ -38,3 +38,7 @@
     src: local('Work Sans Bold'), local('WorkSans-Bold'), url(../fonts/WorkSans-Bold.ttf) format('ttf');
     unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
+
+.text-22{
+  font-size: 22px !important;
+}

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

@@ -172,4 +172,8 @@ img{
     height: @spinner-loading-width;
     top: calc(~'50%' - @spinner-loading-height /2);
     left: calc(~'50%' - @spinner-loading-width /2);
-}
+}
+
+.clickable{
+  cursor: pointer;
+}

Step/wwwroot/assets/styles/style.css

@@ -1,6 +1,9 @@
 @import url(../../libs/font-awesome/css/font-awesome.css);
 @import url(../../libs/glyphicons/styles/glyphicons.css);
 @import "iziToast.min.css";
+.text-success {
+  color: #002680;
+}
 .modal {
   min-width: 500px;
   height: 400px;
@@ -365,6 +368,9 @@ button.square {
   src: local('Work Sans Bold'), local('WorkSans-Bold'), url(../fonts/WorkSans-Bold.ttf) format('ttf');
   unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
+.text-22 {
+  font-size: 22px !important;
+}
 #app > header {
   display: flex;
   flex-direction: row nowrap;
@@ -867,6 +873,7 @@ footer .container button.big::before {
   bottom: 10px;
   left: 16px;
   height: 50px;
+  margin-bottom: 12px;
   width: calc(100% - 72px);
   transition: margin-left 200ms ease-in-out;
 }
@@ -1043,6 +1050,53 @@ footer .container button.big::before {
 #service-list .alarm-item button:active {
   background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
 }
+.accordion header {
+  height: 64px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.accordion header small {
+  border: 2px solid #fff;
+  border-radius: 100px;
+  min-width: 28px;
+  min-height: 28px;
+  font-size: 12px;
+  display: block;
+  text-align: center;
+  line-height: 28px;
+  margin: 0 12px;
+}
+.accordion header strong {
+  width: 100%;
+}
+.accordion header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.accordion section {
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.accordion section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.accordion section .item {
+  height: 64px;
+  width: 100%;
+  text-align: center;
+  line-height: 64px;
+}
 #service-list {
   width: 584px;
   height: 0;
@@ -1225,6 +1279,9 @@ img {
   top: calc(50% - 100px);
   left: calc(50% - 100px);
 }
+.clickable {
+  cursor: pointer;
+}
 body {
   font-family: 'Work Sans', sans-serif;
 }

Step/wwwroot/src/modules/alarms/alarm-detail.vue

@@ -37,14 +37,30 @@
         {{'alarm_detail_btn_refresh' | localize("Refresh")}}
       </button>
     </div>
+
+
+    <accordion :title="'Allegati'" :counter="5">
+      <div class="item text-success">
+       <strong> Aggiungi un allegato</strong> <button class="btn text-22"><i class="fa fa-plus"></i></button>
+      </div>
+    </accordion>
+
+    <accordion :title="'Note'" :counter="4">
+      <div class="item text-success">
+        <strong> Aggiungi una nota</strong> <button class="btn text-22"><i class="fa fa-plus"></i></button>
+      </div>
+    </accordion>
+
   </div>
 </template>
 <script>
 import { AlarmModel } from "src/store";
+import { Accordion } from "src/modules/base-components";
 export default {
   props: {
     alarm: { default: null, type: AlarmModel }
   },
+  components: { accordion: Accordion },
   methods: {
     close() {
       this.$emit("close-detail");

Step/wwwroot/src/modules/base-components/accordion.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="accordion">
+      <header @click="toggleExpander()">
+        <small>{{counter}}</small>
+        <strong>{{title}}</strong>
+        <div class="expander" >
+          <i class="fa fa-caret-down" v-if="!expanded"></i>
+          <i class="fa fa-caret-up" v-if="expanded"></i>
+        </div>
+      </header>
+      <section :class="{expanded: expanded}">
+        <slot></slot>
+      </section>
+    </div>
+</template>
+<script>
+export default {
+  props: {
+    title: { default: "" },
+    counter: { default: 0 }
+  },
+  data: function() {
+    return {
+      expanded: false
+    };
+  },
+  methods: {
+    toggleExpander() {
+      this.expanded = !this.expanded;
+    }
+  }
+};
+</script>
+

Step/wwwroot/src/modules/base-components/index.js

@@ -5,5 +5,6 @@ import UserInfo from "./user-info.vue";
 import ModalContainer from "./modal-container.vue";
 import { ModalHelper } from "./ModalHelper";
 import ProcessInfo from "./process-info.vue";
+import Accordion from "./accordion.vue";
 
-export { Loader, Modal, AppRibbon, UserInfo, ModalContainer, ModalHelper, ProcessInfo };
+export { Loader, Modal, AppRibbon, UserInfo, ModalContainer, ModalHelper, ProcessInfo, Accordion };