Move password from its own menu to the room moderation menu

The password input is no longer the only element of the menu so pressing
"Esc" does not close the menu.

There is no longer a password button in the CallInfoView, so now the
acceptance tests need to open the room moderation menu to know if the
conversation is password protected or not.

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

1 files changed, 52 insertions, 23 deletions

diff --git a/css/style.scss b/css/style.scss
index 493f12761..7533e8a98 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -999,30 +999,59 @@ body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.g
 	.share-link-options {
 		display: flex;
 		align-items: center;
-		.password-button {
-			position: relative;
+	}
+
+	.room-moderation-button .menu {
+		/* Values copied from apps.scss in server. */
+		$popoveritem-height: 44px;
+		$popovericon-size: 16px;
+		$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
+
+		/* The server sets a top/bottom margin to forms and inputs of the
+		 * first/last item in a menu, but that misaligns the left icon; this
+		 * sets the top/bottom margin to the whole item instead of only to the
+		 * forms or inputs. */
+		li:first-of-type {
+			> .menuitem.password-option {
+
+				margin-top: $outter-margin - 2px; // minus the input margin
+
+				> form, > input {
+					margin-top: 0;
+				}
+			}
+		}
+		li:last-of-type {
+			> .menuitem.password-option {
+
+				margin-bottom: $outter-margin - 2px; // minus the input margin
+
+				> form, > input {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		.menuitem.password-option {
+			/* Override rule for menu items from server, as in this case
+			 * only the button in the password field is clickable, so the
+			 * pointer cursor should not be used for the whole item. */
+			cursor: default;
+
+			.password-form {
+				position: relative;
+
+				.password-confirm,
+				.password-loading {
+					/* Inputs in menu items do not have a right margin, so
+					 * it does not need to be compensated. */
+					right: 0;
+				}
 
-			.menuitem {
-				/* Override rule for menu items from server, as in this case
-				 * only the button in the password field is clickable, so the
-				 * pointer cursor should not be used for the whole item. */
-				cursor: default;
-
-				.password-form {
-					position: relative;
-
-					.password-confirm,
-					.password-loading {
-						/* Inputs in menu items do not have a right margin, so
-						 * it does not need to be compensated. */
-						right: 0;
-					}
-
-					.password-confirm {
-						/* Needed to override an important rule set in the
-						 * server. */
-						background-color: transparent !important;
-					}
+				.password-confirm {
+					/* Needed to override an important rule set in the
+					 * server. */
+					background-color: transparent !important;
 				}
 			}
 		}