(back|front)end: add Project#color
This commit is contained in:
parent
026e11af11
commit
a4521130c1
7 changed files with 64 additions and 5 deletions
|
@ -0,0 +1,10 @@
|
||||||
|
class AddColorToProjects < ActiveRecord::Migration[7.1]
|
||||||
|
def up
|
||||||
|
default = Twenty::ColorableMixin.random_color
|
||||||
|
add_column :projects, :color, :string, null: false, default:
|
||||||
|
end
|
||||||
|
|
||||||
|
def down
|
||||||
|
drop_column :projects, :color
|
||||||
|
end
|
||||||
|
end
|
|
@ -1,6 +1,7 @@
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
class Twenty::Model < ActiveRecord::Base
|
class Twenty::Model < ActiveRecord::Base
|
||||||
|
require_relative "model/mixin/colorable_mixin"
|
||||||
require_relative "model/project"
|
require_relative "model/project"
|
||||||
require_relative "model/task"
|
require_relative "model/task"
|
||||||
end
|
end
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
module Twenty::ColorableMixin
|
||||||
|
extend self
|
||||||
|
|
||||||
|
COLORS = [
|
||||||
|
'#222222', '#333333', '#444444', '#555555', '#666666',
|
||||||
|
'#777777', '#888888', '#999999', '#AAAAAA', '#BBBBBB',
|
||||||
|
'#CCCCCC', '#DDDDDD', '#990000', '#009900', '#000099',
|
||||||
|
'#990099', '#009999', '#999900', '#990099', '#999999'
|
||||||
|
]
|
||||||
|
|
||||||
|
def self.included(klass)
|
||||||
|
klass.before_validation :set_random_color, on: :create
|
||||||
|
end
|
||||||
|
|
||||||
|
def random_color
|
||||||
|
COLORS.sample
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
|
||||||
|
def set_random_color
|
||||||
|
self.color = random_color
|
||||||
|
end
|
||||||
|
end
|
|
@ -1,6 +1,7 @@
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
class Twenty::Project < Twenty::Model
|
class Twenty::Project < Twenty::Model
|
||||||
|
include Twenty::ColorableMixin
|
||||||
self.table_name = "projects"
|
self.table_name = "projects"
|
||||||
|
|
||||||
##
|
##
|
||||||
|
@ -13,7 +14,7 @@ class Twenty::Project < Twenty::Model
|
||||||
has_many :tasks, class_name: "Twenty::Task"
|
has_many :tasks, class_name: "Twenty::Task"
|
||||||
|
|
||||||
def to_json(options = {})
|
def to_json(options = {})
|
||||||
{id:, name:, path:}.to_json(options)
|
{id:, name:, path:, color:}.to_json(options)
|
||||||
end
|
end
|
||||||
|
|
||||||
##
|
##
|
||||||
|
|
|
@ -21,7 +21,8 @@ ul.collection {
|
||||||
ul.collection li.item {
|
ul.collection li.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: 5px;
|
height: 85px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -33,9 +34,24 @@ ul.collection li.item {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
color: $secondary-color;
|
color: $secondary-color;
|
||||||
|
.tag {
|
||||||
|
padding: 2.5px;
|
||||||
|
color: $primary-color;
|
||||||
|
border: 1px solid $secondary-color;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: small;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.break {
|
||||||
|
display: flex;
|
||||||
|
height: 10px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul.actions {
|
ul.actions {
|
||||||
|
|
|
@ -71,8 +71,14 @@ export function Tasks() {
|
||||||
<a className="w-85" href={editHref}>
|
<a className="w-85" href={editHref}>
|
||||||
<span className="title">{task.title}</span>
|
<span className="title">{task.title}</span>
|
||||||
<span className="subtitle">
|
<span className="subtitle">
|
||||||
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
<span className="datetime">
|
||||||
{datetime.toFormat("HH:mm")}
|
{datetime.toFormat("dd LLL, yyyy")} at{" "}
|
||||||
|
{datetime.toFormat("HH:mm")}
|
||||||
|
</span>
|
||||||
|
<span className="break"></span>
|
||||||
|
<span style={{backgroundColor: task.project.color}} className="tag">
|
||||||
|
{task.project.name}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<ul className="actions">
|
<ul className="actions">
|
||||||
|
|
|
@ -7,6 +7,7 @@ export type Project = {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
path: string;
|
path: string;
|
||||||
|
color: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Task = {
|
export type Task = {
|
||||||
|
@ -14,7 +15,7 @@ export type Task = {
|
||||||
title: string;
|
title: string;
|
||||||
content: string;
|
content: string;
|
||||||
status: TASK_STATUS;
|
status: TASK_STATUS;
|
||||||
|
project: Project;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
updated_at: string;
|
updated_at: string;
|
||||||
project_id: number;
|
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue