- (Part 2 - Upgrade Components Quasar)

src/components/todos/SingleTodo/SingleTodo.scss

@@ -25,7 +25,7 @@ $heightdescr: 20px;
 .flex-container2 {
   flex-flow: row wrap;
   justify-content: space-between;
-  margin: 0px 5px 0px 5px;  // top right bottom left
+  margin: 0px 1px 0px 1px;  // top right bottom left
 }
 
 // Set visibility: visible to the icon menu of pos-item-popover
@@ -71,7 +71,7 @@ $heightdescr: 20px;
 
 .pos-item {
   max-width: 24px;
-  min-width: 24px;
+  min-width: 26px;
   margin-left: 1px;
   margin-right: 1px;
   padding-left: 1px;
@@ -218,16 +218,20 @@ $heightdescr: 20px;
 }
 
 .data-item {
-  max-width: 84px;
+  max-width: 78px;
   //min-width: 100px;
   //display: flex;
   //visibility: initial;
   margin-right: 3px;
-  color: #ccc;
+  color: #585858;
   order: 1;
   flex: 1;
-  height: $heightBtn;
-  line-height: $heightBtn;
+  height: $heightitem;
+  line-height: $heightitem;
+  padding-left: 2px;
+  padding-right: 0px;
+  //height: $heightBtn;
+  //line-height: $heightBtn;
 }
 
 
@@ -263,7 +267,6 @@ $heightdescr: 20px;
 
   vertical-align: middle;
   line-height: 120%;
-  max-height: 40px;
 
   //background-color: #d50000;
 
@@ -279,14 +282,17 @@ $heightdescr: 20px;
 }
 
 .div_descr {
-  display: table-cell;
+  display: -webkit-box;
+  max-height: 45px;
 
 }
 
 
 .div_descr_edit {
+  //display: block;
   max-height: 90px;
   //line-height: 120%;
+  //max-height: 90px;
   line-height: $heightitem;
 }
 

src/components/todos/SingleTodo/SingleTodo.ts

@@ -22,7 +22,7 @@ export default class SingleTodo extends Vue {
   public classCompleted: string = ''
   public classDescr: string = ''
   public classDescrEdit: string = ''
-  public classExpiring: string = ''
+  public classExpiring: string = 'flex-item data-item shadow-1'
   public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
@@ -65,7 +65,10 @@ export default class SingleTodo extends Vue {
   }
 
   @Watch('itemtodo.progress') public valueChanged6() {
+    console.log('itemtodo.progress')
     this.updateClasses()
+
+    console.log('this.percentageProgress', this.percentageProgress, 'this.itemtodo.progress', this.itemtodo.progress)
   }
 
 /*
@@ -103,6 +106,9 @@ export default class SingleTodo extends Vue {
       this.classDescrEdit += ' titleLista-item'
     }
 
+    if (this.itemtodo.progress > 100)
+      this.itemtodo.progress = 100
+
     this.classExpiring = 'flex-item data-item shadow-1'
     this.classExpiringEx = ''
     if (this.itemtodo.completed) {
@@ -362,6 +368,14 @@ export default class SingleTodo extends Vue {
     this.updateClasses()
   }
 
+  public aggiornaProgress(value, initialval){
+    if (value !== initialval) {
+      this.itemtodo.progress = value
+      this.updatedata('progress')
+      this.deselectAndExitEdit()
+    }
+  }
+
   public setCompleted() {
     // console.log('setCompleted')
     this.itemtodo.completed = !this.itemtodo.completed

src/components/todos/SingleTodo/SingleTodo.vue

@@ -18,6 +18,8 @@
         <div class="flex-item donotdrag divdescrTot">
             <q-input v-if="sel && !itemtodo.completed" hide-underline type="textarea" ref="inputdescr"
                      v-model.trim="precDescr"
+                     autogrow
+                     dense
                      :class="classDescrEdit" :max-height="100"
                      @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editTodo()"/>
 
@@ -37,7 +39,7 @@
         <!--<q-field>{{ itemtodo.descr }}</q-field>-->
         <!--</div>-->
 
-        <div v-if="isTodo() && (percentageProgress > 0) " class="flex-item progress-item shadow-1">
+        <div v-if="isTodo() && (itemtodo.progress > 0) " class="flex-item progress-item shadow-1">
             <q-linear-progress
                     stripe
                     :percentage="percentageProgress"
@@ -47,8 +49,11 @@
             </q-linear-progress>
             <div :class="percProgress">
                 {{percentageProgress}}%
-                <q-popup-edit v-model="itemtodo.progress" title="Progress" buttons class="editProgress">
-                    <q-input type="number" v-model="itemtodo.progress" :max="100" :min="0"/>
+                <q-popup-edit v-model="percentageProgress" title="Progress" buttons class="editProgress"
+                              @change="val => { model = val }"
+                              @save="aggiornaProgress"
+                >
+                    <q-input dense autofocus type="number" v-model="percentageProgress" :max="100" :min="0"/>
                 </q-popup-edit>
 
             </div>
@@ -57,16 +62,24 @@
 
         <div v-if="itemtodo.enableExpiring" :class="classExpiring">
             {{getstrDate(itemtodo.expiring_at)}}
-            <q-popup-edit v-model="itemtodo.expiring_at" title="Edit" buttons class="">
-                <q-input
-                        filled
-                        v-model="itemtodo.expiring_at"
-                        type="date"
-                        class="myexpired"
-                        format="DD/MM/YY"
-                        @change="val => { model = val }">
-                </q-input>
-            </q-popup-edit>
+            <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy>
+                    <q-date v-model="itemtodo.expiring_at" today-btn/>
+                </q-popup-proxy>
+            </q-icon>
+            <!--<q-icon name="event" class="cursor-pointer" />-->
+            <!--<q-popup-edit v-model="itemtodo.expiring_at"-->
+            <!--title="Edit"-->
+            <!--buttons class="">-->
+            <!--<q-input-->
+            <!--filled-->
+            <!--v-model="itemtodo.expiring_at"-->
+            <!--type="date"-->
+            <!--class="myexpired"-->
+            <!--format="DD/MM/YYYY"-->
+            <!--&gt;-->
+            <!--</q-input>-->
+            <!--</q-popup-edit>-->
         </div>
         <div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
             <q-btn push