github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-01 16:06:19 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve link copy status transition (#30401)

Browse Source
This commit is contained in:
Kris 2024-12-20 14:12:13 -05:00 committed by GitHub
parent 3e8e861103
commit fa0ad0306c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/discourse/app/lib/post-action-feedback.js
View File

@ -1,6 +1,9 @@
import { SVG_NAMESPACE } from "discourse-common/lib/icon-library";
import { i18n } from "discourse-i18n";
const TIMEOUT = 2500;
const TRANSITION_BUFFER = 250;
export default function postActionFeedback({
postId,
actionClass,
@ -58,8 +61,7 @@ function createAlert(message, postId, actionBtn) {
actionBtn.appendChild(alertDiv);
setTimeout(() => alertDiv.classList.add("slide-out"), 1000);
setTimeout(() => removeElement(alertDiv), 2500);
setTimeout(() => removeElement(alertDiv), TIMEOUT);
}
function createCheckmark(btn, actionClass, postId) {
@ -67,13 +69,16 @@ function createCheckmark(btn, actionClass, postId) {
const checkmark = makeCheckmarkSvg(postId, actionClass, svgId);
btn.appendChild(checkmark.content);
setTimeout(() => checkmark.classList.remove("is-visible"), 3000);
setTimeout(() => removeElement(document.getElementById(svgId)), 3500);
setTimeout(() => removeElement(document.getElementById(svgId)), TIMEOUT);
}
function styleBtn(btn) {
btn.classList.add("is-copied");
setTimeout(() => btn.classList.remove("is-copied"), 3200);
btn.classList.add("--activated", "--transition");
setTimeout(
() => btn.classList.remove("--activated"),
TIMEOUT - TRANSITION_BUFFER
);
setTimeout(() => btn.classList.remove("--transition"), TIMEOUT);
}
function makeCheckmarkSvg(postId, actionClass, svgId) {

9
app/assets/stylesheets/common/post-action-feedback.scss
View File

@ -9,8 +9,8 @@
position: relative;
height: 100%;
&.is-copied,
&.is-copied:hover {
&.--activated,
&.--activated:hover {
.d-icon-d-post-share {
color: var(--success);
}
@ -25,11 +25,6 @@
display: block;
stroke: var(--success);
opacity: 0;
transition: opacity 0.5s ease-in-out;
&.is-visible {
opacity: 1;
}
path {
stroke: var(--success);

34
app/assets/stylesheets/desktop/post-action-feedback.scss
View File

@ -1,24 +1,32 @@
.post-action-feedback-alert {
position: absolute;
top: -1.5rem;
left: 50%;
left: 60%;
transform: translateX(-50%);
color: var(--success);
padding: 0.25rem 0.5rem;
white-space: nowrap;
font-size: var(--font-down-2);
opacity: 1;
transition: opacity 0.5s ease-in-out;
opacity: 0;
z-index: calc(z("timeline") + 1);
&.-success {
color: var(--success);
}
&.-fail {
color: var(--danger);
}
&.slide-out {
animation: slide 1s cubic-bezier(0, 0, 0, 2) forwards;
}
.--transition {
.post-action-feedback-alert,
.post-action-feedback-svg {
transition: opacity 0.25s, color 0.25s;
}
}
.--activated {
.post-action-feedback-alert,
.post-action-feedback-svg {
opacity: 1;
}
.post-action-feedback-alert {
&.-success {
color: var(--success);
}
&.-fail {
color: var(--danger);
}
}
}