summaryrefslogtreecommitdiff
path: root/src/components/Global
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Global')
-rw-r--r--src/components/Global/LoadingBar.vue4
-rw-r--r--src/components/Global/Popover.vue90
-rw-r--r--src/components/Global/SilaComponents/InventoryControlSystem.vue42
-rw-r--r--src/components/Global/SilaComponents/NtpPopover.vue4
-rw-r--r--src/components/Global/SilaComponents/PopoverWithSlot.vue225
-rw-r--r--src/components/Global/TableToolbar.vue11
-rw-r--r--src/components/Global/TableToolbarExport.vue13
7 files changed, 291 insertions, 98 deletions
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 0e9551b5..b65f97a7 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -74,12 +74,13 @@ export default {
<style lang="scss" scoped>
.progress {
position: absolute;
- left: 0;
right: 0;
bottom: -0.4rem;
opacity: 1;
transition: opacity $duration--moderate-01 $standard-easing--productive;
height: 0.4rem;
+ width: calc(100vw - 320px);
+ border-radius: 0px;
&.fade-enter, // Remove this vue2 based only class when switching to vue3
&.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
@@ -89,5 +90,6 @@ export default {
}
.progress-bar {
background-color: $loading-color;
+ border-radius: 0px;
}
</style>
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index f0b4063f..95e9fb24 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,5 +1,5 @@
<template>
- <div id="my-container">
+ <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>
@@ -42,7 +42,7 @@
triggers="click"
:show.sync="popoverShow"
placement="auto"
- container="my-container"
+ container="popover-container"
@show="onShow"
@shown="onShown"
@hidden="onHidden"
@@ -58,28 +58,34 @@
<div class="popup-body">
<div>
- <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label>
- <img
- id="popover-target-1"
- src="@/assets/images/popups/red-sign.svg"
- />
+ <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-target-1"
+ id="popover-tooltip"
description="Введите HEX в поле для подтверждения действия"
/>
- <div class="hex-form">
+ <div class="hex-label">
<span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
</div>
</div>
<div class="popup-body__input-container">
- <span class="regular-12px tretiatry">Поле для ввода</span>
+ <span style="margin-left: 12px" class="regular-12px tretiatry"
+ >Поле для ввода</span
+ >
<b-form-input
id="popover-input-1"
- v-model="input1"
+ v-model="input"
class="medium-12px"
></b-form-input>
</div>
- <b-button class="popover-button" variant="primary" @click="onClose">
+ <b-button
+ class="popup-button"
+ variant="primary"
+ :disabled="!input"
+ @click="onOk"
+ >
{{ $t(button) }}
</b-button>
</div>
@@ -89,27 +95,32 @@
<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: '',
},
- id: {
+ popup: {
type: String,
default: '',
},
- button: {
+ placement: {
type: String,
- default: 'global.action.reload',
+ default: 'auto',
},
- popup: {
+ button: {
type: String,
- default: '',
+ default: 'global.action.reload',
},
isMicrocode: {
type: Boolean,
@@ -123,43 +134,39 @@ export default {
type: Boolean,
default: false,
},
+ action: {
+ type: Function,
+ default: null,
+ },
},
data() {
return {
- input1: '',
- input1state: null,
- input1Return: '',
+ input: '',
popoverShow: false,
};
},
- watch: {
- input1(val) {
- if (val) {
- this.input1state = true;
- }
- },
- },
methods: {
onClose() {
this.popoverShow = false;
},
onOk() {
- if (!this.input1) {
- this.input1state = false;
- }
- if (this.input1) {
+ if (this.input === '9c1735b3f819142393146a5d03314f0a') {
+ this.action();
this.onClose();
- // Return our popover form results
- this.input1Return = this.input1;
+ } else {
+ this.warningToast(
+ this.$t('Неправильный HEX в поле для подтверждения действия'),
+ {
+ title: this.$t('Неправильный НЕХ'),
+ }
+ );
}
},
onShow() {
- this.$root.$emit('bv::hide::popover');
// This is called just before the popover is shown
// Reset our popover form variables
- this.input1 = '';
- this.input1state = null;
- this.input1Return = '';
+ this.$root.$emit('bv::hide::popover');
+ this.input = '';
},
onShown() {
// Called just after the popover has been shown
@@ -220,6 +227,7 @@ export default {
flex-direction: column;
align-content: center;
justify-content: center;
+ align-items: center;
}
.form-control {
@@ -229,7 +237,7 @@ export default {
padding-top: 30px;
}
-.hex-form {
+.hex-label {
height: 32px;
width: 341px;
display: flex;
@@ -241,10 +249,10 @@ export default {
margin: 0 auto;
}
-.popover-button {
+.popup-button {
width: 341px;
height: 40px;
- margin: 0 auto 10px;
+ margin-bottom: 10px;
}
.popup-body__input-container {
diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue
index de5432e1..18f1d9ff 100644
--- a/src/components/Global/SilaComponents/InventoryControlSystem.vue
+++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue
@@ -91,10 +91,10 @@
v-model="timeOption"
class="system-control__radio regular-12px"
>
- <b-form-radio value="NTP">
+ <b-form-radio variant="radio" value="NTP">
{{ $t('SystemDescription.GetNtpFromServer') }}
</b-form-radio>
- <b-form-radio value="serverDate">
+ <b-form-radio variant="radio" value="serverDate">
{{ $t('SystemDescription.UseServerDatettime') }}
</b-form-radio>
</b-form-radio-group>
@@ -192,42 +192,4 @@ label {
.system-control__table__cell__4 {
margin-top: 26px;
}
-
-.custom-radio ::before {
- border: 1px solid $red-brand-primary;
- background-color: #fff;
- border-radius: 100%;
-}
-
-.system-control-section::v-deep
- .custom-control-input:checked
- ~ .custom-control-label::before {
- border: 2px solid $red-brand-primary;
- background-color: $red-brand-primary;
- box-shadow: 0px 0px 0px 2.5px $white inset;
- border-radius: 100%;
-}
-
-.system-control-section::v-deep
- .custom-control-input:hover
- ~ .custom-control-label::before {
- background-color: $red-brand-primary-hover !important;
- box-shadow: 0px 0px 0px 2.5px $white inset;
- border-color: $red-brand-primary-hover;
-}
-
-.system-control-section::v-deep
- .custom-control-input:checked
- ~ .custom-control-label::after {
- background-image: none !important;
- border-radius: 100%;
-}
-
-.system-control-section::v-deep
- .custom-control-input:active
- ~ .custom-control-label::before {
- background-color: $red-brand-primary-active !important;
- box-shadow: 0px 0px 0px 2.5px $white inset;
- border-color: $red-brand-primary-active;
-}
</style>
diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue
index c94c1cc8..6f181002 100644
--- a/src/components/Global/SilaComponents/NtpPopover.vue
+++ b/src/components/Global/SilaComponents/NtpPopover.vue
@@ -31,7 +31,7 @@
class="medium-12px"
></b-form-input>
</div>
- <b-button class="popover-button" variant="primary" @click="onClose">
+ <b-button class="popup-button" variant="primary" @click="onClose">
{{ $t('global.action.save') }}
</b-button>
</div>
@@ -115,7 +115,7 @@ export default {
padding-top: 30px;
}
-.popover-button {
+.popup-button {
width: 341px;
height: 40px;
margin: 0 auto 10px;
diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue
new file mode 100644
index 00000000..a9ec649b
--- /dev/null
+++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue
@@ -0,0 +1,225 @@
+<template>
+ <div id="popover-container">
+ <slot />
+ <b-popover
+ ref="popover"
+ :target="id"
+ triggers="click"
+ :show.sync="popoverShow"
+ :placement="placement"
+ container="popover-container"
+ @show="onShow"
+ @shown="onShown"
+ @hidden="onHidden"
+ >
+ <template #title>
+ <div class="popup-title">
+ <span class="bold-16px__caps">{{ popupLabel }}</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"
+ ref="input"
+ v-model="input"
+ class="medium-12px"
+ ></b-form-input>
+ </div>
+ <b-button
+ class="popup-button"
+ variant="primary"
+ :disabled="!input"
+ @click="onOk"
+ >
+ {{ buttonLabel }}
+ </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: '',
+ },
+ placement: {
+ type: String,
+ default: 'auto',
+ },
+ popupLabel: {
+ type: String,
+ default: '',
+ },
+ buttonLabel: {
+ type: String,
+ default: 'global.action.reload',
+ },
+ 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.input);
+ },
+ 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(() => {
+ console.log(ref);
+ (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;
+}
+
+.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;
+ }
+}
+</style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 3ac8e2ce..eabe0c98 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -67,12 +67,13 @@ export default {
},
};
</script>
-
<style lang="scss" scoped>
$toolbar-height: 64px;
.toolbar-container {
- width: 100%;
+ width: calc(100vw - 320px);
+ height: $toolbar-height;
+ border-radius: 0px;
position: fixed;
bottom: 0;
right: 0;
@@ -80,18 +81,14 @@ $toolbar-height: 64px;
}
.toolbar-content {
- height: $toolbar-height;
background-color: $white;
color: $white;
- position: absolute;
- left: 0;
- right: 0;
- top: -$toolbar-height;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
+ border-radius: 0px;
}
.toolbar-selected {
diff --git a/src/components/Global/TableToolbarExport.vue b/src/components/Global/TableToolbarExport.vue
index 69646ea6..152a4f68 100644
--- a/src/components/Global/TableToolbarExport.vue
+++ b/src/components/Global/TableToolbarExport.vue
@@ -1,16 +1,15 @@
<template>
- <b-button
- class="d-flex align-items-center"
- variant="primary"
- :download="download"
- :href="href"
- >
- {{ $t('global.action.export') }}
+ <b-button size="md" variant="primary" :download="download" :href="href">
+ <icon-export /> {{ $t('global.action.export') }}
</b-button>
</template>
<script>
+import IconExport from '@carbon/icons-vue/es/document--export/20';
export default {
+ components: {
+ IconExport,
+ },
props: {
data: {
type: Array,
generated by cgit v1.2.3 (git 2.39.0) at 2024-07-01 13:15:08 +0300