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
|
<input
|
||||||
placeholder={currentFlow.placeholder}
|
placeholder={currentFlow.placeholder}
|
||||||
value={draftTitle}
|
value={draftTitle}
|
||||||
|
autoComplete="off"
|
||||||
|
autoCorrect="off"
|
||||||
|
autoCapitalize="off"
|
||||||
|
spellCheck="false"
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const v = e.target.value;
|
const v = e.target.value;
|
||||||
if (isLikelyUrl(v)) {
|
if (isLikelyUrl(v)) {
|
||||||
|
|
@ -1905,6 +1909,16 @@ export default function MapView({
|
||||||
setDraftTitle(v); setTitleTouched(true);
|
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>}
|
{draftUrl && !draftSource && <span className="cfloat-meta">Fetching preview...</span>}
|
||||||
{draftSource && <span className="cfloat-meta">{draftSource}</span>}
|
{draftSource && <span className="cfloat-meta">{draftSource}</span>}
|
||||||
|
|
@ -1945,21 +1959,43 @@ export default function MapView({
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{useCustomImage && (
|
{useCustomImage && (
|
||||||
<div className="cfloat-img-upload">
|
<>
|
||||||
<label>
|
<div className="cfloat-img-upload">
|
||||||
<i className="fa-solid fa-upload" /> Upload
|
<label>
|
||||||
<input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
<i className="fa-solid fa-upload" /> Upload
|
||||||
</label>
|
<input type="file" accept="image/*" multiple onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||||
<label>
|
</label>
|
||||||
<i className="fa-solid fa-camera" /> Camera
|
<label>
|
||||||
<input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
<i className="fa-solid fa-camera" /> Camera
|
||||||
</label>
|
<input type="file" accept="image/*" capture="environment" onChange={handleImageFileChange} disabled={uploadingImage} hidden />
|
||||||
{uploadingImage && <span>Uploading...</span>}
|
</label>
|
||||||
</div>
|
{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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Error display */}
|
||||||
|
{saveError && (
|
||||||
|
<div className="cfloat-box cfloat-error-box">
|
||||||
|
<i className="fa-solid fa-exclamation-triangle" />
|
||||||
|
<span>{saveError}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Navigation buttons */}
|
{/* Navigation buttons */}
|
||||||
<div className="cfloat-box cfloat-nav">
|
<div className="cfloat-box cfloat-nav">
|
||||||
<button className="cfloat-btn" onClick={handlePrevStep} disabled={createStep === 0}>
|
<button className="cfloat-btn" onClick={handlePrevStep} disabled={createStep === 0}>
|
||||||
|
|
|
||||||
|
|
@ -1656,6 +1656,70 @@ body[data-theme="blue"] .create-floating-ui{
|
||||||
margin-bottom:2px;
|
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 */
|
/* Navigation */
|
||||||
.cfloat-nav{
|
.cfloat-nav{
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue