open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Copy styling

Browse Source
This commit is contained in:
narcolepticinsomniac 2019-11-15 22:06:12 -05:00 committed by GitHub
parent 218fe7c1df
commit 36a9bd73d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
popup/popup.css
View File

@ -697,6 +697,8 @@ body.blocked .actions > .main-controls {
.blocked-info {
hyphens: none;
word-wrap: break-word;
line-height: 16px;
position: relative;
}
.blocked-info label {
@ -713,32 +715,45 @@ body.blocked .actions > .main-controls {
}
.blocked-info strong {
position: relative;
cursor: copy;
cursor: pointer;
transition: all .1s;
border-bottom: 1px dotted #000;
}
.blocked-info strong.copied {
background: rgb(145, 208, 198);
background: hsl(170, 40%, 80%);
color: #000;
}
.blocked-info strong.copied:after {
.copy-message {
white-space: nowrap;
position: absolute;
content: attr(title);
display: none;
top: 0;
left: calc(var(--outer-padding) * -1);
right: calc(var(--outer-padding) * -1);
font-weight: bold;
font-size: 13px;
text-align: center;
padding: 4px;
border-radius: 2px;
width: auto;
min-width: 100px;
top: -4em;
left: 50%;
background: #fff;
padding: 4px 0;
background: hsl(170, 40%, 80%);
color: #000;
transform: translate(-50%, 0);
z-index: 10;
}
.copy-message.show-message {
display: block;
}
.blocked-info strong:after{
content: '';
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURQAAAAAAAKVnuc8AAAABdFJOUwBA5thmAAAAIElEQVQI12NgYGCEAgYgkwEMGBFijEhixDMZkUSRLQAACpYALjrE2uIAAAAASUVORK5CYII=)center no-repeat;
height: 10px;
width: 10px;
display: inline-flex;
margin-left: 3px;
}
/******************************************/
#hotkey-info {

8
popup/popup.js
View File

@ -146,6 +146,7 @@ function initPopup() {
textContent: s.slice(1, -1),
onclick: handleEvent.copyContent,
tabIndex: -1,
title: t('copy'),
})
: s;
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
@ -590,15 +591,14 @@ Object.assign(handleEvent, {
copyContent(event) {
const target = event.target;
const message = document.querySelector('.copy-message');
navigator.clipboard.writeText(target.textContent);
target.classList.add('copied');
target.title = t('copied');
message.classList.add('show-message');
setTimeout(() => {
target.classList.remove('copied');
message.classList.remove('show-message');
}, 1000);
setTimeout(() => {
target.title = '';
}, 2000);
},
});