Skip to content

Commit c5ac62f

Browse files
abelsiqueiraabelsiqueira
authored
Merge pull request #759 from citation-file-format/ui-revamp
2 parents b8b8f74 + e800fee commit c5ac62f

84 files changed

Lines changed: 747 additions & 1344 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎quasar.conf.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,19 @@ module.exports = configure(function () {
8989
framework: {
9090
config: {
9191
brand: {
92-
primary: '#65686b',
93-
secondary: '#efefef',
94-
accent: '#9C27B0',
92+
primary: '#346FEF',
93+
secondary: '#555770',
94+
accent: '#fdac42',
9595

9696
formcard: '#efefef',
9797
prose: '#333',
9898

9999
dark: '#333',
100100

101-
positive: '#21BA45',
102-
negative: '#C10015',
103-
info: '#31CCEC',
104-
warning: '#F9E3A4'
105-
101+
positive: '#39d98a',
102+
negative: '#D93D33',
103+
info: '#B3C5DB',
104+
warning: '#fddd48'
106105
}
107106
},
108107

‎src/components/AuthorCardEditing.vue‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
<template>
22
<q-card
3-
flat
43
bordered
54
class="bg-formcard q-pa-md"
5+
flat
66
>
77
<fieldset class="q-mb-md">
88
<legend>
99
Author's name, split into four parts
1010
<InfoDialog name="authorNames" />
1111
</legend>
12-
<q-input
13-
autofocus
14-
bg-color="white"
15-
class="col"
16-
data-cy="input-given-names"
17-
dense
18-
label="Given names"
19-
outlined
20-
standout
21-
v-bind:model-value="givenNames"
22-
v-bind:error="false"
23-
v-bind:error-message="''"
24-
v-on:update:modelValue="$emit('update', 'givenNames', $event)"
25-
/>
26-
<div class="row">
12+
<div class="q-gutter-sm row">
13+
<q-input
14+
autofocus
15+
class="col"
16+
data-cy="input-given-names"
17+
dense
18+
label="Given names"
19+
outlined
20+
standout
21+
v-bind:model-value="givenNames"
22+
v-bind:error="false"
23+
v-bind:error-message="''"
24+
v-on:update:modelValue="$emit('update', 'givenNames', $event)"
25+
/>
2726
<q-input
28-
bg-color="white"
29-
class="col-3"
27+
class="small-input"
3028
data-cy="input-name-particle"
3129
dense
3230
label="Name particle"
@@ -37,8 +35,9 @@
3735
v-bind:error-message="''"
3836
v-on:update:modelValue="$emit('update', 'nameParticle', $event)"
3937
/>
38+
</div>
39+
<div class="q-gutter-sm row">
4040
<q-input
41-
bg-color="white"
4241
class="col"
4342
data-cy="input-family-names"
4443
dense
@@ -51,8 +50,7 @@
5150
v-on:update:modelValue="$emit('update', 'familyNames', $event)"
5251
/>
5352
<q-input
54-
bg-color="white"
55-
class="col-3"
53+
class="small-input"
5654
data-cy="input-name-suffix"
5755
dense
5856
label="Name suffix"
@@ -65,10 +63,9 @@
6563
/>
6664
</div>
6765
</fieldset>
68-
<div class="row">
66+
<div class="row q-pb-sm">
6967
<q-input
7068
aria-label="E-mail. Press tab to reach help button."
71-
bg-color="white"
7269
class="col"
7370
data-cy="input-email"
7471
dense
@@ -89,7 +86,6 @@
8986
<div class="row">
9087
<q-input
9188
aria-label="Affiliation. Press tab to reach help button."
92-
bg-color="white"
9389
class="col"
9490
data-cy="input-affiliation"
9591
dense
@@ -107,7 +103,6 @@
107103
</q-input>
108104
<q-input
109105
aria-label="ORCID. Press tab to reach help button."
110-
bg-color="white"
111106
class="col"
112107
data-cy="input-orcid"
113108
dense
@@ -130,18 +125,21 @@
130125
<q-card-actions align="right">
131126
<q-btn
132127
aria-label="Remove author being edited"
128+
class="rounded-borders"
133129
color="negative"
134130
data-cy="btn-remove"
135-
dense
136131
icon="delete"
137132
label="Remove"
133+
no-caps
138134
v-on:click="$emit('removePressed')"
139135
/>
140136
<q-btn
141137
data-cy="btn-done"
142-
dense
138+
class="rounded-borders"
139+
color="secondary"
143140
icon="done"
144141
label="Done"
142+
no-caps
145143
v-on:click="$emit('closePressed')"
146144
/>
147145
</q-card-actions>
@@ -214,9 +212,7 @@ export default defineComponent({
214212
})
215213
</script>
216214
<style scoped>
217-
.row {
218-
display: flex;
219-
flex-direction: row;
220-
column-gap: 10px;
215+
.small-input {
216+
max-width: 150px;
221217
}
222218
</style>

‎src/components/AuthorCardViewing.vue‎

Lines changed: 66 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,66 @@
22
<q-card
33
bordered
44
flat
5-
style="display: flex; flex-direction: row"
65
v-bind:class="['bg-formcard', authorErrors.length > 0 ? 'red-border' : '']"
76
>
8-
<div style="flex-grow: 1.0">
9-
<ul v-bind:data-cy="'card-info' + index">
10-
<li>{{ author.givenNames }} {{ author.nameParticle }} {{ author.familyNames }} {{ author.nameSuffix }}</li>
11-
<li>{{ author.email }}</li>
12-
<li>{{ author.affiliation }} {{ author.orcid }}</li>
13-
</ul>
14-
</div>
15-
<div>
16-
<q-btn
17-
class="author-button"
18-
color="blue"
19-
icon="ion-arrow-up"
20-
v-bind:aria-label="`Move author ${index + 1} up`"
21-
v-bind:data-cy="'btn-move-up' + index"
22-
v-bind:disable="index == 0"
23-
v-on:click="$emit('moveUp')"
24-
/>
25-
<q-btn
26-
class="author-button"
27-
color="blue"
28-
icon="ion-arrow-down"
29-
v-bind:aria-label="`Move author ${index + 1} down`"
30-
v-bind:data-cy="'btn-move-down' + index"
31-
v-bind:disable="index >= numAuthors - 1"
32-
v-on:click="$emit('moveDown')"
33-
/>
34-
<q-btn
35-
class="author-button"
36-
color="primary"
37-
flat
38-
hover-color="negative"
39-
icon="edit"
40-
title="Edit"
41-
v-bind:aria-label="`Edit author ${index + 1}`"
42-
v-bind:data-cy="'btn-edit' + index"
43-
v-on:click="$emit('editPressed')"
44-
/>
45-
<q-btn
46-
class="author-button"
47-
color="negative"
48-
hover-color="negative"
49-
icon="delete"
50-
title="Remove author"
51-
v-bind:aria-label="`Remove author ${index + 1}`"
52-
v-bind:data-cy="'btn-remove' + index"
53-
v-on:click="$emit('removePressed')"
54-
/>
55-
</div>
7+
<q-card-section
8+
horizontal
9+
>
10+
<div class="col">
11+
<ul
12+
class="q-pl-md"
13+
v-bind:data-cy="'card-info' + index"
14+
>
15+
<li
16+
v-for="(field, fieldIndex) in authorFields"
17+
v-bind:key="fieldIndex"
18+
class="row"
19+
>
20+
{{ field }}
21+
</li>
22+
</ul>
23+
</div>
24+
<q-card-actions>
25+
<q-btn
26+
color="secondary"
27+
flat
28+
icon="ion-arrow-up"
29+
v-bind:aria-label="`Move author ${index + 1} up`"
30+
v-bind:data-cy="'btn-move-up' + index"
31+
v-bind:disable="index == 0"
32+
v-on:click="$emit('moveUp')"
33+
/>
34+
<q-btn
35+
color="secondary"
36+
flat
37+
icon="ion-arrow-down"
38+
v-bind:aria-label="`Move author ${index + 1} down`"
39+
v-bind:data-cy="'btn-move-down' + index"
40+
v-bind:disable="index >= numAuthors - 1"
41+
v-on:click="$emit('moveDown')"
42+
/>
43+
<q-btn
44+
color="secondary"
45+
flat
46+
hover-color="negative"
47+
icon="edit"
48+
title="Edit"
49+
v-bind:aria-label="`Edit author ${index + 1}`"
50+
v-bind:data-cy="'btn-edit' + index"
51+
v-on:click="$emit('editPressed')"
52+
/>
53+
<q-btn
54+
color="negative"
55+
flat
56+
hover-color="negative"
57+
icon="delete"
58+
title="Remove author"
59+
v-bind:aria-label="`Remove author ${index + 1}`"
60+
v-bind:data-cy="'btn-remove' + index"
61+
v-on:click="$emit('removePressed')"
62+
/>
63+
</q-card-actions>
64+
</q-card-section>
5665
</q-card>
5766
</template>
5867

@@ -97,28 +106,17 @@ export default defineComponent({
97106
.map(query => query.replace.message)
98107
})
99108
const authorErrors = computed(() => [...emailErrors.value, ...orcidErrors.value, ...duplicateErrors.value])
109+
const authorFields = computed(() => [
110+
[props.author.givenNames, props.author.nameParticle, props.author.familyNames, props.author.nameSuffix].join(' '),
111+
props.author.email,
112+
props.author.affiliation,
113+
props.author.orcid
114+
].filter((x) => x))
100115
return {
101-
authorErrors
116+
authorErrors,
117+
authorFields
102118
}
103119
},
104120
emits: ['editPressed', 'moveDown', 'moveUp', 'removePressed']
105121
})
106122
</script>
107-
<style scoped>
108-
ul {
109-
padding-inline-start: 20px;
110-
}
111-
li {
112-
list-style: none;
113-
list-style-position: inside;
114-
}
115-
.author-button {
116-
background-color: white;
117-
border: 1px solid #ccc;
118-
margin-bottom: 5px;
119-
margin-left: 5px;
120-
margin-right: 5px;
121-
margin-top: 5px;
122-
padding: 10px;
123-
}
124-
</style>

‎src/components/DownloadButton.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<q-btn
33
aria-label="Download CITATION.cff"
4+
class="rounded-borders"
45
color="primary"
56
data-cy="btn-download"
67
download="CITATION.cff"
@@ -10,14 +11,12 @@
1011
no-caps
1112
type="a"
1213
v-bind:href="downloadUrl"
13-
v-bind:class="q.platform.is.mobile ? 'full-width' : ''"
1414
/>
1515
</template>
1616

1717
<script lang="ts">
1818
import { computed, defineComponent } from 'vue'
1919
import { useCffstr } from 'src/store/cffstr'
20-
import { useQuasar } from 'quasar'
2120
2221
const toDownloadUrl = (body: string) => {
2322
return `data:text/vnd.yaml,${encodeURIComponent(body)}`
@@ -27,9 +26,7 @@ export default defineComponent({
2726
name: 'DownloadButton',
2827
setup () {
2928
const { cffstr } = useCffstr()
30-
const q = useQuasar()
3129
return {
32-
q,
3330
downloadUrl: computed(() => toDownloadUrl(cffstr.value))
3431
}
3532
}

‎src/components/Error404.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
33
<div>
4-
<div style="font-size: 30vh">
4+
<h1>
55
404
6-
</div>
7-
<div
8-
class="text-h2"
6+
</h1>
7+
<h2
8+
99
style="opacity:.4"
1010
>
1111
Oops. Nothing here...
12-
</div>
12+
</h2>
1313

1414
<q-btn
1515
class="q-mt-xl"

0 commit comments

Comments
 (0)