Replace "Copy link" tooltip with explicit label

Now that the management actions were moved to a menu there is enough
room to show a label for the "Copy link" button.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

4 files changed, 40 insertions, 13 deletions

diff --git a/css/style.scss b/css/style.scss
index 632f17036..42b69ed50 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -976,10 +976,30 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g
 		margin-left: auto;
 	}
 
-	.clipboard-button .button,
+	.clipboard-button button {
+		display: flex;
+		align-items: center;
+
+		> span {
+			cursor: pointer;
+
+			/* Override reduced opacity set for button icons in server, as the
+			* button is already dimmed. */
+			opacity: 1;
+		}
+
+		/* Override appearance set for button text in server, as this button has
+		 * no background. */
+		padding: 0;
+
+		> span {
+			color: var(--color-main-text);
+			font-weight: normal;
+		}
+	}
+
+	.clipboard-button button,
 	.room-moderation-button .button {
-		width: 44px;
-		height: 44px;
 		background-color: transparent;
 		border: none;
 		margin: 0;
@@ -992,6 +1012,12 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g
 		}
 	}
 
+	.clipboard-button .icon,
+	.room-moderation-button .button {
+		width: 44px;
+		height: 44px;
+	}
+
 	.room-moderation-button .menu {
 		/* Values copied from apps.scss in server. */
 		$popoveritem-height: 44px;
diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js
index 096e1d76a..886390af6 100644
--- a/js/views/callinfoview.js
+++ b/js/views/callinfoview.js
@@ -54,6 +54,7 @@
 				showRoomModerationMenu: canModerate && (canFullModerate || isPublic),
 				canFullModerate: canFullModerate,
 				linkCheckboxLabel: t('spreed', 'Share link'),
+				copyLinkLabel: t('spreed', 'Copy link'),
 				isPublic: isPublic,
 				passwordInputPlaceholder: this.model.get('hasPassword')? t('spreed', 'Change password'): t('spreed', 'Set password'),
 				isDeletable: canModerate && (Object.keys(this.model.get('participants')).length > 2 || this.model.get('numGuests') > 0)
@@ -173,8 +174,8 @@
 			this.ui.clipboardButton.attr('data-clipboard-text', completeURL);
 			this.ui.clipboardButton.tooltip({
 				placement: 'bottom',
-				trigger: 'hover',
-				title: t('spreed', 'Copy link')
+				trigger: 'manual',
+				title: t('core', 'Link copied!')
 			});
 			this.initClipboard();
 
@@ -305,9 +306,7 @@
 					.tooltip({placement: 'bottom', trigger: 'manual'})
 					.tooltip('show');
 				_.delay(function() {
-					$input.tooltip('hide')
-						.attr('data-original-title', t('core', 'Copy link'))
-						.tooltip('_fixTitle');
+					$input.tooltip('hide');
 				}, 3000);
 			});
 			this._clipboard.on('error', function (e) {
@@ -327,9 +326,7 @@
 					.tooltip({placement: 'bottom', trigger: 'manual'})
 					.tooltip('show');
 				_.delay(function () {
-					$input.tooltip('hide')
-						.attr('data-original-title', t('spreed', 'Copy link'))
-						.tooltip('_fixTitle');
+					$input.tooltip('hide');
 				}, 3000);
 			});
 		}
diff --git a/js/views/templates.js b/js/views/templates.js
index 1e0817c1d..e1c4004f2 100644
--- a/js/views/templates.js
+++ b/js/views/templates.js
@@ -48,7 +48,11 @@ templates['callinfoview'] = template({"1":function(container,depth0,helpers,part
     + alias4(((helper = (helper = helpers.fileLinkTitle || (depth0 != null ? depth0.fileLinkTitle : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileLinkTitle","hash":{},"data":data}) : helper)))
     + "\">\n		<span class=\"icon icon-file\"></span>\n	</a>\n";
 },"3":function(container,depth0,helpers,partials,data) {
-    return "	<div class=\"clipboard-button\"><button class=\"button icon-clippy\"></button></div>\n";
+    var helper;
+
+  return "	<div class=\"clipboard-button\"><button><span class=\"icon icon-clippy\"/><span>"
+    + container.escapeExpression(((helper = (helper = helpers.copyLinkLabel || (depth0 != null ? depth0.copyLinkLabel : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"copyLinkLabel","hash":{},"data":data}) : helper)))
+    + "</span></button></div>\n";
 },"5":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
 
diff --git a/js/views/templates/callinfoview.handlebars b/js/views/templates/callinfoview.handlebars
index 807ac107b..4a3e52dbe 100644
--- a/js/views/templates/callinfoview.handlebars
+++ b/js/views/templates/callinfoview.handlebars
@@ -9,7 +9,7 @@
 <div class="call-controls-container">
 	<div class="call-button"></div>
 	{{#if isPublic}}
-	<div class="clipboard-button"><button class="button icon-clippy"></button></div>
+	<div class="clipboard-button"><button><span class="icon icon-clippy"/><span>{{copyLinkLabel}}</span></button></div>
 	{{/if}}
 	{{#if showRoomModerationMenu}}
 	<div class="room-moderation-button">