Implemented color-coded categories

Author: kabbagepatch

api-js/categories/create.js

@@ -40,6 +40,7 @@ module.exports.create = async (event) => {
       name: data.name,
       nameLC: data.name.toLowerCase(),
       description: data.description,
+      color: data.color,
       createdAt: timestamp,
       updatedAt: timestamp,
     },

api-js/categories/update.js

@@ -43,7 +43,7 @@ module.exports.update = async (event) => {
     ReturnValues: 'ALL_NEW',
   };
 
-  const allowedFields = ['name', 'description'];
+  const allowedFields = ['name', 'description', 'color'];
   allowedFields.forEach((field) => {
     if (data[field] !== undefined && data[field] !== null) {
       params.UpdateExpression += `#${field} = :${field},`;

webapp/assets/coloris.min.css

@@ -12,4 +12,4 @@
   background: var(--white);
   border-radius: 20px;
 }
-</style>
+</style>

webapp/components/Card.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="title-card">
+    <span
+      class="pill-content"
+      :style="{
+        background: color,
+        color: color && isDark(color) ? 'white' : 'dark',
+        fontWeight: color && isDark(color) ? '300 !important' : ''
+      }"
+    >
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: "",
+  },
+  methods: {
+    isDark(hex) {
+      return (parseInt(hex.slice(1), 16) >> 16) * 0.299 + ((parseInt(hex.slice(1), 16) >> 8) & 0xff) * 0.587 + (parseInt(hex.slice(1), 16) & 0xff) * 0.114 < 186;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.pill-content {
+  padding: 0 7px;
+  border-radius: 10px;
+}
+</style>

webapp/components/CategoryPill.vue

@@ -164,11 +164,6 @@ h2 {
   box-shadow: var(--black-transparent) 2.95px 2.95px 3.6px, var(--dark-blue-transparent) 0px 0px 2px 3px;
 }
 
-.task-list {
-  margin-left: 20px;
-  margin-right: 3px;
-}
-
 @media only screen and (max-width: 600px) {
   .project-section {
     flex-direction: column;
@@ -180,10 +175,6 @@ h2 {
     font-weight: 600 !important;
     text-transform: uppercase;
   }
-
-  .task-list {
-    margin-left: 20px;
-  }
 }
 
 .complete-notice {

webapp/components/CategorySelection.vue

@@ -25,11 +25,15 @@
             </a>
             <span class="task-name" v-else>{{ task.name }}</span>
           </h4>
-          <div v-if="prioritiesData[task.project]" class="subTitle">
-            {{ prioritiesData[task.project].name }}
+          <div v-if="prioritiesData[task.project]" class="subtitle" >
+            <category-pill :color="categoriesData[task.category]?.color">
+              {{ prioritiesData[task.project].name }}
+            </category-pill>
           </div>
-          <div v-else-if="categoriesData[task.category]" class="subTitle">
-            {{ categoriesData[task.category].name }}
+          <div v-else-if="categoriesData[task.category]" class="subtitle">
+            <category-pill :color="categoriesData[task.category]?.color">
+              {{ categoriesData[task.category].name }}
+            </category-pill>
           </div>
         </div>
       </div>
@@ -78,6 +82,7 @@ import { mapState } from 'vuex';
 import TaskForm from './TaskForm.vue';
 import TaskRightClickMenu from './TaskRightClickMenu.vue';
 import Collapsible from '../Collapsible.vue';
+import CategoryPill from '../CategoryPill.vue'
 
 export default {
   props: {
@@ -96,7 +101,7 @@ export default {
     },
   },
 
-  components: { TaskForm, TaskRightClickMenu, Collapsible },
+  components: { TaskForm, TaskRightClickMenu, Collapsible, CategoryPill },
 
   data() {
     return {
@@ -234,7 +239,7 @@ export default {
   min-width: 100px;
 }
 
-.subTitle {
+.subtitle {
   margin-top: 2px;
   font-size: 0.8em;
   font-weight: 600 !important;

webapp/components/Tasks/BacklogTasks.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="title-card">
+    <h2>{{title}}</h2>
+    <div class="card-content" :style="{ padding: contentPadding || '20px' }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: "",
+    contentPadding: "10px 20px",
+  },
+}
+</script>
+
+<style scoped>
+h2 {
+  border-radius: 20px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: -5px;
+}
+
+.card-content {
+  background: var(--white);
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  margin-bottom: 20px;
+  box-shadow: var(--black-transparent) 1.95px 1.95px 2.6px, var(--dark-blue-transparenter) 0px 0px 1px 2px;
+}
+</style>

webapp/components/Tasks/TaskListItem.vue

@@ -18,12 +18,16 @@ export default {
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Mulish:wght@300&family=Poppins:wght@600&display=swap' },
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Homemade Apple' },
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Cairo' }
+    ],
+    script :[
+      { src: '/coloris.min.js', type: 'text/javascript', body: true }
     ]
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-    `~/assets/main.css`
+    `~/assets/main.css`,
+    `~/assets/coloris.min.css`
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins