fix(intake): polish development toolbar controls
This commit is contained in:
parent
4629eea670
commit
70594a287d
@ -98,11 +98,15 @@ function createRestoredNonIntegratedProduct(
|
||||
|
||||
const PENDING_PAGE_SIZE = 50;
|
||||
const TABLE_ACTION_BUTTON_BASE =
|
||||
"!h-8 !min-h-8 !w-8 !rounded-md !px-0 !py-0 !shadow-none";
|
||||
"!h-8 !min-h-8 !w-8 !rounded-apple-md !px-0 !py-0 !shadow-none";
|
||||
const TABLE_ACTION_BUTTON_SECONDARY = `${TABLE_ACTION_BUTTON_BASE} !border-zinc-200 !bg-white !text-zinc-500 hover:!border-zinc-300 hover:!bg-zinc-50 hover:!text-zinc-950 focus:!border-zinc-400 disabled:!border-zinc-100 disabled:!bg-zinc-50 disabled:!text-zinc-300`;
|
||||
const TABLE_ACTION_BUTTON_PRIMARY = `${TABLE_ACTION_BUTTON_BASE} !border-zinc-950 !bg-zinc-950 !text-white hover:!border-zinc-800 hover:!bg-zinc-800 focus:!border-zinc-600 disabled:!border-zinc-200 disabled:!bg-zinc-200 disabled:!text-zinc-400`;
|
||||
const INTAKE_PRIMARY_BUTTON_CLASS =
|
||||
"!border-zinc-950 !bg-zinc-950 !bg-none !text-white !shadow-none hover:!border-zinc-800 hover:!bg-zinc-800 focus:!border-zinc-600 disabled:!border-zinc-200 disabled:!bg-zinc-200 disabled:!text-zinc-400";
|
||||
const INTAKE_TOOLBAR_BUTTON_CLASS =
|
||||
"!h-8 !min-h-8 !rounded-apple-md !px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:!px-2 max-md:text-[11px]";
|
||||
const INTAKE_TOOLBAR_DARK_SELECT_CLASS =
|
||||
"h-8 w-full rounded-apple-md border border-zinc-950 bg-zinc-950 px-3 text-xs font-apple-medium text-white shadow-none outline-none transition-colors max-md:h-7 max-md:px-2 max-md:text-[11px]";
|
||||
const TABLE_HEADER_CELL_CLASS =
|
||||
"sticky top-0 z-10 bg-apple-bg-primary px-3 py-2.5 font-apple-medium whitespace-nowrap";
|
||||
const TABLE_HEADER_CENTER_CELL_CLASS =
|
||||
@ -891,13 +895,22 @@ export function NonIntegratedPendingDetail({
|
||||
const filterFields = isStockDevelopmentList
|
||||
? stockFilterFields
|
||||
: seriesProductFilterFields;
|
||||
const createActionCount = [
|
||||
onOpenNewNonIntegratedProductWorkspace,
|
||||
onOpenSecondaryNewNonIntegratedProductWorkspace,
|
||||
].filter(Boolean).length;
|
||||
const hasMultipleCreateActions = createActionCount > 1;
|
||||
const filterGridColumnClass =
|
||||
filterFields.length === 8
|
||||
? hasCreateAction
|
||||
? "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_216px]"
|
||||
? hasMultipleCreateActions
|
||||
? "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_216px]"
|
||||
: "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px_132px]"
|
||||
: "md:grid-cols-[116px_repeat(8,minmax(0,1fr))_72px]"
|
||||
: hasCreateAction
|
||||
? "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_216px]"
|
||||
? hasMultipleCreateActions
|
||||
? "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_216px]"
|
||||
: "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px_132px]"
|
||||
: "md:grid-cols-[116px_repeat(7,minmax(0,1fr))_72px]";
|
||||
const quickScopes: Array<{ key: NonIntegratedQuickScope; label: string }> = [
|
||||
{ key: "all", label: "全部" },
|
||||
@ -927,7 +940,7 @@ export function NonIntegratedPendingDetail({
|
||||
);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="h-8 w-full rounded-apple-md border border-zinc-950 bg-zinc-950 px-2.5 text-xs font-apple-medium text-white outline-none max-md:h-7 max-md:px-2 max-md:text-[11px]"
|
||||
className={INTAKE_TOOLBAR_DARK_SELECT_CLASS}
|
||||
>
|
||||
{quickScopes.map((scope) => (
|
||||
<option key={scope.key} value={scope.key}>
|
||||
@ -979,7 +992,7 @@ export function NonIntegratedPendingDetail({
|
||||
<div className="flex min-w-[68px] items-end md:min-w-0">
|
||||
<Button
|
||||
size="small"
|
||||
className={`h-8 w-full text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} w-full ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
onClick={() => {
|
||||
setAppliedQuery(queryDraft);
|
||||
setCurrentPage(1);
|
||||
@ -989,11 +1002,17 @@ export function NonIntegratedPendingDetail({
|
||||
</Button>
|
||||
</div>
|
||||
{hasCreateAction ? (
|
||||
<div className="flex min-w-[172px] items-end justify-end gap-2 max-md:min-w-[126px] md:min-w-0">
|
||||
<div
|
||||
className={`flex items-end justify-end gap-2 md:min-w-0 ${
|
||||
hasMultipleCreateActions
|
||||
? "min-w-[172px] max-md:min-w-[126px]"
|
||||
: "min-w-[118px] max-md:min-w-[104px]"
|
||||
}`}
|
||||
>
|
||||
{onOpenNewNonIntegratedProductWorkspace ? (
|
||||
<Button
|
||||
size="small"
|
||||
className={`h-8 min-w-0 flex-1 px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} min-w-0 flex-1 ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
onClick={onOpenNewNonIntegratedProductWorkspace}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" aria-hidden="true" />
|
||||
@ -1004,7 +1023,7 @@ export function NonIntegratedPendingDetail({
|
||||
secondaryCreateButtonLabel ? (
|
||||
<Button
|
||||
size="small"
|
||||
className={`h-8 min-w-0 flex-1 px-3 text-xs max-md:!h-7 max-md:!min-h-7 max-md:px-2 max-md:text-[11px] ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
className={`${INTAKE_TOOLBAR_BUTTON_CLASS} min-w-0 flex-1 ${INTAKE_PRIMARY_BUTTON_CLASS}`}
|
||||
onClick={onOpenSecondaryNewNonIntegratedProductWorkspace}
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" aria-hidden="true" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user