refine copy-link-message, closes #486

Closes #486

Merge request studip/studip!924

resources/assets/javascripts/bootstrap/copyable_links.js

@@ -7,7 +7,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');
@@ -20,15 +20,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);
@@ -38,6 +36,5 @@ $(document).on('click', 'a.copyable-link', function (event) {
         });
     })).then((confirmation, parent) => {
         confirmation.remove();
-        $(this).parent().removeClass('copyable-link-animation');
     });
 });

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

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