- added Categories to the Task List.

- Drawer added SubMenu : Personal / Work Todo list categories.

src/components/todos/SingleTodo/SingleTodo.scss

@@ -1,4 +1,8 @@
 
+
+$colcompleted: #a2a2a2;
+$heightitem: 19px;
+
 .flex-item{
    // background-color: #d5e2eb;
   padding: 0px;
@@ -10,7 +14,7 @@
 
 
 .flex-container2 {
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   justify-content: space-between;
   margin: 2px 5px 2px 5px;  // top right bottom left
 }
@@ -46,8 +50,8 @@
   margin-right: 1px;
   padding-left: 1px;
   padding-right: 1px;
-  height: 36px;
-  line-height: 36px;
+  height: $heightitem;
+  line-height: $heightitem;
   text-align: center;
   // background-color: #ff4081;
   font-size: 0.75rem;
@@ -67,8 +71,8 @@
   max-width: 92px;
   min-width: 92px;
   margin: 0 auto;
-  height: 36px;
-  line-height: 36px;
+  height: $heightitem;
+  line-height: $heightitem;
   text-align: center;
   // background-color: #ff4081;
   font-size: 1rem;
@@ -135,8 +139,8 @@
 
 
 .percProgress {
-  height: 24px;
-  line-height: 24px;
+  height: $heightitem;
+  line-height: $heightitem;
   color: #888;
 }
 
@@ -157,6 +161,10 @@
   color: green;
 }
 
+.percompleted {
+  color: $colcompleted
+}
+
 .myexpired {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -164,10 +172,11 @@
 }
 
 .data-item {
-  //max-width: 100px;
+  max-width: 100px;
   //min-width: 100px;
   //display: flex;
   //visibility: initial;
+  margin-right: 3px;
   color: #ccc;
   order: 1;
   flex: 1;
@@ -264,7 +273,7 @@
 }
 
 .status_completed {
-  color:rgba(49, 68, 240, 0.7);
+  color: $colcompleted
 }
 
 .menuTitlePriority {

src/components/todos/SingleTodo/SingleTodo.ts

@@ -8,6 +8,8 @@ import { ITodo } from '../../../model/index'
 
 import $ from 'jquery'
 
+import { debounce } from '../../../classes/debounce'
+
 @Component({
   name: 'SingleTodo'
 })
@@ -22,7 +24,7 @@ export default class SingleTodo extends Vue {
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
-  public popover_menu: boolean = false
+  public popover_menu: boolean = false  // Serve
   public classRow: string = ''
   public sel: boolean = false
   public inEdit: boolean = false
@@ -102,6 +104,9 @@ export default class SingleTodo extends Vue {
       mycolcl = ' highperc'
     }
 
+    if (this.itemtodo.completed)
+      mycolcl = ' percompleted'
+
     this.colProgress = mycolcl
 
     this.menuProgress += mycolcl
@@ -124,7 +129,7 @@ export default class SingleTodo extends Vue {
       this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
     else {
       this.menuPopupTodo = []
-      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][0])
+      this.menuPopupTodo.push(rescodes.menuPopupTodo[UserStore.state.lang][rescodes.INDEX_MENU_DELETE])
     }
 
   }
@@ -304,6 +309,8 @@ export default class SingleTodo extends Vue {
       this.enableExpiring()
     } else if (action === rescodes.MenuAction.COMPLETED) {
       this.setCompleted()
+    } else if (action === rescodes.MenuAction.PROGRESS_BAR) {
+      this.updatedata()
     }
 
   }