added themecolor and themebgcolor to todos and projects

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;

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;

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

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>

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) {
+  public selectSubMenu(action, field) {
-    this.$emit('setPriority', 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')
-  }
 }

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)">
+                                            @click="selectSubMenu(field.value, fieldprior.value)">
-                                        <q-item-section avatar>
+                                        <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>

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

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 {

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

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>

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) {
+  public selectSubMenu(action, field) {
-    this.$emit('setPriority', 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')
-  }
 }

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)">
+                                            @click="selectSubMenu(field.value, fieldprior.value)">
-                                        <q-item-section avatar>
+                                        <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>

src/layouts/menuone/menuOne.scss

@@ -74,3 +74,7 @@
   min-width: 26px;
   font-size: 1rem;
 }
+
+.my-menu-icon-none > i{
+  display: none;
+}

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

src/model/Projects.ts

@@ -44,6 +44,8 @@ export interface IProject {
   actualphase?: number
   privacyread?: string
   privacywrite?: string
+  themecolor?: string
+  themebgcolor?: string
 }
 
 export interface IProjectsState {

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 {

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'
     },
   },
 };

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,

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) {
+    } else if (action.type === lists.MenuAction.PASTE) {
-      if (GlobalStore.state.lastaction.type === tools.MenuAction.CUT) {
+      if (GlobalStore.state.lastaction.type === lists.MenuAction.CUT) {
 
         // Change id_parent
         const orig_obj = Getters.getters.getRecordById(GlobalStore.state.lastaction._id)

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) {
+    } else if (action.type === lists.MenuAction.PASTE) {
-      if (GlobalStore.state.lastaction.type === tools.MenuAction.CUT) {
+      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)

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'
+        }]
+
+  }
+
+}

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))

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'

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
       }
 

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"

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;