refine copy-link-message, closes #486

Closes #486

Merge request studip/studip!924

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');
     });
 });

resources/assets/stylesheets/scss/copyable-links.scss

-.copyable-link-animation {
-    $animation-name: copyable-links-confirmation;
-    $animation-duration: 2s;
+.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;
 
-    // Position confirmation message above the link
-    position: relative;
-
-    div {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        text-align: center;
-
-        @include 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 copyable-links-confirmation-front {
-            0% {
-                opacity: 1;
-                transform: rotateX(0);
-            }
-            33% {
-                opacity: 0;
-                transform: rotateX(180deg);
-            }
-            66% {
-                opacity: 0;
-                transform: rotateX(180deg);
-            }
-            100% {
-                opacity: 1;
-                transform: rotateX(0);
-            }
-        }
-        animation: copyable-links-confirmation-front $animation-duration linear;
+    &.copyable-link-success {
+        @include background-icon(check-circle, status-green, 24);
     }
-
-    div {
-        @keyframes copyable-links-confirmation-back {
-            0% {
-                opacity: 0;
-                transform: rotateX(180deg);
-            }
-            33% {
-                opacity: 1;
-                transform: rotateX(0);
-            }
-            66% {
-                opacity: 1;
-                transform: rotateX(0);
-            }
-            100% {
-                opacity: 0;
-                transform: rotateX(180deg);
-            }
-        }
-        animation: copyable-links-confirmation-back $animation-duration linear;
+    &.copyable-link-error {
+        @include background-icon(decline-circle, status-red, 24);
     }
 }