small improvement
This commit is contained in:
daniel31x13
parent
a6a0f6965b
commit
ac8add8c5d
|
|
@ -39,103 +39,105 @@ const IconPopover = ({
|
||||||
onClose={() => onClose()}
|
onClose={() => onClose()}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
className,
|
className,
|
||||||
"fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md"
|
"fade-in bg-base-200 border border-neutral-content p-3 w-[22.5rem] rounded-lg shadow-md"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex gap-2 h-full w-full">
|
<div className="flex flex-col gap-3 w-full h-full">
|
||||||
<div className="flex flex-col gap-2 w-full">
|
<TextInput
|
||||||
<TextInput
|
className="p-2 rounded w-full h-7 text-sm"
|
||||||
className="p-2 rounded w-full h-7 text-sm"
|
placeholder={t("search")}
|
||||||
placeholder={t("search")}
|
value={query}
|
||||||
value={query}
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
/>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
|
||||||
|
<IconGrid
|
||||||
|
query={query}
|
||||||
|
color={color}
|
||||||
|
weight={weight}
|
||||||
|
iconName={iconName}
|
||||||
|
setIconName={setIconName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 color-picker w-full justify-between">
|
||||||
|
<HexColorPicker
|
||||||
|
color={color}
|
||||||
|
onChange={(e) => setColor(e)}
|
||||||
|
className="border border-neutral-content rounded-lg"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||||
<IconGrid
|
<label className="flex items-center cursor-pointer">
|
||||||
query={query}
|
<input
|
||||||
color={color}
|
type="radio"
|
||||||
weight={weight}
|
className="radio radio-primary mr-2"
|
||||||
iconName={iconName}
|
value="regular"
|
||||||
setIconName={setIconName}
|
checked={weight === "regular"}
|
||||||
/>
|
onChange={() => setWeight("regular")}
|
||||||
|
/>
|
||||||
|
{t("regular")}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="radio radio-primary mr-2"
|
||||||
|
value="thin"
|
||||||
|
checked={weight === "thin"}
|
||||||
|
onChange={() => setWeight("thin")}
|
||||||
|
/>
|
||||||
|
{t("thin")}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="radio radio-primary mr-2"
|
||||||
|
value="light"
|
||||||
|
checked={weight === "light"}
|
||||||
|
onChange={() => setWeight("light")}
|
||||||
|
/>
|
||||||
|
{t("light_icon")}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="radio radio-primary mr-2"
|
||||||
|
value="bold"
|
||||||
|
checked={weight === "bold"}
|
||||||
|
onChange={() => setWeight("bold")}
|
||||||
|
/>
|
||||||
|
{t("bold")}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="radio radio-primary mr-2"
|
||||||
|
value="fill"
|
||||||
|
checked={weight === "fill"}
|
||||||
|
onChange={() => setWeight("fill")}
|
||||||
|
/>
|
||||||
|
{t("fill")}
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="radio radio-primary mr-2"
|
||||||
|
value="duotone"
|
||||||
|
checked={weight === "duotone"}
|
||||||
|
onChange={() => setWeight("duotone")}
|
||||||
|
/>
|
||||||
|
{t("duotone")}
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="flex gap-2 color-picker w-full">
|
<div className="flex flex-row gap-2 justify-between items-center mt-2">
|
||||||
<HexColorPicker color={color} onChange={(e) => setColor(e)} />
|
<div
|
||||||
|
className="btn btn-ghost btn-xs w-fit"
|
||||||
<div className="grid grid-cols-2 gap-1 text-sm">
|
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
||||||
<label className="flex items-center cursor-pointer">
|
>
|
||||||
<input
|
{t("reset_defaults")}
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="regular"
|
|
||||||
checked={weight === "regular"}
|
|
||||||
onChange={() => setWeight("regular")}
|
|
||||||
/>
|
|
||||||
{t("regular")}
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="thin"
|
|
||||||
checked={weight === "thin"}
|
|
||||||
onChange={() => setWeight("thin")}
|
|
||||||
/>
|
|
||||||
{t("thin")}
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="light"
|
|
||||||
checked={weight === "light"}
|
|
||||||
onChange={() => setWeight("light")}
|
|
||||||
/>
|
|
||||||
{t("light_icon")}
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="bold"
|
|
||||||
checked={weight === "bold"}
|
|
||||||
onChange={() => setWeight("bold")}
|
|
||||||
/>
|
|
||||||
{t("bold")}
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="fill"
|
|
||||||
checked={weight === "fill"}
|
|
||||||
onChange={() => setWeight("fill")}
|
|
||||||
/>
|
|
||||||
{t("fill")}
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="radio radio-primary mr-2"
|
|
||||||
value="duotone"
|
|
||||||
checked={weight === "duotone"}
|
|
||||||
onChange={() => setWeight("duotone")}
|
|
||||||
/>
|
|
||||||
{t("duotone")}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col-reverse gap-2 justify-between items-center mt-2">
|
|
||||||
<p className="text-neutral text-sm">{t("close_to_apply")}</p>
|
|
||||||
<div
|
|
||||||
className="btn btn-ghost btn-sm w-fit"
|
|
||||||
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
|
||||||
>
|
|
||||||
{t("reset_defaults")}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
|
||||||
|
|
@ -417,5 +417,5 @@
|
||||||
"remove_user": "Remove User",
|
"remove_user": "Remove User",
|
||||||
"continue_to_dashboard": "Continue to Dashboard",
|
"continue_to_dashboard": "Continue to Dashboard",
|
||||||
"confirm_user_removal_desc": "They will need to have a subscription to access Linkwarden again.",
|
"confirm_user_removal_desc": "They will need to have a subscription to access Linkwarden again.",
|
||||||
"close_to_apply": "Close to apply"
|
"click_out_to_apply": "Click outside to apply"
|
||||||
}
|
}
|
||||||
Ŝarĝante…
Reference in New Issue