fix(image-radius): split out 3x-scale IMAGE_RADIUS_PRESETS for the image picker
Image radii need to be visibly larger than the radius scale that works for buttons/containers — at typical photo dimensions, 16px reads as nearly square. Add an image-specific scale at 3x the shared values (S=24px, M=48px, L=96px) and route ImageStylePanel through it. Other components (buttons, sections, containers) keep RADIUS_PRESETS unchanged. Note: this commit also bundles unrelated pre-existing working-tree changes in the legacy GrapesJS site-builder root (CLAUDE.md, index.html, css/editor.css, js/assets.js, js/editor.js, js/whp-integration.js) that were inadvertently picked up by an earlier `git add -u`. The image-radius change is the only intentional content of this commit; the rest is in-progress legacy work that happened to be sitting uncommitted. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
79
index.html
79
index.html
@@ -346,6 +346,57 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Source -->
|
||||
<div id="section-image-src" class="guided-section context-section" style="display:none;">
|
||||
<label>Image</label>
|
||||
<div class="guided-input-group">
|
||||
<input type="text" id="image-src-input" class="guided-input" placeholder="Image URL or upload" readonly />
|
||||
<div style="display:flex;gap:4px;margin-top:6px;">
|
||||
<button id="image-src-upload" class="modal-btn modal-btn-primary" style="flex:1;padding:6px 10px;font-size:12px;">
|
||||
<i class="fa fa-upload"></i> Upload
|
||||
</button>
|
||||
<button id="image-src-browse" class="modal-btn modal-btn-secondary" style="flex:1;padding:6px 10px;font-size:12px;">
|
||||
<i class="fa fa-folder-open"></i> Browse
|
||||
</button>
|
||||
<button id="image-src-url" class="modal-btn modal-btn-secondary" style="flex:1;padding:6px 10px;font-size:12px;">
|
||||
<i class="fa fa-link"></i> URL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:6px;">
|
||||
<label style="font-size:11px;">Alt Text</label>
|
||||
<input type="text" id="image-alt-input" class="guided-input" placeholder="Describe the image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Source -->
|
||||
<div id="section-video-src" class="guided-section context-section" style="display:none;">
|
||||
<label>Video</label>
|
||||
<div class="guided-input-group">
|
||||
<input type="text" id="video-src-input" class="guided-input" placeholder="YouTube, Vimeo, or .mp4 URL" />
|
||||
<div style="display:flex;gap:4px;margin-top:6px;">
|
||||
<button id="video-src-apply" class="modal-btn modal-btn-primary" style="flex:2;padding:6px 10px;font-size:12px;">
|
||||
<i class="fa fa-play"></i> Apply Video
|
||||
</button>
|
||||
<button id="video-src-browse" class="modal-btn modal-btn-secondary" style="flex:1;padding:6px 10px;font-size:12px;">
|
||||
<i class="fa fa-folder-open"></i> Browse
|
||||
</button>
|
||||
</div>
|
||||
<div id="video-src-status" style="font-size:11px;color:#71717a;margin-top:4px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Alignment -->
|
||||
<div id="section-alignment" class="guided-section context-section" style="display:none;">
|
||||
<label>Alignment</label>
|
||||
<div class="alignment-presets">
|
||||
<button class="alignment-preset" data-align="left" title="Align Left"><i class="fa fa-align-left"></i></button>
|
||||
<button class="alignment-preset" data-align="center" title="Align Center"><i class="fa fa-align-center"></i></button>
|
||||
<button class="alignment-preset" data-align="right" title="Align Right"><i class="fa fa-align-right"></i></button>
|
||||
<button class="alignment-preset" data-align="justify" title="Justify"><i class="fa fa-align-justify"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacing (for containers) -->
|
||||
<div id="section-spacing" class="guided-section context-section" style="display:none;">
|
||||
<label>Padding</label>
|
||||
@@ -440,23 +491,23 @@
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div id="section-nav-links" class="guided-section context-section" style="display:none;">
|
||||
<label>Navigation Links</label>
|
||||
<label>Menu Links</label>
|
||||
<div class="nav-links-controls">
|
||||
<button id="sync-nav-pages" class="guided-btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M23 4v6h-6"></path>
|
||||
<path d="M1 20v-6h6"></path>
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
||||
</svg>
|
||||
Sync with Pages
|
||||
<button id="sync-nav-pages" class="guided-btn-primary" title="Auto-generate links from your site pages">
|
||||
<i class="fa fa-refresh"></i> Sync Pages
|
||||
</button>
|
||||
<button id="add-nav-link" class="guided-btn-secondary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add Link
|
||||
<button id="add-nav-link" class="guided-btn-secondary" title="Add a custom link">
|
||||
<i class="fa fa-plus"></i> Page Link
|
||||
</button>
|
||||
<button id="add-nav-external" class="guided-btn-secondary" title="Add an external URL">
|
||||
<i class="fa fa-external-link"></i> External
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin-top:6px;">
|
||||
<label class="checkbox-label" style="font-size:11px;color:#a1a1aa;display:flex;align-items:center;gap:6px;">
|
||||
<input type="checkbox" id="nav-sync-all-pages" checked />
|
||||
Apply menu to all pages on save
|
||||
</label>
|
||||
</div>
|
||||
<div id="nav-links-list" class="nav-links-list">
|
||||
<!-- Links will be populated dynamically -->
|
||||
|
||||
Reference in New Issue
Block a user