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 { .blocked-info {
hyphens: none; hyphens: none;
word-wrap: break-word; word-wrap: break-word;
line-height: 16px;
position: relative;
} }
.blocked-info label { .blocked-info label {
@ -713,32 +715,45 @@ body.blocked .actions > .main-controls {
} }
.blocked-info strong { .blocked-info strong {
position: relative; cursor: pointer;
cursor: copy;
transition: all .1s; transition: all .1s;
border-bottom: 1px dotted #000;
} }
.blocked-info strong.copied { .blocked-info strong.copied {
background: rgb(145, 208, 198); background: hsl(170, 40%, 80%);
color: #000; color: #000;
} }
.blocked-info strong.copied:after { .copy-message {
white-space: nowrap;
position: absolute; 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; text-align: center;
padding: 4px; padding: 4px 0;
border-radius: 2px; background: hsl(170, 40%, 80%);
width: auto;
min-width: 100px;
top: -4em;
left: 50%;
background: #fff;
color: #000; color: #000;
transform: translate(-50%, 0);
z-index: 10; 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 { #hotkey-info {

8
popup/popup.js
View File

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