diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-05-24 10:04:19 +0300 |
commit | c4d70da69a3c86f8c07ccdb0f09b755dd99b2155 (patch) | |
tree | fb8579325d609699395e9550eaa803222a321fd6 /src/components/Global | |
parent | 6facd12596ec8b55bab4be04b473de65e1f22018 (diff) | |
download | webui-vue-c4d70da69a3c86f8c07ccdb0f09b755dd99b2155.tar.xz |
Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles
Diffstat (limited to 'src/components/Global')
7 files changed, 435 insertions, 19 deletions
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue index bae121c3..f0b4063f 100644 --- a/src/components/Global/Popover.vue +++ b/src/components/Global/Popover.vue @@ -1,7 +1,7 @@ <template> <div id="my-container"> <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer"> - <img src="@/assets/images/clear-icon.svg" /> + <img src="@/assets/images/icon-clear-red.svg" /> <span class="regular-12px red-font">{{ $t(description) }}</span> </div> <div @@ -15,11 +15,22 @@ <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 pointer" + class="regular-12px underline" variant="primary" > {{ $t(description) }} @@ -104,6 +115,10 @@ export default { type: Boolean, default: false, }, + isMicrocodeDrivers: { + type: Boolean, + default: false, + }, isclear: { type: Boolean, default: false, @@ -245,10 +260,6 @@ export default { margin: 0px 5px 0px 15px; } -.pointer { - cursor: pointer; -} - .popover-info { background-color: $on-surface-primary; // border: 1px solid $text-primary; 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> diff --git a/src/components/Global/SilaComponents/DataTabs.vue b/src/components/Global/SilaComponents/DataTabs.vue new file mode 100644 index 00000000..49afbbfb --- /dev/null +++ b/src/components/Global/SilaComponents/DataTabs.vue @@ -0,0 +1,136 @@ +<template> + <div> + <div + ref="content" + :class="'tabs-switch'" + :style="gridStyle" + @wheel.prevent="wheelItBetter($event)" + > + <span + v-for="item in slots" + :key="item.id" + class="medium-12px scale-item" + :class="{ 'tab-active': currentTab === item.id }" + :style="`width: ${slotWidth}px`" + @click="switchTab(item.id)" + >{{ $t(item.name) }}</span + > + <div class="slider" :style="sliderStyle" /> + </div> + </div> +</template> + +<script> +export default { + props: { + slots: { + type: Array, + default: null, + }, + currentTab: { + type: Number, + default: 1, + }, + switchTab: { + type: Function, + required: true, + }, + slotWidth: { + type: Number, + default: null, + }, + sliderWidth: { + type: Number, + default: null, + }, + }, + data() { + return { + upHere: false, + container: this.$refs.content, + }; + }, + computed: { + sliderStyle() { + return { + width: `${this.sliderWidth}px`, + left: `${ + ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth + }px`, + }; + }, + gridStyle() { + return { + gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`, + }; + }, + }, + methods: { + wheelItBetter(event) { + if (event.deltaY < 0) { + this.$refs.content.scrollLeft -= 25; + } else { + this.$refs.content.scrollLeft += 25; + } + }, + }, +}; +</script> +<style lang="scss" scoped> +.tabs-switch { + position: relative; + width: calc(95vw - 320px); + height: 45px; + margin-left: 32px; + display: grid; + grid-auto-flow: column; + grid-template-rows: 32px; + align-items: end; + border-bottom: 1px solid $faint-secondary-primary-10; + overflow-x: auto; + white-space: nowrap; + &::-webkit-scrollbar { + height: 2px; + } + &::-webkit-scrollbar-thumb { + background: rgba(26, 62, 91, 0.2); + border-radius: 16px; + background-clip: content-box; + height: 10px; + } +} + +.tab-active { + color: $red-brand-primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $red-brand-primary; + transition: ease-in 0.2s; + bottom: 0px; +} + +.scale-item { + display: inline-block; + margin-right: 6px; + cursor: pointer; + &:hover { + transition: ease-in 0.2s; + color: #e11717; + } +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue index 0769c734..4df70ba4 100644 --- a/src/components/Global/SilaComponents/DateSwitch.vue +++ b/src/components/Global/SilaComponents/DateSwitch.vue @@ -37,7 +37,7 @@ $t('global.date.selectDate') }}</span> </div> - <img class="date-clear" src="@/assets/images/clear-icon.svg" /> + <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> </div> </template> diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue index 9760f24f..de5432e1 100644 --- a/src/components/Global/SilaComponents/InventoryControlSystem.vue +++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue @@ -19,10 +19,7 @@ popup="SystemDescription.ReloadServer_popup" /> <div> - <span - class="regular-12px underline pointer" - @click="redirectConsole" - > + <span class="regular-12px underline" @click="redirectConsole"> {{ $t('SystemDescription.ConnectToDesktop') }} </span> </div> @@ -151,10 +148,6 @@ a { list-style-type: none; } -.pointer { - cursor: pointer; -} - .system-control-section { position: relative; margin: 16px 2rem 2rem !important; diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue index 918b1220..c94c1cc8 100644 --- a/src/components/Global/SilaComponents/NtpPopover.vue +++ b/src/components/Global/SilaComponents/NtpPopover.vue @@ -129,8 +129,4 @@ export default { .tretiatry { margin-left: 12px; } - -.underline { - cursor: pointer; -} </style> diff --git a/src/components/Global/SilaComponents/TwoChiocePopover.vue b/src/components/Global/SilaComponents/TwoChiocePopover.vue new file mode 100644 index 00000000..c89c5a81 --- /dev/null +++ b/src/components/Global/SilaComponents/TwoChiocePopover.vue @@ -0,0 +1,117 @@ +<template> + <b-popover + :placement="placement" + triggers="focus" + :show.sync="show" + custom-class="popover-heigth-100" + :target="`popover-choice-${id}`" + @hidden="onHidden" + > + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === topPosition }" + @mouseover="scale = topPosition" + @click=" + () => { + show = false; + firstAction(); + } + " + > + {{ fitstOption }} + </b-button> + <b-button + id="popover-choice-button" + variant="popover" + :class="{ 'selected-choice-button': scale === bottomPosition }" + @mouseover="scale = bottomPosition" + @click=" + () => { + show = false; + secondAction(); + } + " + > + {{ secondOption }} + </b-button> + <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div> + </b-popover> +</template> + +<script> +export default { + props: { + id: { + type: Number, + default: null, + }, + fitstOption: { + type: String, + default: null, + }, + secondOption: { + type: String, + default: null, + }, + chosenOption: { + type: String, + default: null, + }, + firstAction: { + type: Function, + default: null, + }, + secondAction: { + type: Function, + default: null, + }, + placement: { + type: String, + default: 'bottom', + }, + }, + data() { + return { + topPosition: 5, + bottomPosition: 33, + show: false, + scale: 5, + }; + }, + methods: { + onHidden() { + if (this.secondOption === this.chosenOption) { + this.scale = this.bottomPosition; + } else { + this.scale = this.topPosition; + } + }, + }, +}; +</script> +<style lang="scss"> +#popover-unit-ractive { + padding-left: 5px; +} + +.hovered-unit-button { + color: $white; +} +</style> +<style lang="scss" scoped> +#popover-choice-button { + width: 89px; +} + +.slider { + width: 89px; + 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> |