From 6de9de6009fcf22c4da806cdc8dbbe0ff4f4d3d8 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Fri, 22 Jul 2022 10:13:21 +0300
Subject: add styles for collapse

---
 src/assets/styles/bmc/_sila/_buttons.scss          | 15 ++++++++---
 src/components/_sila/Global/Collapse.vue           | 31 +++++-----------------
 .../Processors/Dynamic/ProcessorsDynamicPage.vue   | 14 ++++++++--
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index f54caac9..0754e011 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -180,9 +180,8 @@
 .btn-collapse {
     height: 56px;
     width: 100%;
-    border-top: 1px solid $gray-10;
-    // border-bottom: 1px solid $gray-10;
-    // gap: 8px;
+    border-bottom: 1px solid $gray-10;
+    gap: 8px;
     &:active,
     &:focus {
       box-shadow: none;
@@ -190,4 +189,14 @@
     &:hover {
       color: $text-primary;
     }
+    .icon-expand {
+      margin-left: auto;
+      transition: 0.3s linear;
+    }
+    &.collapsed {
+      .icon-expand {
+        transform: rotate(180deg);
+        transition: 0.3s linear;
+      }
+    }
 }
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
index c8665c28..ac7eb467 100644
--- a/src/components/_sila/Global/Collapse.vue
+++ b/src/components/_sila/Global/Collapse.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="page-collapse-decorator">
+  <div>
     <b-button
       v-b-toggle="id"
       variant="collapse"
       class="d-flex flex-nowrap justify-content-start"
     >
-      <img :src="require(imgPath)" />
+      <slot name="image"></slot>
       {{ title }}
       <component :is="iconChevronUp" class="icon-expand" />
     </b-button>
     <b-collapse :id="id" class="nav-item__nav">
-      <slot></slot>
+      <slot
+        style="margin-top 2rem; margin-left: 2rem; margin-right: 2 rem;"
+      ></slot>
     </b-collapse>
   </div>
 </template>
@@ -24,13 +26,9 @@ export default {
       type: String,
       default: null,
     },
-    imgPath: {
-      type: String,
-      default: '@/assets/images/_sila/collapsed/temperature.svg',
-    },
     title: {
       type: String,
-      default: 'collapsed title',
+      default: null,
     },
   },
   data() {
@@ -40,20 +38,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-//nav items style
-.nav-item,
-.nav-link {
-  padding: 0;
-}
-.nav-item {
-  list-style-type: none;
-}
-
-a {
-  color: $text-primary !important;
-  &:hover {
-    color: $text-primary !important;
-  }
-}
-</style>
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index 8525b174..228555a1 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,9 +1,12 @@
 <!--<template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <collapse id="collapse_1">
+    <collapse id="collapse_1" title="Температра" style="margin: -2rem -2rem 0">
+      <template #image>
+        <img src="@/assets/images/_sila/collapsed/temperature.svg" />
+      </template>
       <chart :data="filteredSensors"></chart>
-      <page-section small-section-title="Заголовок таблицы">
+      <page-section section-title="Заголовок таблицы">
         <b-table
           responsive="md"
           show-empty
@@ -62,6 +65,13 @@ export default {
     filteredSensors() {
       return this.getFilteredTableData(this.allSensors, this.activeFilters);
     },
+    colors() {
+      return this.$randomColor({
+        count: this.allSensors?.length,
+        hue: 'random',
+        luminosity: 'random',
+      });
+    },
   },
 
   created() {
-- 
cgit v1.2.3