Web: show feedback when clicking the backend URL to copy it
The URL now briefly flashes in the primary color, to show that the click was acted upon.
This commit is contained in:
parent
72b994db7d
commit
f3693b88f4
@ -646,5 +646,13 @@ span.state-transition-arrow.lazy {
|
||||
}
|
||||
|
||||
.click-to-copy {
|
||||
/* The transition plays together with the duration set in clipboard.js */
|
||||
--transition-duration: var(--transition-speed-fast);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-duration);
|
||||
}
|
||||
.click-to-copy.copied {
|
||||
background-color: var(--color-accent-background);
|
||||
color: var(--color-accent-text);
|
||||
transition: var(--transition-duration);
|
||||
}
|
||||
|
@ -1,3 +1,12 @@
|
||||
|
||||
/**
|
||||
* The duration in milliseconds of the "flash" effect, when an element has been
|
||||
* copied.
|
||||
*
|
||||
* Also check `base.css`, `.copied` rule, which defines transition durations.
|
||||
*/
|
||||
const flashAfterCopyDuration = 150;
|
||||
|
||||
/**
|
||||
* Copy the inner text of an element to the clipboard.
|
||||
*
|
||||
@ -18,4 +27,13 @@ export function copyElementText(clickEvent) {
|
||||
document.execCommand("copy");
|
||||
|
||||
document.body.removeChild(inputElement);
|
||||
|
||||
flashElement(sourceElement);
|
||||
}
|
||||
|
||||
function flashElement(element) {
|
||||
element.classList.add("copied");
|
||||
window.setTimeout(() => {
|
||||
element.classList.remove("copied");
|
||||
}, 150);
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
<p>Get the Blender add-on and submit a job.</p>
|
||||
<p><button class="btn btn-primary">Get the add-on!</button></p>
|
||||
<p>Use the URL below in the add-on preferences. Click on it to copy.</p>
|
||||
<p class="click-to-copy" title="Click to copy this URL" @click="copyElementText">{{ api() }}</p>
|
||||
<p><span class="click-to-copy" title="Click to copy this URL" @click="copyElementText">{{ api() }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,8 +21,12 @@ import { copyElementText } from '@/clipboard.js';
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
.btn {
|
||||
margin: var(--spacer);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.click-to-copy {
|
||||
padding: var(--spacer-sm);
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user