Merge pull request #50 from zyishai/master

Improve todos toggling

Author: aviaviavi

web/css/toodles.css

@@ -53,6 +53,10 @@
     font-size: .75em;
 }
 
+.todo-source-link:hover {
+    text-decoration: underline;
+}
+
 .todo-source-link a:link, .todo-source-link a:visited {
     color: grey !important;
 }
@@ -77,6 +81,10 @@
     text-align: center;
 }
 
+.todo-item:hover {
+    cursor: pointer;
+}
+
 .todo-item-body {
     word-wrap: break-word;
 }

web/html/index.html

@@ -37,7 +37,13 @@
                         </span>
                         <span>Delete</span>
                     </div>
-                    <div class="select-all navbar-item" v-on:click="selectAll">
+                    <div class="navbar-item deselect-all" v-on:click="deselectAll" v-show="todos.length && todos.every(t => t.selected)">
+                        <span class="icon">
+                           <i class="fa fa-square"></i> 
+                        </span>
+                        <span>Deselect All</span>
+                    </div>
+                    <div class="select-all navbar-item" v-on:click="selectAll" v-show="todos.some(t => !t.selected)">
                         <span class="icon">
                             <i class="fa fa-check-square"></i>
                         </span>
@@ -130,14 +136,14 @@
                             <th>Tags</th>
                         </tr>
                     </thead>
-                    <tr class="todo-item" v-for="todo in todos" v-if="todo.body.indexOf(todoSearch) !== -1 || (todo.assignee || '').indexOf(todoSearch) !== -1 || (todo.tags || []).toString().indexOf(todoSearch) !== -1 || (todo.flag || '').indexOf(todoSearch) !== -1" @change="updateTodo('top level')">
+                    <tr class="todo-item" v-for="todo in todos" v-if="todo.body.indexOf(todoSearch) !== -1 || (todo.assignee || '').indexOf(todoSearch) !== -1 || (todo.tags || []).toString().indexOf(todoSearch) !== -1 || (todo.flag || '').indexOf(todoSearch) !== -1" @change="updateTodo('top level')" @click="toggleTodo(todo)">
                         <td><input type="checkbox" v-model="todo.selected"></td>
                         <td class="todo-item-priority" >
                             <div v-show="todo.priority !== undefined">{{ todo.priority }}</div>
                         </td>
                         <td class="todo-item-flag" >{{ todo.flag }}</td>
                         <td class='todo-item-body'>
-                            <div class="todo-source-link"><a :href="'/source_file/' + todo.id + '#line-' + todo.lineNumber" target="_blank">{{ todo.sourceFile }}:{{ todo.lineNumber}}</a></div>
+                            <div class="todo-source-link" @click="stopPropagation"><a :href="'/source_file/' + todo.id + '#line-' + todo.lineNumber" target="_blank">{{ todo.sourceFile }}:{{ todo.lineNumber}}</a></div>
                             <div>{{ todo.body }}</div>
                         </td>
                         <td class="todo-item-assignee" >{{ todo.assignee }}</td>

web/js/app.js

@@ -120,6 +120,14 @@ $(document).ready(function() {
           console.log(name)
         }
       },
+      
+      toggleTodo: function(todo) {
+        todo.selected = !todo.selected
+      },
+
+      stopPropagation: function(e) {
+        e.stopPropagation()
+      },
 
       editSeletedTodos: function() {
         $(".modal").addClass("is-active")
@@ -159,6 +167,13 @@ $(document).ready(function() {
         this.hideDropdown()
       },
 
+      deselectAll: function() {
+        this.todos.map(function(t) {
+          t.selected = false
+        })
+        this.hideDropdown()
+      },
+
       toggleMenuBurger: function(ev) {
         $(".navbar-burger").toggleClass("is-active")
         $(".navbar-menu").toggleClass("is-active")