added themecolor and themebgcolor to todos and projects

This commit is contained in:
Paolo Arena
2019-04-29 23:47:42 +02:00
parent 166be747a5
commit 08c0ded31f
26 changed files with 547 additions and 221 deletions

View File

@@ -270,7 +270,7 @@ $heightdescr: 20px;
//padding: 2px;
min-width: 100px;
text-align: left;
color: blue !important;
color: blue;
overflow: hidden;
align-items: center;

View File

@@ -3,6 +3,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
import { Projects, UserStore } from '@modules'
import { tools } from '../../../store/Modules/tools'
import { lists } from '../../../store/Modules/lists'
import { IProject } from '../../../model/index'
@@ -18,7 +19,6 @@ import { RouteNames } from '@src/router/route-names'
name: 'SingleProject'
})
export default class SingleProject extends Vue {
public selectPriority: [] = []
public menuPopupProj: any[] = []
public classDescr: string = ''
public classDescrEdit: string = ''
@@ -77,6 +77,16 @@ export default class SingleProject extends Vue {
this.watchupdate('hoursplanned')
}
@Watch('itemproject.themecolor')
public valueChangedthemecolor() {
this.watchupdate('themecolor')
}
@Watch('itemproject.themebgcolor')
public valueChangedthemebgcolor() {
this.watchupdate('themebgcolor')
}
@Watch('itemproject.hoursworked')
public valueChangedhoursworked() {
this.watchupdate('hoursworked')
@@ -172,6 +182,9 @@ export default class SingleProject extends Vue {
this.classDescrEdit += ' titleLista-item'
}
this.classDescr += ' text-' + this.itemproject.themecolor + ' bg-' + this.itemproject.themebgcolor
this.classDescrEdit += ' text-' + this.itemproject.themecolor + ' bg-' + this.itemproject.themebgcolor
this.percProgress = 'percProgress'
this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
@@ -210,8 +223,6 @@ export default class SingleProject extends Vue {
this.updateClasses()
this.selectPriority = tools.selectPriority[UserStore.state.lang]
}
public getClassRow() {
@@ -357,7 +368,7 @@ export default class SingleProject extends Vue {
if (((e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertProjectBottom', true)
return
@@ -385,7 +396,7 @@ export default class SingleProject extends Vue {
if (((e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
e.preventDefault()
this.deselectRiga()
this.clickMenu(tools.MenuAction.DELETE)
this.clickMenu(lists.MenuAction.DELETE)
.then(() => {
this.faiFocus('insertProjectBottom', true)
return
@@ -486,16 +497,16 @@ export default class SingleProject extends Vue {
public async clickMenu(action) {
console.log('click menu: ', action)
if (action === tools.MenuAction.DELETE) {
if (action === lists.MenuAction.DELETE) {
return await this.askConfirmDelete()
} else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
} else if (action === lists.MenuAction.TOGGLE_EXPIRING) {
return await this.enableExpiring()
} else if (action === tools.MenuAction.EDIT) {
} else if (action === lists.MenuAction.EDIT) {
this.activeEdit()
} else if (action === tools.MenuAction.CUT) {
} else if (action === lists.MenuAction.CUT) {
const myaction = {
table: tools.projects,
type: tools.MenuAction.CUT,
type: lists.MenuAction.CUT,
_id: this.itemproject._id
}
return await Projects.actions.ActionCutPaste(myaction)
@@ -505,6 +516,39 @@ export default class SingleProject extends Vue {
}
public selectSubMenu(action, elem) {
if (action === lists.MenuAction.PRIORITY) {
this.setPriority(elem)
} else if (action === lists.MenuAction.THEME) {
this.setThemeColor(elem, false)
} else if (action === lists.MenuAction.THEMEBG) {
this.setThemeColor(elem, true)
}
}
public setThemeColor(newtheme, bg: boolean) {
let changedfield = ''
if (bg) {
if (this.itemproject.themebgcolor !== newtheme) {
this.itemproject.themebgcolor = newtheme
changedfield = 'themebgcolor'
}
} else {
if (this.itemproject.themecolor !== newtheme) {
this.itemproject.themecolor = newtheme
changedfield = 'themecolor'
}
}
if (changedfield !== '') {
this.updatedata(changedfield)
this.updateicon()
}
}
public setPriority(newpriority) {
if (this.itemproject.priority !== newpriority) {

View File

@@ -50,7 +50,7 @@
icon="menu">
<q-menu ref="popmenu" self="top right">
<SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
@setPriority="setPriority"></SubMenusProj>
@selectSubMenu="selectSubMenu"></SubMenusProj>
</q-menu>
</q-btn>
</div>

View File

@@ -2,6 +2,7 @@ import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '@src/store/Modules/tools'
import { lists } from '@src/store/Modules/lists'
import { UserStore } from '@store'
import { IProject } from '../../../model/index'
@@ -16,18 +17,21 @@ import { IProject } from '../../../model/index'
})
export default class SubMenusProj extends Vue {
public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
@Prop({ required: false }) public menuPopupProj: any[]
@Prop({ required: false }) public itemproject: IProject
public $q: any
get lists() {
return lists
}
public clickMenu(field) {
this.$emit('clickMenu', field)
}
public setPriority(field) {
this.$emit('setPriority', field)
public selectSubMenu(action, field) {
this.$emit('selectSubMenu', action, field)
}
public KeychangeProgress(e) {
@@ -46,9 +50,4 @@ export default class SubMenusProj extends Vue {
}
}
public create() {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
console.log('CREAZIONE')
}
}

View File

@@ -1,7 +1,9 @@
<template>
<q-list separator no-border class="todo-menu">
<div v-for="field in menuPopupProj" :key="field.value">
<q-item v-close-popup clickable v-if="(field.value !== 130) && (field.value !== 120)" :icon="field.icon"
<q-item v-close-popup clickable
v-if="(field.arrlista === undefined) && (field.value !== lists.MenuAction.PROGRESS_BAR)"
:icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -11,11 +13,11 @@
<q-item-label>{{field.label}}</q-item-label>
</q-item-section>
<q-item-section side top v-if="field.value === 101">
<q-item-section side top v-if="field.value === lists.MenuAction.TOGGLE_EXPIRING">
<q-checkbox v-model="itemproject.enableExpiring"/>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 120)" :icon="field.icon"
<q-item clickable v-if="(field.value === lists.MenuAction.PROGRESS_BAR)" :icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon"/>
@@ -37,9 +39,10 @@
</div>
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 130)">
<q-item clickable
v-if="(field.arrlista !== undefined)">
<q-item-section avatar>
<q-icon name="priority_high" inverted color="primary"/>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>{{field.label}}</q-item-section>
@@ -54,14 +57,16 @@
<q-item-section>
<q-list dense>
<q-item clickable v-ripple v-for="fieldprior in selectPriority"
<q-item clickable v-ripple v-for="fieldprior in field.arrlista"
:key="fieldprior.value"
@click="setPriority(fieldprior.value)">
<q-item-section avatar>
@click="selectSubMenu(field.value, fieldprior.value)">
<q-item-section avatar v-if="!!fieldprior.icon">
<q-icon :name="fieldprior.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{fieldprior.label}}
<span :class="`text-`+fieldprior.value">
{{fieldprior.label}}
</span>
</q-item-section>
</q-item>
</q-list>