small improvement
This commit is contained in:
daniel31x13
parent
a6a0f6965b
commit
ac8add8c5d
|
|
@ -39,103 +39,105 @@ const IconPopover = ({
|
|||
onClose={() => onClose()}
|
||||
className={clsx(
|
||||
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-2 w-full">
|
||||
<TextInput
|
||||
className="p-2 rounded w-full h-7 text-sm"
|
||||
placeholder={t("search")}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
<div className="flex flex-col gap-3 w-full h-full">
|
||||
<TextInput
|
||||
className="p-2 rounded w-full h-7 text-sm"
|
||||
placeholder={t("search")}
|
||||
value={query}
|
||||
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">
|
||||
<IconGrid
|
||||
query={query}
|
||||
color={color}
|
||||
weight={weight}
|
||||
iconName={iconName}
|
||||
setIconName={setIconName}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
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 className="flex gap-2 color-picker w-full">
|
||||
<HexColorPicker color={color} onChange={(e) => setColor(e)} />
|
||||
|
||||
<div className="grid grid-cols-2 gap-1 text-sm">
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
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 className="flex flex-row gap-2 justify-between items-center mt-2">
|
||||
<div
|
||||
className="btn btn-ghost btn-xs w-fit"
|
||||
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
||||
>
|
||||
{t("reset_defaults")}
|
||||
</div>
|
||||
<p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -417,5 +417,5 @@
|
|||
"remove_user": "Remove User",
|
||||
"continue_to_dashboard": "Continue to Dashboard",
|
||||
"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