1 files changed, 87 insertions, 0 deletions
diff --git a/src/views/_sila/SILA/RAID/Settings/OptionsPopover.vue b/src/views/_sila/SILA/RAID/Settings/OptionsPopover.vue
new file mode 100644
index 00000000..d1b85754
--- /dev/null
+++ b/src/views/_sila/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>