From 58680e958d68bca1b65dd9c7a0784a4eddc324b9 Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Wed, 19 Oct 2022 09:43:22 +0000
Subject: [PATCH] refine copy-link-message, closes #486
Closes #486
Merge request studip/studip!924
---
.../javascripts/bootstrap/copyable_links.js | 11 +--
.../stylesheets/less/copyable-links.less | 79 +++++--------------
2 files changed, 25 insertions(+), 65 deletions(-)
diff --git a/resources/assets/javascripts/bootstrap/copyable_links.js b/resources/assets/javascripts/bootstrap/copyable_links.js
index f8aa2803eab..e41d0641136 100644
--- a/resources/assets/javascripts/bootstrap/copyable_links.js
+++ b/resources/assets/javascripts/bootstrap/copyable_links.js
@@ -6,7 +6,7 @@ $(document).on('click', 'a.copyable-link', function (event) {
// Create dummy element and position it off screen
// This element must be "visible" (as in "not hidden") or otherwise
// the copy command will fail
- var dummy = $('<textarea>').val(this.href).css({
+ let dummy = $('<textarea>').val(this.href).css({
position: 'absolute',
left: '-9999px'
}).appendTo('body');
@@ -19,15 +19,13 @@ $(document).on('click', 'a.copyable-link', function (event) {
// Show visual hint using a deferred (this way we don't need to
// duplicate the functionality in the done() handler)
(new Promise((resolve, reject) => {
- var confirmation = $('<div class="copyable-link-confirmation">');
+ let confirmation = $('<div class="copyable-link-confirmation copyable-link-success">');
confirmation.text($gettext('Link wurde kopiert'));
- confirmation.insertBefore(this);
-
- $(this).parent().addClass('copyable-link-animation');
+ confirmation.insertBefore('#layout_container');
// Resolve deferred when animation has ended or after 2 seconds as a
// fail safe
- var timeout = setTimeout(() => {
+ let timeout = setTimeout(() => {
$(this).parent().off('animationend');
resolve(confirmation);
}, 1500);
@@ -37,6 +35,5 @@ $(document).on('click', 'a.copyable-link', function (event) {
});
})).then((confirmation, parent) => {
confirmation.remove();
- $(this).parent().removeClass('copyable-link-animation');
});
});
diff --git a/resources/assets/stylesheets/less/copyable-links.less b/resources/assets/stylesheets/less/copyable-links.less
index 0084128e4d0..ea31d4eee20 100644
--- a/resources/assets/stylesheets/less/copyable-links.less
+++ b/resources/assets/stylesheets/less/copyable-links.less
@@ -1,61 +1,24 @@
-// Defines a css animation keyframes specific for this section with stop points
-// at 1/3 and 2/3. This way, the animation runs for a third of the allocated
-// time, shows the desired state for a third of the time and reverts for - you
-// guessed it - a third of the time.
-.keyframes(@name, @rules-inital, @rules-target) {
- @keyframes @name {
- 0% { @rules-inital(); }
- 33% { @rules-target(); }
- 66% { @rules-target(); }
- 100% { @rules-inital(); }
+.copyable-link-confirmation {
+ position: fixed;
+ bottom: 60px;
+ right: 12px;
+ height: 60px;
+ line-height: 60px;
+ max-width: calc(100% - 140px);
+ z-index: 42000;
+ border: solid thin @content-color-40;
+ background-color: @white;
+ background-repeat: no-repeat;
+ background-position: 1em center;
+ background-size: 100px;
+ box-shadow: 5px 5px #ececed;
+ padding: 5px 100px;
+ transition: transform .5s ease;
+
+ &.copyable-link-success {
+ .background-icon('check-circle', 'status-green', 24);
}
-}
-
-.copyable-link-animation {
- @animation-name: copyable-links-confirmation;
- @animation-duration: 2s;
-
- // Position confirmation message above the link
- position: relative;
-
- div {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- text-align: center;
-
- .icon('before', 'check-circle', 'status-green', 16px, 5px);
- }
-
- // Flip the link and confirmation message along the x axis
- a,
- div {
- backface-visibility: hidden;
- pointer-events: none;
- }
-
- a {
- .keyframes(~"@{animation-name}-front", {
- opacity: 1;
- transform: rotateX(0);
- }, {
- opacity: 0;
- transform: rotateX(180deg);
- });
- animation: ~"@{animation-name}-front" @animation-duration linear;
- }
-
- div {
- .keyframes(~"@{animation-name}-back", {
- opacity: 0;
- transform: rotateX(180deg);
- }, {
- opacity: 1;
- transform: rotateX(0);
- });
- animation: ~"@{animation-name}-back" @animation-duration linear;
+ &.copyable-link-error {
+ .background-icon('decline-circle', 'status-red', 24);
}
}
--
GitLab