Add copyable text

This commit is contained in:
Alice Gaudon 2020-06-14 17:34:01 +02:00
parent 194d0c482f
commit 243f87b0bf
3 changed files with 46 additions and 1 deletions

View File

@ -1,6 +1,7 @@
import './external_links'; import './external_links';
import './message_icons'; import './message_icons';
import './forms'; import './forms';
import './copyable_text';
import '../sass/app.scss'; import '../sass/app.scss';

View File

@ -0,0 +1,12 @@
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.copyable-text').forEach(el => {
const contentEl = el.querySelector('.content');
contentEl.addEventListener('click', () => {
window.getSelection().selectAllChildren(contentEl);
});
el.querySelector('.copy-button').addEventListener('click', () => {
window.getSelection().selectAllChildren(contentEl);
document.execCommand('copy');
});
});
});

View File

@ -540,4 +540,36 @@ button, .button {
margin: 8px; margin: 8px;
} }
} }
} }
.copyable-text {
display: flex;
flex-direction: row;
margin: 8px;
background-color: darken($backgroundColor, 2%);
border-radius: 5px;
overflow: hidden;
.title {
padding: 8px;
}
.content {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
padding: 8px;
}
.copy-button {
margin: 0;
padding: 0;
border-radius: 0;
.feather {
--icon-size: 20px;
margin: 8px;
}
}
}