Fix gallery remove button and update floating UI styles
- Fix removeMediaFromGallery -> removeMediaUrlAtIndex function reference - Update create post floating UI styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
f8804a5b14
commit
ea3c8b149e
|
|
@ -1895,6 +1895,10 @@ export default function MapView({
|
|||
<input
|
||||
placeholder={currentFlow.placeholder}
|
||||
value={draftTitle}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (isLikelyUrl(v)) {
|
||||
|
|
@ -1905,6 +1909,16 @@ export default function MapView({
|
|||
setDraftTitle(v); setTitleTouched(true);
|
||||
}
|
||||
}}
|
||||
onPaste={(e) => {
|
||||
const pasted = e.clipboardData?.getData('text') || '';
|
||||
if (pasted && isLikelyUrl(pasted.trim())) {
|
||||
e.preventDefault();
|
||||
const v = pasted.trim();
|
||||
setDraftTitle(v); setTitleTouched(false); setDraftUrl(v);
|
||||
setUrlPreviewError(""); setDraftSource(""); setDraftPublishedAt("");
|
||||
handleUrlPreview(v);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{draftUrl && !draftSource && <span className="cfloat-meta">Fetching preview...</span>}
|
||||
{draftSource && <span className="cfloat-meta">{draftSource}</span>}
|
||||
|
|
@ -1945,21 +1959,43 @@ export default function MapView({
|
|||
</button>
|
||||
</div>
|
||||
{useCustomImage && (
|
||||
<div className="cfloat-img-upload">
|
||||
<label>
|
||||
<i className="fa-solid fa-upload" /> Upload
|
||||
<input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||
</label>
|
||||
<label>
|
||||
<i className="fa-solid fa-camera" /> Camera
|
||||
<input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||
</label>
|
||||
{uploadingImage && <span>Uploading...</span>}
|
||||
</div>
|
||||
<>
|
||||
<div className="cfloat-img-upload">
|
||||
<label>
|
||||
<i className="fa-solid fa-upload" /> Upload
|
||||
<input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||
</label>
|
||||
<label>
|
||||
<i className="fa-solid fa-camera" /> Camera
|
||||
<input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||
</label>
|
||||
{uploadingImage && <span>Uploading...</span>}
|
||||
</div>
|
||||
{galleryItems.length > 0 && (
|
||||
<div className="cfloat-gallery">
|
||||
{galleryItems.map((url, idx) => (
|
||||
<div key={idx} className="cfloat-gallery-item">
|
||||
<img src={url} alt={`Upload ${idx + 1}`} />
|
||||
<button onClick={() => removeMediaUrlAtIndex(idx)} title="Remove">
|
||||
<i className="fa-solid fa-xmark" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error display */}
|
||||
{saveError && (
|
||||
<div className="cfloat-box cfloat-error-box">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{saveError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation buttons */}
|
||||
<div className="cfloat-box cfloat-nav">
|
||||
<button className="cfloat-btn" onClick={handlePrevStep} disabled={createStep === 0}>
|
||||
|
|
|
|||
|
|
@ -1656,6 +1656,70 @@ body[data-theme="blue"] .create-floating-ui{
|
|||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
/* Gallery thumbnails */
|
||||
.cfloat-gallery{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.cfloat-gallery-item{
|
||||
position:relative;
|
||||
width:60px;
|
||||
height:60px;
|
||||
border-radius:8px;
|
||||
overflow:hidden;
|
||||
border:1px solid var(--cf-border);
|
||||
}
|
||||
|
||||
.cfloat-gallery-item img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
.cfloat-gallery-item button{
|
||||
position:absolute;
|
||||
top:2px;
|
||||
right:2px;
|
||||
width:20px;
|
||||
height:20px;
|
||||
border-radius:50%;
|
||||
border:none;
|
||||
background:rgba(0,0,0,0.6);
|
||||
color:#fff;
|
||||
font-size:0.65rem;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.cfloat-gallery-item button:hover{
|
||||
background:rgba(239,68,68,0.8);
|
||||
}
|
||||
|
||||
/* Error box */
|
||||
.cfloat-error-box{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
background:rgba(239,68,68,0.15);
|
||||
border-color:rgba(239,68,68,0.4);
|
||||
color:#fca5a5;
|
||||
}
|
||||
|
||||
.cfloat-error-box i{
|
||||
color:#ef4444;
|
||||
font-size:0.9rem;
|
||||
}
|
||||
|
||||
.cfloat-error-box span{
|
||||
font-size:0.8rem;
|
||||
line-height:1.3;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.cfloat-nav{
|
||||
display:flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue