diff options
Diffstat (limited to 'src/views/SILA/RAID/Settings/OptionsPopover.vue')
-rw-r--r-- | src/views/SILA/RAID/Settings/OptionsPopover.vue | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/src/views/SILA/RAID/Settings/OptionsPopover.vue b/src/views/SILA/RAID/Settings/OptionsPopover.vue new file mode 100644 index 00000000..d1b85754 --- /dev/null +++ b/src/views/SILA/RAID/Settings/OptionsPopover.vue @@ -0,0 +1,87 @@ +<template> + <b-popover + placement="left" + triggers="focus" + :show.sync="show" + custom-class="popover-heigth-100" + :target="`popover-option-${id}`" + > + <b-button + id="popover-option-button" + variant="popover" + @click=" + () => { + show = false; + openModal(); + } + " + > + <img + src="@/assets/images/icon-settings-red.svg" + class="icon-chevron icon-settings" + /> + Настройки + </b-button> + <b-button + id="popover-option-button" + class="delete" + variant="popover" + @click="show = false" + > + <img + src="@/assets/images/icon-clear-red.svg" + class="icon-chevron icon-delete" + /> + Удалить + </b-button> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + }, + data() { + return { + show: false, + }; + }, + methods: { + openModal() { + this.$bvModal.show(`edit-tome${this.id}`); + }, + }, +}; +</script> +<style lang="scss" scoped> +.popover-heigth-100 { + max-width: 120px; +} + +#popover-option-button { + padding: 0 9px 0 10px; + font-size: 12px; + &:hover { + color: $red-brand-primary; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 25%) inset; + } + &:active { + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 50%) inset; + } + &.delete { + padding: 0 26px 0 13px; + } +} + +.icon-settings { + padding-right: 5px; +} + +.icon-delete { + padding-right: 10px; +} +</style> |