diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/images/_sila/collapsed/temperature.svg | 3 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/_buttons.scss | 15 | ||||
-rw-r--r-- | src/assets/styles/bmc/_sila/_tables.scss | 92 | ||||
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 59 | ||||
-rw-r--r-- | src/main.js | 2 | ||||
-rw-r--r-- | src/views/_sila/Fans/Static/FansStaticPage.vue | 1 | ||||
-rw-r--r-- | src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue | 28 |
7 files changed, 197 insertions, 3 deletions
diff --git a/src/assets/images/_sila/collapsed/temperature.svg b/src/assets/images/_sila/collapsed/temperature.svg new file mode 100644 index 00000000..eaef46f7 --- /dev/null +++ b/src/assets/images/_sila/collapsed/temperature.svg @@ -0,0 +1,3 @@ +<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59649 8.70217V2.11563C2.72082 1.71432 3.14137 1.08777 3.96881 1.08777C4.80097 1.08777 5.25676 1.71835 5.40351 2.1269V8.5628V8.70217H5.40718L5.1428 9.2957C6.08491 9.74384 6.73684 10.7272 6.73684 11.8665C6.73684 13.4284 5.51152 14.6947 4 14.6947C2.48848 14.6947 1.26316 13.4284 1.26316 11.8665C1.26316 10.7267 1.91563 9.74303 2.85836 9.29515L2.59455 8.70217H2.59649ZM1.47368 8.66168V2.07598C1.47368 2.01444 1.48068 1.94562 1.50067 1.87278C1.67069 1.25325 2.37741 0 3.96881 0C5.54465 0 6.29377 1.23221 6.49026 1.84692C6.51676 1.92982 6.52632 2.00947 6.52632 2.08119V8.66168C7.42514 9.4192 8 10.5731 8 11.8665C8 14.1494 6.20914 16 4 16C1.79086 16 0 14.1494 0 11.8665C0 10.5731 0.574857 9.4192 1.47368 8.66168ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 11.2597 2.5 10 3.5 10V4H4.5V10C5.5 10 6 11.2597 6 12Z" fill="#E11717"/> +</svg>
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss index b6062d84..f54caac9 100644 --- a/src/assets/styles/bmc/_sila/_buttons.scss +++ b/src/assets/styles/bmc/_sila/_buttons.scss @@ -176,3 +176,18 @@ padding: 6px; margin: 1px; } + +.btn-collapse { + height: 56px; + width: 100%; + border-top: 1px solid $gray-10; + // border-bottom: 1px solid $gray-10; + // gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } +} diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index 8d9f391e..7dca75dc 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -213,4 +213,96 @@ padding-left: 1rem; } } +} + +.table-accessory { + border: none; + thead th { + border-bottom: 1px solid $gray-30; + background-color: transparent !important; + padding: 5px 0; + } + + tbody tr td { + border: none; + padding: 2px; + } + td { + font-size: 0.745rem; + color: $text-tretiatry; + + } + .thead-light th > div { + font-size: 0.755rem !important; + } + + // @include media-breakpoint-down(xs) { + // .b-table-stacked-sm { + // border: 1px solid $gray-10; + + // tr { + + // &:not(:first-child) > td[aria-colindex='1'] { + // padding-top: 0.625rem; + // } + + // &:not(.b-table-empty-row) { + // position: relative; // Restrict background color to get zebra striping for the row + + // &::before, + // &::after { + // position: absolute; + // top: 0; + // height: 100%; + // z-index: -1; + // } + + // &:before { + // content: ''; + // background-color: gray("200"); + // width: 40%; + // border-right: 1px solid gray("300"); + // } + + // &:after { + // content: ''; + // right: 0; + // width: 60%; + // } + + // &:nth-child(even)::after { + // background-color: gray("100"); // Zebra striping for the row + // } + // } + + // td { + // border: 0; + // padding: 0.75rem; + // text-align: left !important; + + // &:last-of-type { + // border-right: 0; + // } + // } + // } + // } + + // .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { + // &::before { + // text-align: left; + // padding-left: $spacer / 2; + // } + + // > div { + // padding-left: 1rem; + // } + // } + // } +} + +.item-color { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; }
\ No newline at end of file diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue new file mode 100644 index 00000000..c8665c28 --- /dev/null +++ b/src/components/_sila/Global/Collapse.vue @@ -0,0 +1,59 @@ +<template> + <div class="page-collapse-decorator"> + <b-button + v-b-toggle="id" + variant="collapse" + class="d-flex flex-nowrap justify-content-start" + > + <img :src="require(imgPath)" /> + {{ title }} + <component :is="iconChevronUp" class="icon-expand" /> + </b-button> + <b-collapse :id="id" class="nav-item__nav"> + <slot></slot> + </b-collapse> + </div> +</template> +<script> +import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20'; + +export default { + name: 'Collapse', + props: { + id: { + type: String, + default: null, + }, + imgPath: { + type: String, + default: '@/assets/images/_sila/collapsed/temperature.svg', + }, + title: { + type: String, + default: 'collapsed title', + }, + }, + data() { + return { + iconChevronUp: iconChevronUp, + }; + }, +}; +</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/main.js b/src/main.js index 90983c77..8585f897 100644 --- a/src/main.js +++ b/src/main.js @@ -42,6 +42,7 @@ import Vuelidate from 'vuelidate'; import i18n from './i18n'; import { format } from 'date-fns-tz'; import HighchartsVue from 'highcharts-vue'; +import VueRandomColor from 'vue-randomcolor'; // Filters Vue.filter('shortTimeZone', function (value) { @@ -130,6 +131,7 @@ Vue.use(ToastPlugin); Vue.use(TooltipPlugin); Vue.use(Vuelidate); Vue.use(HighchartsVue); +Vue.use(VueRandomColor); new Vue({ router, diff --git a/src/views/_sila/Fans/Static/FansStaticPage.vue b/src/views/_sila/Fans/Static/FansStaticPage.vue index 311ea8fe..3ce9079e 100644 --- a/src/views/_sila/Fans/Static/FansStaticPage.vue +++ b/src/views/_sila/Fans/Static/FansStaticPage.vue @@ -5,6 +5,7 @@ <b-table responsive="md" show-empty + hover :items="fans" :busy="isBusy" :fields="fields" diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue index ac510875..29ec1997 100644 --- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue +++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue @@ -1,21 +1,43 @@ <template> <b-container fluid="xl"> <page-title :description="$t('appPageTitle.dynamicInformation')" /> - - <chart :data="filteredSensors"></chart> + <collapse id="collapse_1"> + <chart :data="filteredSensors"></chart> + <page-section small-section-title="Заголовок таблицы"> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + </b-table> + </page-section> + </collapse> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; export default { - components: { PageTitle, Chart }, + components: { PageTitle, Collapse, PageSection, Chart }, mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], data() { return { |