#260: .swapbtn grid for copy feedback (fix attempt 2)
Label and checkmark stack in one grid cell (inline-grid, grid-area 1/1, checkmark visibility-hidden until .ok), so the button width is static by construction across the click. Replaces the min-width pin from fix attempt 1, which enlarged buttons by up to 0.64px (ceil of fractional width) and leaked the pin after restore. Applies to paste-view Copy/Link (paste.html + paste.js copyFeedback) and the /new result-box copy button (new.js). Verified with CDP bounding-box probes: Copy width/x identical before/during/after at 1400x900 and 375x812 (including the previously failing 52.36px mobile case), Link button static, checkmark visible during feedback, no minWidth pin set.
This commit is contained in:
@@ -192,18 +192,14 @@ async function create() {
|
||||
// button, password auto-unlock, then redirect to the paste.
|
||||
function finishCreate(data) {
|
||||
const url = location.origin + '/' + (data.custom_slug || data.id);
|
||||
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', 'ok');
|
||||
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon swapbtn" id="result-copy" title="Copy URL" type="button"><span class="btn-label">⧉</span><span class="btn-check">✓</span></button>', 'ok');
|
||||
$('result').dataset.token = data.deletion_token || '';
|
||||
const copyBtn = document.getElementById('result-copy');
|
||||
copyBtn.addEventListener('click', () => {
|
||||
try {
|
||||
navigator.clipboard.writeText(url);
|
||||
copyBtn.classList.add('ok'); // in-place success feedback (#53)
|
||||
// #260: pin the pre-swap width so the wider/narrower glyph never
|
||||
// shifts neighbouring elements; release it when the label restores.
|
||||
copyBtn.style.minWidth = Math.ceil(copyBtn.getBoundingClientRect().width) + 'px';
|
||||
copyBtn.textContent = '✓';
|
||||
setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; copyBtn.style.minWidth = ''; }, 2000);
|
||||
setTimeout(() => copyBtn.classList.remove('ok'), 2000);
|
||||
} catch(e) { toast('Copy failed', 'error'); }
|
||||
});
|
||||
// token carried via sessionStorage, never in the URL (#143)
|
||||
|
||||
Reference in New Issue
Block a user