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 = {}) def to_json(options = {})
{id:, name:, path:}.to_json(options) {id:, name:, path:}.to_json(options)
end end
##
# @return [String]
# The path to a project.
def path
super&.sub(Dir.home, "~")
end
end end

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

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

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

@ -16,7 +16,7 @@ ul.items {
justify-content: space-between; justify-content: space-between;
$blue: #008cff; $blue: #008cff;
color: $blue; color: $blue;
padding: 10px 10px 0px 10px; padding: 10px 10px 5px 10px;
border: 1px solid #FFF; border: 1px solid #FFF;
&:hover { &:hover {
background: $gray1; background: $gray1;
@ -30,7 +30,7 @@ ul.items {
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
} }
span.date { span.date, span.path {
font-size: small; font-size: small;
color: $black; color: $black;
} }
@ -51,3 +51,11 @@ ul.items {
animation-duration: 0.5s; 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; background: $gray1;
min-height: 40px; min-height: 40px;
border-bottom: 1px solid $gray3; 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; } .pt-20 { padding-top: 20px; }
.pb-20 { padding-bottom: 20px; } .pb-20 { padding-bottom: 20px; }
.mb-20 { margin-bottom: 20px; } .mb-20 { margin-bottom: 20px; }
.mb-50 { margin-bottom: 50px; } .mb-50 { margin-bottom: 50px; }
.w-100 { width: 100%; }
.max-width { .max-width {
width: 75%; width: 75%;

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

@ -4,13 +4,24 @@ import { useProjects } from "/hooks/useProjects";
export function Projects() { export function Projects() {
const projects = useProjects(); const projects = useProjects();
return ( return (
<> <div className="table">
<span>Projects</span> <div className="table div">
<ul className="projects"> <span>Projects</span>
{projects.map((project, i) => { </div>
return <li key={i}>{project.name}</li>; <div className="table content">
})} <ul className="items projects">
</ul> {projects.map((project, i) => {
</> 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> </head>
<body> <body>
<header class="mb-50"> <header class="mb-50">
<div class="align-center max-width"> <div class="align-center max-width wrapper">
<a href="/"> <a href="/">
<img width=48 height=48 src="/favicon.svg"/> <img width=48 height=48 src="/favicon.svg"/>
</a> </a>
<ul class="nav">
<li>
<a href="/projects">Projects</a>
<li>
<a href="/tasks">Tasks</a>
</li>
</ul>
</div> </div>
</header> </header>
<%= yield %> <%= yield %>