Commit 65d4070a authored by Bengfort's avatar Bengfort
Browse files

add copy ID button

mostly copied from castellum
parent 02c641ab
Pipeline #8888 passed with stages
in 2 minutes and 55 seconds
......@@ -21,3 +21,31 @@
margin: 0 auto;
}
}
[data-animation="success"] {
position: relative;
}
[data-animation="success"]::after {
content: "\f00c"; /* fa-check */
font-family: FontAwesome;
display: block;
position: absolute;
right: 0;
top: 0;
width: 1.2em;
line-height: 1.2em;
box-sizing: content-box;
margin-right: -0.6em;
margin-top: -0.6em;
border-radius: 50%;
text-align: center;
color: var(--white);
background-color: var(--success);
opacity: 0;
transition: opacity 300ms ease;
}
[data-animation="success"].animation-active::after {
opacity: 1;
}
(function() {
window.$$ = {
on: function(el, eventName, selector, fn) {
el.addEventListener(eventName, function(event) {
var target = event.target.closest(selector);
if (target) {
fn.call(target, event);
}
});
},
};
$$.on(document, 'click', '[data-clipboard]', function() {
var targetSelector = this.dataset.clipboard;
var target = document.querySelector(targetSelector);
if (navigator.clipboard) {
navigator.clipboard.writeText(target.value || target.href);
} else {
target.focus();
target.setSelectionRange(0, 1000);
document.execCommand('copy');
}
});
$$.on(document, 'click', '[data-animation="success"]', function() {
this.classList.add('animation-active');
setTimeout(() => {
this.classList.remove('animation-active');
}, 800);
});
})();
......@@ -43,6 +43,7 @@
<script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.de.min.js' %}"></script>
<script src="{% static 'utils.js' %}"></script>
{% block extra_scripts %}{% endblock %}
</body>
</html>
......@@ -65,6 +65,18 @@
</div>
</fieldset>
{% if object %}
<div class="form-group">
<label for="id_schedule_id">{% translate 'Schedule ID' %}</label>
<div class="input-group">
<input id="id_schedule_id" class="form-control" value="{{ object.pk }}" readonly>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" tabindex="-1" data-clipboard="#id_schedule_id" data-animation="success">{% translate 'Copy' %}</button>
</div>
</div>
</div>
{% endif %}
<div class="d-print-none mb-3">
<button class="btn btn-primary" >{% translate 'Save' %}</button>
{% if object %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment