From b4180d37ecb78270b6c348fc83def861197a18d7 Mon Sep 17 00:00:00 2001
From: acammies <acammies@redhat.com>
Date: Tue, 03 Apr 2018 16:28:19 +0200
Subject: [PATCH] flag with colour change for importance
---
src/components/TodoItem.vue | 38 +++++++++++++++++++++++++++++++-------
1 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 9c9f310..586c168 100644
--- a/src/components/TodoItem.vue
+++ b/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>
--
Gitblit v1.9.3