Skip to content

Commit 737162c

Browse files
fdiblenfdiblen
authored
Merge pull request #646 from citation-file-format/635-info-dialog
add info dialog
2 parents 523038b + d1719d9 commit 737162c

File tree

4 files changed

+163
-8
lines changed

4 files changed

+163
-8
lines changed

‎quasar.conf.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,9 @@ module.exports = configure(function () {
117117
// directives: [],
118118

119119
// Quasar plugins
120-
plugins: []
120+
plugins: [
121+
'Dialog'
122+
]
121123
},
122124

123125
// animations: 'all', // --- includes all animations

‎src/components/InfoDialog.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<div
3+
class="q-pa-md q-gutter-sm"
4+
>
5+
<q-dialog
6+
v-model="showDialog"
7+
>
8+
<q-card
9+
class="window-width help-dialog"
10+
>
11+
<q-card-section class="row items-center q-pb-none">
12+
<div class="text-h5">
13+
CFF field: {{ data.title }}
14+
</div>
15+
<q-space />
16+
<q-btn
17+
icon="close"
18+
flat
19+
round
20+
dense
21+
v-close-popup
22+
/>
23+
</q-card-section>
24+
25+
<q-card-section>
26+
{{ data.description }}
27+
</q-card-section>
28+
<q-card-section v-if="data.examples">
29+
<div class="text-h6">
30+
Examples
31+
</div>
32+
<ul>
33+
<li
34+
v-for="item in data.examples"
35+
v-bind:key="item"
36+
>
37+
{{ item }}
38+
</li>
39+
</ul>
40+
</q-card-section>
41+
<q-card-section>
42+
<a
43+
v-bind:href="data.url"
44+
tabindex="-1"
45+
target="_blank"
46+
>
47+
Click here to see the documentation.
48+
</a>
49+
</q-card-section>
50+
</q-card>
51+
</q-dialog>
52+
</div>
53+
</template>
54+
55+
<script lang="ts">
56+
import { computed, defineComponent } from 'vue'
57+
58+
export default defineComponent({
59+
name: 'InfoDialog',
60+
props: {
61+
modelValue: {
62+
type: Boolean,
63+
required: true,
64+
default: false
65+
},
66+
data: {
67+
type: Object,
68+
required: true,
69+
default: null
70+
}
71+
},
72+
emits: ['update:modelValue'],
73+
setup (props, { emit }) {
74+
const showDialog = computed({
75+
get () { return props.modelValue },
76+
set (newValue) { emit('update:modelValue', newValue) }
77+
})
78+
79+
return {
80+
showDialog
81+
}
82+
}
83+
})
84+
</script>
85+
86+
<style scoped>
87+
.help-dialog {
88+
background-color: var(--fgcolor, lightslategray);
89+
}
90+
</style>
91+
92+
}

‎src/components/ScreenStart.vue‎

Lines changed: 67 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@
88
<div id="form-content">
99
<h2 class="question">
1010
What type of work does this CITATION.cff describe?
11-
<SchemaGuideLink anchor="#type" />
11+
<q-icon
12+
name="ion-information-circle-outline"
13+
size="24px"
14+
color="primary"
15+
v-on:click="showTypeHelp = true"
16+
style="cursor:pointer;"
17+
/>
1218
</h2>
1319
<q-option-group
1420
type="radio"
@@ -18,7 +24,13 @@
1824
/>
1925
<h2 class="question">
2026
What is the title of the work?
21-
<SchemaGuideLink anchor="#title" />
27+
<q-icon
28+
name="ion-information-circle-outline"
29+
size="24px"
30+
color="primary"
31+
v-on:click="showTitleHelp = true"
32+
style="cursor:pointer;"
33+
/>
2234
</h2>
2335
<q-input
2436
bg-color="white"
@@ -33,7 +45,13 @@
3345
/>
3446
<h2 class="question">
3547
What do you want citers to do with the information provided in your CITATION.cff file?
36-
<SchemaGuideLink anchor="#message" />
48+
<q-icon
49+
name="ion-information-circle-outline"
50+
size="24px"
51+
color="primary"
52+
v-on:click="showMessageHelp = true"
53+
style="cursor:pointer;"
54+
/>
3755
</h2>
3856
<q-input
3957
bg-color="white"
@@ -46,21 +64,33 @@
4664
v-bind:error-message="messageErrors.join(', ')"
4765
v-on:update:modelValue="setMessage"
4866
/>
67+
<InfoDialog
68+
v-model="showTypeHelp"
69+
v-bind:data="helpData.type"
70+
/>
71+
<InfoDialog
72+
v-model="showMessageHelp"
73+
v-bind:data="helpData.message"
74+
/>
75+
<InfoDialog
76+
v-model="showTitleHelp"
77+
v-bind:data="helpData.title"
78+
/>
4979
</div>
5080
</template>
5181

5282
<script lang="ts">
5383
import { byError, messageQueries, titleQueries } from 'src/error-filtering'
54-
import { computed, defineComponent, onUpdated } from 'vue'
55-
import SchemaGuideLink from 'components/SchemaGuideLink.vue'
84+
import { computed, defineComponent, onUpdated, ref } from 'vue'
85+
import InfoDialog from 'components/InfoDialog.vue'
5686
import { useCff } from 'src/store/cff'
5787
import { useStepperErrors } from 'src/store/stepper-errors'
5888
import { useValidation } from 'src/store/validation'
5989
6090
export default defineComponent({
6191
name: 'ScreenStart',
6292
components: {
63-
SchemaGuideLink
93+
InfoDialog
6494
},
6595
setup () {
6696
onUpdated(() => {
@@ -87,9 +117,40 @@ export default defineComponent({
87117
setMessage(message.value.split(matches[0]).join(type.value))
88118
}
89119
}
120+
const helpData = {
121+
type: {
122+
title: 'type',
123+
url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#type',
124+
description: 'The type of the work that is being described by this CITATION.cff file.'
125+
},
126+
title: {
127+
title: 'title',
128+
url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#title',
129+
description: 'The name of the software or dataset.',
130+
examples: [
131+
'cffconvert',
132+
'Firefox',
133+
'LibreOffice'
134+
]
135+
},
136+
message: {
137+
title: 'message',
138+
url: 'https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md#message',
139+
description: 'A message to the human reader of the CITATION.cff file to let them know what to do with the citation metadata.',
140+
examples: [
141+
'If you use this software, please cite it using the metadata from this file.',
142+
'Please cite this software using these metadata.',
143+
'Please cite this software using the metadata from "preferred-citation".'
144+
]
145+
}
146+
}
90147
return {
148+
helpData,
91149
message,
92150
messageErrors,
151+
showMessageHelp: ref(false),
152+
showTitleHelp: ref(false),
153+
showTypeHelp: ref(false),
93154
title,
94155
titleErrors,
95156
type,

‎test/jest/__tests__/store/cffstr.jest.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('useCffstr', () => {
2323
})
2424

2525
it('should have title', () => {
26-
const expected = generatedBy + "cff-version: 1.2.0\ntitle: sometitle\nmessage: >-\n If you use this software, please cite it using the\n metadata from this file.\ntype: software\nauthors: []\n"
26+
const expected = generatedBy + 'cff-version: 1.2.0\ntitle: sometitle\nmessage: >-\n If you use this software, please cite it using the\n metadata from this file.\ntype: software\nauthors: []\n'
2727
expect(cffstr.value).toEqual(expected)
2828
})
2929
})

0 commit comments

Comments
 (0)