Improve call controls layout to single row

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

css/style.scss

@@ -984,17 +984,48 @@ video {
 			margin-left: 5px;
 		}
 	}
+
+	.call-controls-container {
+		display: flex;
+
+		.call-button,
+		.share-link-options {
+			flex-grow: 1;
+			flex-basis: 50%;
+		}
+
+		.call-button {
+			flex-grow: 0;
+
+			.join-call,
+			.leave-call {
+				width: 100%;
+				padding: 12px;
+			}
+		}
+	}
+
 	.share-link-options {
 		display: flex;
 		align-items: center;
 		.link-checkbox-label {
-			margin-left: 6px;
+			white-space: nowrap;
+			padding: 12px;
 		}
 		.button {
 			cursor: pointer;
 			width: 44px;
 			height: 44px;
 			display: block;
+			background-color: transparent;
+			border: none;
+			margin: 0;
+			opacity: .5;
+			&:hover,
+			&:focus,
+			&:active {
+				opacity: 1;
+			}
 		}
 		.password-button {
 			position: relative;

js/views/callinfoview.js

@@ -33,22 +33,25 @@
 		'{{#if showShareLink}}' +
 		'	<div class="clipboard-button"><span class="icon icon-clippy"></span></div>' +
 		'{{/if}}' +
+		'<div class="call-controls-container">' +
 		'{{#if participantInCall}}' +
-		'	<div>' +
+		'	<div class="call-button">' +
 		'		<button class="leave-call primary">' + t('spreed', 'Leave call') + '</button>' +
 		'	</div>' +
 		'{{else}}' +
-		'	<div>' +
+		'	<div class="call-button">' +
 		'		<button class="join-call primary">' + t('spreed', 'Join call') + '</button>' +
 		'	</div>' +
 		'{{/if}}' +
 		'{{#if canModerate}}' +
 		'	<div class="share-link-options">' +
+		'		<input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
+		'		<label for="link-checkbox" class="link-checkbox-label">' + t('spreed', 'Share link') + '</label>' +
 		'		{{#if isPublic}}' +
 		'			<div class="clipboard-button"><span class="button icon-clippy"></span></div>' +
 		'			<div class="password-button">' +
 		'				<span class="button {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}}"></span>' +
-		'				<div class="popovermenu password-menu menu-left">' +
+		'				<div class="popovermenu password-menu menu-right">' +
 		'					<ul>' +
 		'						<li>' +
 		'							<span class="menuitem {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}} password-option">' +
@@ -63,10 +66,9 @@
 		'				</div>' +
 		'			</div>' +
 		'		{{/if}}' +
-		'		<input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
-		'		<label for="link-checkbox" class="link-checkbox-label">' + t('spreed', 'Share link') + '</label>' +
 		'	</div>' +
-		'{{/if}}';
+		'{{/if}}' +
+		'</div>';
 
 	var CallInfoView  = Marionette.View.extend({
 
@@ -224,7 +226,7 @@
 			this.ui.clipboardButton.tooltip({
 				placement: 'bottom',
 				trigger: 'hover',
-				title: t('spreed', 'Copy')
+				title: t('spreed', 'Copy link')
 			});
 			this.initClipboard();
 
@@ -361,7 +363,7 @@
 					.tooltip('show');
 				_.delay(function () {
 					$input.tooltip('hide')
-						.attr('data-original-title', t('spreed', 'Copy'))
+						.attr('data-original-title', t('spreed', 'Copy link'))
 						.tooltip('fixTitle');
 				}, 3000);
 			});