| commit | author | age | ||
| a34f1d | 1 | <template> |
| D | 2 | <div> |
| 3f23cc | 3 | <md-list-item |
| A | 4 | @click="markDone" |
| 5 | > | |
| 6 | <!-- TODO find a nice way of not calling markdone when clicking flag on card rather than calling "markDone" twice --> | |
| 7 | ||
| 8 | <!-- Material design checkbox not displaying, EDIT: Still can't figure out why it's not displaying --> | |
| 9 | <!-- <md-checkbox :v-model="isActive">x</md-checkbox> --> | |
| 10 | <input type="checkbox" v-model="todoItem.complete"/> | |
| b4180d | 11 | |
| 3f23cc | 12 | <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span> |
| b4180d | 13 | <!-- find a nice way to utilise svg fill property without doing it inline --> |
| A | 14 | <md-button |
| 15 | @click="markImportant" | |
| 16 | > | |
| 3f23cc | 17 | <svg :class="{'red-flag': isImportant}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" @click="markDone"> |
| b4180d | 18 | <path d="M0 0h24v24H0z" fill="none"/> |
| A | 19 | <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/> |
| 20 | </svg> | |
| 21 | </md-button> | |
| a34f1d | 22 | </md-list-item> |
| D | 23 | </div> |
| 24 | </template> | |
| 25 | <script> | |
| 26 | export default { | |
| 27 | name: "TodoItem", | |
| 28 | props: { | |
| 29 | // type any object ;) | |
| 30 | todoItem: {} | |
| 31 | }, | |
| acdeac | 32 | data() { |
| a34f1d | 33 | return { |
| 3f23cc | 34 | // isActive: false, |
| b4180d | 35 | isImportant: false |
| acdeac | 36 | }; |
| a34f1d | 37 | }, |
| D | 38 | methods: { |
| acdeac | 39 | markDone() { |
| a34f1d | 40 | // set to greyed out / true false |
| D | 41 | this.isActive = !this.isActive; |
| acdeac | 42 | console.info("INFO - ", this.todoItem, this.isActive); |
| b4180d | 43 | }, |
| A | 44 | markImportant() { |
| 45 | // set to greyed out / true false | |
| 46 | this.isImportant = !this.isImportant; | |
| 47 | console.info("INFO - ", this.todoItem, this.isImportant); | |
| a34f1d | 48 | } |
| D | 49 | } |
| 50 | }; | |
| 51 | </script> | |
| 52 | ||
| 53 | <!-- Add "scoped" attribute to limit CSS to this component only --> | |
| 54 | <style scoped lang="scss"> | |
| 55 | .md-list { | |
| acdeac | 56 | width: 320px; |
| A | 57 | max-width: 100%; |
| 58 | height: 400px; | |
| 59 | display: inline-block; | |
| 60 | overflow: auto; | |
| 61 | border: 1px solid rgba(#000, 0.12); | |
| 62 | vertical-align: top; | |
| 991fff | 63 | } |
| A | 64 | |
| a34f1d | 65 | .strike-through { |
| D | 66 | text-decoration: line-through; |
| b4180d | 67 | font-style: italic; |
| A | 68 | } |
| 69 | ||
| 70 | .red-flag { | |
| 71 | fill: #cc0000; | |
| a34f1d | 72 | } |
| D | 73 | </style> |
