diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
commit | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (patch) | |
tree | fb8579325d609699395e9550eaa803222a321fd6 /src/views/SILA/RAID/Settings/ActionSettingsPopover.vue | |
parent | 6facd12596ec8b55bab4be04b473de65e1f22018 (diff) | |
download | webui-vue-c4d70da69a3c86f8c07ccdb0f09b755dd99b2155.tar.xz |
Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles
Diffstat (limited to 'src/views/SILA/RAID/Settings/ActionSettingsPopover.vue')
-rw-r--r-- | src/views/SILA/RAID/Settings/ActionSettingsPopover.vue | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue new file mode 100644 index 00000000..2f3093ab --- /dev/null +++ b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue @@ -0,0 +1,131 @@ +<template> + <b-popover + placement="left" + triggers="focus" + :show.sync="show" + custom-class="apply-reload-popover" + :target="`popover-action-${id}`" + @hidden="onHidden" + > + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + appalyOnReload(); + } + " + > + При перезагрузке + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === middlePosition }" + @mouseover="scale = middlePosition" + @click=" + () => { + show = false; + appalyOption1(); + } + " + > + Опция 1 + </b-button> + <b-button + id="popover-apply-button" + variant="popover" + :class="{ 'hovered-apply-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + appalyOption2(); + } + " + > + Опция 2 + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + appalyOnReload: { + type: Function, + default: null, + }, + appalyOption1: { + type: Function, + default: null, + }, + appalyOption2: { + type: Function, + default: null, + }, + applyType: { + type: String, + default: 'reload', + }, + }, + data() { + return { + topPosition: 5, + middlePosition: 33, + bottomPosition: 60, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.applyType === 'reload') { + this.scale = this.topPosition; + } else if (this.applyType === 'option1') { + this.scale = this.middlePosition; + } else { + this.scale = this.bottomPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +.analytical-table__status { + width: 10%; +} + +#popover-apply-ractive { + padding-left: 5px; +} + +.hovered-apply-button { + color: $white; +} +</style> +<style lang="scss" scoped> +#popover-apply-button { + justify-content: flex-start; + width: 240px; +} + +.slider { + width: 240px; + height: 28px; + border-radius: 8px; + background-color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset; + position: absolute; + transition: ease-in 0.2s; + z-index: -1; +} +</style> |