forked from github/plane
[WEB-1274] chore: issue spreadsheet enhancement (#4423)
* chore: border and background remove from cycle and module select * choe: indentation improvement
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
0037377c8f
commit
da78933c61
@ -73,7 +73,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
{showCount ? (
|
||||
<div className="relative flex max-w-full items-center gap-1">
|
||||
<div className="relative flex items-center max-w-full gap-1">
|
||||
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{(value.length > 0 || !!placeholder) && (
|
||||
<div className="max-w-40 flex-grow truncate">
|
||||
|
||||
@ -57,7 +57,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
|
||||
placeholder="Select cycle"
|
||||
buttonVariant="transparent-with-text"
|
||||
buttonContainerClassName="w-full relative flex items-center p-2"
|
||||
buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
|
||||
buttonClassName="relative leading-4 h-4.5 bg-transparent"
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -68,7 +68,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
|
||||
placeholder="Select modules"
|
||||
buttonVariant="transparent-with-text"
|
||||
buttonContainerClassName="w-full relative flex items-center p-2"
|
||||
buttonClassName="relative border-[0.5px] border-custom-border-400 h-4.5"
|
||||
buttonClassName="relative leading-4 h-4.5 bg-transparent"
|
||||
onClose={onClose}
|
||||
multiple
|
||||
showCount
|
||||
|
||||
@ -2,3 +2,4 @@ export * from "./columns";
|
||||
export * from "./roots";
|
||||
export * from "./spreadsheet-view";
|
||||
export * from "./quick-add-issue-form";
|
||||
export * from "./spreadsheet-header-column";
|
||||
|
||||
@ -50,7 +50,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
|
||||
containerRef,
|
||||
issueIds,
|
||||
spreadsheetColumnsList,
|
||||
spacingLeft = 14,
|
||||
spacingLeft = 6,
|
||||
} = props;
|
||||
|
||||
const [isExpanded, setExpanded] = useState<boolean>(false);
|
||||
@ -96,7 +96,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
|
||||
quickActions={quickActions}
|
||||
canEditProperties={canEditProperties}
|
||||
nestingLevel={nestingLevel + 1}
|
||||
spacingLeft={spacingLeft + (displayProperties.key ? 16 : 28)}
|
||||
spacingLeft={spacingLeft + (displayProperties.key ? 12 : 28)}
|
||||
isEstimateEnabled={isEstimateEnabled}
|
||||
updateIssue={updateIssue}
|
||||
portalElement={portalElement}
|
||||
@ -140,7 +140,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
|
||||
isExpanded,
|
||||
setExpanded,
|
||||
spreadsheetColumnsList,
|
||||
spacingLeft = 14,
|
||||
spacingLeft = 6,
|
||||
} = props;
|
||||
// states
|
||||
const [isMenuActive, setIsMenuActive] = useState(false);
|
||||
@ -218,18 +218,22 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
|
||||
disabled={!!issueDetail?.tempId}
|
||||
>
|
||||
<div
|
||||
className="flex min-w-min items-center gap-1 px-4 py-2.5 pr-0"
|
||||
className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
|
||||
style={issueDetail.parent_id && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="flex h-5 w-5 items-center justify-center">
|
||||
{issueDetail.sub_issues_count > 0 && (
|
||||
<button
|
||||
className="flex items-center justify-center h-5 w-5 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
|
||||
onClick={handleToggleExpand}
|
||||
>
|
||||
<ChevronRight className={`h-4 w-4 ${isExpanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
{/* bulk ops */}
|
||||
<span className="size-3.5" />
|
||||
<div className="flex size-4 items-center justify-center">
|
||||
{issueDetail.sub_issues_count > 0 && (
|
||||
<button
|
||||
className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
|
||||
onClick={handleToggleExpand}
|
||||
>
|
||||
<ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
// ui
|
||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
|
||||
// types
|
||||
import { LayersIcon } from "@plane/ui";
|
||||
// constants
|
||||
// components
|
||||
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
|
||||
import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
|
||||
import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
|
||||
|
||||
interface Props {
|
||||
displayProperties: IIssueDisplayProperties;
|
||||
@ -25,13 +24,8 @@ export const SpreadsheetHeader = (props: Props) => {
|
||||
className="sticky left-0 z-[15] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-custom-border-100"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
|
||||
<span className="flex h-full w-24 flex-shrink-0 items-center px-4 py-2.5">
|
||||
<span className="mr-1.5 text-custom-text-400">#</span>ID
|
||||
</span>
|
||||
</WithDisplayPropertiesHOC>
|
||||
<span className="flex h-full w-full flex-grow items-center justify-center px-4 py-2.5">
|
||||
<LayersIcon className="mr-1.5 h-4 w-4 text-custom-text-400" />
|
||||
<span className="flex h-full w-full flex-grow items-center pl-5 px-4 py-2.5">
|
||||
<LayersIcon className="mr-1 h-4 w-4 text-custom-text-400" />
|
||||
Issue
|
||||
</span>
|
||||
</th>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user