mld merged

shlomialon · shlomialon · commit ae2bd457ae80 · 2017-11-22T18:43:02.000+02:00
diff --git a/components/task-delete.js b/components/task-delete.js
@@ -1,5 +1,5 @@
 Vue.component('task-delete',{
-    template:`<button v-bind:style="{'background-color':'yellow'}" @click="removeItem" >Delete</button>`,
+    template:`<button  class="mdl-button mdl-js-button mdl-button--icon" @click="removeItem" ><i class="material-icons">delete</i></button>`,
     props: ['item'],
     methods: {
      removeItem:function () {
diff --git a/components/task-details.js b/components/task-details.js
@@ -1,20 +1,21 @@
 Vue.component('task-details', {
     template: `  
-  <div v-if="selectedItem">
-        <label  for="item-text">text:</label>
-        <input id="item-text" type=text v-model="selectedItem.text"/>
-        <button v-bind:style="{'background-color': selectedItem.activity ? '#4CAF50' : 'red'}" v-on:click="selectedItem.activity = !selectedItem.activity">{{selectedItem.activity}}</button>
-        <task-delete :item="selectedItem" v-on:remove-item="removeItem"></task-delete>
-    </div>
+    
+<div v-if="selectedItem">
+    <div class="mdl-textfield mdl-js-textfield">
+        <label  class="mdl-textfield__label" for="sample1">text:</label>
+        <input  class="mdl-textfield__input" id="item-text" type=text v-model="selectedItem.text"/>
+    </div> 
+    <input type="checkbox" id="switch-1" class="mdl-switch__input" v-model="selectedItem.activity">
+ 
+    <task-delete :item="selectedItem" v-on:remove-item="removeItem"></task-delete>
+</div>
 `,
     props: ['selectedItem'],
-    data: function () {
-        return {
-        }
-    },
+
     methods: {
         removeItem: function (item) {
-            this.$emit("remove-item",item);
-        }
+            this.$emit("remove-item", item);
+        },
     }
 });
diff --git a/components/task-list.js b/components/task-list.js
@@ -1,7 +1,7 @@
 Vue.component('task-list', {
     template: `
-    <ul>
-        <li v-for="item in items">
+    <ul class="mdl-list">
+        <li class="mdl-list__item" v-for="item in items">
           <task-item :item="item" v-on:select-item="selectItemEdit"></task-item>
         </li>
     </ul>
diff --git a/todo.html b/todo.html
@@ -2,17 +2,22 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>ToDo List</title>
+    <!--icons-->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="./css/material.min.css">
+    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+
 </head>
 <body>
-
-<div id="app">
-    <App></App>
+<div  id="app">
+    <div class="mdl-grid">
+        <div class="mdl-cell  mdl-cell--4-offset mdl-cell--4-col">
+            <App></App>
+        </div>
+    </div>
 </div>
 
-<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
 <script src="https://unpkg.com/vue"></script>
 <script src="components/task-add.js"></script>
 <script src="components/task-list.js"></script>
