flag with colour change for importance

acammies

2018-04-03 b4180d37ecb78270b6c348fc83def861197a18d7

flag with colour change for importance

 src/components/TodoItem.vue

@@ -1,12 +1,25 @@
<template>
  <div>
    <md-list-item 
    <md-list-item       
      @click="markDone"
    >
      <!-- Material design checkbox not working as not importing @angular/material anywhere -->
      <!-- <md-checkbox :v-model="isActive"/> -->
      <input type="checkbox" v-model="isActive" />
      <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span>
      >  
        <!-- Material design checkbox not working as not importing @angular/material anywhere -->
        <!-- <md-checkbox :v-model="isActive"/> -->
        <input type="checkbox" v-model="isActive" />

        <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span>
        <md-button>
          <img src="@/assets/insert-photo.svg">
        </md-button>
      <!-- find a nice way to utilise svg fill property without doing it inline -->
      <md-button 
        @click="markImportant"
        >
        <svg :class="{'red-flag': isImportant}" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>
        </svg>
      </md-button>
    </md-list-item>
  </div>
</template>
@@ -19,7 +32,8 @@
  },
  data() {
    return {
      isActive: false
      isActive: false,
      isImportant: false
    };
  },
  methods: {
@@ -27,6 +41,11 @@
      // set to greyed out / true false
      this.isActive = !this.isActive;
      console.info("INFO - ", this.todoItem, this.isActive);
    },
    markImportant() {
      // set to greyed out / true false
      this.isImportant = !this.isImportant;
      console.info("INFO - ", this.todoItem, this.isImportant);
    }
  }
};
@@ -46,5 +65,10 @@

.strike-through {
  text-decoration: line-through;
  font-style: italic;
}

.red-flag {
  fill: #cc0000;
}
</style>