Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting and style tab #73

Merged
merged 1 commit into from
Nov 18, 2024
Merged

Setting and style tab #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/core/components/AskAi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const AIUserPrompt = ({ blockId }: { blockId: string | undefined }) => {
<div className="">
<div
onClick={() => setOpen(!open)}
className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
className="flex cursor-pointer items-center justify-between border-t border-border py-2 text-sm font-medium hover:underline">
<span>{t("Ask AI")}</span>
<span>
<ChevronDown className={"h-4 w-4 text-gray-500 " + (open ? "rotate-180" : "")} />
Expand Down Expand Up @@ -194,9 +194,9 @@ export const AISetContext = () => {
collapsible>
<AccordionItem value="set-context" className="border-none">
{/* @ts-ignore */}
<AccordionTrigger ref={btnRef} className="border-b border-border py-2">
<AccordionTrigger ref={btnRef} className="border-0 border-border py-2">
<div className="flex w-full items-center justify-between">
<span className="font-bold text-muted-foreground">{t("AI Context")}</span>
<span className="font-medium">{t("AI Context")}</span>
</div>
</AccordionTrigger>
<AccordionContent>
Expand Down Expand Up @@ -287,7 +287,7 @@ export const AISetContext = () => {
export const AskAI = () => {
const [ids] = useSelectedBlockIds();
return (
<div className="mt-2">
<div className="no-scrollbar mt-2 flex-1 overflow-y-auto">
<AISetContext />
<AIUserPrompt blockId={first(ids)} />
</div>
Expand Down
43 changes: 17 additions & 26 deletions src/core/components/layout/RootLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@ const RootLayout: ComponentType = () => {
initial={{ width: 280 }}
animate={{ width: 280 }}
transition={{ duration: 0.3, ease: "easeInOut" }}>
<div className="no-scrollbar overflow h-full max-h-full overflow-x-hidden">
<div className="flex max-h-full flex-col p-3">
<h2 className="-mt-1 flex h-10 items-center space-x-1 text-base font-bold">
<div className="no-scrollbar overflow h-full max-h-full overflow-hidden">
<div className="flex h-full max-h-full flex-col overflow-hidden p-3">
<h2 className="-mt-1 flex items-center space-x-1 text-base font-bold">
<div className="flex grow items-center gap-2">
<div className="flex w-full items-center justify-between gap-2">
{panel === "ai" ? (
Expand All @@ -151,34 +151,25 @@ const RootLayout: ComponentType = () => {
<LightningBoltIcon className="rtl:ml-2" /> {t("AI Assistant")}
</div>
</>
) : (
) : panel === "theme" ? (
<div className="flex w-full items-center justify-between gap-2">
{panel === "theme" ? (
<>
<span className="flex items-center gap-2">
<Paintbrush className="h-4 w-4 rtl:ml-2" />
{t("Theme Settings")}
</span>
<Button
onClick={() => setRightPanel("block")}
variant="ghost"
size="icon"
className="text-xs text-gray-400">
<X className="h-4 w-4 rtl:ml-2" />
</Button>
</>
) : (
<div className="flex items-center gap-2">
<EditIcon size={16} className="rtl:ml-2" />
{t("Block Settings")}
</div>
)}
<span className="flex items-center gap-2">
<Paintbrush className="h-4 w-4 rtl:ml-2" />
{t("Theme Settings")}
</span>
<Button
onClick={() => setRightPanel("block")}
variant="ghost"
size="icon"
className="text-xs text-gray-400">
<X className="h-4 w-4 rtl:ml-2" />
</Button>
</div>
)}
) : null}
</div>
</div>
</h2>
<div className="flex-1">
<div className="flex max-h-full w-full">
<Suspense fallback={<div>Loading...</div>}>
{panel === "ai" ? <AskAI /> : panel === "theme" ? <ThemeConfigPanel /> : <SettingsPanel />}
</Suspense>
Expand Down
4 changes: 2 additions & 2 deletions src/core/components/settings/AskAiStyle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ export const AskAIStyles = ({ blockId }: { blockId: string | undefined }) => {
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder={t("Ask AI to edit styles")}
className="w-full border border-border focus:border-0"
rows={3}
className="no-scrollbar my-2 w-full border border-border p-2 text-xs"
rows={4}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
Expand Down
34 changes: 23 additions & 11 deletions src/core/components/settings/SettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ErrorBoundary } from "react-error-boundary";
import { BlockAttributesEditor } from "./new-panel/BlockAttributesEditor.tsx";
import { ChevronDown } from "lucide-react";
import { FallbackError } from "../FallbackError.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/index.ts";

function BlockAttributesToggle() {
const { t } = useTranslation();
Expand All @@ -21,7 +22,7 @@ function BlockAttributesToggle() {
<>
<div
onClick={() => setShowAttributes(!showAttributes)}
className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-medium hover:underline">
<span>{t("Attributes")}</span>
<span>
<ChevronDown className={"h-4 w-4 text-gray-500 " + (showAttributes ? "rotate-180" : "")} />
Expand Down Expand Up @@ -49,16 +50,27 @@ const SettingsPanel: React.FC = () => {

return (
<ErrorBoundary fallback={<FallbackError />} onError={onErrorFn}>
<div className={"relative flex max-h-full w-full flex-col"}>
<BlockSettings />
<br />
<BlockStyling />

<BlockAttributesToggle />
<br />
<br />
<br />
</div>
<Tabs defaultValue="settings" className="flex flex-1 flex-col">
<TabsList className="grid h-auto w-full grid-cols-2 p-1 py-1">
<TabsTrigger value="settings" className="text-xs">
Settings
</TabsTrigger>
<TabsTrigger value="styles" className="text-xs">
Styles
</TabsTrigger>
</TabsList>
<TabsContent value="settings" className="no-scrollbar h-full max-h-min overflow-y-auto">
<BlockSettings />
<br />
<br />
</TabsContent>
<TabsContent value="styles" className="no-scrollbar h-full max-h-min overflow-y-auto">
<BlockStyling />
<BlockAttributesToggle />
<br />
<br />
</TabsContent>
</Tabs>
</ErrorBoundary>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/settings/new-panel/SettingSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const StylingGroup = ({ section }: any) => {
<AccordionItem value={section.heading} className="border-none">
<AccordionTrigger className="border-b border-border py-2 text-xs">
<div className="flex items-center">
<div className="flex items-center gap-x-2 text-sm font-bold">{startCase(t(section.heading))}</div>
<div className="flex items-center gap-x-2 text-sm font-medium">{startCase(t(section.heading))}</div>
</div>
</AccordionTrigger>
<AccordionContent className="py-2">
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const BorderRadiusInput = ({ value, onChange, disabled }: BorderRadiusInputProps
disabled={disabled}
defaultValue={value.replace("px", "")}
onChange={(e) => throttledChange(e.target.value)}
className="flex-1"
className="flex-1 cursor-pointer"
/>
);
};
Expand Down
7 changes: 3 additions & 4 deletions src/core/components/sidepanels/panels/theme-configuration/FontSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,11 @@ const FontSelector = ({
value: string;
onChange: (value: string) => void;
}) => {

return (
<div className="">
<Label className="text-sm font-bold">{startCase(label)}</Label>
<div className="space-y-0.5">
<Label className="text-sm text-slate-800">{startCase(label)}</Label>
<select
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
className="mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
value={value}
onChange={(e) => onChange(e.target.value)}>
{FONTS.map((font) => (
Expand Down
43 changes: 16 additions & 27 deletions src/core/components/sidepanels/panels/theme-configuration/ThemeConfigPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from "react";

import { useBuilderProp } from "../../../../hooks/index.ts";
import { useTranslation } from "react-i18next";
import { Label, ScrollArea, Button } from "../../../../../ui";
import { Label, Button } from "../../../../../ui";
import { cn } from "../../../../functions/Functions.ts";
import { BorderRadiusInput, FontSelector, ColorPickerInput } from "./index.ts";
import { useTheme, useThemeOptions } from "../../../../hooks/useTheme.ts";
Expand Down Expand Up @@ -103,13 +103,12 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
{Object.entries(group.items).map(([key]: [string, [string, string]]) => {
const themeColor = get(themeValues, `colors.${key}.${isDarkMode ? 1 : 0}`);
return (
<div key={key} className="mt-1 flex items-center">
<div key={key} className="mt-1 flex items-center gap-x-2">
<ColorPickerInput
value={themeColor as string}
onChange={(newValue: string) => handleColorChange(key, newValue)}
/>
&nbsp;&nbsp;
<Label className="text-xs text-muted-foreground">
<Label className="text-xs font-normal leading-tight text-slate-600">
{key
.split(/(?=[A-Z])/)
.join(" ")
Expand All @@ -132,17 +131,15 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
);

return (
<ScrollArea className={cn("h-full w-full", className)}>
<div className={cn("no-scrollbar h-full w-full overflow-y-auto", className)}>
{themePresets.length > 0 && (
<div className="flex gap-2 pb-2">
<div className="w-[70%]">
<div className="flex w-full items-center justify-between">
<Label className="text-sm font-bold">{t("Presets")}</Label>
</div>
<div className="flex gap-2 py-2">
<div className="w-full">
<Label className="text-sm text-slate-800">{t("Presets")}</Label>
<select
value={selectedPreset}
onChange={(e) => handlePresetChange(e.target.value)}
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
className="w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
<option value="">Select preset</option>
{Array.isArray(themePresets) &&
themePresets.map((preset: any) => (
Expand Down Expand Up @@ -176,28 +173,20 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "

{/* Border Radius Section */}
{chaiThemeOptions?.borderRadius && (
<div className="py-3">
<h4 className="text-sm font-bold">{t("Border Radius")}</h4>
<div className="flex items-center gap-4">
<BorderRadiusInput
value={themeValues.borderRadius}
onChange={handleBorderRadiusChange}
/>
<div className="space-y-0.5 py-3">
<Label className="text-sm text-slate-800">{t("Border Radius")}</Label>
<div className="flex items-center gap-4 py-2">
<BorderRadiusInput value={themeValues.borderRadius} onChange={handleBorderRadiusChange} />
<span className="w-12 text-sm">{themeValues.borderRadius}</span>
</div>
</div>
)}

{/* Colors Section with Mode Switch */}
{chaiThemeOptions?.colors && (
<div className="mt-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h4 className="text-sm font-bold">{t("Colors")}</h4>
</div>
</div>

<div className="w-full space-y-4" key={isDarkMode ? "dark" : "light"}>
<div className="mt-4 space-y-0.5">
<Label className="text-sm text-slate-800">{t("Colors")}</Label>
<div className="w-full space-y-4 pt-2" key={isDarkMode ? "dark" : "light"}>
{chaiThemeOptions.colors.map((group) => renderColorGroup(group))}
</div>
</div>
Expand All @@ -207,7 +196,7 @@ const ThemeConfigPanel: React.FC<ThemeConfigProps> = React.memo(({ className = "
<br />
<br />
<br />
</ScrollArea>
</div>
);
});

Expand Down