done the file store options
This commit is contained in:
saqib mir
@@ -102,11 +102,10 @@ export const InspectorPanel: React.FC<InspectorPanelProps> = (p) => {
|
||||
p.onExpandedChange(true);
|
||||
}
|
||||
}}
|
||||
className={`relative flex h-9 w-9 items-center justify-center rounded-[8px] transition-colors cursor-pointer ${
|
||||
active
|
||||
className={`relative flex h-9 w-9 items-center justify-center rounded-[8px] transition-colors cursor-pointer ${active
|
||||
? 'bg-brand-secondary text-brand-primary'
|
||||
: 'text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
{React.isValidElement(t.icon) ? React.cloneElement(t.icon as React.ReactElement<{ size?: number }>, { size: 18 }) : t.icon}
|
||||
{t.id === 'notes' && p.annotations.some((a) => a.type !== 'widget') && (
|
||||
@@ -120,7 +119,7 @@ export const InspectorPanel: React.FC<InspectorPanelProps> = (p) => {
|
||||
})}
|
||||
|
||||
<div className="flex-1 min-h-[16px]" />
|
||||
|
||||
|
||||
<CustomButton variant="unstyled"
|
||||
label={theme === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
|
||||
onClick={toggleTheme}
|
||||
@@ -236,7 +235,7 @@ const PagesTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3 p-3 select-none">
|
||||
{Array.from({ length: p.totalPages }).map((_, idx) => (
|
||||
<div key={idx}
|
||||
<div key={idx}
|
||||
draggable={!!p.documentId}
|
||||
onDragStart={(e) => {
|
||||
setDraggedIdx(idx);
|
||||
@@ -269,9 +268,8 @@ const PagesTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
) : (
|
||||
<div
|
||||
onClick={() => p.onNavigateToPage(idx)}
|
||||
className={`group relative flex flex-col items-center gap-1.5 p-2 rounded-lg border bg-white shadow-sm hover:shadow-md transition-all ${
|
||||
idx === p.currentPage ? 'border-brand-primary ring-2 ring-brand-secondary/40' : 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
className={`group relative flex flex-col items-center gap-1.5 p-2 rounded-lg border bg-white shadow-sm hover:shadow-md transition-all ${idx === p.currentPage ? 'border-brand-primary ring-2 ring-brand-secondary/40' : 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
{p.totalPages > 1 && (
|
||||
<button
|
||||
@@ -352,13 +350,13 @@ const NotesTab: React.FC<{ annotations: Annotation[]; onNavigate: (a: Annotation
|
||||
<CustomButton variant="unstyled" onClick={() => onNavigate(a)} className="flex flex-col gap-1.5 text-left">
|
||||
<div className="flex items-center justify-between pr-6">
|
||||
<span className="rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-wide bg-brand-secondary text-brand-primary"
|
||||
>{a.type}</span>
|
||||
>{a.type}</span>
|
||||
<span className="text-[10px] text-text-tertiary">{a.pageIndex !== undefined ? `Page ${a.pageIndex + 1}` : ''}</span>
|
||||
</div>
|
||||
{a.content && <p className="line-clamp-3 text-[12px] italic text-text-secondary">“{a.content}”</p>}
|
||||
<span className="text-[10px] font-medium text-text-tertiary">{a.author}</span>
|
||||
</CustomButton>
|
||||
|
||||
|
||||
{onUpdate && (['highlight', 'ink', 'comment', 'strikeout', 'underline', 'squiggly'].includes(a.type)) && (
|
||||
<div className="flex items-center gap-2 mt-1 px-1" onClick={e => e.stopPropagation()}>
|
||||
<input
|
||||
@@ -449,7 +447,7 @@ const SearchTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-3 flex items-center justify-between px-0.5">
|
||||
<span className="text-[11.5px] font-medium text-text-secondary">
|
||||
{p.searchResults.length > 0 ? `Search results: ${p.searchCurrentMatch + 1}/${p.searchResults.length}` : (p.searchQuery ? 'No matches' : '')}
|
||||
@@ -461,7 +459,7 @@ const SearchTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-2 flex flex-col gap-2 px-0.5">
|
||||
<label className="flex items-center gap-2 text-[12px] text-text-secondary cursor-pointer">
|
||||
<input type="checkbox" checked={p.searchCaseSensitive} onChange={(e) => p.onSearchCaseSensitiveChange(e.target.checked)} className="rounded border-border-secondary text-brand-primary focus:ring-brand-primary" />
|
||||
@@ -476,19 +474,19 @@ const SearchTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
<div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
|
||||
{p.searchResults.map((r, i) => {
|
||||
const isSelected = i === p.searchCurrentMatch;
|
||||
|
||||
|
||||
const highlightText = (text: string, query: string) => {
|
||||
if (!query) return text;
|
||||
const flags = p.searchCaseSensitive ? 'g' : 'gi';
|
||||
let regexStr = query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
if (p.searchWholeWords) regexStr = `\\b${regexStr}\\b`;
|
||||
|
||||
|
||||
try {
|
||||
const regex = new RegExp(`(${regexStr})`, flags);
|
||||
const parts = text.split(regex);
|
||||
return (
|
||||
<span>
|
||||
{parts.map((part, index) =>
|
||||
{parts.map((part, index) =>
|
||||
regex.test(part) ? (
|
||||
<mark key={index} className={`font-bold rounded-[2px] px-0.5 ${isSelected ? 'bg-[#fef08a] text-black' : 'bg-brand-secondary text-brand-primary'}`}>{part}</mark>
|
||||
) : (
|
||||
@@ -504,9 +502,8 @@ const SearchTab: React.FC<InspectorPanelProps> = (p) => {
|
||||
|
||||
return (
|
||||
<CustomButton variant="unstyled" key={i} onClick={() => p.onSelectSearchMatch(i)}
|
||||
className={`mb-1 flex w-full flex-col gap-1.5 rounded-[6px] px-2.5 py-2 text-left transition-colors ${
|
||||
isSelected ? 'bg-brand-primary text-white' : 'hover:bg-bg-secondary text-text-secondary'
|
||||
}`}>
|
||||
className={`mb-1 flex w-full flex-col gap-1.5 rounded-[6px] px-2.5 py-2 text-left transition-colors ${isSelected ? 'bg-brand-primary text-white' : 'hover:bg-bg-secondary text-text-secondary'
|
||||
}`}>
|
||||
<span className={`text-[12.5px] leading-relaxed ${isSelected ? 'text-white' : 'text-text-primary'}`}>
|
||||
{highlightText(r.text || p.searchQuery, p.searchQuery)}
|
||||
</span>
|
||||
@@ -668,11 +665,10 @@ const HistoryTab: React.FC<{ history?: { stack: string[]; index: number }; onRes
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex items-center justify-between rounded-[8px] border p-2.5 transition-colors ${
|
||||
isCurrent
|
||||
className={`flex items-center justify-between rounded-[8px] border p-2.5 transition-colors ${isCurrent
|
||||
? 'border-[#2563eb] bg-[#eff6ff]'
|
||||
: 'border-border-primary bg-bg-secondary hover:border-border-secondary'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={`text-[12.5px] font-semibold ${isCurrent ? 'text-[#2563eb]' : 'text-text-primary'}`}>
|
||||
|
||||
@@ -78,7 +78,6 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
<div className="flex flex-col text-[13px]">
|
||||
<MenuItem icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="12" y1="18" x2="12" y2="12" /><line x1="9" y1="15" x2="15" y2="15" /></svg>} onClick={() => onNewBlankPDF?.()}>New Blank PDF…</MenuItem>
|
||||
<MenuItem icon={<UploadIcon size={16} />} onClick={() => fileRef.current?.click()}>Open PDF…</MenuItem>
|
||||
<MenuItem icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>} onClick={() => onShowVersionHistory?.()} disabled={!documentName || !canVersionHistory}>Version History</MenuItem>
|
||||
<MenuItem icon={<DownloadIcon size={16} />} onClick={onExport} disabled={!documentName || !canExport}>Export / Download</MenuItem>
|
||||
<MenuItem icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>} onClick={onPrint} disabled={!documentName || !canPrint}>Print</MenuItem>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user