diff options
Diffstat (limited to 'src/views/SystemDescription/Info/NtpPopover.vue')
-rw-r--r-- | src/views/SystemDescription/Info/NtpPopover.vue | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue new file mode 100644 index 00000000..81e95e4d --- /dev/null +++ b/src/views/SystemDescription/Info/NtpPopover.vue @@ -0,0 +1,141 @@ +<template> + <div id="my-container"> + <span :id="id" class="regular-12px underline" variant="primary"> + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + :target="id" + placement="auto" + container="my-container" + :show.sync="popoverShow" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ $t(description) }}</span> + <b-button class="popup-title__button_close" @click="onClose"> + <img src="@/assets/images/popups/x-icon.svg" /> + </b-button> + </div> + </template> + + <div class="popup-body"> + <div class="popup-body__input-container"> + <span class="regular-12px tretiatry" + >Введите адрес сервера (IP, FQDM)</span + > + <b-form-input + id="popover-input-1" + v-model="input1" + class="medium-12px" + ></b-form-input> + </div> + <b-button class="popover-button" variant="primary" @click="onClose"> + {{ $t('global.action.save') }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + button: { + type: String, + default: 'Reload', + }, + }, + data() { + return { + input1: '', + popoverShow: false, + }; + }, + methods: { + onShow() { + this.$root.$emit('bv::hide::popover'); + }, + onClose() { + this.popoverShow = false; + }, + }, +}; +</script> +<style lang="scss" scoped> +.form-group { + margin: 0; +} + +.popup-title { + display: flex; + flex-flow: row nowrap; + align-items: baseline; +} + +.popup-title__button_close { + margin: 0 28px 0 auto; + background: none; + border: none; + &:active { + background-color: $faint-secondary-primary-5-hover !important; + box-shadow: none !important; + border-radius: 8px; + } + &:focus-visible { + border: none !important; + border-radius: 8px; + } + &:focus { + box-shadow: none; + border-radius: 8px; + } +} + +.popup-body { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} + +.form-control { + width: 341px; + height: 52px; + background: rgba(26, 62, 91, 0.05); + border-radius: 8px; + border: none; + margin: -25px auto; + padding-top: 30px; +} + +.popover-button { + width: 341px; + height: 40px; + margin: 0 auto 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} + +.underline { + cursor: pointer; +} +</style> |