Skip to content

Commit 22c415e

Browse files
jspaaksjspaaks
authored
Merge pull request #290 from citation-file-format/161-255-button-state-and-position
button state and position
2 parents f10491a + d4090dd commit 22c415e

4 files changed

Lines changed: 122 additions & 66 deletions

File tree

‎src/components/LayoutStepper.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</div>
1515

1616
<div id="preview-button-bar">
17-
<DownloadButton />
17+
<DownloadButton v-if="isNotFinish" />
1818
</div>
1919
</div>
2020
</div>
@@ -32,7 +32,8 @@ import Header from 'components/Header.vue'
3232
import Preview from 'components/Preview.vue'
3333
import DownloadButton from 'components/DownloadButton.vue'
3434
import Footer from 'components/Footer.vue'
35-
import { defineComponent } from 'vue'
35+
import { defineComponent, computed } from 'vue'
36+
import { useRoute } from 'vue-router'
3637
3738
export default defineComponent({
3839
name: 'StepperLayout',
@@ -44,6 +45,10 @@ export default defineComponent({
4445
},
4546
setup () {
4647
return {
48+
isNotFinish: computed(() => {
49+
const currentPath = useRoute().path
50+
return currentPath !== '/finish-minimum' && currentPath !== '/finish-advanced'
51+
})
4752
}
4853
}
4954
})

‎src/components/ScreenFinishAdvanced.vue‎

Lines changed: 64 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,70 @@
22
<div id="metroline">
33
<Stepper />
44
</div>
5-
65
<div id="form">
76
<div id="form-title">
8-
<h1 class="finish-title">
7+
<h1
8+
class="finish-title"
9+
v-if="isValid"
10+
>
911
Congratulations
1012
</h1>
13+
<h1
14+
class="finish-title"
15+
v-else
16+
>
17+
Uh-oh!
18+
</h1>
1119
</div>
1220

1321
<div id="form-content">
14-
<p class="finish-paragraph">
15-
Now you have a CITATION.cff file and you get the credits you deserve.
16-
</p>
17-
<p class="finish-paragraph">
18-
Share a reference to your software.
19-
</p>
22+
<div v-if="isValid">
23+
<p class="finish-paragraph">
24+
Use the buttons below to download your CITATION.cff file, or reset the form to start over.
25+
</p>
26+
<div class="row">
27+
<DownloadButton class="col-4 q-ma-lg" />
28+
<q-btn
29+
class="col-4 q-ma-lg"
30+
color="primary"
31+
icon="refresh"
32+
label="Reset form"
33+
no-caps
34+
size="xl"
35+
v-on:click="createAnother"
36+
/>
37+
</div>
2038

21-
<div
22-
class="text-primary q-gutter-md q-mb-xl"
23-
style="font-size: 2em"
24-
>
25-
<q-icon
26-
name="ion-logo-twitter"
27-
size="xl"
28-
/>
29-
<q-icon
30-
name="ion-logo-linkedin"
31-
size="xl"
32-
/>
33-
<q-icon
34-
name="ion-logo-reddit"
35-
size="xl"
36-
/>
39+
<p
40+
class="finish-paragraph"
41+
style="margin-top: 120px"
42+
>
43+
Share a reference to your software.
44+
</p>
45+
46+
<div
47+
class="text-primary q-gutter-md q-mb-xl"
48+
style="font-size: 2em"
49+
>
50+
<q-icon
51+
name="ion-logo-twitter"
52+
size="xl"
53+
/>
54+
<q-icon
55+
name="ion-logo-linkedin"
56+
size="xl"
57+
/>
58+
<q-icon
59+
name="ion-logo-reddit"
60+
size="xl"
61+
/>
62+
</div>
63+
</div>
64+
<div v-else>
65+
<p class="finish-paragraph">
66+
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
67+
</p>
3768
</div>
38-
<q-card-actions
39-
align="center"
40-
class="q-gutter-md"
41-
>
42-
<q-btn
43-
class="q-ml-xl"
44-
color="primary"
45-
icon="refresh"
46-
label="Create another"
47-
no-caps
48-
v-on:click="createAnother"
49-
/>
50-
</q-card-actions>
5169
</div>
5270

5371
<div id="form-button-bar">
@@ -57,15 +75,18 @@
5775
</template>
5876

5977
<script lang="ts">
60-
import { defineComponent } from 'vue'
78+
import { defineComponent, computed } from 'vue'
6179
import { useApp } from '../store/app'
6280
import { useCff } from '../store/cff'
6381
import Stepper from 'components/Stepper.vue'
6482
import StepperActions from 'components/StepperActions.vue'
83+
import { isValidCffFile } from 'src/validator'
84+
import DownloadButton from 'components/DownloadButton.vue'
6585
6686
export default defineComponent({
6787
name: 'ScreenFinishAdvanced',
6888
components: {
89+
DownloadButton,
6990
Stepper,
7091
StepperActions
7192
},
@@ -74,6 +95,7 @@ export default defineComponent({
7495
const { reset } = useCff()
7596
7697
return {
98+
isValid: computed(isValidCffFile),
7799
createAnother: async () => {
78100
reset()
79101
setShowAdvanced(false)
@@ -88,7 +110,9 @@ export default defineComponent({
88110
</script>
89111

90112
<style scoped>
91-
.download-button {
92-
margin-top: 150px;
113+
.row {
114+
display: flex;
115+
flex-direction: row;
116+
justify-content: center
93117
}
94118
</style>

‎src/components/ScreenFinishMinimum.vue‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,70 @@
44
</div>
55
<div id="form">
66
<div id="form-title">
7-
<h1 class="finish-title">
7+
<h1
8+
class="finish-title"
9+
v-if="isValid"
10+
>
811
Congratulations
912
</h1>
13+
<h1
14+
class="finish-title"
15+
v-else
16+
>
17+
Uh-oh!
18+
</h1>
1019
</div>
1120

1221
<div id="form-content">
13-
<p class="finish-paragraph">
14-
You now have a minimal CITATION.cff file. You can now download your CITATION.cff file, or add some more properties.
15-
</p>
16-
<q-card-actions
17-
align="center"
18-
class="q-gutter-md"
19-
>
20-
<q-btn
21-
class="q-ml-xl"
22-
color="primary"
23-
icon="workspace_premium"
24-
label="Show advanced"
25-
no-caps
26-
to="/identifiers"
27-
v-on:click="showAdvanced"
28-
/>
29-
</q-card-actions>
22+
<div v-if="isValid">
23+
<p class="finish-paragraph">
24+
You now have a minimal CITATION.cff file. Use the buttons below to download your CITATION.cff file, or continue adding more properties.
25+
</p>
26+
<div class="row">
27+
<DownloadButton class="col-4 q-ma-lg" />
28+
<q-btn
29+
class="col-4 q-ma-lg"
30+
color="primary"
31+
icon="workspace_premium"
32+
label="Show advanced"
33+
no-caps
34+
size="xl"
35+
to="/identifiers"
36+
v-on:click="showAdvanced"
37+
/>
38+
</div>
39+
</div>
40+
<div v-else>
41+
<p class="finish-paragraph">
42+
Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
43+
</p>
44+
</div>
3045
</div>
31-
3246
<div id="form-button-bar">
3347
<StepperActions />
3448
</div>
3549
</div>
3650
</template>
3751

3852
<script lang="ts">
39-
import { defineComponent } from 'vue'
53+
import { defineComponent, computed } from 'vue'
4054
import { useApp } from '../store/app'
4155
import Stepper from 'components/Stepper.vue'
4256
import StepperActions from 'components/StepperActions.vue'
57+
import { isValidCffFile } from 'src/validator'
58+
import DownloadButton from 'components/DownloadButton.vue'
4359
4460
export default defineComponent({
4561
name: 'ScreenFinishMinimum',
4662
components: {
63+
DownloadButton,
4764
Stepper,
4865
StepperActions
4966
},
5067
setup () {
5168
const { setShowAdvanced, navigatePrevious, setStepName } = useApp()
5269
return {
70+
isValid: computed(isValidCffFile),
5371
setShowAdvanced,
5472
navigatePrevious,
5573
showAdvanced: async () => {
@@ -62,4 +80,9 @@ export default defineComponent({
6280
</script>
6381

6482
<style scoped>
83+
.row {
84+
display: flex;
85+
flex-direction: row;
86+
justify-content: center
87+
}
6588
</style>

‎src/components/StepperActions.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44
flat
55
label="Previous"
66
no-caps
7-
v-bind:disable="cannotGoBack"
7+
v-bind:class="cannotGoBack ? 'hidden' : ''"
88
v-on:click="navigatePrevious"
99
/>
1010
<span class="spacer" />
1111

12-
<q-btn-group flat>
12+
<q-btn-group
13+
flat
14+
v-bind:class="cannotGoForward ? 'hidden' : ''"
15+
>
1316
<q-btn
1417
color=""
1518
flat
@@ -21,7 +24,6 @@
2124
color="primary"
2225
label="Next"
2326
no-caps
24-
v-bind:disable="cannotGoForward"
2527
v-on:click="navigateNext"
2628
/>
2729
</q-btn-group>
@@ -37,7 +39,6 @@ export default defineComponent({
3739
3840
setup () {
3941
const { showAdvanced, cannotGoBack, cannotGoForward, navigateNext, navigatePrevious } = useApp()
40-
4142
return {
4243
cannotGoBack,
4344
cannotGoForward,
@@ -54,4 +55,7 @@ export default defineComponent({
5455
.spacer {
5556
flex-grow: 1;
5657
}
58+
.hidden {
59+
display: none;
60+
}
5761
</style>

0 commit comments

Comments
 (0)