ami/tl-vikunja
1
0
Fork 0
Code Activity

Namespaces & Lists Page (#160)

Browse Source 
Center list backgrounds

Better alignment of new namespace and filter button

Make creating new namespace button clear

Hide archived lists unless the user wants it

Make all cards responsive

Cleanup

Show it if a namespace is archived

Show if a list is archived

Fix not updating the list in store after updating the background

Make task cards smaller

Display list backgrounds in cards and look good while doing it

lighter shadow

Change background to stripes

Set list backgrounds as card backgrounds

Add background color check to color appropriatly

Move color check to mixin

Use background color from tasks

Change list card color

Make create new namespace button stick to the right

Shadow all the things

Don't keep list backgrounds set when navigating back

Make links to list clickable

Add seperate page for namespaces

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/160
This commit is contained in:
konrad
2020-06-16 22:20:37 +00:00
parent 98fb043e15
commit cf136132e3
13 changed files with 269 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/models/label.js
View File

@ -1,5 +1,6 @@
import AbstractModel from './abstractModel'
import UserModel from "./user";
import UserModel from './user'
import {colorIsDark} from '../helpers/colorIsDark'
export default class LabelModel extends AbstractModel {
constructor(data) {
@ -11,13 +12,13 @@ export default class LabelModel extends AbstractModel {
if (this.hexColor.substring(0, 1) !== '#') {
this.hexColor = '#' + this.hexColor
}
this.textColor = this.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'
this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#e5e5e5'
this.createdBy = new UserModel(this.createdBy)
this.created = new Date(this.created)
this.updated = new Date(this.updated)
}
defaults() {
return {
id: 0,
@ -27,24 +28,9 @@ export default class LabelModel extends AbstractModel {
createdBy: UserModel,
listId: 0,
textColor: '',
created: null,
updated: null,
}
}
hasDarkColor() {
if (this.hexColor === '#') {
return true // Defaults to dark
}
let rgb = parseInt(this.hexColor.substring(1, 7), 16); // convert rrggbb to decimal
let r = (rgb >> 16) & 0xff; // extract red
let g = (rgb >> 8) & 0xff; // extract green
let b = (rgb >> 0) & 0xff; // extract blue
// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
return luma > 128
}
}

19
src/models/task.js
View File

@ -135,25 +135,6 @@ export default class TaskModel extends AbstractModel {
}
}
/**
* Checks if the hexColor of a task is dark.
* @returns {boolean}
*/
hasDarkColor() {
if (this.hexColor === '#') {
return true // Defaults to dark
}
let rgb = parseInt(this.hexColor.substring(1, 7), 16); // convert rrggbb to decimal
let r = (rgb >> 16) & 0xff; // extract red
let g = (rgb >> 8) & 0xff; // extract green
let b = (rgb >> 0) & 0xff; // extract blue
// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
return luma > 128
}
async cancelScheduledNotifications() {
if (!('showTrigger' in Notification.prototype)) {
console.debug('This browser does not support triggered notifications')