diff --git a/README.md b/README.md index 25a0891..e537cdb 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,15 @@ ## About -Twenty helps you manage projects with a solution that runs on your computer -rather than in the cloud. +Twenty helps you manage projects with a web application that +runs on your computer rather than in the cloud. ## Features -* Provides a web application that helps you manage projects. -* Provides a command-line utility to start / stop a web server, connect / disconnect a project. +* Provides a command-line utility to start / stop a web server. +* Connect / disconnect a project from the command line. * Works offline. Binds to `http//:localhost:2020` by default. -* Lightweight: Ruby, and SQLite3 are the primary runtime dependencies. -* Database: `~/.local/share/twenty/twenty.sqlite`. -* Easy to install: `gem install twenty`. -* Easy to use: `$ twenty up`. +* Ruby, and SQLite3 are the primary runtime dependencies. +* Easy to install, easy to use. ## Usage diff --git a/twenty-frontend/src/css/_groups.scss b/twenty-frontend/src/css/_groups.scss deleted file mode 100644 index 6398ff2..0000000 --- a/twenty-frontend/src/css/_groups.scss +++ /dev/null @@ -1,98 +0,0 @@ -body .wrapper .group { - @import "colors"; - width: 100%; - margin-bottom: 10px; - - .group-name { - margin: 10px 0 10px 0; - padding: 10px; - background: $secondary-color; - color: $primary-color; - border-radius: 5px; - - ul.tabs { - list-style-type: none; - display: flex; - grid-gap: 15px; - font-size: medium; - - li.tab { - height: 24px; - width: 100px; - a { - display: block; - background: $primary-color; - color: $accent-color; - border-radius: 5px; - height: 100%; - &:focus { - text-decoration: none; - } - } - } - li.tab.active { - a { - text-decoration: underline; - } - } - } - } - - .group-items { - min-height: 75px; - - p.empty-group { - padding-top: 2.5%; - } - - ul.items { - li.item { - display: flex; - padding: 7.5px; - border: 1px solid $primary-color; - - select { - height: 35px; - padding: 10px; - background: $primary-color; - } - - &:hover { - background: $secondary-color; - color: $primary-color; - border-radius: 10px; - border: 1px solid $secondary-color; - - a { - color: $primary-color; - text-decoration: none; - span { - color: $primary-color; - text-decoration: none; - } - } - } - - a { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px 10px 5px 0px; - text-decoration: none; - } - } - } - } -} - -.markdown { - ul , - ul li, - ul li.task-list-item input[type='checkbox'] - { - padding: 0 !important; - margin: 0 !important; - } - h1, h2, h3, h4, p { - } -} diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss index 423effb..84fef5b 100644 --- a/twenty-frontend/src/css/main.scss +++ b/twenty-frontend/src/css/main.scss @@ -1,14 +1,13 @@ @import "fonts"; @import "colors"; @import "global"; -@import "groups"; @import "layout"; *, *:before, *:after { box-sizing: border-box; } -html, html body, .wrapper { +html, html body { height: 100%; font-size: medium; } @@ -18,13 +17,21 @@ body { font-weight: normal; } -.wrapper { - color: $secondary-color; - - .react-mount { - padding-top: 25px; - } - h1, h2, h3, h4, h5 { - font-size: medium; +ul { + list-style-type: none; + padding: 0; + margin: 0; +} +.secondary-hover { + &:hover { + @extend .no-underline; + @extend .p-3; + @extend .rounded; + @extend .bg-secondary; + @extend .text-primary; + a, span { + @extend .text-primary; + @extend .no-underline; + } } } diff --git a/twenty-frontend/src/js/components/Group.tsx b/twenty-frontend/src/js/components/Group.tsx index 7dd090e..e093fa5 100644 --- a/twenty-frontend/src/js/components/Group.tsx +++ b/twenty-frontend/src/js/components/Group.tsx @@ -19,23 +19,23 @@ export function Group({ groupName, getItems }: Props) { } return ( -
-

{groupName}

-
+
+

{groupName}

+
{items?.length ? ( -
diff --git a/twenty-frontend/src/js/components/NavBar.tsx b/twenty-frontend/src/js/components/NavBar.tsx index bb35e6c..a451d2d 100644 --- a/twenty-frontend/src/js/components/NavBar.tsx +++ b/twenty-frontend/src/js/components/NavBar.tsx @@ -1,23 +1,65 @@ -import React from "react"; +import React, { useState } from "react"; +import { Maybe } from "/types/schema"; +import classnames from "classnames"; -const BASE_CLASSNAMES = [ "block", "w-3/4", "no-underline", "p-3"]; -const ACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "rounded", "bg-secondary", "text-primary" ].join(" "); -const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent"].join(" "); +const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"]; +const ACTIVE_CLASSNAMES = [ + ...BASE_CLASSNAMES, + "rounded", + "bg-secondary", + "text-primary", +].join(" "); +const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent", "secondary-hover"].join(" "); + +type Item = { text: string; href: string }; +type Bar = Record>; + +const find = (path: string, bar: Bar): Maybe => { + let item: Maybe = null; + Object.values(bar) + .flat() + .forEach(i => { + if (i.href === path) { + item = i; + } + }); + return item; +}; export function NavBar() { - return ( - - ); + const bar: Bar = { + Tasks: [ + { text: "All tasks", href: "/tasks/" }, + { text: "New task", href: "/tasks/new/" }, + ], + Projects: [{ text: "All projects", href: "/projects" }], + }; + const activeItem = find(location.pathname, bar); + + return ( + <> + {...Object.keys(bar).map(key => { + const items = bar[key]; + return ( + <> +

{key}

+ + + ); + })} + + ); } diff --git a/twenty-frontend/src/js/components/Task.tsx b/twenty-frontend/src/js/components/Task.tsx index e043b89..ffe6aca 100644 --- a/twenty-frontend/src/js/components/Task.tsx +++ b/twenty-frontend/src/js/components/Task.tsx @@ -118,10 +118,9 @@ export function Task({ taskId }: { taskId?: number }) {
{isEditable ? ( <> -
+