danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get smaller setting

Browse Source
This commit is contained in:
hamid zarghami
2026-05-11 12:11:10 +03:30
parent e63726bc3a
commit 99f77755c6
1 changed files with 14 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/SettingsPanel.tsx
+14 -26
View File
@@ -6,6 +6,7 @@ import UploadBoxDraggble from '@/components/UploadBoxDraggble'
import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
import ColorsImage from '@/assets/images/colors.png'
import ColorPicker from '@/components/ColorPicker'
import Select from '@/components/Select'
const PRESET_COLORS = [
'#a8edcf',
@@ -95,32 +96,19 @@ const SettingsPanel = () => {
{/* ─── تنظیمات نمایش ─── */}
<section className="p-4 border-b border-border">
<div className="flex items-center gap-2 mb-4">
<h3 className="text-sm font-semibold text-gray-800">تنظیمات نمایش</h3>
<h3 className="text-sm text-gray-800">تنظیمات نمایش</h3>
</div>
{/* استایل نمایش */}
<div className="mb-4">
<label className="block text-xs text-gray-500 mb-2">استایل نمایش</label>
<div className="relative">
<select
value={displayStyle}
onChange={(e) =>
updateDocumentSettings({ displayStyle: e.target.value as DisplayStyle })
}
className="w-full appearance-none border border-border rounded-xl px-3 py-2.5 text-sm bg-white text-right pr-3 pl-8 cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-200"
>
{DISPLAY_STYLE_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
<span className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</div>
<Select
value={displayStyle}
items={DISPLAY_STYLE_OPTIONS}
onChange={(e) =>
updateDocumentSettings({ displayStyle: e.target.value as DisplayStyle })
}
/>
</div>
{/* چک‌باکس‌ها */}
@@ -145,7 +133,7 @@ const SettingsPanel = () => {
<section className="p-4 border-b border-border">
<div className="flex items-center gap-2 mb-4">
<h3 className="text-sm font-semibold text-gray-800">تنظیمات ویرایشگر</h3>
<h3 className="text-sm">تنظیمات ویرایشگر</h3>
</div>
<div className="flex flex-col gap-3">
<CheckboxRow
@@ -158,7 +146,7 @@ const SettingsPanel = () => {
{/* ─── پس زمینه ─── */}
<section className="p-4">
<h3 className="text-sm font-semibold text-gray-800 mb-4">پس زمینه</h3>
<h3 className="text-sm mb-4">پس زمینه</h3>
{/* نوع پس‌زمینه */}
<div className="flex items-center gap-5 mb-4">
@@ -205,7 +193,7 @@ const SettingsPanel = () => {
key={color}
onClick={() => updateCurrentPageBackground({ backgroundColor: color })}
className={clx(
'w-9 h-9 rounded-xl border-2 transition-all',
'size-7 rounded-lg border-2 transition-all',
backgroundColor === color
? 'border-gray-800 scale-110'
: 'border-transparent hover:scale-105'
@@ -342,11 +330,11 @@ type CheckboxRowProps = {
const CheckboxRow = ({ label, checked, onChange }: CheckboxRowProps) => (
<label className="flex items-center justify-between cursor-pointer select-none group">
<span className="text-sm text-gray-700">{label}</span>
<span className="text-xs text-gray-700">{label}</span>
<div
onClick={() => onChange(!checked)}
className={clx(
'w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all',
'size-[18px] rounded-md border-2 flex items-center justify-center transition-all',
checked
? 'border-gray-800 bg-gray-800'
: 'border-gray-300 bg-white group-hover:border-gray-400'