vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): change copy button color & tooltip appearance

Browse Source
This commit is contained in:
sagar
2023-11-23 08:02:50 +05:45
parent 884a34bbf3
commit 770e4fdfe2
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/src/components/ClipboardCopy.astro
View File

@@ -32,7 +32,7 @@ const { copyText } = Astro.props;
d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
></path></svg ></path></svg
> >
<span class="tooltipText">Copy</span> <span class="tooltipText triangle">Copied!</span>
</span> </span>
<script define:vars={{ copyText }}> <script define:vars={{ copyText }}>
@@ -40,53 +40,62 @@ const { copyText } = Astro.props;
const copiedCheckMark = document.querySelector('.copied-checkmark'); const copiedCheckMark = document.querySelector('.copied-checkmark');
const tooltipText = document.querySelector('.tooltipText'); const tooltipText = document.querySelector('.tooltipText');
let timeout;
commandCopyBtn.addEventListener('click', () => { commandCopyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(copyText); navigator.clipboard.writeText(copyText);
tooltipText.innerHTML = 'Copied'; tooltipText.style.display = 'block';
copiedCheckMark.style.display = 'inline-block'; copiedCheckMark.style.display = 'inline-block';
commandCopyBtn.style.display = 'none'; commandCopyBtn.style.display = 'none';
//clear previous timeout
clearTimeout(timeout); setTimeout(()=>{
timeout = window.setTimeout(()=>{ copiedCheckMark.style.display = 'none';
copiedCheckMark.style.display = 'none'; commandCopyBtn.style.display = 'inline-block';
commandCopyBtn.style.display = 'inline-block'; tooltipText.style.display = 'none';
tooltipText.innerHTML = 'Copy'; }, 2000)
}, 750)
}); });
</script> </script>
<style> <style>
.copy-button { .copy-button {
fill: var(--sl-color-accent-high);
margin-left: 0.5rem; margin-left: 0.5rem;
cursor: pointer; cursor: pointer;
} }
.copied-checkmark { .copy-button:hover{
fill: var(--sl-color-accent-high); fill: var(--sl-color-accent-high);
}
.copied-checkmark {
fill: var(--sl-color-green);
margin-left: 0.5rem; margin-left: 0.5rem;
display: none; display: none;
} }
.copy-container:hover .tooltipText {
visibility: visible;
}
.copy-container { .copy-container {
position: relative; position: relative;
} }
.tooltipText { .tooltipText {
position: absolute; position: absolute;
visibility: hidden; left: -14px;
left: 0;
width: max-content; width: max-content;
background-color: white; background-color: white;
display: block; color: var(--sl-color-black);
color: black; display: none;
padding: 0.125rem 0.25rem; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
top: 130%; top: 200%;
font-size: 0.5rem; font-size: 0.75rem;
} }
.triangle:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
right: 28px;
top : -7px;
}
</style> </style>

1
docs/src/styles/custom-css.css
View File

@@ -7,6 +7,7 @@
--primary-color: var(--sl-color-bg-nav) !important; --primary-color: var(--sl-color-bg-nav) !important;
--cardBgColor: #242526; --cardBgColor: #242526;
--sl-color-green: #39a549;
--sl-hue-purple: 41; --sl-hue-purple: 41;
--sl-color-purple-low: hsl(var(--sl-hue-orange), 39%, 22%); --sl-color-purple-low: hsl(var(--sl-hue-orange), 39%, 22%);
--sl-color-purple: hsl(var(--sl-hue-orange), 82%, 63%); --sl-color-purple: hsl(var(--sl-hue-orange), 82%, 63%);