-
-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Contributions - Mount basic ldefault layout * Contributions - Add nonmonetary method input * Contributions - Refine list of contributions * Contributions - Style input to add nonmonetary * Contributions -NonMonetary ui logic * revert ListItem.vue * Contributions - start DRYing contribution component * Contributions - extract Contribution UI logic from view * Contributions - Add some comments, adjust pixels and randomize placeholder * Contributions - updates based on code review * Contributions - updates based on code review * Contributions - fix bug on contribution with keyboard enter on edit button to input * fix #481 improve currencies.js * Contributions - improve props/conditions readability * Contributions - refactor i18n to treceiving contribution text
- Loading branch information
1 parent
2e12fc8
commit 2950dab
Showing
14 changed files
with
524 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 25 additions & 1 deletion
26
frontend/simple/assets/sass/bulma_overrides/elements/box.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,32 @@ | ||
| $box-shadow: none; | ||
| $box-radius: $radius; | ||
| $box-padding: $gi-spacer; | ||
| $box-shadow: none; | ||
|
|
||
| @import "../../node_modules/bulma/sass/elements/box"; | ||
|
|
||
| $gi-compact-spacer: $gi-spacer*0.75; | ||
|
|
||
| .box { | ||
| border: 1px solid $grey-lighter; | ||
|
|
||
| &.is-compact { | ||
| padding: $gi-compact-spacer $gi-spacer; | ||
| margin-bottom: $gi-compact-spacer; | ||
| } | ||
|
|
||
| &.is-unfilled { | ||
| border: 1px dashed $primary; | ||
| } | ||
|
|
||
| &.has-controls { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| // To makeup for the square buttons height inside | ||
| padding: 0 $gi-spacer-sm 0 0; | ||
| align-items: center; | ||
|
|
||
| .box-body { | ||
| padding: $gi-compact-spacer $gi-spacer; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| <template> | ||
| <main> | ||
| <div class="section is-hero"> | ||
| <i18n tag="h1" class="title is-1 is-marginless"> | ||
| Contributions | ||
| </i18n> | ||
| <i18n tag="p">See everyone’s contributions to the group and manage yours.</i18n> | ||
| </div> | ||
|
|
||
| <div class="section columns is-desktop is-multiline c-grid"> | ||
| <section class="column"> | ||
| <i18n tag="h2" class="title is-3">Receiving</i18n> | ||
|
|
||
| <ul class="c-ul"> | ||
| <contribution | ||
| v-for="contribution, index in receiving" | ||
| :variant="isMonetary(contribution.type) ? 'editable' : undefined" | ||
| :isMonetary="isMonetary(contribution.type)" | ||
| @interaction="showReceivingSettings" | ||
| > | ||
| <span v-html="textReceivingContribution(contribution, index)"></span> | ||
| <template v-if="hasWhoElse(contribution.who)"> | ||
| <i18n>and</i18n> | ||
| <tooltip> | ||
| <button class="gi-is-unstyled gi-is-link-inherit">{{contribution.who.length - 1}}<i18n>others</i18n></button> | ||
| <template slot="tooltip"> | ||
| <p v-for="name, index in contribution.who" v-if="index > 0">{{name}}</p> | ||
| </template> | ||
| </tooltip> | ||
| </template> | ||
| </contribution> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section class="column"> | ||
| <i18n tag="h2" class="title is-3">Giving</i18n> | ||
|
|
||
| <ul class="c-ul" v-if="givesNonMonetary || givesMonetary"> | ||
| <contribution v-for="contribution, index in giving.nonMonetary" | ||
| class="has-text-weight-bold" | ||
| variant="editable" | ||
| @new-value="(value) => handleEditNonMonetary(value, index)" | ||
| >{{contribution}}</contribution> | ||
|
|
||
| <contribution v-if="givesMonetary" | ||
| variant="editable" | ||
| isMonetary | ||
| @interaction="showGivingMincomeSettings" | ||
| > | ||
| <span class="has-text-weight-bold">{{currency}}{{giving.monetary}}</span> <i18n>to other's mincome</i18n> | ||
| </contribution> | ||
| </ul> | ||
|
|
||
| <ul class="c-ul"> | ||
| <contribution variant="unfilled" @new-value="submitAddNonMonetary"> | ||
| <i class="fa fa-heart c-contribution-icon" aria-hidden="true"></i> | ||
| <i18n>Add a non-monetary method</i18n> | ||
| </contribution> | ||
|
|
||
| <contribution v-if="!givesMonetary" variant="unfilled" isMonetary @interaction="addMonetaryMethod"> | ||
| <i class="fa fa-money c-contribution-icon" aria-hidden="true"></i> | ||
| <i18n>Add a monetary method</i18n> | ||
| </contribution> | ||
| </ul> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| </template> | ||
| <style lang="scss" scoped> | ||
| @import "../assets/sass/theme/index"; | ||
| .c-grid .column { | ||
| @include touch { | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| } | ||
| @include desktop { | ||
| &:first-child { | ||
| padding-left: 0; | ||
| } | ||
| &:last-child { | ||
| padding-right: 0; | ||
| } | ||
| } | ||
| } | ||
| .c-ul { | ||
| margin: $gi-spacer*0.75 0; | ||
| } | ||
| </style> | ||
| <script> | ||
| import currencies from './utils/currencies.js' | ||
| import Contribution from './components/Contribution.vue' | ||
| import Tooltip from './components/Tooltip.vue' | ||
| export default { | ||
| name: 'Contributions', | ||
| components: { | ||
| Contribution, | ||
| Tooltip | ||
| }, | ||
| data () { | ||
| return { | ||
| currency: currencies['USD'], | ||
| receiving: [ | ||
| { | ||
| type: 'no-monetary', | ||
| what: 'Cooking', | ||
| who: 'Lilia Bouvet' | ||
| }, | ||
| { | ||
| type: 'no-monetary', | ||
| what: 'Cuteness', | ||
| who: ['Zoe Kim', 'Laurence E'] | ||
| }, | ||
| { | ||
| type: 'monetary', | ||
| what: 500, | ||
| who: [ | ||
| 'Jack Fisher', | ||
| 'Charlotte Doherty', | ||
| 'Thomas Baker', | ||
| 'Francisco Scott' | ||
| ] | ||
| } | ||
| ], | ||
| giving: { | ||
| nonMonetary: [], // ArrayOf(String) | ||
| monetary: null // Number | ||
| } | ||
| } | ||
| }, | ||
| computed: { | ||
| givesMonetary () { | ||
| return !!this.giving.monetary | ||
| }, | ||
| givesNonMonetary () { | ||
| return this.giving.nonMonetary.length > 0 | ||
| } | ||
| }, | ||
| methods: { | ||
| // Receiving | ||
| isMonetary (type) { | ||
| return type === 'monetary' | ||
| }, | ||
| getWho (who) { | ||
| if (!Array.isArray(who)) { | ||
| return who | ||
| } | ||
| return who.length > 3 ? who[0] : this.L('{who0} and {who1}', { who0: who[0], who1: who[1] }) | ||
| }, | ||
| textReceivingContribution (contribution, index) { | ||
| const who = this.getWho(contribution.who) | ||
| if (this.isMonetary(contribution.type)) { | ||
| return this.L('<strong>{what} from mincome</strong> from {who}', { | ||
| what: `${this.currency}${this.receiving[index].what}`, | ||
| who | ||
| }) | ||
| } else { | ||
| return this.L('<strong>{what}</strong> from {who}', { what: contribution.what, who }) | ||
| } | ||
| }, | ||
| hasWhoElse (who) { | ||
| return Array.isArray(who) && who.length > 3 | ||
| }, | ||
| showGivingMincomeSettings () { | ||
| console.log('TODO UI - Show Giving Mincome Setting - next PR') | ||
| }, | ||
| showReceivingSettings () { | ||
| console.log('TODO UI - Show Receiving Setting - next PR') | ||
| }, | ||
| // Giving | ||
| submitAddNonMonetary (value) { | ||
| console.log('TODO BE - submitAddNonMonetary') | ||
| this.giving.nonMonetary.push(value) | ||
| }, | ||
| handleEditNonMonetary (value, index) { | ||
| if (!value) { | ||
| console.log('TODO BE - deleteNonMonetary') | ||
| this.giving.nonMonetary.splice(index, 1) | ||
| } else { | ||
| console.log('TODO BE - editNonMonetary') | ||
| // https://vuejs.org/v2/guide/list.html#Caveats | ||
| this.$set(this.giving.nonMonetary, index, value) | ||
| } | ||
| }, | ||
| // Giving Monetary Methods: | ||
| addMonetaryMethod () { | ||
| console.log('TODO UI - Show Monetary Settings Modal - next PR') | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.