surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- fix: width to 100%

Browse Source 
flex: 1;  // get all space
  order: 1;
This commit is contained in:
Paolo Arena
2019-01-28 13:31:41 +01:00
parent 3f678e28a6
commit d8f0ead522
7 changed files with 124 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -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;
}
*/

32
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -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()
}
}

20
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -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">

4
src/components/todos/todo/todo.scss
View File

@@ -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 {

10
src/components/todos/todo/todo.ts
View File

@@ -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()
}

2
src/components/todos/todo/todo.vue
View File

@@ -10,7 +10,6 @@
<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>
@@ -32,7 +31,6 @@
</transition-group>
</draggable>
</div>
</div>
</div>
</q-page>

39
src/store/Modules/rescodes.ts
View File

@@ -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
}
]
}