- Settings label priority as Title

- If drag down, the task become completed
This commit is contained in:
Paolo Arena
2019-01-27 21:49:10 +01:00
parent 83420447d3
commit 0733e92acd
7 changed files with 170 additions and 42 deletions

View File

@@ -14,13 +14,22 @@
justify-content: space-between;
}
.flex-container2:hover {
background-color: rgba(240, 240, 240, 0.7);
// Set visibility: visible to the icon menu of pos-item-popover
.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
//.flex-container2:hover .pos-item-popover {
background-color: rgba(230, 230, 230, 0.8);
display: inline-block;
}
.flex-container2:hover{
background-color: rgba(230, 230, 230, 0.8);
}
.rowselected {
border: 1px solid rgba(255, 0, 0, 0.5);
background-color: rgba(49, 68, 240, 0.7) !important;
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;
}
@@ -44,15 +53,17 @@
}
.pos-item-popover {
.pos-item-popover{
max-width: 24px;
min-width: 24px;
padding: 0px;
text-align: center;
vertical-align: middle;
display: inline-block;
display: none;
color: #777;
height: 100%;
color: #555;
//visibility: hidden;
}
@@ -61,13 +72,25 @@
}
.priority-item-popover {
max-width: 24px;
min-width: 24px;
padding: 0px;
text-align: center;
vertical-align: middle;
display: none;
height: 100%;
color: #777;
}
.completed-item-popover {
max-width: 24px;
min-width: 24px;
padding: 0px;
text-align: center;
vertical-align: middle;
display: inline-block;
height: 100%
height: 100%;
color: #777;
}
.priority-item {
@@ -75,10 +98,8 @@
min-width: 24px;
}
.completed-item {
max-width: 24px;
min-width: 24px;
}
.myexpired {
padding-top: 0px;
@@ -111,7 +132,8 @@
}
.div_descr:hover {
border: 1px solid rgba(125, 255, 125, 0.5);
border-width: 1px 0px 1px 0px;
border-color: rgba(125, 255, 125, 0.5);
padding: 1px;
}

View File

@@ -22,6 +22,8 @@ export default class SingleTodo extends Vue {
public popover_menu: boolean = false
public classRow: string = ''
public sel: boolean = false
public isover: boolean = false
public classPosItemPopup = 'pos-item-popover'
$q: any
@Prop({ required: true }) itemtodo: ITodo
@@ -42,7 +44,9 @@ export default class SingleTodo extends Vue {
}
updateClasses() {
this.classCompleted = 'priority-item-popover'
// this.classCompleted = 'completed-item'
this.classCompleted = 'completed-item-popover'
this.classDescr = 'flex-item div_descr'
this.classExpiring = 'flex-item data-item'
this.classExpiringEx = ''
@@ -66,6 +70,14 @@ export default class SingleTodo extends Vue {
}
setclassPosItemPopup() {
if (this.isover)
this.classPosItemPopup = 'pos-item-popover'
else
this.classPosItemPopup = 'pos-item-popover'
}
getClassRow() {
return 'row flex-container2 ' + this.classRow
}

View File

@@ -1,31 +1,41 @@
<template>
<div :class="getClassRow()" @mousedown="clickRiga" @mouseup="mouseUp">
<div :class="getClassRow()" @mousedown="clickRiga" @mouseup.left="mouseUp">
<q-context-menu>
<q-list link separator no-border class="todo-menu">
<q-item v-for="field in menuPopupTodo" :key="field.value"
v-close-overlay
@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-main>
</q-item>
</q-list>
</q-context-menu>
<div class="flex-item pos-item">
<q-btn flat
class="pos-item-popover"
icon="menu"
>
icon="menu">
<q-popover
v-model="popover_menu"
self="top left">
<q-context-menu>
<q-list link separator no-border class="todo-menu">
<q-item v-for="field in menuPopupTodo" :key="field.value"
v-close-overlay
@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-main>
</q-item>
</q-list>
</q-context-menu>
<q-list link separator no-border class="todo-menu">
<q-item v-for="field in menuPopupTodo" :key="field.value"
v-close-overlay
@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-main>
</q-item>
</q-list>
</q-popover>
</q-btn>
</div>
<!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
<div class="flex-item priority-item">
<q-btn push
<q-btn push flat
class="priority-item-popover"
:icon="iconPriority">
<q-popover
@@ -46,7 +56,7 @@
</q-btn>
</div>
<div class="flex-item completed-item">
<q-btn push
<q-btn push flat
:class="classCompleted"
:icon="iconCompleted"
@click.native="setCompleted">
@@ -64,6 +74,9 @@
v-model="itemtodo.expiring_at"
class="myexpired"/>
</div>
<!--<div class="flex-item btn-item">-->
<!--{{classPosItemPopup}}-->
<!--</div>-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
<!--</div>-->