Add copyable text

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

View File

@ -1,6 +1,7 @@
import './external_links';
import './message_icons';
import './forms';
import './copyable_text';
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

@ -541,3 +541,35 @@ button, .button {
}
}
}
.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;
}
}
}