From d38a1acc248865388e2bdb4ff15a96dcc3d6ca0c Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Thu, 29 Apr 2021 16:26:20 +0200
Subject: [PATCH] Cleanup contacts popup

---
 dev/Styles/Contacts.less                      | 49 +++++--------------
 .../templates/Views/User/PopupsContacts.html  | 28 +++++------
 2 files changed, 25 insertions(+), 52 deletions(-)

diff --git a/dev/Styles/Contacts.less b/dev/Styles/Contacts.less
index 4e5e43b17..14667de8d 100644
--- a/dev/Styles/Contacts.less
+++ b/dev/Styles/Contacts.less
@@ -8,16 +8,11 @@
 			padding-top: 0;
 			width: 50px;
 		}
-		.controls {
-			margin-left: 70px;
-		}
 	}
 
 	&.modal {
-
 		position: absolute;
 		right: 0;
-		top: 0;
 		bottom: 0;
 		left: 0;
 		width: auto;
@@ -28,9 +23,9 @@
 	}
 
 	.modal-body {
-		overflow: auto;
 		height: calc(100% - 49px);
 		padding: 0;
+		position: relative;
 	}
 
 	.b-list-toolbar {
@@ -188,23 +183,13 @@
 			-webkit-overflow-scrolling: touch;
 		}
 
-		.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
+		span {
 			height: 20px;
 			line-height: 20px;
-			font-size: 18px;
-			display: inline-block;
-			padding: 5px 7px;
 			display: none;
-		}
-
-		&.read-only {
-			.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
-				display: inline-block;
-			}
-
-			.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
-				display: none;
-			}
+			padding: 5px 7px;
+			font-size: 18px;
+			display: none;
 		}
 
 		.b-contact-view-desc {
@@ -235,16 +220,12 @@
 			color: #aaa;
 		}
 
-		.contactValueStatic, .contactValueLargeStatic, .contactValueTextAreaStatic {
-			font-size: 18px;
-			display: none;
-		}
-
-		.contactValueInput, .contactValueInputLarge, .contactValueTextArea {
+		input, textarea {
 			box-shadow: none;
 			border-color: #fff;
 			font-size: 18px;
-			width: 300px;
+			width: 70vw;
+			max-width: 400px;
 
 			&:hover {
 				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -257,16 +238,8 @@
 			}
 		}
 
-		.contactValueTextArea {
-			width: 300px;
-		}
-
-		.contactValueInputLarge {
-			width: 400px;
-		}
-
 		.hasError {
-			.contactValueInput {
+			input {
 				color: #ee5f5b;
 				border-color: #ee5f5b;
 			}
@@ -293,11 +266,11 @@
 		}
 
 		&.read-only {
-			.e-read-only-sign {
+			span, .e-read-only-sign {
 				display: inline-block;
 			}
 
-			.e-share-sign {
+			input, textarea, .e-share-sign {
 				display: none;
 			}
 		}
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
index cc416745d..8bfdb707f 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
@@ -46,9 +46,9 @@
 			<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
 		</div>
 	</div>
-	<div class="modal-body" style="position: relative;">
+	<div class="modal-body">
 		<div class="b-list-toolbar">
-			<input type="text" class="span3 e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
+			<input type="search" class="span3 e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
 		</div>
 		<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
 			<div class="content">
@@ -138,8 +138,8 @@
 								<div class="controls">
 									<div data-bind="foreach: viewPropertiesNames">
 										<div class="property-line">
-											<span class="contactValueStatic" data-bind="text: value"></span>
-											<input type="text" class="contactValueInput"
+											<span data-bind="text: value"></span>
+											<input type="text"
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
 										</div>
@@ -147,14 +147,14 @@
 									<div data-bind="visible: 0 < viewPropertiesOther().length, foreach: viewPropertiesOther">
 										<div class="property-line">
 											<!-- ko if: !largeValue() -->
-											<span class="contactValueStatic" data-bind="text: value"></span>
-											<input type="text" class="contactValueInput"
+											<span data-bind="text: value"></span>
+											<input type="text"
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
 											<!-- /ko -->
 											<!-- ko if: largeValue -->
-											<span class="contactValueTextAreaStatic" data-bind="text: value"></span>
-											<textarea class="contactValueTextArea"
+											<span data-bind="text: value"></span>
+											<textarea
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}"></textarea>
 											<!-- /ko -->
@@ -167,8 +167,8 @@
 								<div class="controls">
 									<div data-bind="foreach: viewPropertiesEmails">
 										<div class="property-line">
-											<span class="contactValueStatic" data-bind="text: value"></span>
-											<input type="text" class="contactValueInput"
+											<span data-bind="text: value"></span>
+											<input type="text"
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
 										</div>
@@ -181,8 +181,8 @@
 								<div class="controls">
 									<div data-bind="foreach: viewPropertiesPhones">
 										<div class="property-line">
-											<span class="contactValueStatic" data-bind="text: value"></span>
-											<input type="text" class="contactValueInput"
+											<span data-bind="text: value"></span>
+											<input type="text"
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
 										</div>
@@ -194,8 +194,8 @@
 								<div class="controls">
 									<div data-bind="foreach: viewPropertiesWeb">
 										<div class="property-line">
-											<span class="contactValueLargeStatic" data-bind="text: value"></span>
-											<input type="text" class="contactValueInputLarge" placeholder="https://"
+											<span data-bind="text: value"></span>
+											<input type="text" placeholder="https://"
 												autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 												data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
 										</div>