From b12869e509b88c9f19cf677bbd940cf28b2dd0c0 Mon Sep 17 00:00:00 2001 From: kolaente Date: Sun, 17 Jan 2021 11:51:07 +0100 Subject: [PATCH] Fix labels randomly changing color after saving --- src/helpers/color/colorFromHex.js | 13 +++++++++++++ src/helpers/color/colorFromHex.test.js | 11 +++++++++++ src/helpers/{ => color}/colorIsDark.js | 0 src/helpers/color/colorIsDark.test.js | 16 ++++++++++++++++ src/main.js | 2 +- src/models/label.js | 2 +- src/services/label.js | 3 ++- src/services/list.js | 5 +++-- src/services/namespace.js | 5 +++-- src/services/task.js | 5 ++--- 10 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 src/helpers/color/colorFromHex.js create mode 100644 src/helpers/color/colorFromHex.test.js rename src/helpers/{ => color}/colorIsDark.js (100%) create mode 100644 src/helpers/color/colorIsDark.test.js diff --git a/src/helpers/color/colorFromHex.js b/src/helpers/color/colorFromHex.js new file mode 100644 index 00000000..75ebb175 --- /dev/null +++ b/src/helpers/color/colorFromHex.js @@ -0,0 +1,13 @@ +/** + * Returns the hex color code without the '#' if it has one. + * + * @param color + * @returns {string} + */ +export const colorFromHex = color => { + if (color.substring(0, 1) === '#') { + color = color.substring(1, 7) + } + + return color +} diff --git a/src/helpers/color/colorFromHex.test.js b/src/helpers/color/colorFromHex.test.js new file mode 100644 index 00000000..5701918d --- /dev/null +++ b/src/helpers/color/colorFromHex.test.js @@ -0,0 +1,11 @@ +import {colorFromHex} from './colorFromHex' + +test('hex', () => { + const color = '#ffffff' + expect(colorFromHex(color)).toBe('ffffff') +}) + +test('no hex', () => { + const color = 'ffffff' + expect(colorFromHex(color)).toBe('ffffff') +}) diff --git a/src/helpers/colorIsDark.js b/src/helpers/color/colorIsDark.js similarity index 100% rename from src/helpers/colorIsDark.js rename to src/helpers/color/colorIsDark.js diff --git a/src/helpers/color/colorIsDark.test.js b/src/helpers/color/colorIsDark.test.js new file mode 100644 index 00000000..c33bc8e2 --- /dev/null +++ b/src/helpers/color/colorIsDark.test.js @@ -0,0 +1,16 @@ +import {colorIsDark} from './colorIsDark' + +test('dark color', () => { + const color = '#111111' + expect(colorIsDark(color)).toBe(false) +}) + +test('light color', () => { + const color = '#DDDDDD' + expect(colorIsDark(color)).toBe(true) +}) + +test('default dark', () => { + const color = '' + expect(colorIsDark(color)).toBe(true) +}) diff --git a/src/main.js b/src/main.js index ce4258e1..ee637250 100644 --- a/src/main.js +++ b/src/main.js @@ -68,7 +68,7 @@ import vueShortkey from 'vue-shortkey' // Mixins import message from './message' import {format, formatDistance} from 'date-fns' -import {colorIsDark} from './helpers/colorIsDark' +import {colorIsDark} from './helpers/color/colorIsDark' import {setTitle} from './helpers/setTitle' // Vuex import {store} from './store' diff --git a/src/models/label.js b/src/models/label.js index ab21e128..216fe078 100644 --- a/src/models/label.js +++ b/src/models/label.js @@ -1,6 +1,6 @@ import AbstractModel from './abstractModel' import UserModel from './user' -import {colorIsDark} from '@/helpers/colorIsDark' +import {colorIsDark} from '@/helpers/color/colorIsDark' export default class LabelModel extends AbstractModel { constructor(data) { diff --git a/src/services/label.js b/src/services/label.js index 39c24c04..4dea5b81 100644 --- a/src/services/label.js +++ b/src/services/label.js @@ -1,6 +1,7 @@ import AbstractService from './abstractService' import LabelModel from '../models/label' import {formatISO} from 'date-fns' +import {colorFromHex} from '@/helpers/color/colorFromHex' export default class LabelService extends AbstractService { constructor() { @@ -16,7 +17,7 @@ export default class LabelService extends AbstractService { processModel(label) { label.created = formatISO(new Date(label.created)) label.updated = formatISO(new Date(label.updated)) - label.hexColor = label.hexColor.substring(1, 7) + label.hexColor = colorFromHex(label.hexColor) return label } diff --git a/src/services/list.js b/src/services/list.js index 9be8f729..41bb3345 100644 --- a/src/services/list.js +++ b/src/services/list.js @@ -2,6 +2,7 @@ import AbstractService from './abstractService' import ListModel from '../models/list' import TaskService from './task' import {formatISO} from 'date-fns' +import {colorFromHex} from '@/helpers/color/colorFromHex' export default class ListService extends AbstractService { constructor() { @@ -29,12 +30,12 @@ export default class ListService extends AbstractService { model.tasks = model.tasks.map(task => { return taskService.beforeUpdate(task) }) - model.hexColor = model.hexColor.substring(1, 7) + model.hexColor = colorFromHex(model.hexColor) return model } beforeCreate(list) { - list.hexColor = list.hexColor.substring(1, 7) + list.hexColor = colorFromHex(list.hexColor) return list } diff --git a/src/services/namespace.js b/src/services/namespace.js index 62b9d900..ecd0e9d8 100644 --- a/src/services/namespace.js +++ b/src/services/namespace.js @@ -1,6 +1,7 @@ import AbstractService from './abstractService' import NamespaceModel from '../models/namespace' import {formatISO} from 'date-fns' +import {colorFromHex} from '@/helpers/color/colorFromHex' export default class NamespaceService extends AbstractService { constructor() { @@ -24,12 +25,12 @@ export default class NamespaceService extends AbstractService { } beforeUpdate(namespace) { - namespace.hexColor = namespace.hexColor.substring(1, 7) + namespace.hexColor = colorFromHex(namespace.hexColor) return namespace } beforeCreate(namespace) { - namespace.hexColor = namespace.hexColor.substring(1, 7) + namespace.hexColor = colorFromHex(namespace.hexColor) return namespace } } \ No newline at end of file diff --git a/src/services/task.js b/src/services/task.js index 39364a78..435cf086 100644 --- a/src/services/task.js +++ b/src/services/task.js @@ -4,6 +4,7 @@ import AttachmentService from './attachment' import LabelService from './label' import {formatISO} from 'date-fns' +import {colorFromHex} from '@/helpers/color/colorFromHex' const parseDate = date => { if (date) { @@ -86,9 +87,7 @@ export default class TaskService extends AbstractService { } model.repeatAfter = repeatAfterSeconds - if (model.hexColor.substring(0, 1) === '#') { - model.hexColor = model.hexColor.substring(1, 7) - } + model.hexColor = colorFromHex(model.hexColor) // Do the same for all related tasks Object.keys(model.relatedTasks).forEach(relationKind => {