github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: list view styling reduced (#867)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-18 01:15:10 +05:30 committed by GitHub
parent 396fbc4ebb
commit 5f20e65ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 153 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/components/core/board-view/board-header.tsx
View File

@ -96,17 +96,17 @@ export const BoardHeader: React.FC<Props> = ({
switch (selectedGroup) {
case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
icon = getPriorityIcon(groupTitle, "text-lg");
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
);
@ -143,7 +143,9 @@ export const BoardHeader: React.FC<Props> = ({
{getGroupTitle()}
</h2>
<span
className={`${isCollapsed ? "ml-0.5" : ""} rounded-full bg-gray-100 py-1 px-3 text-sm`}
className={`${
isCollapsed ? "ml-0.5" : ""
} rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
>
{groupedByIssues?.[groupTitle].length ?? 0}
</span>

2
apps/app/components/core/list-view/all-lists.tsx
View File

@ -36,7 +36,7 @@ export const AllLists: React.FC<Props> = ({
return (
<>
{groupedByIssues && (
<div className="flex flex-col space-y-5 bg-white">
<div>
{Object.keys(groupedByIssues).map((singleGroup) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;

6
apps/app/components/core/list-view/single-issue.tsx
View File

@ -216,9 +216,8 @@ export const SingleListIssue: React.FC<Props> = ({
</ContextMenu.Item>
</a>
</ContextMenu>
<div className="border-b mx-6 border-gray-300 last:border-b-0">
<div
className="flex items-center justify-between gap-2 py-3"
className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
onContextMenu={(e) => {
e.preventDefault();
setContextMenu(true);
@ -238,7 +237,7 @@ export const SingleListIssue: React.FC<Props> = ({
</Tooltip>
)}
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
<span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
</Tooltip>
</a>
</Link>
@ -360,7 +359,6 @@ export const SingleListIssue: React.FC<Props> = ({
)}
</div>
</div>
</div>
</>
);
};

16
apps/app/components/core/list-view/single-list.tsx
View File

@ -104,17 +104,17 @@ export const SingleList: React.FC<Props> = ({
switch (selectedGroup) {
case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
break;
case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
icon = getPriorityIcon(groupTitle, "text-lg");
break;
case "labels":
const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = (
<span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }}
/>
);
@ -134,24 +134,24 @@ export const SingleList: React.FC<Props> = ({
{({ open }) => (
<div className="bg-white">
<div
className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
open ? "" : "rounded-[10px]"
}`}
>
<Disclosure.Button>
<div className="flex items-center gap-x-3">
{selectedGroup !== null && (
<span className="flex items-center">{getGroupIcon()}</span>
<div className="flex items-center">{getGroupIcon()}</div>
)}
{selectedGroup !== null ? (
<h2 className="text-base font-semibold capitalize leading-6 text-gray-800">
<h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
{getGroupTitle()}
</h2>
) : (
<h2 className="font-medium leading-5">All Issues</h2>
)}
<span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
{groupedByIssues[groupTitle as keyof IIssue].length}
<span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
{groupedByIssues?.[groupTitle].length ?? 0}
</span>
</div>
</Disclosure.Button>

2
apps/app/components/issues/view-select/assignee.tsx
View File

@ -106,7 +106,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
} items-center gap-2 text-gray-500`}
>
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
<div className="flex items-center justify-center gap-2">
<div className="flex items-center justify-center gap-2 -my-0.5">
<AssigneesList userIds={issue.assignees} length={3} showLength={false} />
<span className="text-gray-500">{issue.assignees.length} Assignees</span>
</div>

4
apps/app/components/ui/datepicker.tsx
View File

@ -34,7 +34,7 @@ export const CustomDatePicker: React.FC<Props> = ({
if (!val) onChange(null);
else onChange(renderDateFormat(val));
}}
className={`${className} ${
className={`${
renderAs === "input"
? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
: renderAs === "button"
@ -44,7 +44,7 @@ export const CustomDatePicker: React.FC<Props> = ({
: ""
} ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
} w-full rounded-md border bg-transparent caret-transparent`}
} w-full rounded-md border bg-transparent caret-transparent ${className}`}
dateFormat="dd-MM-yyyy"
isClearable={isClearable}
disabled={disabled}