added themecolor and themebgcolor to todos and projects

2019-04-29 23:47:42 +02:00
parent 166be747a5
commit 08c0ded31f
26 changed files with 547 additions and 221 deletions
--- a/src/boot/vue-i18n.ts
+++ b/src/boot/vue-i18n.ts
@@ -3,6 +3,7 @@ import VueI18n from 'vue-i18n'
 import messages from '../statics/i18n'
 import { tools } from '../store/Modules/tools'

+
 export default ({ app, store, Vue }) => {
  Vue.use(VueI18n)
  // Vue.config.lang = process.env.LANG_DEFAULT;
--- a/src/components/projects/SingleProject/SingleProject.scss
+++ b/src/components/projects/SingleProject/SingleProject.scss
@@ -270,7 +270,7 @@ $heightdescr: 20px;
  //padding: 2px;
  min-width: 100px;
  text-align: left;
-  color: blue !important;
+  color: blue;
  overflow: hidden;

  align-items: center;
--- a/src/components/projects/SingleProject/SingleProject.ts
+++ b/src/components/projects/SingleProject/SingleProject.ts
@@ -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) {
--- a/src/components/projects/SingleProject/SingleProject.vue
+++ b/src/components/projects/SingleProject/SingleProject.vue
@@ -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>
--- a/src/components/projects/SubMenusProj/SubMenusProj.ts
+++ b/src/components/projects/SubMenusProj/SubMenusProj.ts
@@ -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')
-  }
 }
--- a/src/components/projects/SubMenusProj/SubMenusProj.vue
+++ b/src/components/projects/SubMenusProj/SubMenusProj.vue
@@ -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>
--- a/src/components/todos/CTodo/CTodo.ts
+++ b/src/components/todos/CTodo/CTodo.ts
@@ -4,6 +4,7 @@ import { Component, Prop, Watch } from 'vue-property-decorator'
 import { IDrag, IProject, ITodo, ITodosState } from '../../../model/index'

 import { tools } from '../../../store/Modules/tools'
+import { lists } from '../../../store/Modules/lists'
 import * as ApiTables from '../../../store/Modules/ApiTables'

 import { GlobalStore, Todos } from '@store'
@@ -80,7 +81,7 @@ export default class CTodo extends Vue {
  public todos_completati: (state: ITodosState, category: string) => ITodo[]

  public showTask(field_value) {
-    return field_value === tools.MenuAction.SHOW_TASK
+    return field_value === lists.MenuAction.SHOW_TASK
  }

  public async onEndtodo(itemdragend) {
@@ -176,15 +177,15 @@ export default class CTodo extends Vue {
  public async updateitemtodo({ myitem, field }) {
    console.log('calling MODIFY updateitemtodo', myitem, field)

-    const itemdragend: IDrag = {
-      category: this.categoryAtt,
-      field,
-      idelemtochange: myitem._id,
-      prioritychosen: myitem.priority,
-      atfirst: false
-    }
-
-    await Todos.actions.swapElems(itemdragend)
+    // const itemdragend: IDrag = {
+    //   category: this.categoryAtt,
+    //   field,
+    //   idelemtochange: myitem._id,
+    //   prioritychosen: myitem.priority,
+    //   atfirst: false
+    // }
+    //
+    // await Todos.actions.swapElems(itemdragend)

    await Todos.actions.modify({ myitem, field })

@@ -218,7 +219,7 @@ export default class CTodo extends Vue {
        }
      }
      if (des) {
-        console.log('contr', contr)
+        // console.log('contr', contr)
        // @ts-ignore
        contr.deselectAndExitEdit()
      }
--- a/src/components/todos/SingleTodo/SingleTodo.scss
+++ b/src/components/todos/SingleTodo/SingleTodo.scss
@@ -264,7 +264,6 @@ $heightdescr: 20px;
  //padding: 2px;
  min-width: 100px;
  text-align: left;
-  color: blue !important;
  overflow: hidden;

  align-items: center;
@@ -272,8 +271,6 @@ $heightdescr: 20px;
  vertical-align: middle;
  line-height: 120%;

-  //background-color: #d50000;
-
  //order: 2;

  &.hide {
--- a/src/components/todos/SingleTodo/SingleTodo.ts
+++ b/src/components/todos/SingleTodo/SingleTodo.ts
@@ -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 { ITodo } from '../../../model/index'

@@ -17,7 +18,6 @@ import { CDate } from '../../CDate'
  name: 'SingleTodo'
 })
 export default class SingleTodo extends Vue {
-  public selectPriority: [] = []
  public menuPopupTodo: any[] = []
  public iconCompleted: string = ''
  public classCompleted: string = ''
@@ -90,6 +90,12 @@ export default class SingleTodo extends Vue {
  @Watch('itemtodo.assigned_to_userId') public valueChangedend_assigned_to_userId() {
    this.watchupdate('assigned_to_userId')
  }
+  @Watch('itemtodo.themecolor') public valueChangedend_themecolor() {
+    this.watchupdate('themecolor')
+  }
+  @Watch('itemtodo.themebgcolor') public valueChangedend_themebgcolor() {
+    this.watchupdate('themebgcolor')
+  }
  @Watch('itemtodo.phase') public valueChangedend_phase() {
    this.watchupdate('phase')
  }
@@ -138,6 +144,9 @@ export default class SingleTodo extends Vue {
      this.classDescrEdit += ' titleLista-item'
    }

+    this.classDescr += ' text-' + this.itemtodo.themecolor + ' bg-' + this.itemtodo.themebgcolor
+    this.classDescrEdit += ' text-' + this.itemtodo.themecolor + ' bg-' + this.itemtodo.themebgcolor
+
    if (this.itemtodo.progress > 100)
      this.itemtodo.progress = 100

@@ -197,9 +206,6 @@ export default class SingleTodo extends Vue {
    this.updateicon()

    this.updateClasses()
-
-    this.selectPriority = tools.selectPriority[UserStore.state.lang]
-
  }

  public getClassRow() {
@@ -315,7 +321,7 @@ export default class SingleTodo extends Vue {
    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
      e.preventDefault()
      this.deselectRiga()
-      this.clickMenu(tools.MenuAction.DELETE)
+      this.clickMenu(lists.MenuAction.DELETE)
        .then(() => {
          this.faiFocus('insertTask', true)
          return
@@ -343,7 +349,7 @@ export default class SingleTodo extends Vue {
    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
      e.preventDefault()
      this.deselectRiga()
-      this.clickMenu(tools.MenuAction.DELETE)
+      this.clickMenu(lists.MenuAction.DELETE)
        .then(() => {
          this.faiFocus('insertTask', true)
          return
@@ -452,18 +458,18 @@ export default class SingleTodo 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.COMPLETED) {
+    } else if (action === lists.MenuAction.COMPLETED) {
      return await this.setCompleted()
-    } else if (action === tools.MenuAction.PROGRESS_BAR) {
+    } else if (action === lists.MenuAction.PROGRESS_BAR) {
      return await this.updatedata('progress')
-    } else if (action === tools.MenuAction.CUT) {
+    } else if (action === lists.MenuAction.CUT) {
      const myaction = {
        table: tools.todos,
-        type: tools.MenuAction.CUT,
+        type: lists.MenuAction.CUT,
        _id: this.itemtodo._id,
        cat: this.itemtodo.category
      }
@@ -474,6 +480,38 @@ export default class SingleTodo 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.itemtodo.themebgcolor !== newtheme) {
+        this.itemtodo.themebgcolor = newtheme
+        changedfield = 'themebgcolor'
+      }
+    }else {
+        if (this.itemtodo.themecolor !== newtheme) {
+          this.itemtodo.themecolor = newtheme
+          changedfield = 'themecolor'
+        }
+    }
+
+    if (changedfield !== '') {
+      this.updatedata(changedfield)
+
+      this.updateicon()
+    }
+  }
+
  public setPriority(newpriority) {

    if (this.itemtodo.priority !== newpriority) {
--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -72,7 +72,7 @@
                   icon="menu">
                <q-menu v-if="CanIModifyTodo" ref="popmenu" self="top right">
                    <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu"
-                              @setPriority="setPriority"></SubMenus>
+                              @selectSubMenu="selectSubMenu"></SubMenus>
                </q-menu>

            </q-btn>
--- a/src/components/todos/SubMenus/SubMenus.ts
+++ b/src/components/todos/SubMenus/SubMenus.ts
@@ -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 { ITodo } from '../../../model/index'

@@ -16,18 +17,21 @@ import { ITodo } from '../../../model/index'
 })

 export default class SubMenus extends Vue {
-  public selectPriority: [] = tools.selectPriority[UserStore.state.lang]

  @Prop({ required: false }) public menuPopupTodo: any[]
  @Prop({ required: false }) public itemtodo: ITodo
  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 SubMenus extends Vue {
    }
  }

-  public create() {
-    this.selectPriority = tools.selectPriority[UserStore.state.lang]
-
-    console.log('CREAZIONE')
-  }
 }
--- a/src/components/todos/SubMenus/SubMenus.vue
+++ b/src/components/todos/SubMenus/SubMenus.vue
@@ -1,7 +1,9 @@
 <template>
    <q-list separator no-border class="todo-menu">
        <div v-for="field in menuPopupTodo" :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 !== 120)"
+                    :icon="field.icon"
                    @click="clickMenu(field.value)">
                <q-item-section avatar>
                    <q-icon :name="field.icon"/>
@@ -11,14 +13,14 @@
                    <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="itemtodo.enableExpiring"/>
                </q-item-section>
-                <q-item-section side v-if="field.value === 110">
+                <q-item-section side v-if="field.value === lists.MenuAction.COMPLETED">
                    <q-checkbox v-model="itemtodo.statustodo"/>
                </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"/>
@@ -40,9 +42,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>
@@ -57,14 +60,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>
+                                            <span :class="`text-`+fieldprior.value">
                                            {{fieldprior.label}}
+                                            </span>
                                        </q-item-section>
                                    </q-item>
                                </q-list>
--- a/src/layouts/menuone/menuOne.scss
+++ b/src/layouts/menuone/menuOne.scss
@@ -74,3 +74,7 @@
  min-width: 26px;
  font-size: 1rem;
 }
+
+.my-menu-icon-none > i{
+  display: none;
+}
--- a/src/layouts/menuone/menuOne.vue
+++ b/src/layouts/menuone/menuOne.vue
@@ -19,8 +19,9 @@
                                              :to="child2.route"
                                              :header-inset-level="myitemmenu.level_child"
                                              :duration="300"
-                                              expand-icon="map"
+                                              :icon="child2.materialIcon"
                                              active-class="my-menu-active"
+                                              expand-icon-class="my-menu-icon-none"
                                              class="item item-link drawer-closer cursor-pointer my-menu"
                                              :label="getLabelByItem(child2)">
                                <q-expansion-item v-if="!!child2.routes2" v-for="(child3, index) in child2.routes2"
@@ -28,7 +29,9 @@
                                                  :to="child3.route"
                                                  :header-inset-level="myitemmenu.level_child"
                                                  :duration="300"
-                                                  expand-icon="map"
+                                                  :icon="child3.materialIcon"
+                                                  :expand-icon="child3.icon"
+                                                  expand-icon-class="my-menu-separat"
                                                  active-class="my-menu-active"
                                                  class="item item-link drawer-closer cursor-pointer my-menu"
                                                  :label="getLabelByItem(child3)">
--- a/src/model/Projects.ts
+++ b/src/model/Projects.ts
@@ -44,6 +44,8 @@ export interface IProject {
  actualphase?: number
  privacyread?: string
  privacywrite?: string
+  themecolor?: string
+  themebgcolor?: string
 }

 export interface IProjectsState {
--- a/src/model/Todos.ts
+++ b/src/model/Todos.ts
@@ -23,6 +23,8 @@ export interface ITodo {
  hoursplanned?: number
  hoursworked?: number
  start_date?: Date
+  themecolor?: string
+  themebgcolor?: string
 }

 export interface IParamTodo {
--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -260,7 +260,9 @@ const messages = {
      endwork_estimate: 'Data fine lavori stimata',
      privacyread: 'Chi lo puo vedere:',
      privacywrite: 'Chi lo puo modificare:',
-      totalphases: 'Totale Fasi'
+      totalphases: 'Totale Fasi',
+      themecolor: 'Tema Colore',
+      themebgcolor: 'Tema Colore Sfondo'
    },
  },
  'es': {
@@ -519,7 +521,9 @@ const messages = {
      endwork_estimate: 'Fecha estimada de finalización',
      privacyread: 'Quien puede verlo:',
      privacywrite: 'Quien puede modificarlo:',
-      totalphases: 'Fases totales'
+      totalphases: 'Fases totales',
+      themecolor: 'Tema Colores',
+      themebgcolor: 'Tema Colores Fondo'
    },
  },
  'enUs': {
@@ -778,7 +782,9 @@ const messages = {
      endwork_estimate: 'Estimated completion date',
      privacyread: 'Who can see it:',
      privacywrite: 'Who can modify if:',
-      totalphases: 'Total Phase'
+      totalphases: 'Total Phase',
+      themecolor: 'Theme Color',
+      themebgcolor: 'Theme Color Background'
    },
  },
 };
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -148,7 +148,7 @@ namespace Getters {
    // PROGETTI -> FAVORITI :
    if (arrlistafavourite.length > 0) {
      arrMenu.push({
-        icon: '',
+        icon: 'favorite_border',
        nametranslate: 'pages.' + RouteNames.favouriteprojects,
        urlroute: RouteNames.favouriteprojects,
        level_parent: 0.0,
@@ -160,7 +160,7 @@ namespace Getters {

    // PROGETTI -> TUTTI :
    arrMenu.push({
-      icon: '',
+      icon: 'accessibility_new',
      nametranslate: 'pages.' + RouteNames.projectsall,
      urlroute: RouteNames.projectsall,
      level_parent: 0.0,
@@ -171,7 +171,7 @@ namespace Getters {

    // PROGETTI -> CONDIVISI :
    arrMenu.push({
-      icon: '',
+      icon: 'people_outline',
      nametranslate: 'pages.' + RouteNames.projectsshared,
      urlroute: RouteNames.projectsshared,
      level_parent: 0.0,
@@ -182,7 +182,7 @@ namespace Getters {

    // PROGETTI -> PERSONALI :
    arrMenu.push({
-      icon: '',
+      icon: 'person',
      nametranslate: 'pages.' + RouteNames.myprojects,
      urlroute: RouteNames.myprojects,
      level_parent: 0.0,
--- a/src/store/Modules/Projects.ts
+++ b/src/store/Modules/Projects.ts
@@ -4,6 +4,7 @@ import { storeBuilder } from './Store/Store'

 import Api from '@api'
 import { tools } from './tools'
+import { lists } from './lists'
 import * as ApiTables from './ApiTables'
 import { GlobalStore, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
@@ -25,7 +26,7 @@ const stateglob: IProjectsState = {
 const listFieldsToChange: string [] = ['descr', 'longdescr', 'hoursplanned', 'hoursleft', 'hoursworked', 'id_parent', 'statusproj',
  'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progressCalc', 'live_url', 'test_url',
  'begin_development', 'begin_test', 'actualphase', 'totalphases', 'hoursweeky_plannedtowork', 'endwork_estimate',
-  'privacyread', 'privacywrite', 'id_main_project', 'typeproj', 'favourite']
+  'privacyread', 'privacywrite', 'id_main_project', 'typeproj', 'favourite', 'themecolor', 'themebgcolor']

 const listFieldsUpdateCalculation: string [] = ['hoursplanned', 'hoursleft', 'hoursworked', 'progressCalc', 'endwork_estimate']

@@ -98,7 +99,9 @@ namespace Getters {
      begin_development: tools.getDateNull(),
      begin_test: tools.getDateNull(),
      hoursweeky_plannedtowork: 0,
-      endwork_estimate: tools.getDateNull()
+      endwork_estimate: tools.getDateNull(),
+      themecolor: '',
+      themebgcolor: ''
    }

    return obj
@@ -396,10 +399,10 @@ namespace Actions {

  async function ActionCutPaste(context, action: IAction) {

-    if (action.type === tools.MenuAction.CUT) {
+    if (action.type === lists.MenuAction.CUT) {
      GlobalStore.state.lastaction = action
-    } else if (action.type === tools.MenuAction.PASTE) {
-      if (GlobalStore.state.lastaction.type === tools.MenuAction.CUT) {
+    } else if (action.type === lists.MenuAction.PASTE) {
+      if (GlobalStore.state.lastaction.type === lists.MenuAction.CUT) {

        // Change id_parent
        const orig_obj = Getters.getters.getRecordById(GlobalStore.state.lastaction._id)
--- a/src/store/Modules/Todos.ts
+++ b/src/store/Modules/Todos.ts
@@ -3,6 +3,7 @@ import { storeBuilder } from './Store/Store'

 import Api from '@api'
 import { tools } from './tools'
+import { lists } from './lists'
 import * as ApiTables from './ApiTables'
 import { GlobalStore, Todos, UserStore } from '@store'
 import globalroutines from './../../globalroutines/index'
@@ -28,7 +29,7 @@ const state: ITodosState = {
  visuLastCompleted: 10
 }

-const listFieldsToChange: string [] = ['descr', 'statustodo', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress', 'phase', 'assigned_to_userId', 'hoursplanned', 'hoursworked', 'start_date', 'completed_at']
+const listFieldsToChange: string [] = ['descr', 'statustodo', 'category', 'expiring_at', 'priority', 'id_prev', 'pos', 'enableExpiring', 'progress', 'phase', 'assigned_to_userId', 'hoursplanned', 'hoursworked', 'start_date', 'completed_at', 'themecolor', 'themebgcolor']

 const b = storeBuilder.module<ITodosState>('Todos', state)
 const stateGetter = b.state()
@@ -82,7 +83,9 @@ namespace Getters {
      assigned_to_userId: '',
      hoursplanned: 0,
      hoursworked: 0,
-      start_date: tools.getDateNull()
+      start_date: tools.getDateNull(),
+      themecolor: 'blue',
+      themebgcolor: 'white'
    }
    // return this.copy(objtodo)
    return objtodo
@@ -388,7 +391,7 @@ namespace Actions {
  }

  async function swapElems(context, itemdragend: IDrag) {
-    console.log('TODOS swapElems', itemdragend, state.todos, state.categories)
+    // console.log('TODOS swapElems', itemdragend, state.todos, state.categories)

    const cat = itemdragend.category
    const indcat = state.categories.indexOf(cat)
@@ -401,10 +404,10 @@ namespace Actions {
  async function ActionCutPaste(context, action: IAction) {
    console.log('ActionCutPaste', action)

-    if (action.type === tools.MenuAction.CUT) {
+    if (action.type === lists.MenuAction.CUT) {
      GlobalStore.state.lastaction = action
-    } else if (action.type === tools.MenuAction.PASTE) {
-      if (GlobalStore.state.lastaction.type === tools.MenuAction.CUT) {
+    } else if (action.type === lists.MenuAction.PASTE) {
+      if (GlobalStore.state.lastaction.type === lists.MenuAction.CUT) {

        // Change id_parent
        const orig_obj = Getters.getters.getRecordById(GlobalStore.state.lastaction._id, GlobalStore.state.lastaction.cat)
--- a/src/store/Modules/lists.ts
+++ b/src/store/Modules/lists.ts
@@ -0,0 +1,160 @@
+import { Todos, Projects, UserStore } from '@store'
+
+export const lists = {
+  MenuAction: {
+    CUT: 71,
+    PASTE: 72,
+    DELETE: 100,
+    TOGGLE_EXPIRING: 101,
+    COMPLETED: 110,
+    PROGRESS_BAR: 120,
+    PRIORITY: 130,
+    SHOW_TASK: 150,
+    EDIT: 160,
+    ADD_PROJECT: 200,
+    THEME: 210,
+    THEMEBG: 211
+  },
+
+  selectTheme: [
+    {
+      id: 1,
+      label: 'Theme 1',
+      value: 'red'
+    },
+    {
+      id: 2,
+      label: 'Theme 2',
+      value: 'pink'
+    },
+    {
+      id: 3,
+      label: 'Theme 3',
+      value: 'purple'
+    },
+    {
+      id: 4,
+      label: 'Theme 4',
+      value: 'deep-purple'
+    },
+    {
+      id: 5,
+      label: 'Theme 5',
+      value: 'indigo'
+    },
+    {
+      id: 6,
+      label: 'Theme 6',
+      value: 'blue'
+    },
+    {
+      id: 7,
+      label: 'Theme 7',
+      value: 'green'
+    },
+    {
+      id: 8,
+      label: 'Theme 8',
+      value: 'orange'
+    },
+    {
+      id: 9,
+      label: 'Theme 9',
+      value: 'brown'
+    },
+    {
+      id: 10,
+      label: 'Theme 10',
+      value: 'black'
+    },
+    {
+      id: 11,
+      label: 'Theme 11',
+      value: 'white'
+    }
+  ],
+
+  selectPriority: {
+    it: [
+      {
+        id: 1,
+        label: 'Alta',
+        value: 2,
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Normale',
+        value: 1,
+        icon: 'remove'
+      },
+      {
+        id: 3,
+        label: 'Bassa',
+        value: 0,
+        icon: 'expand_more'
+      }],
+    es:
+      [
+        {
+          id: 1,
+          label: 'Alta',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Baja',
+          value: 0,
+          icon: 'expand_more'
+        }],
+    enUs:
+      [
+        {
+          id: 1,
+          label: 'High',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Low',
+          value: 0,
+          icon: 'expand_more'
+        }],
+    de:
+      [
+        {
+          id: 1,
+          label: 'High',
+          value: 2,
+          icon: 'expand_less'
+        },
+        {
+          id: 2,
+          label: 'Normal',
+          value: 1,
+          icon: 'remove'
+        },
+        {
+          id: 3,
+          label: 'Low',
+          value: 0,
+          icon: 'expand_more'
+        }]
+
+  }
+
+}
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -8,6 +8,8 @@ import * as ApiTables from '@src/store/Modules/ApiTables'
 import translate from '@src/globalroutines/util'
 import { RouteNames } from '@src/router/route-names'

+import { lists } from './lists'
+
 export interface INotify {
  color?: string | 'primary'
  textColor?: string
@@ -63,18 +65,6 @@ export const tools = {
    COMPLETED: 10
  },

-  MenuAction: {
-    CUT: 71,
-    PASTE: 72,
-    DELETE: 100,
-    TOGGLE_EXPIRING: 101,
-    COMPLETED: 110,
-    PROGRESS_BAR: 120,
-    PRIORITY: 130,
-    SHOW_TASK: 150,
-    EDIT: 160,
-    ADD_PROJECT: 200
-  },
  selectPhase: {
    it: [
      {
@@ -277,89 +267,6 @@ export const tools = {
        }
      ]

-  }
-  ,
-  selectPriority: {
-    it: [
-      {
-        id: 1,
-        label: 'Alta',
-        value: 2,
-        icon: 'expand_less'
-      },
-      {
-        id: 2,
-        label: 'Normale',
-        value: 1,
-        icon: 'remove'
-      },
-      {
-        id: 3,
-        label: 'Bassa',
-        value: 0,
-        icon: 'expand_more'
-      }],
-    es:
-      [
-        {
-          id: 1,
-          label: 'Alta',
-          value: 2,
-          icon: 'expand_less'
-        },
-        {
-          id: 2,
-          label: 'Normal',
-          value: 1,
-          icon: 'remove'
-        },
-        {
-          id: 3,
-          label: 'Baja',
-          value: 0,
-          icon: 'expand_more'
-        }],
-    enUs:
-      [
-        {
-          id: 1,
-          label: 'High',
-          value: 2,
-          icon: 'expand_less'
-        },
-        {
-          id: 2,
-          label: 'Normal',
-          value: 1,
-          icon: 'remove'
-        },
-        {
-          id: 3,
-          label: 'Low',
-          value: 0,
-          icon: 'expand_more'
-        }],
-    de:
-      [
-        {
-          id: 1,
-          label: 'High',
-          value: 2,
-          icon: 'expand_less'
-        },
-        {
-          id: 2,
-          label: 'Normal',
-          value: 1,
-          icon: 'remove'
-        },
-        {
-          id: 3,
-          label: 'Low',
-          value: 0,
-          icon: 'expand_more'
-        }]
-
  }
  ,

@@ -372,14 +279,14 @@ export const tools = {
          id: 5,
          disable: false,
          label: 'Taglia',
-          value: 71, // CUT
+          value: lists.MenuAction.CUT,
          icon: 'undo'
        },
        {
          id: 10,
          disable: false,
          label: '',
-          value: 120, // PROGRESS_BAR
+          value: lists.MenuAction.PROGRESS_BAR,
          icon: 'rowing',
          checked: true
        },
@@ -387,15 +294,34 @@ export const tools = {
          id: 20,
          disable: false,
          label: 'Imposta Priorità',
-          value: 130, // PRIORITY
+          value: lists.MenuAction.PRIORITY,
          icon: 'rowing',
-          checked: false
+          checked: false,
+          arrlista: lists.selectPriority.it
+        },
+        {
+          id: 21,
+          disable: false,
+          label: translation.it.proj.themecolor,
+          value: lists.MenuAction.THEME,
+          icon: 'format_color_text',
+          checked: false,
+          arrlista: lists.selectTheme
+        },
+        {
+          id: 22,
+          disable: false,
+          label: translation.it.proj.themebgcolor,
+          value: lists.MenuAction.THEMEBG,
+          icon: 'format_color_fill',
+          checked: false,
+          arrlista: lists.selectTheme
        },
        {
          id: 30,
          disable: false,
          label: 'Completato',
-          value: 110, // COMPLETED
+          value: lists.MenuAction.COMPLETED,
          icon: 'check_circle',
          checked: true
        },
@@ -403,7 +329,7 @@ export const tools = {
          id: 40,
          disable: false,
          label: 'Imposta Scadenza',
-          value: 101, // TOGGLE_EXPIRING
+          value: lists.MenuAction.TOGGLE_EXPIRING,
          icon: 'date_range',
          checked: true
        },
@@ -411,7 +337,7 @@ export const tools = {
          id: 50,
          disable: false,
          label: 'Elimina',
-          value: 100, // DELETE
+          value: lists.MenuAction.DELETE,
          icon: 'delete',
          checked: false
        }
@@ -422,14 +348,14 @@ export const tools = {
            id: 5,
            disable: false,
            label: 'Cortar',
-            value: 71, // CUT
+            value: lists.MenuAction.CUT,
            icon: 'undo'
          },
          {
            id: 10,
            disable: false,
            label: '',
-            value: 120, // PROGRESS_BAR
+            value: lists.MenuAction.PROGRESS_BAR,
            icon: 'rowing',
            checked: true
          },
@@ -437,15 +363,34 @@ export const tools = {
            id: 20,
            disable: false,
            label: 'Establecer Prioridad',
-            value: 130, // PRIORITY
+            value: lists.MenuAction.PRIORITY,
            icon: 'rowing',
-            checked: false
+            checked: false,
+            arrlista: lists.selectPriority.es
+          },
+          {
+            id: 21,
+            disable: false,
+            label: translation.es.proj.themecolor,
+            value: lists.MenuAction.THEME,
+            icon: 'format_color_text',
+            checked: false,
+            arrlista: lists.selectTheme
+          },
+          {
+            id: 22,
+            disable: false,
+            label: translation.es.proj.themebgcolor,
+            value: lists.MenuAction.THEMEBG,
+            icon: 'format_color_fill',
+            checked: false,
+            arrlista: lists.selectTheme
          },
          {
            id: 30,
            disable: false,
            label: 'Completado',
-            value: 110, // COMPLETED
+            value: lists.MenuAction.COMPLETED,
            icon: 'check_circle',
            checked: true
          },
@@ -453,7 +398,7 @@ export const tools = {
            id: 40,
            disable: false,
            label: 'Establecer expiración',
-            value: 101, // TOGGLE_EXPIRING
+            value: lists.MenuAction.TOGGLE_EXPIRING,
            icon: 'date_range',
            checked: true
          },
@@ -461,7 +406,7 @@ export const tools = {
            id: 50,
            disable: false,
            label: 'Borrar',
-            value: 100, // DELETE
+            value: lists.MenuAction.DELETE,
            icon: 'delete',
            checked: false
          }
@@ -472,14 +417,14 @@ export const tools = {
            id: 5,
            disable: false,
            label: 'Cut',
-            value: 71, // CUT
+            value: lists.MenuAction.CUT,
            icon: 'undo'
          },
          {
            id: 10,
            disable: false,
            label: '',
-            value: 120, // PROGRESS_BAR
+            value: lists.MenuAction.PROGRESS_BAR,
            icon: 'check_circle',
            checked: true
          },
@@ -487,15 +432,34 @@ export const tools = {
            id: 20,
            disable: false,
            label: 'Set Priority',
-            value: 130, // PRIORITY
+            value: lists.MenuAction.PRIORITY,
            icon: 'high_priority',
-            checked: false
+            checked: false,
+            arrlista: lists.selectPriority.enUs
+          },
+          {
+            id: 21,
+            disable: false,
+            label: translation.enUs.proj.themecolor,
+            value: lists.MenuAction.THEME,
+            icon: 'format_color_text',
+            checked: false,
+            arrlista: lists.selectTheme
+          },
+          {
+            id: 22,
+            disable: false,
+            label: translation.enUs.proj.themebgcolor,
+            value: lists.MenuAction.THEMEBG,
+            icon: 'format_color_fill',
+            checked: false,
+            arrlista: lists.selectTheme
          },
          {
            id: 30,
            disable: false,
            label: 'Completed',
-            value: 110, // COMPLETED
+            value: lists.MenuAction.COMPLETED,
            icon: 'check_circle',
            checked: true
          },
@@ -503,7 +467,7 @@ export const tools = {
            id: 40,
            disable: false,
            label: 'Set Expiring',
-            value: 101, // TOGGLE_EXPIRING
+            value: lists.MenuAction.TOGGLE_EXPIRING,
            icon: 'date_range',
            checked: true
          },
@@ -511,7 +475,7 @@ export const tools = {
            id: 50,
            disable: false,
            label: 'Delete',
-            value: 100, // DELETE
+            value: lists.MenuAction.DELETE,
            icon: 'trash',
            checked: false
          }
@@ -543,6 +507,24 @@ export const tools = {
        icon: 'date_range',
        checked: true
      },
+      {
+        id: 45,
+        disable: false,
+        label: translation.it.proj.themecolor,
+        value: lists.MenuAction.THEME,
+        icon: 'format_color_text',
+        checked: false,
+        arrlista: lists.selectTheme
+      },
+      {
+        id: 46,
+        disable: false,
+        label: translation.it.proj.themebgcolor,
+        value: lists.MenuAction.THEMEBG,
+        icon: 'format_color_fill',
+        checked: false,
+        arrlista: lists.selectTheme
+      },
      {
        id: 50,
        disable: false,
@@ -576,6 +558,24 @@ export const tools = {
          icon: 'date_range',
          checked: true
        },
+        {
+          id: 45,
+          disable: false,
+          label: translation.es.proj.themecolor,
+          value: lists.MenuAction.THEME,
+          icon: 'format_color_text',
+          checked: false,
+          arrlista: lists.selectTheme
+        },
+        {
+          id: 46,
+          disable: false,
+          label: translation.es.proj.themebgcolor,
+          value: lists.MenuAction.THEMEBG,
+          icon: 'format_color_fill',
+          checked: false,
+          arrlista: lists.selectTheme
+        },
        {
          id: 50,
          disable: false,
@@ -609,6 +609,24 @@ export const tools = {
          icon: 'date_range',
          checked: true
        },
+        {
+          id: 45,
+          disable: false,
+          label: translation.enUs.proj.themecolor,
+          value: lists.MenuAction.THEME,
+          icon: 'format_color_text',
+          checked: false,
+          arrlista: lists.selectTheme
+        },
+        {
+          id: 46,
+          disable: false,
+          label: translation.enUs.proj.themebgcolor,
+          value: lists.MenuAction.THEMEBG,
+          icon: 'format_color_fill',
+          checked: false,
+          arrlista: lists.selectTheme
+        },
        {
          id: 50,
          disable: false,
@@ -900,7 +918,7 @@ export const tools = {
  getPriorityByInd(index) {
    // console.log('LANG in PRIOR', UserStore.state.lang)
    try {
-      const arr = tools.selectPriority[UserStore.state.lang]
+      const arr = lists.selectPriority[UserStore.state.lang]
      for (const rec of arr) {
        if (rec.value === index) {
          return rec.label
@@ -1032,7 +1050,7 @@ export const tools = {

    if (tools.isOkIndex(myarr, itemdragend.newIndex) && tools.isOkIndex(myarr, itemdragend.oldIndex)) {

-      console.log('SPLICE!')
+      console.log('***  SPLICE!')
      // console.log('   PRIMA!', tools.logga_arrproj(myarr))
      myarr.splice(itemdragend.newIndex, 0, myarr.splice(itemdragend.oldIndex, 1)[0])
      // console.log('   DOPO!', tools.logga_arrproj(myarr))
--- a/src/store/Modules/translation.ts
+++ b/src/store/Modules/translation.ts
@@ -10,6 +10,8 @@ export const translation = {
    proj: {
      newproj: 'Nuovo Progetto',
      newsubproj: 'Nuovo Sotto-Progetto',
+      themecolor: 'Tema Colore',
+      themebgcolor: 'Tema Colore Sfondo'
    },
    task: {
      showtask: 'Mostra Task',
@@ -30,6 +32,8 @@ export const translation = {
    proj: {
      newproj: 'Nuevo Projecto',
      newsubproj: 'Nuevo Sub-Projecto',
+      themecolor: 'Tema Colores',
+      themebgcolor: 'Tema Colores Fondo'
    },
    task: {
      showtask: 'Mostrar Tarea',
@@ -50,9 +54,11 @@ export const translation = {
    proj: {
      newproj: 'New Project',
      newsubproj: 'New Sub-Project',
+      themecolor: 'Theme Color',
+      themebgcolor: 'Theme Background Color'
    },
    task: {
-      showtask: 'Show Task',
+      showtask: 'Show Task'
    },
    action: {
      paste: 'Paste'
--- a/src/views/projects/proj-list/proj-list.ts
+++ b/src/views/projects/proj-list/proj-list.ts
@@ -6,6 +6,7 @@ import { SingleProject } from '../../../components/projects/SingleProject/index'
 import { CTodo } from '../../../components/todos/CTodo'

 import { tools } from '../../../store/Modules/tools'
+import { lists } from '../../../store/Modules/lists'
 import * as ApiTables from '../../../store/Modules/ApiTables'

 import { GlobalStore, Projects, Todos } from '@store'
@@ -98,6 +99,36 @@ export default class ProjList extends Vue {
    // console.log('idproj', this.idProjAtt, 'params' , this.$route.params)
  }

+  get classTitle() {
+    let cl = 'flex-item categorytitle shadow-4'
+    if (!!this.itemprojparent) {
+      cl += ' text-' + this.itemprojparent.themecolor + ' bg-' + this.itemprojparent.themebgcolor
+    } else {
+      cl += ' text-black' + ' bg-light-blue'
+    }
+    return cl
+  }
+
+  get classTitleTodoSel() {
+    let cl = 'flex-item shadow-4'
+    if (!!this.itemtodosel) {
+      cl += ' text-' + this.itemtodosel.themecolor + ' bg-' + this.itemtodosel.themebgcolor
+    } else {
+      cl += ' text-black' + ' bg-light-blue'
+    }
+    return cl
+  }
+
+  get classTitleProjSel() {
+    let cl = 'flex-item categorytitle shadow-4'
+    if (!!this.itemselproj) {
+      cl += ' text-' + this.itemselproj.themecolor + ' bg-' + this.itemselproj.themebgcolor
+    } else {
+      cl += ' text-black' + ' bg-light-blue'
+    }
+    return cl
+  }
+
  get tipoProj() {
    // console.log('this.$route.name', this.$route.name)
    return this.$route.name
@@ -171,7 +202,7 @@ export default class ProjList extends Vue {
      mymenu = tools.menuPopupConfigProject[UserStore.state.lang]

    if (mymenu.length > 0)
-      mymenu[0].disable = !(GlobalStore.state.lastaction.type === tools.MenuAction.CUT)
+      mymenu[0].disable = !(GlobalStore.state.lastaction.type === lists.MenuAction.CUT)

    return mymenu
  }
@@ -271,7 +302,7 @@ export default class ProjList extends Vue {
  }

  public showTask(field_value) {
-    return field_value === tools.MenuAction.SHOW_TASK
+    return field_value === lists.MenuAction.SHOW_TASK
  }

  public async onEndproj(itemdragend) {
@@ -378,18 +409,18 @@ export default class ProjList extends Vue {

  public async clickMenuProjList(action) {
    console.log('clickMenuProjList: ', action)
-    if (action === tools.MenuAction.ADD_PROJECT) {
+    if (action === lists.MenuAction.ADD_PROJECT) {
      const idnewelem = await this.addProject('', this.tipoProj)
      // get element by id
      const elem = this.getCompProjectById(idnewelem)
      // @ts-ignore
      elem.activeEdit()
      // console.log('idnewelem', idnewelem, 'Elem Trovato', elem)
-    } else if (action === tools.MenuAction.PASTE) {
+    } else if (action === lists.MenuAction.PASTE) {

      const myaction: IAction = {
        table: GlobalStore.state.lastaction.table,
-        type: tools.MenuAction.PASTE,
+        type: lists.MenuAction.PASTE,
        _id: this.itemselproj._id
      }

--- a/src/views/projects/proj-list/proj-list.vue
+++ b/src/views/projects/proj-list/proj-list.vue
@@ -19,7 +19,7 @@

                                </q-btn>

-                                <div class="flex-item categorytitle shadow-4">{{descrProject | capitalize}}</div>
+                                <div :class="classTitle">{{descrProject | capitalize}}</div>
                                <div class="flex-item">
                                    <q-btn push
                                           size="sm"
@@ -141,7 +141,7 @@

                            <!--</q-rating>-->
                            <q-icon class="flex-item flex-icon" name="format_align_center"/>
-                            <div class="flex-item projecttitle shadow-4">
+                            <div :class="classTitleProjSel">
                                {{itemselproj.descr}}
                            </div>
                        </div>
@@ -270,6 +270,7 @@
                                <q-input
                                        ref="input4"
                                        v-model="itemtodosel.descr"
+                                        :class="classTitleTodoSel"
                                        :label="$t('proj.longdescr')"
                                        outlined
                                        :readonly="readonly_PanelPrivacy"
--- a/src/views/todo-list/todo-list.scss
+++ b/src/views/todo-list/todo-list.scss
@@ -66,8 +66,6 @@
 }

 .categorytitle{
-  color:blue;
-  background-color: lightblue;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;