mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 03:23:43 +08:00
d5fe9b4f8c
This commit ports the feature by @chapoi that was previously a theme component in core. A new post_menu button, copyLink, is added and used as the default instead of share. copyLink, on desktop, will copy the link of the post to the user's clipboard and show a nice 'lil animation. On mobile the native share menu will be shown. If site owners want the old behaviour back, they just need to change the post_menu site setting to use the share button instead of copyLink.
77 lines
1.2 KiB
SCSS
77 lines
1.2 KiB
SCSS
@keyframes slide {
|
|
0% {
|
|
}
|
|
100% {
|
|
transform: translateY(100%) translateX(-50%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.post-link-copied-alert {
|
|
position: absolute;
|
|
top: -1.5rem;
|
|
left: 50%;
|
|
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;
|
|
z-index: z("modal", "popover");
|
|
&.-success {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.-fail {
|
|
color: var(--danger);
|
|
}
|
|
|
|
&.slide-out {
|
|
animation: slide 1s cubic-bezier(0, 0, 0, 2) forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes draw {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.post-action-menu {
|
|
&__copy-link {
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
&.is-copied,
|
|
&.is-copied:hover {
|
|
.d-icon-d-post-share {
|
|
color: var(--success);
|
|
}
|
|
}
|
|
}
|
|
&__copy-link-checkmark {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: block;
|
|
stroke: #2ecc71;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
|
|
&.is-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
path {
|
|
stroke: var(--success);
|
|
stroke-width: 4;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
animation: draw 1s forwards;
|
|
}
|
|
}
|
|
}
|