fix(catalog): make access controls visible and compact
This commit is contained in:
Simo committed
1 parent
93a7e9a7c2
commit
35d0f3ee01
5 files changed
+139
-15
No files matched your search
@@ -0,0 +1,73 @@
|
||||
.options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.option {
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 10px;
|
||||
background: var(--admin-surface);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
.optionHeader,
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.optionHeader {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.control {
|
||||
flex-shrink: 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
.state {
|
||||
font-size: 12px;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
.description {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
.toggle[data-slot="switch"] {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--admin-text-muted);
|
||||
background: var(--admin-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle[data-checked] {
|
||||
background: var(--admin-accent);
|
||||
border-color: var(--admin-accent);
|
||||
}
|
||||
.toggle [data-slot="switch-thumb"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 2px;
|
||||
background: var(--admin-text);
|
||||
color: var(--admin-canvas);
|
||||
}
|
||||
.toggle[data-checked] [data-slot="switch-thumb"] {
|
||||
left: 22px;
|
||||
}
|
||||
.toggle:focus-visible {
|
||||
outline: 2px solid var(--admin-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.option[data-disabled] .toggle,
|
||||
.option[data-disabled] .label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.option[data-disabled] .control {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -49,6 +49,7 @@ import {
|
||||
LAYOUT_DESCRIPTIONS,
|
||||
} from "@/lib/catalog-layouts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import styles from "./catalog-access.module.css";
|
||||
import { ImagePreview } from "./image-preview";
|
||||
import { catalogTreeQs, useCatalogManager } from "./use-catalog-store";
|
||||
|
||||
@@ -572,26 +573,29 @@ function InlineEditorSession({
|
||||
</div>
|
||||
|
||||
{/* Toggles */}
|
||||
<div className="rounded-md border p-3 space-y-3">
|
||||
<div className={styles.options}>
|
||||
<ToggleRow
|
||||
id="ie-enabled"
|
||||
label="Enabled"
|
||||
description="Active in the catalog"
|
||||
disabled={!canEdit || saving}
|
||||
label={t("access.enabled")}
|
||||
description={t("access.enabledHint")}
|
||||
checked={form.enabled === "1"}
|
||||
onChange={(v) => update("enabled", v ? "1" : "0")}
|
||||
/>
|
||||
<ToggleRow
|
||||
id="ie-visible"
|
||||
label="Visible"
|
||||
description="Shown in navigation"
|
||||
disabled={!canEdit || saving}
|
||||
label={t("access.visible")}
|
||||
description={t("access.visibleHint")}
|
||||
checked={form.visible === "1"}
|
||||
onChange={(v) => update("visible", v ? "1" : "0")}
|
||||
/>
|
||||
{catalogType === "normal" && (
|
||||
<ToggleRow
|
||||
id="ie-club"
|
||||
label="Club Only"
|
||||
description="Requires HC subscription"
|
||||
disabled={!canEdit || saving}
|
||||
label={t("access.club")}
|
||||
description={t("access.clubHint")}
|
||||
checked={form.clubOnly === "1"}
|
||||
onChange={(v) => update("clubOnly", v ? "1" : "0")}
|
||||
/>
|
||||
@@ -832,24 +836,41 @@ function ToggleRow({
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
disabled,
|
||||
checked,
|
||||
onChange,
|
||||
}: {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
disabled: boolean;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}) {
|
||||
const t = useTranslations("pages.admin.catalog.workspace.access");
|
||||
return (
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Label htmlFor={id} className="text-xs font-medium cursor-pointer">
|
||||
<div className={styles.option} data-disabled={disabled || undefined}>
|
||||
<div className={styles.optionHeader}>
|
||||
<Label htmlFor={id} className={styles.label}>
|
||||
{label}
|
||||
</Label>
|
||||
<p className="text-[10px] text-muted-foreground">{description}</p>
|
||||
<div className={styles.control}>
|
||||
<span className={styles.state} aria-hidden="true">
|
||||
{t(checked ? "yes" : "no")}
|
||||
</span>
|
||||
<Switch
|
||||
id={id}
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
disabled={disabled}
|
||||
aria-describedby={`${id}-description`}
|
||||
className={styles.toggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Switch id={id} checked={checked} onCheckedChange={onChange} size="sm" />
|
||||
<p id={`${id}-description`} className={styles.description}>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user