webskel/dolphins7.skeleton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: improve Projects.tsx

Browse source
This commit is contained in:
0x1eef 2023-12-26 03:51:30 -03:00
parent 1c8aaed8ca
commit cd4ebe4ac7
6 changed files with 65 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
twenty-backend/lib/twenty-backend/model/project.rb
View file

@ -15,4 +15,11 @@ class Twenty::Project < Twenty::Model
def to_json(options = {})
{id:, name:, path:}.to_json(options)
end
##
# @return [String]
# The path to a project.
def path
super&.sub(Dir.home, "~")
end
end

1
twenty-frontend/src/css/_colors.scss
View file

@ -2,3 +2,4 @@ $black: lighten(#000, 20%);
$gray1: #f4f0ec;
$gray2: lighten($gray1, 5%);
$gray3: #cfcfc4;
$blue: #008cff;

12
twenty-frontend/src/css/_lists.scss
View file

@ -16,7 +16,7 @@ ul.items {
justify-content: space-between;
$blue: #008cff;
color: $blue;
padding: 10px 10px 0px 10px;
padding: 10px 10px 5px 10px;
border: 1px solid #FFF;
&:hover {
background: $gray1;
@ -30,7 +30,7 @@ ul.items {
flex-wrap: wrap;
width: 100%;
}
span.date {
span.date, span.path {
font-size: small;
color: $black;
}
@ -51,3 +51,11 @@ ul.items {
animation-duration: 0.5s;
}
}
ul.items.projects {
li.item {
a {
width: 100%;
}
}
}

20
twenty-frontend/src/css/main.scss
View file

@ -23,12 +23,32 @@ body header {
background: $gray1;
min-height: 40px;
border-bottom: 1px solid $gray3;
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
ul.nav {
display: flex;
flex-direction: row;
list-style-type: none;
column-gap: 10px;
align-items: center;
li a {
&:hover {
color: $blue;
text-decoration: none;
font-weight: bold;
}
}
}
}
}
.pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; }
.mb-20 { margin-bottom: 20px; }
.mb-50 { margin-bottom: 50px; }
.w-100 { width: 100%; }
.max-width {
width: 75%;

19
twenty-frontend/src/js/components/Projects.tsx
View file

@ -4,13 +4,24 @@ import { useProjects } from "/hooks/useProjects";
export function Projects() {
const projects = useProjects();
return (
<>
<div className="table">
<div className="table div">
<span>Projects</span>
<ul className="projects">
</div>
<div className="table content">
<ul className="items projects">
{projects.map((project, i) => {
return <li key={i}>{project.name}</li>;
return (
<li className="item" key={i}>
<a href={`/tasks#project_id=${project.id}`}>
<span>{project.name}</span>
<span className="path">{project.path}</span>
</a>
</li>
);
})}
</ul>
</>
</div>
</div>
);
}

9
twenty-frontend/src/layouts/default.html
View file

@ -8,10 +8,17 @@
</head>
<body>
<header class="mb-50">
<div class="align-center max-width">
<div class="align-center max-width wrapper">
<a href="/">
<img width=48 height=48 src="/favicon.svg"/>
</a>
<ul class="nav">
<li>
<a href="/projects">Projects</a>
<li>
<a href="/tasks">Tasks</a>
</li>
</ul>
</div>
</header>
<%= yield %>