linguabot commited on
Commit
2b54ad2
·
verified ·
1 Parent(s): 798e6a9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. client/src/components/Refinity.tsx +34 -16
client/src/components/Refinity.tsx CHANGED
@@ -418,25 +418,48 @@ const Refinity: React.FC = () => {
418
  const snippet = (v.content || '').slice(0, limit) + ((v.content || '').length > limit ? '…' : '');
419
  const isCenter = idx === flowIndex;
420
  return (
421
- <SwiperSlide key={v.id} style={{ width: 'clamp(320px, 48vw, 720px)', height: isFullscreen ? '72vh' : '62.4vh', pointerEvents: isCenter ? 'auto' as const : 'none' as const }}>
422
  <div className={`relative h-full rounded-2xl p-6 bg-white ring-1 ring-gray-200 shadow-xl text-base overflow-hidden flex flex-col ${isCenter ? 'z-10' : 'opacity-95 z-0'}`}>
423
  <div className={`ref-card-overlay absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]`} />
424
  <div className={`ref-card-overlay absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-30`} />
425
- <div className="text-gray-800 text-sm mb-2 pointer-events-none">Original: {v.originalAuthor}</div>
426
- <div className="text-gray-600 text-xs mb-3 pointer-events-none">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
427
- <div className={`text-gray-900 whitespace-pre-wrap break-words leading-relaxed flex-1 overflow-hidden pr-1 pointer-events-none`}>{snippet}</div>
428
- {isCenter && (
429
- <div className="ref-action-bar mt-4 flex gap-3 relative z-50 swiper-no-swiping" style={{ transform: 'translateZ(0)', WebkitTransform: 'translateZ(0)' }}>
430
- <button type="button" onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); console.log('FullText click', e.target, (e as any).clientX!=null && (e as any).clientY!=null ? document.elementFromPoint((e as any).clientX, (e as any).clientY) : null); setPreviewVersionId(v.id); setStage('preview'); }} className="relative z-[9999] overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200 cursor-pointer">Full Text</button>
431
- <button type="button" onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">Revise</button>
432
- <button type="button" onClick={()=>{ setCompareUIOpen(true); if (!compareA) setCompareA(v.id); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Compare</button>
433
- </div>
434
- )}
435
  </div>
436
  </SwiperSlide>
437
  );
438
  })}
439
  </SwiperRoot>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
440
  {compareUIOpen && (
441
  <div className="mt-4 p-3 rounded-2xl border border-gray-200 bg-white/60 backdrop-blur">
442
  <div className="flex flex-col md:flex-row gap-3 md:items-end">
@@ -518,11 +541,6 @@ const Refinity: React.FC = () => {
518
  .mySwiper .swiper-wrapper { align-items: center; }
519
  .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next { top: 50% !important; transform: translateY(-50%); }
520
  .mySwiper .swiper-button-prev:after, .mySwiper .swiper-button-next:after { font-size: 18px; color: #94a3b8; }
521
- .mySwiper .swiper-slide-active { z-index: 50 !important; }
522
- /* Decorative overlays should never capture clicks */
523
- .mySwiper .ref-card-overlay { pointer-events: none; }
524
- /* Let arrows/pagination operate normally, but not over the action bar */
525
- .mySwiper .swiper-slide-active .ref-action-bar, .mySwiper .swiper-slide-active .ref-action-bar * { pointer-events: auto; position: relative; z-index: 30; }
526
  .mySwiper .swiper-pagination { bottom: 6px; }
527
  ` }} />
528
  </div>
 
418
  const snippet = (v.content || '').slice(0, limit) + ((v.content || '').length > limit ? '…' : '');
419
  const isCenter = idx === flowIndex;
420
  return (
421
+ <SwiperSlide key={v.id} style={{ width: 'clamp(320px, 48vw, 720px)', height: isFullscreen ? '72vh' : '62.4vh' }}>
422
  <div className={`relative h-full rounded-2xl p-6 bg-white ring-1 ring-gray-200 shadow-xl text-base overflow-hidden flex flex-col ${isCenter ? 'z-10' : 'opacity-95 z-0'}`}>
423
  <div className={`ref-card-overlay absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]`} />
424
  <div className={`ref-card-overlay absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-30`} />
425
+ <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
426
+ <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
427
+ <div className={`text-gray-900 whitespace-pre-wrap break-words leading-relaxed flex-1 overflow-hidden pr-1`}>{snippet}</div>
 
 
 
 
 
 
 
428
  </div>
429
  </SwiperSlide>
430
  );
431
  })}
432
  </SwiperRoot>
433
+
434
+ {/* Action buttons positioned outside Swiper to avoid event conflicts */}
435
+ {taskVersions[flowIndex] && (
436
+ <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-50">
437
+ <div className="flex gap-3">
438
+ <button
439
+ type="button"
440
+ onClick={() => { setPreviewVersionId(taskVersions[flowIndex].id); setStage('preview'); }}
441
+ className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200 cursor-pointer"
442
+ >
443
+ Full Text
444
+ </button>
445
+ <button
446
+ type="button"
447
+ onClick={() => selectManual(taskVersions[flowIndex].id)}
448
+ className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200"
449
+ >
450
+ Revise
451
+ </button>
452
+ <button
453
+ type="button"
454
+ onClick={() => { setCompareUIOpen(true); if (!compareA) setCompareA(taskVersions[flowIndex].id); }}
455
+ className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200"
456
+ >
457
+ Compare
458
+ </button>
459
+ </div>
460
+ </div>
461
+ )}
462
+
463
  {compareUIOpen && (
464
  <div className="mt-4 p-3 rounded-2xl border border-gray-200 bg-white/60 backdrop-blur">
465
  <div className="flex flex-col md:flex-row gap-3 md:items-end">
 
541
  .mySwiper .swiper-wrapper { align-items: center; }
542
  .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next { top: 50% !important; transform: translateY(-50%); }
543
  .mySwiper .swiper-button-prev:after, .mySwiper .swiper-button-next:after { font-size: 18px; color: #94a3b8; }
 
 
 
 
 
544
  .mySwiper .swiper-pagination { bottom: 6px; }
545
  ` }} />
546
  </div>