github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-04 11:53:48 +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 { SVG_NAMESPACE } from "discourse-common/lib/icon-library";
import { i18n } from "discourse-i18n"; import { i18n } from "discourse-i18n";
const TIMEOUT = 2500;
const TRANSITION_BUFFER = 250;
export default function postActionFeedback({ export default function postActionFeedback({
postId, postId,
actionClass, actionClass,
@ -58,8 +61,7 @@ function createAlert(message, postId, actionBtn) {
actionBtn.appendChild(alertDiv); actionBtn.appendChild(alertDiv);
setTimeout(() => alertDiv.classList.add("slide-out"), 1000); setTimeout(() => removeElement(alertDiv), TIMEOUT);
setTimeout(() => removeElement(alertDiv), 2500);
} }
function createCheckmark(btn, actionClass, postId) { function createCheckmark(btn, actionClass, postId) {
@ -67,13 +69,16 @@ function createCheckmark(btn, actionClass, postId) {
const checkmark = makeCheckmarkSvg(postId, actionClass, svgId); const checkmark = makeCheckmarkSvg(postId, actionClass, svgId);
btn.appendChild(checkmark.content); btn.appendChild(checkmark.content);
setTimeout(() => checkmark.classList.remove("is-visible"), 3000); setTimeout(() => removeElement(document.getElementById(svgId)), TIMEOUT);
setTimeout(() => removeElement(document.getElementById(svgId)), 3500);
} }
function styleBtn(btn) { function styleBtn(btn) {
btn.classList.add("is-copied"); btn.classList.add("--activated", "--transition");
setTimeout(() => btn.classList.remove("is-copied"), 3200); setTimeout(
() => btn.classList.remove("--activated"),
TIMEOUT - TRANSITION_BUFFER
);
setTimeout(() => btn.classList.remove("--transition"), TIMEOUT);
} }
function makeCheckmarkSvg(postId, actionClass, svgId) { function makeCheckmarkSvg(postId, actionClass, svgId) {

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

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

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

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