- Settings label priority as Title
- If drag down, the task become completed
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>-->
|
||||
|
||||
Reference in New Issue
Block a user