IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed to central slider index and individual button icon

Browse Source
This commit is contained in:
Wolfgang Huß 2021-02-03 08:27:01 +01:00
parent e50728e4db
commit ab1b624eb2
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/ComponentSlider/ComponentSlider.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="Sliders">
<!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
<slot :name="sliderData.activeSliderName" />
<slot :name="sliderData.sliders[sliderIndex].name" />
<ds-flex>
<ds-flex-item>
<div
@ -21,14 +21,14 @@
filled
:loading="false"
:disabled="index > sliderIndex"
@click="sliderData.sliderSelectorCallback(slider.name)"
@click="sliderData.sliderSelectorCallback(index)"
/>
</div>
</ds-flex-item>
<ds-flex-item>
<base-button
style="float: right"
:icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
:icon="sliderData.sliders[sliderIndex].button.icon"
type="submit"
filled
:loading="false"
@ -50,7 +50,7 @@ export default {
},
computed: {
sliderIndex() {
return this.sliderIndexByName(this.sliderData.activeSliderName)
return this.sliderData.sliderIndex
},
},
methods: {

16
webapp/components/Registration/RegistrationSlider.vue
View File

@ -77,13 +77,14 @@ export default {
inviteCode: null,
email: null,
},
// sliderIndex: 0,
sliderIndex: 0,
sliders: [
{
name: 'enter-invite',
validated: false,
button: {
title: 'Next', // Wolle
icon: 'arrow-right',
callback: this.buttonCallback,
},
},
@ -92,6 +93,7 @@ export default {
// validated: false,
// button: {
// title: 'Next', // Wolle
// icon: :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
// callback: this.buttonCallback,
// },
// },
@ -100,11 +102,11 @@ export default {
validated: false,
button: {
title: this.$t('actions.save'), // Wolle
icon: 'check',
callback: this.buttonCallback,
},
},
],
activeSliderName: 'enter-invite',
sliderSelectorCallback: this.sliderSelectorCallback,
validateCallback: this.validateCallback,
},
@ -112,7 +114,7 @@ export default {
},
computed: {
sliderIndex() {
return this.sliderIndexByName(this.sliderData.activeSliderName)
return this.sliderData.sliderIndex
},
},
methods: {
@ -128,9 +130,9 @@ export default {
}
this.sliderData.sliders[this.sliderIndex].validated = is
},
sliderSelectorCallback(sliderName) {
if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
this.sliderData.activeSliderName = sliderName
sliderSelectorCallback(selectedIndex) {
if (selectedIndex < this.sliderIndex) {
this.sliderData.sliderIndex = selectedIndex
}
},
buttonCallback() {
@ -138,7 +140,7 @@ export default {
// console.log('submit data: ', this.sliderData.collectedComponentData)
} else {
if (this.sliderIndex < this.sliderData.sliders.length - 1) {
this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1].name
this.sliderData.sliderIndex++
}
}
},