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/components/Global/SilaComponents/TwoChiocePopover.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/components/Global/SilaComponents/TwoChiocePopover.vue')
-rw-r--r-- | src/components/Global/SilaComponents/TwoChiocePopover.vue | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/src/components/Global/SilaComponents/TwoChiocePopover.vue b/src/components/Global/SilaComponents/TwoChiocePopover.vue new file mode 100644 index 00000000..c89c5a81 --- /dev/null +++ b/src/components/Global/SilaComponents/TwoChiocePopover.vue @@ -0,0 +1,117 @@ +<template> + <b-popover + :placement="placement" + triggers="focus" + :show.sync="show" + custom-class="popover-heigth-100" + :target="`popover-choice-${id}`" + @hidden="onHidden" + > + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + firstAction(); + } + " + > + {{ fitstOption }} + </b-button> + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + secondAction(); + } + " + > + {{ secondOption }} + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + fitstOption: { + type: String, + default: null, + }, + secondOption: { + type: String, + default: null, + }, + chosenOption: { + type: String, + default: null, + }, + firstAction: { + type: Function, + default: null, + }, + secondAction: { + type: Function, + default: null, + }, + placement: { + type: String, + default: 'bottom', + }, + }, + data() { + return { + topPosition: 5, + bottomPosition: 33, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.secondOption === this.chosenOption) { + this.scale = this.bottomPosition; + } else { + this.scale = this.topPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +#popover-unit-ractive { + padding-left: 5px; +} + +.hovered-unit-button { + color: $white; +} +</style> +<style lang="scss" scoped> +#popover-choice-button { + width: 89px; +} + +.slider { + width: 89px; + 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> |