From c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Tue, 24 May 2022 10:04:19 +0300
Subject: Add global popovers. Add pages: pci, adapters, raid, drivers, virtual
 drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles

---
 .../SILA/RAID/Settings/ActionSettingsPopover.vue   | 131 +++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 src/views/SILA/RAID/Settings/ActionSettingsPopover.vue

(limited to 'src/views/SILA/RAID/Settings/ActionSettingsPopover.vue')

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>
-- 
cgit v1.2.3