1 files changed, 163 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue b/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue
new file mode 100644
index 00000000..57e0844c
--- /dev/null
+++ b/src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="popover-applay-container">
+    <span class="apply-label regular-12px tretiatry">
+      {{ $t('global.applySettings.apply') }}</span
+    >
+    <b-button :id="`popover-apply-ractive${id}`" variant="unstiled">
+      <span class="regular-12px apply-variant">
+        {{ $t(`global.applySettings.${applyType}`) }}</span
+      >
+      <img class="apply-chevron" src="@/assets/images/icon-chevron-red.svg" />
+    </b-button>
+    <b-popover
+      placement="bottom"
+      triggers="focus"
+      :show.sync="show"
+      custom-class="apply-reload-popover"
+      :target="`popover-apply-ractive${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>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 1,
+    },
+    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">
+.popover-applay-container {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.hovered-apply-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+.apply-label {
+  margin-left: auto;
+}
+
+.apply-chevron {
+  margin: 0 10px 0 5px;
+  cursor: pointer;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.apply-variant {
+  cursor: pointer;
+  color: $red-brand-primary;
+}
+
+#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>