Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

UI: Fix create zone wizard on mobile view #4764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yadvr merged 3 commits into from
Mar 30, 2021
Merged

UI: Fix create zone wizard on mobile view #4764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f846809
Merge branch '4.15' into feature/create-zone-mobile-view
Mar 25, 2021
3beb16a
fix the style of zone wizard on mobile view
Mar 25, 2021
af38519
Merge branch '4.15' into feature/create-zone-mobile-view
Mar 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions 3 ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,10 @@ export default {
min-height: 200px;
text-align: center;
vertical-align: center;
padding-top: 16px;
padding-top: 16px;
margin-top: 8px;
max-height: 300px;
overflow-y: auto;
padding: 16px 20px 0;

/deep/.has-error {
.ant-form-explain {
Expand Down
146 changes: 82 additions & 64 deletions 146 ui/src/views/infra/zone/IpAddressRangeForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,79 +24,94 @@
</a-card>
<a-table
bordered
:scroll="{ x: 500 }"
:dataSource="ipRanges"
:columns="columns"
:pagination="false"
style="margin-bottom: 24px;" >
style="margin-bottom: 24px; width: 100%" >
<template slot="actions" slot-scope="text, record">
<a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
</template>
<template slot="footer">
<a-form
layout="inline"
:layout="isMobile() ? 'horizontal': 'inline'"
:form="form"
@submit="handleAddRange">
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-input
v-decorator="[ 'gateway', {
rules: [{ required: true, message: $t('message.error.gateway') }]
}]"
:placeholder="$t('label.gateway')"
autoFocus
/>
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-input
v-decorator="[ 'netmask', {
rules: [{ required: true, message: $t('message.error.netmask') }]
}]"
:placeholder="$t('label.netmask')"
/>
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-input
v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
:placeholder="$t('label.vlan')"
/>
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-input
v-decorator="[ 'startIp', {
rules: [
{
required: true,
message: $t('message.error.startip')
},
{
validator: checkIpFormat,
ipV4: true,
message: $t('message.error.ipv4.address')
}
]
}]"
:placeholder="$t('label.start.ip')"
/>
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-input
v-decorator="[ 'endIp', {
rules: [
{
required: true,
message: $t('message.error.endip')
},
{
validator: checkIpFormat,
ipV4: true,
message: $t('message.error.ipv4.address')
}]
}]"
:placeholder="$t('label.end.ip')"
/>
</a-form-item>
<a-form-item :style="{ display: 'inline-block', width: '14%' }">
<a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
</a-form-item>
<a-row :gutter="12">
<a-col :md="4" :lg="4">
<a-form-item>
<a-input
v-decorator="[ 'gateway', {
rules: [{ required: true, message: $t('message.error.gateway') }]
}]"
:placeholder="$t('label.gateway')"
autoFocus
/>
</a-form-item>
</a-col>
<a-col :md="4" :lg="4">
<a-form-item>
<a-input
v-decorator="[ 'netmask', {
rules: [{ required: true, message: $t('message.error.netmask') }]
}]"
:placeholder="$t('label.netmask')"
/>
</a-form-item>
</a-col>
<a-col :md="4" :lg="4">
<a-form-item>
<a-input
v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
:placeholder="$t('label.vlan')"
/>
</a-form-item>
</a-col>
<a-col :md="4" :lg="4">
<a-form-item>
<a-input
v-decorator="[ 'startIp', {
rules: [
{
required: true,
message: $t('message.error.startip')
},
{
validator: checkIpFormat,
ipV4: true,
message: $t('message.error.ipv4.address')
}
]
}]"
:placeholder="$t('label.start.ip')"
/>
</a-form-item>
</a-col>
<a-col :md="4" :lg="4">
<a-form-item>
<a-input
v-decorator="[ 'endIp', {
rules: [
{
required: true,
message: $t('message.error.endip')
},
{
validator: checkIpFormat,
ipV4: true,
message: $t('message.error.ipv4.address')
}]
}]"
:placeholder="$t('label.end.ip')"
/>
</a-form-item>
</a-col>
<a-col :md="4" :lg="4">
<a-form-item :style="{ display: 'inline-block', float: 'right' }">
<a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</a-table>
Expand Down Expand Up @@ -126,7 +141,10 @@
</div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin.js'

export default {
mixins: [mixinDevice],
props: {
traffic: {
type: String,
Expand Down Expand Up @@ -183,7 +201,7 @@ export default {
title: '',
dataIndex: 'actions',
scopedSlots: { customRender: 'actions' },
width: 50
width: 70
}
],
showError: false,
Expand Down
3 changes: 1 addition & 2 deletions 3 ui/src/views/infra/zone/StaticInputsForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,11 +251,10 @@ export default {
min-height: 200px;
text-align: center;
vertical-align: center;
padding-top: 16px;
padding-top: 16px;
margin-top: 8px;
max-height: 300px;
overflow-y: auto;
padding: 16px 20px 0;

/deep/.has-error {
.ant-form-explain {
Expand Down
37 changes: 34 additions & 3 deletions 37 ui/src/views/infra/zone/ZoneWizard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@
<template>
<div class="form">
<a-steps
ref="zoneStep"
labelPlacement="vertical"
size="small"
:current="currentStep">
<a-step
v-for="(item) in steps"
v-for="(item, index) in steps"
:key="item.title"
:title="$t(item.title)">
:title="$t(item.title)"
:ref="`step${index}`">
</a-step>
</a-steps>
<div>
Expand Down Expand Up @@ -79,6 +81,7 @@
</div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin.js'
import ZoneWizardZoneTypeStep from '@views/infra/zone/ZoneWizardZoneTypeStep'
import ZoneWizardZoneDetailsStep from '@views/infra/zone/ZoneWizardZoneDetailsStep'
import ZoneWizardNetworkSetupStep from '@views/infra/zone/ZoneWizardNetworkSetupStep'
Expand All @@ -93,6 +96,7 @@ export default {
ZoneWizardAddResources,
ZoneWizardLaunchZone
},
mixins: [mixinDevice],
data () {
return {
currentStep: 0,
Expand Down Expand Up @@ -138,9 +142,26 @@ export default {
methods: {
nextPressed () {
this.currentStep++
this.scrollToStepActive()
},
backPressed (data) {
this.currentStep--
this.scrollToStepActive()
},
scrollToStepActive () {
if (!this.isMobile()) {
return
}
this.$nextTick(() => {
if (!this.$refs.zoneStep) {
return
}
if (this.currentStep === 0) {
this.$refs.zoneStep.$el.scrollLeft = 0
return
}
this.$refs.zoneStep.$el.scrollLeft = this.$refs['step' + (this.currentStep - 1)][0].$el.offsetLeft
})
},
onFieldsChanged (data) {
if (data.zoneType &&
Expand Down Expand Up @@ -177,7 +198,8 @@ export default {

<style scoped lang="scss">
.form {
width: 95vw;
width: 100%;

@media (min-width: 1000px) {
width: 800px;
}
Expand All @@ -197,6 +219,15 @@ export default {
position: absolute;
right: 0;
}

/deep/.ant-steps {
overflow-x: auto;
padding: 10px 0;
}

/deep/.submit-btn {
display: none;
}
}

/deep/.ant-form-text {
Expand Down
39 changes: 35 additions & 4 deletions 39 ui/src/views/infra/zone/ZoneWizardAddResources.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,15 @@

<template>
<div style="width: auto;">
<a-steps progressDot :current="currentStep" size="small" style="margin-left: 0; margin-top: 16px;">
<a-steps
ref="resourceStep"
progressDot
:current="currentStep"
size="small"
style="margin-left: 0; margin-top: 16px;">
<a-step
v-for="step in steps"
v-for="(step, index) in steps"
:ref="`resourceStep${index}`"
:key="step.title"
:title="$t(step.title)"></a-step>
</a-steps>
Expand Down Expand Up @@ -97,13 +103,15 @@
</div>
</template>
<script>
import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
import { api } from '@/api'
import { mixinDevice } from '@/utils/mixin.js'
import StaticInputsForm from '@views/infra/zone/StaticInputsForm'

export default {
components: {
StaticInputsForm
},
mixins: [mixinDevice],
props: {
prefillContent: {
type: Object,
Expand Down Expand Up @@ -687,14 +695,16 @@ export default {
primaryStorageScopes: [],
primaryStorageProtocols: [],
storageProviders: [],
currentStep: 0,
currentStep: null,
options: ['primaryStorageScope', 'primaryStorageProtocol', 'provider']
}
},
mounted () {
this.currentStep = this.prefillContent.resourceStep ? this.prefillContent.resourceStep : 0
if (this.stepChild && this.stepChild !== '') {
this.currentStep = this.steps.findIndex(item => item.fromKey === this.stepChild)
}
this.scrollToStepActive()
if (this.prefillContent.hypervisor.value === 'BareMetal') {
this.$emit('nextPressed')
} else {
Expand All @@ -719,14 +729,35 @@ export default {
this.$emit('nextPressed')
} else {
this.currentStep++
this.$emit('fieldsChanged', { resourceStep: this.currentStep })
}

this.scrollToStepActive()
},
handleBack (e) {
if (this.currentStep === 0) {
this.$emit('backPressed')
} else {
this.currentStep--
this.$emit('fieldsChanged', { resourceStep: this.currentStep })
}

this.scrollToStepActive()
},
scrollToStepActive () {
if (!this.isMobile()) {
return
}
this.$nextTick(() => {
if (!this.$refs.resourceStep) {
return
}
if (this.currentStep === 0) {
this.$refs.resourceStep.$el.scrollLeft = 0
return
}
this.$refs.resourceStep.$el.scrollLeft = this.$refs['resourceStep' + (this.currentStep - 1)][0].$el.offsetLeft
})
},
fieldsChanged (changed) {
this.$emit('fieldsChanged', changed)
Expand Down
Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.