diff --git a/src/components/todos/SingleTodo/SingleTodo.scss b/src/components/todos/SingleTodo/SingleTodo.scss index 08eabf4..b7de83f 100644 --- 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; +} +*/ diff --git a/src/components/todos/SingleTodo/SingleTodo.ts b/src/components/todos/SingleTodo/SingleTodo.ts index f8365bb..9bf3e23 100644 --- 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 = 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() } } diff --git a/src/components/todos/SingleTodo/SingleTodo.vue b/src/components/todos/SingleTodo/SingleTodo.vue index 27b74d8..221821d 100644 --- 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"> - {{field.label}} + {{field.label}} + + + @@ -35,6 +38,9 @@ + + + @@ -74,14 +80,14 @@ @click.native="setCompleted"/>--> - + -
- {{ itemtodo.descr }} -
+ + +
diff --git a/src/components/todos/todo/todo.scss b/src/components/todos/todo/todo.scss index ea6146f..706a954 100644 --- 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 { diff --git a/src/components/todos/todo/todo.ts b/src/components/todos/todo/todo.ts index 214189c..f102078 100644 --- 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() } diff --git a/src/components/todos/todo/todo.vue b/src/components/todos/todo/todo.vue index d852749..fb46bf1 100644 --- a/src/components/todos/todo/todo.vue +++ b/src/components/todos/todo/todo.vue @@ -10,28 +10,26 @@
{{ prior = 0, priorcomplet = false }}
-
- - -
+ + +
-
- -
-
- -
{{ priorcomplet = true }}
-
- - -
{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
+
+
- - -
+
+ +
{{ priorcomplet = true }}
+
+ + +
{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
+
+
+
diff --git a/src/store/Modules/rescodes.ts b/src/store/Modules/rescodes.ts index 9a8ba95..2e0a67a 100644 --- 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 } ] }