Skip to content

Commit 7f8985a

Browse files
abelsiqueiraabelsiqueira
committed
Revamp the UI of the Identifiers screen
1 parent 7e68ac0 commit 7f8985a

3 files changed

Lines changed: 68 additions & 90 deletions

File tree

‎src/components/IdentifierCardEditing.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,11 @@
44
bordered
55
class="bg-formcard q-pa-md"
66
>
7-
<q-card-section>
7+
<q-card-section class="q-gutter-md">
88
<fieldset
9-
class="q-mb-md"
109
role="radiogroup"
1110
>
12-
<legend
13-
class="question"
14-
>
11+
<legend>
1512
What type of identifier?
1613
<!-- <InfoDialog name="type" /> -->
1714
</legend>
@@ -31,7 +28,6 @@
3128

3229
<q-input
3330
autofocus
34-
bg-color="white"
3531
data-cy="input-value"
3632
dense
3733
outlined
@@ -49,7 +45,6 @@
4945
</q-input>
5046

5147
<q-input
52-
bg-color="white"
5348
data-cy="input-description"
5449
dense
5550
outlined
@@ -67,16 +62,17 @@
6762
<q-card-actions align="right">
6863
<q-btn
6964
aria-label="Remove identifier being edited"
65+
class="rounded-borders"
7066
color="negative"
7167
data-cy="btn-remove"
72-
dense
7368
icon="delete"
7469
label="Remove"
7570
v-on:click="$emit('removePressed')"
7671
/>
7772
<q-btn
73+
class="rounded-borders"
74+
color="secondary"
7875
data-cy="btn-done"
79-
dense
8076
icon="done"
8177
label="Done"
8278
v-on:click="$emit('closePressed')"

‎src/components/IdentifierCardViewing.vue‎

Lines changed: 58 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,66 @@
11
<template>
22
<q-card
33
bordered
4-
v-bind:class="['bg-formcard', identifierErrors.length > 0 ? 'red-border' : '']"
54
flat
6-
style="display: flex; flex-direction: row"
5+
v-bind:class="['bg-formcard', identifierErrors.length > 0 ? 'red-border' : '']"
76
>
8-
<div style="flex-grow: 1.0">
9-
<ul v-bind:data-cy="'card-info' + index">
10-
<li>{{ identifier.description }}</li>
11-
<li>{{ identifier.type }}: {{ identifier.value }}</li>
12-
</ul>
13-
</div>
14-
<div>
15-
<q-btn
16-
class="identifier-button"
17-
color="blue"
18-
icon="ion-arrow-up"
19-
v-bind:aria-label="`Move identifier ${index + 1} up`"
20-
v-bind:data-cy="'btn-move-up' + index"
21-
v-bind:disable="index == 0"
22-
v-on:click="$emit('moveUp')"
23-
/>
24-
<q-btn
25-
class="identifier-button"
26-
color="blue"
27-
icon="ion-arrow-down"
28-
v-bind:aria-label="`Move identifier ${index + 1} down`"
29-
v-bind:data-cy="'btn-move-down' + index"
30-
v-bind:disable="index >= numIdentifiers - 1"
31-
v-on:click="$emit('moveDown')"
32-
/>
33-
<q-btn
34-
class="identifier-button"
35-
color="primary"
36-
flat
37-
hover-color="negative"
38-
icon="edit"
39-
title="Edit"
40-
v-bind:aria-label="`Edit identifier ${index + 1}`"
41-
v-bind:data-cy="'btn-edit' + index"
42-
v-on:click="$emit('editPressed')"
43-
/>
44-
<q-btn
45-
class="identifier-button"
46-
color="negative"
47-
hover-color="negative"
48-
icon="delete"
49-
title="Remove Identifier"
50-
v-bind:aria-label="`Remove identifier ${index + 1}`"
51-
v-bind:data-cy="'btn-remove' + index"
52-
v-on:click="$emit('removePressed')"
53-
/>
54-
</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 class="row">
16+
{{ identifier.description }}
17+
</li>
18+
<li class="row">
19+
{{ identifier.type }}: {{ identifier.value }}
20+
</li>
21+
</ul>
22+
</div>
23+
<q-card-actions>
24+
<q-btn
25+
color="secondary"
26+
flat
27+
icon="ion-arrow-up"
28+
v-bind:aria-label="`Move identifier ${index + 1} up`"
29+
v-bind:data-cy="'btn-move-up' + index"
30+
v-bind:disable="index == 0"
31+
v-on:click="$emit('moveUp')"
32+
/>
33+
<q-btn
34+
color="secondary"
35+
flat
36+
icon="ion-arrow-down"
37+
v-bind:aria-label="`Move identifier ${index + 1} down`"
38+
v-bind:data-cy="'btn-move-down' + index"
39+
v-bind:disable="index >= numIdentifiers - 1"
40+
v-on:click="$emit('moveDown')"
41+
/>
42+
<q-btn
43+
color="secondary"
44+
flat
45+
hover-color="negative"
46+
icon="edit"
47+
title="Edit"
48+
v-bind:aria-label="`Edit identifier ${index + 1}`"
49+
v-bind:data-cy="'btn-edit' + index"
50+
v-on:click="$emit('editPressed')"
51+
/>
52+
<q-btn
53+
color="negative"
54+
flat
55+
hover-color="negative"
56+
icon="delete"
57+
title="Remove Identifier"
58+
v-bind:aria-label="`Remove identifier ${index + 1}`"
59+
v-bind:data-cy="'btn-remove' + index"
60+
v-on:click="$emit('removePressed')"
61+
/>
62+
</q-card-actions>
63+
</q-card-section>
5564
</q-card>
5665
</template>
5766

@@ -98,21 +107,3 @@ export default defineComponent({
98107
emits: ['editPressed', 'moveDown', 'moveUp', 'removePressed']
99108
})
100109
</script>
101-
<style scoped>
102-
ul {
103-
padding-inline-start: 20px;
104-
}
105-
li {
106-
list-style: none;
107-
list-style-position: inside;
108-
}
109-
.identifier-button {
110-
background-color: white;
111-
border: 1px solid #ccc;
112-
margin-bottom: 5px;
113-
margin-left: 5px;
114-
margin-right: 5px;
115-
margin-top: 5px;
116-
padding: 10px;
117-
}
118-
</style>

‎src/components/ScreenIdentifiers.vue‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
Identifiers
44
</h1>
55

6-
<h2 class="question">
6+
<p>
77
What persistent identifiers are available for the work?
88
<InfoDialog name="identifiers" />
9-
</h2>
10-
<div class="scroll-to-bottom-container">
9+
</p>
10+
<div>
1111
<span class="bottom" />
1212
<div>
1313
<div
@@ -41,8 +41,8 @@
4141
</div>
4242
</div>
4343
<q-btn
44-
class="q-mt-md q-mb-md"
45-
color="primary"
44+
class="q-mt-md q-mb-md rounded-borders"
45+
color="secondary"
4646
data-cy="btn-add-identifier"
4747
no-caps
4848
v-on:click="addIdentifier"
@@ -173,12 +173,3 @@ export default defineComponent({
173173
}
174174
})
175175
</script>
176-
177-
<style scoped>
178-
.scroll-to-bottom-container {
179-
display: flex;
180-
flex-direction: column-reverse;
181-
max-height: 450px;
182-
overflow-y: auto;
183-
}
184-
</style>

0 commit comments

Comments
 (0)