binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: image picker, spreadsheet view title, icons (#2988)

Browse source 
* style: image picker, spreadsheet view title, icons

* fix: build error fix
This commit is contained in:
sabith-tu 2023-12-05 16:05:50 +05:30 • committed by sriram veeraghanta
parent 1b51892489
commit de9c1a60e0
7 changed files with 38 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/components/core/image-picker-popover.tsx
View file

@ -324,7 +324,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
File formats supported- .jpeg, .jpg, .png, .webp, .svg
</p>
<div className="flex items-center justify-end gap-2">
<div className="flex items-start h-12 justify-end gap-2">
<Button
variant="neutral-primary"
onClick={() => {

8
web/components/issues/issue-layouts/properties/assignee.tsx
View file

@ -111,12 +111,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
})}
</AvatarGroup>
) : (
<span
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
noLabelBorder ? "" : " px-2.5 py-1 border-[0.5px] border-custom-border-300"
}`}
>
<User2 className="h-3 w-3" />
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
)}
</div>

7
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View file

@ -85,14 +85,17 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
customButton={
<div className="flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-2">
<div className="flex items-center gap-1.5">
{<propertyDetails.icon className="h-4 w-4 text-custom-text-400" />}
{propertyDetails.title}
</div>
<div className="flex ml-3">
{activeSortingProperty === property && (
<div className="rounded-full flex items-center justify-center h-3.5 w-3.5">
<ListFilter className="h-3 w-3" />
</div>
)}
{propertyDetails.title}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
</div>
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
</div>
}
width="xl"

11
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View file

@ -8,7 +8,7 @@ import {
SpreadsheetIssuesColumn,
SpreadsheetQuickAddIssueForm,
} from "components/issues";
import { Spinner } from "@plane/ui";
import { Spinner, LayersIcon } from "@plane/ui";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
import { EIssueActions } from "../types";
@ -95,9 +95,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
>
<div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
{displayProperties.key && (
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
<span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
<span className="mr-1.5 text-custom-text-400">#</span>ID
</span>
)}
<span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
<span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">
<LayersIcon className="h-4 w-4 text-custom-text-400 mr-1.5" />
Issue
</span>
</div>
{issues.map((issue, index) =>

6
web/components/issues/issue-peek-overview/properties.tsx
View file

@ -5,8 +5,8 @@ import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui icons
import { DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
import { CalendarDays, ContrastIcon, Link2, Plus, Signal, Tag, Triangle, User2 } from "lucide-react";
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
import { CalendarDays, Link2, Plus, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
import {
SidebarAssigneeSelect,
SidebarCycleSelect,
@ -289,7 +289,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* parent */}
<div className="flex items-center gap-2 w-full">
<div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
<User2 className="h-4 w-4 flex-shrink-0" />
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
<p>Parent</p>
</div>
<div>

4
web/components/issues/sidebar.tsx
View file

@ -32,7 +32,7 @@ import {
// ui
import { CustomDatePicker } from "components/ui";
// icons
import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, User2 } from "lucide-react";
import { Bell, CalendarDays, LinkIcon, Plus, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react";
import { Button, ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
@ -421,7 +421,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
<User2 className="h-4 w-4 flex-shrink-0" />
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
<p>Parent</p>
</div>
<div className="sm:basis-1/2">