Skip to content

Commit e14a665

Browse files
obulatobulat
committed
Update Steps, Add CC0 waiver step
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 1ce23b9 commit e14a665

File tree

5 files changed

+97
-54
lines changed

5 files changed

+97
-54
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default {
6868
</style>
6969
<style>
7070
71-
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");
71+
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A%20400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");
7272
7373
#app {
7474
-webkit-font-smoothing: antialiased;

‎src/components/Chooser.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export default {
3838
},
3939
methods: {
4040
goToAttributionDetails() {
41-
this.$children[0].$children[0].changeStep(4)
41+
const lastStep = this.$children[0].$children[0].stepItems.length - 1
42+
this.$children[0].$children[0].changeStep(lastStep)
4243
}
4344
}
4445
}

‎src/components/SelectionStep.vue‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="selection-step">
3-
<p class="selection-question">{{ question }}</p>
3+
<p class="selection-question">{{ this.$t(question) }}</p>
44
<div class="selection-buttons">
55
<div class="selection-button selection-button-no">
66
<b-button
@@ -21,7 +21,7 @@
2121
</b-button>
2222
</div>
2323
</div>
24-
<p v-html="currentText"/>
24+
<p v-html="$t(currentText)"/>
2525
<hr>
2626
</div>
2727
</template>
@@ -39,14 +39,11 @@ export default {
3939
},
4040
computed: {
4141
question() {
42-
const keyToSelect = `question-${this.stepId.toLowerCase()}`
43-
return this.$t(keyToSelect)
42+
return `stepper-question.${this.stepId.toLowerCase()}`
4443
},
45-
4644
currentText() {
4745
const selectedModifier = this.isSelected ? '' : 'not-'
48-
const key = `short-description-${selectedModifier}selected-${this.stepId.toLowerCase()}`
49-
return this.$t(key)
46+
return `stepper-description.${this.stepId.toLowerCase()}.${selectedModifier}selected`
5047
},
5148
isSelected: {
5249
get() { return this.selected },

‎src/components/Stepper.vue‎

Lines changed: 48 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,28 @@
88
<p :class="'stepper-instructions'">{{ $t('select-license-instructions') }}</p>
99
<b-steps size="is-small">
1010
<b-step-item
11-
v-for="item in this.licenses"
12-
:label="item.label"
11+
v-for="item in this.steps"
1312
:icon-pack="item['icon-pack']"
1413
:icon="item.icon"
15-
v-bind:key="item.shortName"
14+
:label=$t(item.label)
15+
:key="item.shortName"
1616
:selected="isStepSelected(item.shortName)"
1717
:visible="isStepVisible(item.shortName)"
1818
:clickable=true
1919
:type="attributeType(item.shortName)"
2020
>
2121
<SelectionStep
22+
v-if="item.itemType==='licenseAttribute'"
2223
:selected="isStepSelected(item.shortName)"
2324
:stepId="item.shortName"
2425
v-on:input="updateLicense(item.shortName)"
2526
/>
26-
</b-step-item>
27-
<b-step-item
28-
:label="this.$t('AttributionDetailsLabel')"
29-
:clickable=true
30-
icon="check"
31-
:type="'attributionDetails'"
32-
:visible="isStepVisible('')"
33-
>
27+
<CopyrightWaiverStep
28+
v-if="item.itemType==='CC0Attribute'"
29+
/>
30+
3431
<AttributionDetailsStep
32+
v-if="item.itemType==='AttributionDetails'"
3533
v-model="value.attributionDetails"
3634
/>
3735
</b-step-item>
@@ -44,40 +42,60 @@
4442
4543
import SelectionStep from './SelectionStep'
4644
import AttributionDetailsStep from './AttributionDetailsStep'
45+
import CopyrightWaiverStep from './CopyrightWaiverStep'
4746
4847
export default {
4948
name: 'Stepper',
5049
props: ['value'],
5150
components: {
5251
SelectionStep,
53-
AttributionDetailsStep
52+
AttributionDetailsStep,
53+
CopyrightWaiverStep
5454
},
5555
data() {
5656
return {
57-
licenses: [
57+
steps: [
5858
{
59-
label: this.$t('AttributionLabel'),
59+
label: 'stepper-label.Attribution',
6060
shortName: 'BY',
6161
'icon-pack': 'fab',
62-
icon: 'creative-commons-by'
62+
itemType: 'licenseAttribute',
63+
icon: this.getAttributionIcon()
6364
},
6465
{
65-
label: this.$t('NoDerivativesLabel'),
66+
label: 'stepper-label.NoDerivatives',
6667
shortName: 'ND',
6768
'icon-pack': 'fab',
69+
itemType: 'licenseAttribute',
6870
icon: 'creative-commons-nd'
6971
},
7072
{
71-
label: this.$t('NonCommercialLabel'),
73+
label: 'stepper-label.NonCommercial',
7274
shortName: 'NC',
7375
'icon-pack': 'fab',
76+
itemType: 'licenseAttribute',
7477
icon: 'creative-commons-nc'
7578
},
7679
{
77-
label: this.$t('Share-AlikeLabel'),
80+
label: 'stepper-label.Share-Alike',
7881
shortName: 'SA',
7982
'icon-pack': 'fab',
83+
itemType: 'licenseAttribute',
8084
icon: 'creative-commons-sa'
85+
},
86+
{
87+
label: 'stepper-label.CopyrightWaiver',
88+
shortName: 'wv',
89+
'icon-pack': 'fas',
90+
itemType: 'CC0Attribute',
91+
icon: 'exclamation-circle'
92+
},
93+
{
94+
label: 'stepper-label.AttributionDetails',
95+
shortName: 'ad',
96+
'icon-pack': 'fas',
97+
itemType: 'AttributionDetails',
98+
icon: 'check'
8199
}
82100
]
83101
}
@@ -88,13 +106,16 @@ export default {
88106
}
89107
},
90108
methods: {
109+
getAttributionIcon() {
110+
return this.isStepSelected('BY') ? 'creative-commons-by' : 'creative-commons-zero'
111+
},
91112
updateLicense(itemId) {
92113
const attrs = { ...this.licenseAttributes }
93114
attrs[itemId] = !attrs[itemId]
94115
this.$emit('input', {
95116
shortName: this.shortLicenseName(attrs),
96117
fullName: this.fullLicenseName(attrs),
97-
personalDetails: this.$props.value.personalDetails
118+
attributionDetails: this.$props.value.attributionDetails
98119
})
99120
},
100121
shortLicenseName(attr) {
@@ -131,9 +152,9 @@ export default {
131152
},
132153
isStepVisible(attrName) {
133154
if (this.$props.value.shortName.includes('CC0')) {
134-
return attrName === 'BY'
155+
return (attrName === 'BY' || attrName === 'wv' || attrName === 'ad')
135156
}
136-
return !(this.$props.value.shortName.includes('ND') && attrName === 'SA')
157+
return !(this.$props.value.shortName.includes('ND') && attrName === 'SA') && !(attrName === 'wv')
137158
}
138159
}
139160
}
@@ -176,6 +197,7 @@ export default {
176197
span.step-title {
177198
font-size:0.875rem;
178199
line-height:1;
200+
white-space: nowrap;
179201
}
180202
}
181203
}
@@ -215,12 +237,12 @@ export default {
215237
a.step-link {
216238
div.step-marker {
217239
span > svg > path {
218-
opacity: 50% !important;
240+
opacity: 40% !important;
219241
}
220242
}
221243
div.step-details span.step-title {
222-
font-weight: 400;
223-
opacity: 50%;
244+
font-weight: 500;
245+
opacity: 60%;
224246
}
225247
}
226248
}
@@ -235,11 +257,11 @@ export default {
235257
}
236258
section.step-content {
237259
padding-bottom: 0;
238-
height: 300px;
260+
height: 280px;
239261
}
240262
nav.step-navigation {
241263
display: flex;
242-
margin: 0.5rem 1rem 0.5rem auto;
264+
margin: 0 1rem 0.5rem auto;
243265
justify-content: flex-end;
244266
a.pagination-previous {
245267
margin-left: auto;

0 commit comments

Comments
 (0)