Merge pull request #647 from nextcloud/password-popover

Show password input field in a popover menu.

3 files changed, 91 insertions, 118 deletions

diff --git a/css/style.scss b/css/style.scss
index 3723acea3..f570fff29 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -114,28 +114,6 @@
 	opacity: .5;
 }
 
-.password-input,
-.editable-text-label input {
-	margin-top: 0 !important;
-	margin-bottom: 4px !important;
-}
-
-.icon-confirm.password-confirm,
-.icon-confirm.confirm-button {
-	background-size: 16px;
-	background-color: transparent;
-	border: none;
-	position: absolute;
-	right: 0;
-	bottom: 3px;
-	padding: 16px;
-	opacity: .5;
-}
-.icon-confirm.password-confirm:hover,
-.icon-confirm.confirm-button:hover  {
-	opacity: 1;
-}
-
 .icon-clippy.public-room {
 	background-position-y: 8px !important;
 }
@@ -818,8 +796,7 @@ video {
 	clear: both;
 }
 
-.tabHeaders,
-#app-sidebar .icon {
+.tabHeaders {
 	display: inline-block;
 }
 
@@ -921,65 +898,51 @@ video {
 /**
  * Sidebar details view
  */
-
-.detailCallInfoContainer .room-name {
-	display: inline-block;
-}
-
-.detailCallInfoContainer h3,
-.newCommentRow .guest-name p,
-.detailCallInfoContainer .guest-name p {
-	display: inline-block;
-}
-
-.newCommentRow .guest-name p,
-.detailCallInfoContainer .guest-name p {
-	padding: 9px 0;
-}
-
-.newCommentRow .editable-text-label .edit-button,
-.detailCallInfoContainer .editable-text-label .edit-button {
-	display: none;
-}
-
-.detailCallInfoContainer .clipboard-button,
-.detailCallInfoContainer .password-button,
-.newCommentRow .editable-text-label:hover .edit-button,
-.detailCallInfoContainer .editable-text-label:hover .edit-button {
-	display: inline-block;
-}
-
-.detailCallInfoContainer .clipboard-button .icon,
-.detailCallInfoContainer .password-button .icon,
-.newCommentRow .editable-text-label .edit-button .icon,
-.detailCallInfoContainer .editable-text-label .edit-button .icon {
-	cursor: pointer;
-	padding: 22px;
-	vertical-align: middle;
-	margin-left: -5px;
-	margin-top: -5px;
-}
-
-.newCommentRow .editable-text-label .input-wrapper,
-.detailCallInfoContainer .editable-text-label .input-wrapper,
-.detailCallInfoContainer .password-option {
-	position: relative;
-	display: inline-block;
-}
-
-.newCommentRow .editable-text-label input,
-.detailCallInfoContainer .editable-text-label input,
-.detailCallInfoContainer .password-input {
-	width: 100%;
-}
-
-.newCommentRow .editable-text-label .label {
-	margin-left: 5px;
-}
-
-.detailCallInfoContainer #link-checkbox+label {
-	display: inline-block;
-	padding: 12px 0;
+.detailCallInfoContainer,
+.authorRow {
+	.room-name {
+		display: inline-block;
+	}
+	.guest-name p {
+		display: inline-block;
+		padding: 9px 0;
+	}
+	.editable-text-label {
+		.label-wrapper {
+			display: flex;
+			align-items: center;
+			.edit-button {
+				margin-left: 5px;
+				display: none;
+			}
+			&:hover .edit-button {
+				display: block;
+			}
+		}
+		.input-wrapper {
+			display: flex;
+			align-items: center;
+		}
+		.label {
+			margin-left: 5px;
+		}
+	}
+	.share-link-options {
+		display: flex;
+		align-items: center;
+		.link-checkbox-label {
+			margin-left: 6px;
+		}
+		.button {
+			cursor: pointer;
+			width: 44px;
+			height: 44px;
+			display: block;
+		}
+		.password-button {
+			position: relative;
+		}
+	}
 }
 
 /**
diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js
index b13f079c0..093183fab 100644
--- a/js/views/callinfoview.js
+++ b/js/views/callinfoview.js
@@ -46,18 +46,28 @@
 		'	</div>' +
 		'{{/if}}' +
 		'{{#if canModerate}}' +
-		'	<div>' +
-		'		<input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
-		'		<label for="link-checkbox">' + t('spreed', 'Share link') + '</label>' +
+		'	<div class="share-link-options">' +
 		'		{{#if isPublic}}' +
-		'			<div class="clipboard-button"><span class="icon icon-clippy"></span></div>' +
-		'			<div class="password-button"><span class="icon {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}}"></span></div>' +
-		'			<div class="password-option">' +
-		'				<input class="password-input" maxlength="200" type="password" autocomplete="new-password"' +
-		'				  placeholder="{{#if hasPassword}}' + t('spreed', 'Change password') + '{{else}}' + t('spreed', 'Set password') + '{{/if}}">'+
-		'				<div class="icon icon-confirm password-confirm"></div>'+
+		'			<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">' +
+		'					<ul>' +
+		'						<li>' +
+		'							<span class="menuitem icon-triangle-e password-option">' +
+		'								<form class="password-form">' +
+		'									<input class="password-input" required maxlength="200" type="password"' +
+		'				  						placeholder="{{#if hasPassword}}' + t('spreed', 'Change password') + '{{else}}' + t('spreed', 'Set password') + '{{/if}}">'+
+		'									<input type="submit" value="" autocomplete="new-password" class="icon icon-confirm password-confirm"></input>'+
+		'								</form>' +
+		'							</span>' +
+		'						</li>' +
+		'					</ul>' +
+		'				</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}}';
 
@@ -68,7 +78,6 @@
 		template: Handlebars.compile(TEMPLATE),
 
 		renderTimeout: undefined,
-		passwordInputIsShown: false,
 
 		templateContext: function() {
 			var canModerate = this._canModerate();
@@ -83,6 +92,7 @@
 
 		ui: {
 			'roomName': 'div.room-name',
+			'shareLinkOptions': '.share-link-options',
 			'clipboardButton': '.clipboard-button',
 			'linkCheckbox': '.link-checkbox',
 
@@ -90,10 +100,14 @@
 			'joinCallButton': 'button.join-call',
 			'leaveCallButton': 'button.leave-call',
 
-			'passwordButton': '.password-button',
+			'passwordButton': '.password-button .button',
+			'passwordForm': '.password-form',
+			'passwordMenu': '.password-menu',
 			'passwordOption': '.password-option',
 			'passwordInput': '.password-input',
-			'passwordConfirm': '.password-confirm'
+			'passwordConfirm': '.password-confirm',
+
+			'menu': '.password-menu',
 		},
 
 		regions: {
@@ -107,8 +121,9 @@
 			'keyup @ui.passwordInput': 'keyUpPassword',
 			'click @ui.passwordButton': 'showPasswordInput',
 			'click @ui.passwordConfirm': 'confirmPassword',
+			'submit @ui.passwordForm': 'confirmPassword',
 			'click @ui.joinCallButton': 'joinCall',
-			'click @ui.leaveCallButton': 'leaveCall'
+			'click @ui.leaveCallButton': 'leaveCall',
 		},
 
 		modelEvents: {
@@ -167,10 +182,11 @@
 				inputPlaceholder: t('spreed', 'Name'),
 				buttonTitle: t('spreed', 'Rename')
 			});
+
 		},
 
 		renderWhenInactive: function() {
-			if (this.ui.passwordInput.length === 0 || !this.passwordInputIsShown || this.ui.passwordInput.val() === '') {
+			if (!OC._currentMenu || !OC._currentMenu.hasClass('password-menu') || this.ui.passwordInput.length === 0 || this.ui.passwordInput.val() === '') {
 				this.render();
 				return;
 			}
@@ -215,13 +231,17 @@
 			});
 			this.initClipboard();
 
-			this.ui.passwordOption.hide();
 			this.ui.passwordButton.tooltip({
 				placement: 'bottom',
 				trigger: 'hover',
 				title: (this.model.get('hasPassword')) ? t('spreed', 'Change password') : t('spreed', 'Set password')
 			});
 
+			var self = this;
+			OC.registerMenu($(this.ui.passwordButton), $(this.ui.passwordMenu), function() {
+				$(self.ui.passwordInput).focus();
+			});
+
 		},
 
 		_canModerate: function() {
@@ -277,14 +297,8 @@
 		/**
 		 * Password
 		 */
-		showPasswordInput: function() {
-			this.passwordInputIsShown = true;
-			this.ui.passwordButton.hide();
-			this.ui.passwordOption.show();
-			this.ui.passwordInput.focus();
-		},
-
-		confirmPassword: function() {
+		confirmPassword: function(e) {
+			e.preventDefault();
 			var newPassword = this.ui.passwordInput.val().trim();
 			$.ajax({
 				url: OC.linkToOCS('apps/spreed/api/v1/room', 2) + this.model.get('token') + '/password',
@@ -293,10 +307,8 @@
 					password: newPassword
 				},
 				success: function() {
-					this.passwordInputIsShown = false;
 					this.ui.passwordInput.val('');
-					this.ui.passwordOption.hide();
-					this.ui.passwordButton.show();
+					OC.hideMenus();
 					OCA.SpreedMe.app.signaling.syncRooms();
 				}.bind(this),
 				error: function() {
@@ -306,15 +318,13 @@
 		},
 
 		keyUpPassword: function(e) {
+			e.preventDefault();
 			if (e.keyCode === 13) {
 				// Enter
-				this.confirmPassword();
+				this.confirmPassword(e);
 			} else if (e.keyCode === 27) {
 				// ESC
-				this.passwordInputIsShown = false;
-				this.ui.passwordInput.val('');
-				this.ui.passwordOption.hide();
-				this.ui.passwordButton.show();
+				OC.hideMenus();
 			}
 		},
 
diff --git a/js/views/editabletextlabel.js b/js/views/editabletextlabel.js
index a6d2427fc..baf8eeb44 100644
--- a/js/views/editabletextlabel.js
+++ b/js/views/editabletextlabel.js
@@ -31,13 +31,13 @@
 		'<div class="label-wrapper">' +
 		'	<{{labelTagName}} class="label">{{text}}</{{labelTagName}}>' +
 		'	{{#if editionEnabled}}' +
-		'		<div class="edit-button"><span class="icon icon-rename" {{#if buttonTitle}} title="{{buttonTitle}}" {{/if}}></span></div>' +
+		'		<div class="edit-button"><span class="icon button icon-rename" {{#if buttonTitle}} title="{{buttonTitle}}" {{/if}}></span></div>' +
 		'	{{/if}}' +
 		'</div>' +
 		'{{#if editionEnabled}}' +
 		'	<div class="input-wrapper hidden-important">' +
-		'		<input {{#if inputMaxLength}} maxlength="{{inputMaxLength}}" {{/if}} type="text" value="{{inputValue}}" {{#if inputPlaceholder}} placeholder="{{inputPlaceholder}}" {{/if}}>'+
-		'		<div class="icon icon-confirm confirm-button"></div>'+
+		'		<input class="username" {{#if inputMaxLength}} maxlength="{{inputMaxLength}}" {{/if}} type="text" value="{{inputValue}}" {{#if inputPlaceholder}} placeholder="{{inputPlaceholder}}" {{/if}}>'+
+		'		<input type="submit" value="" class="icon icon-confirm confirm-button"></div>'+
 		'	</div>' +
 		'{{/if}}';
 
@@ -82,7 +82,7 @@
 			label: '.label',
 			editButton: '.edit-button',
 			inputWrapper: '.input-wrapper',
-			input: 'input',
+			input: 'input.username',
 			confirmButton: '.confirm-button',
 		},