- fix: width to 100%

flex: 1; // get all space order: 1;
2019-01-28 13:31:41 +01:00
parent 3f678e28a6
commit d8f0ead522
7 changed files with 124 additions and 69 deletions
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/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 {
-  cursor: pointer;
+.pos-item:hover, .pos-item-popover:hover {
+  cursor: col-resize;
 }

 .priority-item-popover {
@@ -148,13 +154,14 @@
 .div_descr, .div_descr_edit {
  margin: 2px;
  padding: 2px;
-  min-width: 100px;
-  flex: 2 1 auto;
+  min-width: 200px;
  vertical-align: middle;
  text-align: left;

-  height: 24px;
-  line-height: 24px; /* same as height! */
+  flex: 1;
+  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;
+}
+*/
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/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) {
-      this.classDescr += ' hide'
-      this.classDescrEdit += ' show'
-    } else {
-      this.classDescrEdit += ' hide'
-      this.classDescr += ' show'
-    }
+    // if (this.inEdit) {
+    //   this.classDescr += ' hide'
+    //   this.classDescrEdit += ' show'
+    // } else {
+    //   this.classDescrEdit += ' hide'
+    //   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()
    }

  }
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/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"
-                 :class="classDescrEdit"
-                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit"/>
+        <q-input type="textarea" autofocus ref="inputdescr" :value="itemtodo.descr" @change="val => itemtodo.descr = val"
+                 :class="classDescr" :max-height="50"
+                 v-on:keyup.enter="updateTodo" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @mousedown.left="editTodo()"/>


-        <div :class="classDescr" @click="editTodo()">
-            {{ itemtodo.descr }}
-        </div>
+        <!--<div :class="classDescr" @mousedown.left="editTodo()">-->
+            <!--<q-field>{{ itemtodo.descr }}</q-field>-->
+        <!--</div>-->


        <div v-if="itemtodo.enableExpiring">
--- a/src/components/todos/todo/todo.scss
+++ b/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 {
--- a/src/components/todos/todo/todo.ts
+++ b/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()
      }
--- a/src/components/todos/todo/todo.vue
+++ b/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'}"
-                               @start="onStart" @end="onEnd" class="dragArea">
-                        <transition-group>
-                            <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
+                <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
+                           @start="onStart" @end="onEnd" class="dragArea">
+                    <transition-group>
+                        <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)">
-                                    <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 v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
+                                <label>{{getPriorityByInd(mytodo.priority)}}</label>
                            </div>
-                        </transition-group>
-                    </draggable>
-                </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>
+                </draggable>
            </div>

        </div>
--- a/src/store/Modules/rescodes.ts
+++ b/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',
-        value: 100, // DELETE
-        icon: 'delete'
+        label: 'Completato',
+        value: 110, // COMPLETED
+        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',
-        value: 100, // DELETE
-        icon: 'trash'
+        label: 'Completed',
+        value: 110, // COMPLETED
+        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
      }
      ]
  }