diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-22 10:13:21 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-07-22 10:13:21 +0300 |
commit | 6de9de6009fcf22c4da806cdc8dbbe0ff4f4d3d8 (patch) | |
tree | b131e8805ce1bb0adac3c9f2d3a8fb50327387ce | |
parent | 7cba13534cda94a1efdbad2ff8dbe68de1fbeaa3 (diff) | |
download | webui-vue-6de9de6009fcf22c4da806cdc8dbbe0ff4f4d3d8.tar.xz |
add styles for collapse
-rw-r--r-- | src/assets/styles/bmc/_sila/_buttons.scss | 15 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 31 | ||||
-rw-r--r-- | src/views/_sila/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() { |