diff options
Diffstat (limited to 'src/components/Global/SilaComponents/ApplySettingsPopover.vue')
-rw-r--r-- | src/components/Global/SilaComponents/ApplySettingsPopover.vue | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/src/components/Global/SilaComponents/ApplySettingsPopover.vue b/src/components/Global/SilaComponents/ApplySettingsPopover.vue new file mode 100644 index 00000000..57e0844c --- /dev/null +++ b/src/components/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> |