diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-07-13 12:12:58 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-07-13 12:12:58 +0300 |
commit | ac2e648139a370f1c5b418cfb1694b348f992f8e (patch) | |
tree | 3d29fa28a97a2fbb0b1ad4cc2e0dc1d9065bab76 /src/components | |
parent | b2bea3021aea8be3d4bc34f965bf58297c358bca (diff) | |
download | webui-vue-ac2e648139a370f1c5b418cfb1694b348f992f8e.tar.xz |
Add pages bms
Issue: SILABMC-191
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Popover.vue | 287 | ||||
-rw-r--r-- | src/components/_sila/Global/PopoverInfo.vue | 40 |
2 files changed, 327 insertions, 0 deletions
diff --git a/src/components/_sila/Global/Popover.vue b/src/components/_sila/Global/Popover.vue new file mode 100644 index 00000000..95e9fb24 --- /dev/null +++ b/src/components/_sila/Global/Popover.vue @@ -0,0 +1,287 @@ +<template> + <div id="popover-container"> + <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> + <img src="@/assets/images/icon-clear-red.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + <div + v-else-if="isMicrocode" + :id="id" + ref="button" + variant="primary" + class="pointer" + > + <img src="@/assets/images/icon-reload-red.svg" /> + <span class="regular-12px red-font">{{ $t(description) }}</span> + </div> + + <div + v-else-if="isMicrocodeDrivers" + :id="id" + ref="button" + variant="primary" + class="pointer" + > + <img src="@/assets/images/icon-reload-red.svg" /> + <span class="semi-bold-16px red-font">{{ $t(description) }}</span> + </div> + + <span + v-else + :id="id" + ref="button" + class="regular-12px underline" + variant="primary" + > + {{ $t(description) }} + </span> + <!-- Our popover title and content render container --> + <b-popover + ref="popover" + :target="id" + triggers="click" + :show.sync="popoverShow" + placement="auto" + container="popover-container" + @show="onShow" + @shown="onShown" + @hidden="onHidden" + > + <template #title> + <div class="popup-title"> + <span class="bold-16px__caps">{{ $t(popup) }}</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> + <label class="light-12px" style="margin-right: 5px">{{ + 'HEX для ввода' + }}</label> + <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" /> + <popover-info + id="popover-tooltip" + description="Введите HEX в поле для подтверждения действия" + /> + <div class="hex-label"> + <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span> + </div> + </div> + <div class="popup-body__input-container"> + <span style="margin-left: 12px" class="regular-12px tretiatry" + >Поле для ввода</span + > + <b-form-input + id="popover-input-1" + v-model="input" + class="medium-12px" + ></b-form-input> + </div> + <b-button + class="popup-button" + variant="primary" + :disabled="!input" + @click="onOk" + > + {{ $t(button) }} + </b-button> + </div> + </b-popover> + </div> +</template> + +<script> +import PopoverInfo from './PopoverInfo'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +export default { + components: { + PopoverInfo, + }, + mixins: [BVToastMixin], + props: { + id: { + type: String, + default: '', + }, + description: { + type: String, + default: '', + }, + popup: { + type: String, + default: '', + }, + placement: { + type: String, + default: 'auto', + }, + button: { + type: String, + default: 'global.action.reload', + }, + isMicrocode: { + type: Boolean, + default: false, + }, + isMicrocodeDrivers: { + type: Boolean, + default: false, + }, + isclear: { + type: Boolean, + default: false, + }, + action: { + type: Function, + default: null, + }, + }, + data() { + return { + input: '', + popoverShow: false, + }; + }, + methods: { + onClose() { + this.popoverShow = false; + }, + onOk() { + if (this.input === '9c1735b3f819142393146a5d03314f0a') { + this.action(); + this.onClose(); + } else { + this.warningToast( + this.$t('Неправильный HEX в поле для подтверждения действия'), + { + title: this.$t('Неправильный НЕХ'), + } + ); + } + }, + onShow() { + // This is called just before the popover is shown + // Reset our popover form variables + this.$root.$emit('bv::hide::popover'); + this.input = ''; + }, + onShown() { + // Called just after the popover has been shown + // Transfer focus to the first input + this.focusRef(this.$refs.input1); + }, + onHidden() { + // Called just after the popover has finished hiding + // Bring focus back to the button + this.focusRef(this.$refs.button); + }, + focusRef(ref) { + // Some references may be a component, functional component, or plain element + // This handles that check before focusing, assuming a `focus()` method exists + // We do this in a double `$nextTick()` to ensure components have + // updated & popover positioned first + this.$nextTick(() => { + this.$nextTick(() => { + (ref.$el || ref).focus(); + }); + }); + }, + }, +}; +</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; + align-items: center; +} + +.form-control { + width: 341px; + height: 52px; + margin: -25px auto; + padding-top: 30px; +} + +.hex-label { + height: 32px; + width: 341px; + display: flex; + justify-content: center; + align-items: center; + background: $faint-secondary-primary-5; + border-radius: 8px; + border: none; + margin: 0 auto; +} + +.popup-button { + width: 341px; + height: 40px; + margin-bottom: 10px; +} + +.popup-body__input-container { + height: 52px; + margin: 24px auto 16px auto; +} + +.tretiatry { + margin-left: 12px; +} + +.light-12px { + margin: 0px 5px 0px 15px; +} + +.popover-info { + background-color: $on-surface-primary; + // border: 1px solid $text-primary; + // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06); + border-radius: 8px; + width: 168px; + height: 76px; + &.arrow { + display: block; + } +} + +.red-font { + padding-left: 5px; + color: $red-brand-primary; +} +</style> diff --git a/src/components/_sila/Global/PopoverInfo.vue b/src/components/_sila/Global/PopoverInfo.vue new file mode 100644 index 00000000..4b1b0b0d --- /dev/null +++ b/src/components/_sila/Global/PopoverInfo.vue @@ -0,0 +1,40 @@ +<template> + <b-popover :target="id" triggers="hover" placement="top"> + <span class="regular-12px">{{ description }}</span> + </b-popover> +</template> + +<script> +export default { + props: { + description: { + type: String, + default: '', + }, + id: { + type: String, + default: '', + }, + }, +}; +</script> +<style lang="scss" scoped> +.popover::v-deep { + background-color: #040a0f; + width: 168px; + height: 76px; +} + +.popover::v-deep .arrow { + visibility: visible; +} + +.popover::v-deep .arrow::after { + border-top-color: #040a0f; + border-bottom-color: #040a0f; +} + +.regular-12px { + color: $white; +} +</style> |