- fix: width to 100%

flex: 1;  // get all space
  order: 1;

src/components/todos/SingleTodo/SingleTodo.scss

@@ -5,12 +5,12 @@
   margin: 0px;
   color: #000;
   font-size: 0.85rem;
-  flex: 1 1 auto;
+  //flex: 0 0 100%;
 }
 
 
 .flex-container2 {
-  flex-flow: row;
+  flex-flow: row nowrap;
   justify-content: space-between;
 }
 
@@ -26,7 +26,7 @@
 }
 
 .rowselected {
-  border-width: 2px 0px 2px 0px;
+  border-width: 1px 0px 1px 0px;
   border-style: solid;
   border-color: rgba(49, 68, 240, 0.6);
   //background-color: rgba(166, 153, 240, 0.7) !important;
@@ -50,6 +50,12 @@
 }
 
 .todo-menu {
+  min-width: 202px;
+
+}
+
+.item-menu{
+  font-size: 1rem;
 
 }
 
@@ -79,8 +85,8 @@
 }
 
 
-.pos-item:hover {
+.pos-item:hover, .pos-item-popover:hover {
-  cursor: pointer;
+  cursor: col-resize;
 }
 
 .priority-item-popover {
@@ -148,13 +154,14 @@
 .div_descr, .div_descr_edit {
   margin: 2px;
   padding: 2px;
-  min-width: 100px;
+  min-width: 200px;
-  flex: 2 1 auto;
   vertical-align: middle;
   text-align: left;
 
-  height: 24px;
+  flex: 1;
-  line-height: 24px; /* same as height! */
+  order: 1;
+  //height: 24px;
+  //line-height: 24px; /* same as height! */
 
   &.hide {
     display: none !important;
@@ -237,3 +244,28 @@
     background-color: red;
   }
 }
+
+
+
+/*
+.container {
+  background-color: #ccc;
+  padding: 10px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+
+.item {
+  background-color: red;
+  padding: 10px;
+  color: white;
+
+}
+.i3{
+  order: 1;
+  flex: 1;
+}
+*/

src/components/todos/SingleTodo/SingleTodo.ts

@@ -26,7 +26,6 @@ export default class SingleTodo extends Vue {
   public classRow: string = ''
   public sel: boolean = false
   public inEdit: boolean = false
-  public descrtoEdit: string = ''
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -48,10 +47,6 @@ export default class SingleTodo extends Vue {
     this.watchupdate()
   }
 
-  @Watch('itemtodo.descr') valueChanged5() {
-    this.descrtoEdit = this.itemtodo.descr
-  }
-
   isTodo () {
     return this.isTodoByElem(this.itemtodo)
   }
@@ -68,7 +63,7 @@ export default class SingleTodo extends Vue {
   updateClasses() {
     // this.classCompleted = 'completed-item'
     this.classCompleted = 'completed-item-popover'
-    this.classDescr = 'flex-item div_descr'
+    this.classDescr = 'flex-item div_descr show'
     this.classDescrEdit = 'flex-item div_descr_edit'
     if (!this.isTodo())
       this.classDescr += ' titleLista-item'
@@ -82,13 +77,13 @@ export default class SingleTodo extends Vue {
       this.classExpiringEx += ' status_completed'
     }
 
-    if (this.inEdit) {
+    // if (this.inEdit) {
-      this.classDescr += ' hide'
+    //   this.classDescr += ' hide'
-      this.classDescrEdit += ' show'
+    //   this.classDescrEdit += ' show'
-    } else {
+    // } else {
-      this.classDescrEdit += ' hide'
+    //   this.classDescrEdit += ' hide'
-      this.classDescr += ' show'
+    //   this.classDescr += ' show'
-    }
+    // }
 
     // this.getinputdescr = 'inputdescr' + this.itemtodo.id
 
@@ -171,31 +166,28 @@ export default class SingleTodo extends Vue {
     else
       this.updateClasses()
 
-    this.descrtoEdit = this.itemtodo.descr
-
     let mythis = this
     setTimeout(() => {
       let theField = <HTMLInputElement>mythis.$refs.inputdescr
       theField.focus()
       console.log('focus()')
-    }, 0)
+    }, 100)
 
     console.log('FINE - editTodo')
   }
 
-  exitEdit () {
+  exitEdit (singola: boolean = false) {
     if (this.inEdit) {
       console.log('exitEdit')
       this.inEdit = false
       this.updateClasses
-      this.$emit('deselectAllRows', this.itemtodo, false)
+      this.$emit('deselectAllRows', this.itemtodo, false, singola)
     }
   }
 
 
   updateTodo () {
     this.watchupdate()
-    this.itemtodo.descr = this.descrtoEdit
     this.inEdit = false
     this.updateClasses()
   }
@@ -248,6 +240,8 @@ export default class SingleTodo extends Vue {
       this.removeitem(this.itemtodo.id)
     } else if (action === rescodes.MenuAction.TOGGLE_EXPIRING) {
       this.enableExpiring()
+    } else if (action === rescodes.MenuAction.COMPLETED) {
+      this.setCompleted()
     }
 
   }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -7,12 +7,15 @@
                         @click.native="clickMenu(field.value), popover_menu = false">
                     <q-item-side :icon="field.icon"/>
                     <q-item-main>
-                        <q-item-tile label>{{field.label}}</q-item-tile>
+                        <q-item-tile label class="item-menu">{{field.label}}</q-item-tile>
                     </q-item-main>
 
                     <q-item-side v-if="field.value === 101">
                         <q-checkbox v-model="itemtodo.enableExpiring"/>
                     </q-item-side>
+                    <q-item-side v-if="field.value === 110">
+                        <q-checkbox v-model="itemtodo.completed"/>
+                    </q-item-side>
                 </q-item>
             </q-list>
         </q-context-menu>
@@ -35,6 +38,9 @@
                             <q-item-side v-if="field.value === 101">
                                 <q-checkbox v-model="itemtodo.enableExpiring"/>
                             </q-item-side>
+                            <q-item-side v-if="field.value === 110">
+                                <q-checkbox v-model="itemtodo.completed"/>
+                            </q-item-side>
                         </q-item>
                     </q-list>
                 </q-popover>
@@ -74,14 +80,14 @@
                     @click.native="setCompleted"/>-->
         </div>
 
-        <q-input autofocus ref="inputdescr" :value="descrtoEdit" @change="val => descrtoEdit = val"
+        <q-input type="textarea" autofocus ref="inputdescr" :value="itemtodo.descr" @change="val => itemtodo.descr = val"
-                 :class="classDescrEdit"
+                 :class="classDescr" :max-height="50"
-                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit"/>
+                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @mousedown.left="editTodo()"/>
 
 
-        <div :class="classDescr" @click="editTodo()">
+        <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
-            {{ itemtodo.descr }}
+            <!--<q-field>{{ itemtodo.descr }}</q-field>-->
-        </div>
+        <!--</div>-->
 
 
         <div v-if="itemtodo.enableExpiring">

src/components/todos/todo/todo.scss

@@ -2,7 +2,7 @@
   background-color: rgb(250, 250, 250);
   padding: 5px;
   display: flex;
-  flex-flow: row;
+  flex-direction: row;
   justify-content: space-between;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .drag {
-  background-color: green;
+  //background-color: green;
 }
 
 .dragArea {

src/components/todos/todo/todo.ts

@@ -493,7 +493,7 @@ export default class Todo extends Vue {
   // }
   //
 
-  deselectAllRows(item, check) {
+  deselectAllRows(item, check, onlythis:boolean = false) {
     console.log('deselectAllRows : ', item)
 
     for (let i = 0; i < this.$refs.single.length; i++) {
@@ -503,7 +503,13 @@ export default class Todo extends Vue {
       // @ts-ignore
       let id = contr.itemtodo.id
       // Don't deselect the actual clicked!
-      if ((check && (item.id !== id)) || (!check)) {
+      let des = false
+      if (onlythis) {
+        des = item.id === id
+      }else {
+        des = ((check && (item.id !== id)) || (!check))
+      }
+      if (des) {
         // @ts-ignore
         contr.deselectAndExitEdit()
       }

src/components/todos/todo/todo.vue

@@ -10,28 +10,26 @@
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div class="drag">
-                <div class="flex-container">
+                <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
-                    <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
+                           @start="onStart" @end="onEnd" class="dragArea">
-                               @start="onStart" @end="onEnd" class="dragArea">
+                    <transition-group>
-                        <transition-group>
+                        <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
-                            <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
 
-                                <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
+                            <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
-                                    <label>{{getPriorityByInd(mytodo.priority)}}</label>
+                                <label>{{getPriorityByInd(mytodo.priority)}}</label>
-                                </div>
-                                <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
-                                    <label>{{$t('todo.completed')}}</label>
-                                    <div style="display: none">{{ priorcomplet = true }}</div>
-                                </div>
-                                <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
-                                            @deselectAllRows="deselectAllRows"
-                                            :itemtodo='mytodo' />
-
-                                <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
                             </div>
-                        </transition-group>
+                            <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
-                    </draggable>
+                                <label>{{$t('todo.completed')}}</label>
-                </div>
+                                <div style="display: none">{{ priorcomplet = true }}</div>
+                            </div>
+                            <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
+                                        @deselectAllRows="deselectAllRows"
+                                        :itemtodo='mytodo' />
+
+                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
+                        </div>
+                    </transition-group>
+                </draggable>
             </div>
 
         </div>

src/store/Modules/rescodes.ts

@@ -26,7 +26,8 @@ export const rescodes = {
 
   MenuAction: {
     DELETE: 100,
-    TOGGLE_EXPIRING: 101
+    TOGGLE_EXPIRING: 101,
+    COMPLETED: 110
   },
 
 
@@ -76,29 +77,47 @@ export const rescodes = {
     'it': [
       {
         id: 1,
-        label: 'Cancella',
+        label: 'Completato',
-        value: 100, // DELETE
+        value: 110, // COMPLETED
-        icon: 'delete'
+        icon: 'check_circle',
+        checked: true
       },
       {
-        id: 2,
+        id: 3,
         label: 'Imposta Scadenza',
         value: 101, // TOGGLE_EXPIRING
-        icon: 'expand_more'
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 10,
+        label: 'Cancella',
+        value: 100, // DELETE
+        icon: 'delete',
+        checked: false
       }
       ],
     'enUk': [
       {
         id: 1,
-        label: 'Delete',
+        label: 'Completed',
-        value: 100, // DELETE
+        value: 110, // COMPLETED
-        icon: 'trash'
+        icon: 'check_circle',
+        checked: true
       },
       {
         id: 2,
         label: 'Set Expiring',
         value: 101, // TOGGLE_EXPIRING
-        icon: 'sun'
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 10,
+        label: 'Delete',
+        value: 100, // DELETE
+        icon: 'trash',
+        checked: false
       }
       ]
   }