From aa842dbc83117c3574b0570791f7c02fcb905507 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Mon, 28 Nov 2022 12:25:21 +0100
Subject: [PATCH] Improved Contacts dialog layout for mobile

---
 dev/Styles/User/Contacts.less                 |  72 +--
 .../templates/Views/User/PopupsContacts.html  | 508 +++++++++---------
 2 files changed, 280 insertions(+), 300 deletions(-)

diff --git a/dev/Styles/User/Contacts.less b/dev/Styles/User/Contacts.less
index e5f626d7e..3ba3c7aba 100644
--- a/dev/Styles/User/Contacts.less
+++ b/dev/Styles/User/Contacts.less
@@ -1,14 +1,8 @@
 
-@contacts-popup-left-width: 25%;
-
 #V-PopupsContacts {
 
-	bottom: 0;
-	width: auto;
-	min-width: 550px;
 	max-width: 900px;
 	min-height: 300px;
-	max-height: 700px;
 
 	.control-group {
 		label.iconsize24 {
@@ -18,32 +12,28 @@
 	}
 
 	.modal-body {
+		display: flex;
 		height: calc(100vh - 49px);
 		padding: 0;
-		position: relative;
 	}
 
+	/* Left */
+
 	.b-list-toolbar {
 		padding: 0;
 		height: 44px;
 		text-align: center;
-		width: @contacts-popup-left-width;
-		border-bottom: 1px solid rgba(128,128,128,0.4);
+		border-bottom: 1px solid var(--border-color, #ddd);
 
 		.e-search {
 			margin: 7px 0 0;
-			width: calc(100% - 20px);
+			width: calc(100% - 10px);
 		}
 	}
 
 	.b-list-footer-toolbar {
-		position: absolute;
-		left: 0;
-		bottom: 0;
 		height: 46px;
-		width: @contacts-popup-left-width;
-		background-color: var(--message-list-toolbar-bg-color,#eee);
-		box-shadow: inset 0 1px 0 #ccc;
+		border-top: 1px solid var(--border-color, #ddd);
 
 		.footer-pager {
 			padding: 8px 10px 0 0;
@@ -52,11 +42,7 @@
 	}
 
 	.b-list-content {
-		position: absolute;
-		top: 45px;
-		bottom: 46px;
-		left: 0;
-		width: @contacts-popup-left-width;
+		height: calc(100% - 44px - 46px);
 		overflow: hidden;
 		overflow-y: auto;
 		scroll-behavior: smooth;
@@ -87,9 +73,8 @@
 		position: relative;
 
 		margin: 0;
-		border: 0;
 		border-left: 6px solid #eee;
-		border-bottom: 1px solid rgba(128,128,128,0.25);
+		border-bottom: 1px solid var(--border-color, #ddd);
 
 		&.focused {
 			border-left-color: #bbb;
@@ -132,15 +117,17 @@
 		}
 	}
 
+	/* Right */
+
+	.right {
+		width: 100%;
+		border-left: 1px solid var(--border-color, #ddd);
+	}
+
 	.b-view-content-toolbar {
+		border-top: 1px solid var(--border-color, #ddd);
 		padding: 7px;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		left: @contacts-popup-left-width;
-		height: 30px;
 		text-align: right;
-		border-top: 1px solid rgba(128,128,128,0.4);
 
 		.dropdown-menu.right-edge {
 			top: auto;
@@ -149,13 +136,9 @@
 	}
 
 	.b-view-content {
-		position: absolute;
-		top: 0;
-		bottom: 45px;
-		left: @contacts-popup-left-width;
-		right: 0;
+		height: calc(100% - 46px);
+		margin: 0;
 		overflow: auto;
-		border-left: 1px solid rgba(128,128,128,0.25);
 
 		span {
 			height: 20px;
@@ -179,21 +162,8 @@
 		}
 
 		input, textarea {
-			box-shadow: none;
-			border-color: #fff;
-			font-size: 18px;
 			width: 70vw;
 			max-width: 400px;
-
-			&:hover {
-				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-				border-color: #ccc;
-			}
-
-			&:focus {
-				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-				border-color: #999;
-			}
 		}
 	}
 
@@ -227,3 +197,9 @@ html:not(rl-mobile) {
 		}
 	}
 }
+
+@media screen and (max-width: 900px) {
+	#V-PopupsContacts {
+		width: 100%;
+	}
+}
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 5adf32717..bc6381caf 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
@@ -43,281 +43,285 @@
 	</div>
 </header>
 <div class="modal-body">
-	<div class="b-list-toolbar">
-		<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" 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">
-			<div class="listClear" data-bind="visible: !!search()">
-				<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="click: clearSearch"></span>
-			</div>
-			<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
-				data-i18n="CONTACTS/EMPTY_LIST"></div>
-			<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
-				<i class="icon-spinner"></i>
-				<span data-i18n="GLOBAL/LOADING"></span>
-			</div>
-			<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
-				data-i18n="CONTACTS/EMPTY_SEARCH"></div>
-			<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: contacts().length">
-				<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
-					<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
-					<div class="nameParent actionHandle" data-bind="text: display"></div>
+	<div class="left">
+		<div class="b-list-toolbar">
+			<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" 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">
+				<div class="listClear" data-bind="visible: !!search()">
+					<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="click: clearSearch"></span>
+				</div>
+				<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
+					data-i18n="CONTACTS/EMPTY_LIST"></div>
+				<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
+					<i class="icon-spinner"></i>
+					<span data-i18n="GLOBAL/LOADING"></span>
+				</div>
+				<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
+					data-i18n="CONTACTS/EMPTY_SEARCH"></div>
+				<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: contacts().length">
+					<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
+						<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
+						<div class="nameParent actionHandle" data-bind="text: display"></div>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-	<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
-		<div class="footer-pager">
-			<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
+		<div class="b-list-footer-toolbar">
+			<div class="footer-pager">
+				<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
+			</div>
 		</div>
 	</div>
-	<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
-		<div class="b-contact-view-desc" data-bind="visible: !contact()"
-			data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
-		<div class="tabs" data-bind="visible: contact, i18nUpdate: contact">
-			<!-- ko with: contact -->
-			<input type="radio" name="contacttabs" id="tab-contact" checked>
-			<label for="tab-contact"
-				role="tab"
-				aria-selected="true"
-				aria-controls="panel1"
-				tabindex="0"
-				data-i18n="CONTACTS/TAB_CONTACT"></label>
-			<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
-				<div class="control-group">
-					<label class="fontastic iconsize24">👤</label>
-					<div>
-						<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
-							<span data-bind="text: givenName"></span>
-							<input type="text"
-								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: givenName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
-						</div>
-						<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
-							<span data-bind="text: surName"></span>
-							<input type="text"
-								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: surName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
-						</div>
+	<div class="right">
+		<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
+			<div class="b-contact-view-desc" data-bind="visible: !contact()"
+				data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
+			<div class="tabs" data-bind="visible: contact, i18nUpdate: contact">
+				<!-- ko with: contact -->
+				<input type="radio" name="contacttabs" id="tab-contact" checked>
+				<label for="tab-contact"
+					role="tab"
+					aria-selected="true"
+					aria-controls="panel1"
+					tabindex="0"
+					data-i18n="CONTACTS/TAB_CONTACT"></label>
+				<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
+					<div class="control-group">
+						<label class="fontastic iconsize24">👤</label>
+						<div>
+							<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
+								<span data-bind="text: givenName"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: givenName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_FIRST_NAME">
+							</div>
+							<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
+								<span data-bind="text: surName"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: surName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_LAST_NAME">
+							</div>
 <!--
-						<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
-							<span data-bind="text: middleName"></span>
-							<input type="text"
-								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: middleName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
-						</div>
-						<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
-							<span data-bind="text: namePrefix"></span>
-							<input type="text"
-								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: namePrefix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
-						</div>
-						<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
-							<span data-bind="text: nameSuffix"></span>
-							<input type="text"
-								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: nameSuffix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
-						</div>
+							<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
+								<span data-bind="text: middleName"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: middleName" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_MIDDLE_NAME">
+							</div>
+							<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
+								<span data-bind="text: namePrefix"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: namePrefix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_PREFIX">
+							</div>
+							<div class="property-line" data-i18n="[title]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
+								<span data-bind="text: nameSuffix"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: nameSuffix" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NAME_SUFFIX">
+							</div>
 -->
-						<div class="property-line" data-bind="visible: null != nickname()" data-i18n="[title]CONTACTS/ADD_MENU_NICKNAME">
-							<span data-bind="text: nickname"></span>
+							<div class="property-line" data-bind="visible: null != nickname()" data-i18n="[title]CONTACTS/ADD_MENU_NICKNAME">
+								<span data-bind="text: nickname"></span>
+								<input type="text"
+									autocomplete="off" autocorrect="off" autocapitalize="off"
+									data-bind="textInput: nickname" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NICK_NAME">
+							</div>
+						</div>
+					</div>
+					<div class="control-group" data-bind="email().length">
+						<label class="fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
+						<div>
+							<div data-bind="foreach: email">
+								<div class="property-line">
+									<span data-bind="text: value"></span>
+									<input type="text"
+										autocomplete="off" autocorrect="off" autocapitalize="off"
+										data-bind="textInput: value">
+								</div>
+							</div>
+							<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addEmail">✚</a>
+						</div>
+					</div>
+					<div class="control-group" data-bind="visible: tel().length">
+						<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_PHONE">📞</label>
+						<div>
+							<div data-bind="foreach: tel">
+								<div class="property-line">
+									<span data-bind="text: value"></span>
+									<input type="text"
+										autocomplete="off" autocorrect="off" autocapitalize="off"
+										data-bind="textInput: value">
+								</div>
+							</div>
+							<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addTel">✚</a>
+						</div>
+					</div>
+					<div class="control-group" data-bind="visible: url().length">
+						<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_URL">🌍</label>
+						<div>
+							<div data-bind="foreach: url">
+								<div class="property-line">
+									<span data-bind="text: value"></span>
+									<input type="text" placeholder="https://"
+										autocomplete="off" autocorrect="off" autocapitalize="off"
+										data-bind="textInput: value">
+								</div>
+							</div>
+							<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addUrl">✚</a>
+						</div>
+					</div>
+					<div class="control-group" data-bind="visible: null != note()">
+						<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_NOTE">🖉</label>
+						<div class="property-line">
+							<span data-bind="text: note"></span>
 							<input type="text"
 								autocomplete="off" autocorrect="off" autocapitalize="off"
-								data-bind="textInput: nickname" data-i18n="[placeholder]CONTACTS/PLACEHOLDER_ENTER_NICK_NAME">
+								data-bind="textInput: note">
 						</div>
 					</div>
 				</div>
-				<div class="control-group" data-bind="email().length">
-					<label class="fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
-					<div>
-						<div data-bind="foreach: email">
-							<div class="property-line">
-								<span data-bind="text: value"></span>
-								<input type="text"
-									autocomplete="off" autocorrect="off" autocapitalize="off"
-									data-bind="textInput: value">
-							</div>
+<!--
+				<input type="radio" name="contacttabs" id="tab-contact-locations">
+				<label for="tab-contact-locations"
+					role="tab"
+					aria-selected="false"
+					aria-controls="panel2"
+					tabindex="0"
+					data-i18n="CONTACTS/TAB_LOCATIONS"></label>
+				<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
+					<div data-bind="foreach: adr">
+						<div class="control-group">
+							<div data-bind="text: type"></div>
+							<div data-bind="text: street"></div>
+							<div data-bind="text: street_ext"></div>
+							<div data-bind="text: locality"></div>
+							<div data-bind="text: region"></div>
+							<div data-bind="text: postcode"></div>
+							<div data-bind="text: pobox"></div>
+							<div data-bind="text: country"></div>
+							<div data-bind="text: preferred"></div>
 						</div>
-						<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addEmail">✚</a>
 					</div>
 				</div>
-				<div class="control-group" data-bind="visible: tel().length">
-					<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_PHONE">📞</label>
-					<div>
-						<div data-bind="foreach: tel">
-							<div class="property-line">
-								<span data-bind="text: value"></span>
-								<input type="text"
-									autocomplete="off" autocorrect="off" autocapitalize="off"
-									data-bind="textInput: value">
-							</div>
-						</div>
-						<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addTel">✚</a>
-					</div>
-				</div>
-				<div class="control-group" data-bind="visible: url().length">
-					<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_URL">🌍</label>
-					<div>
-						<div data-bind="foreach: url">
-							<div class="property-line">
-								<span data-bind="text: value"></span>
-								<input type="text" placeholder="https://"
-									autocomplete="off" autocorrect="off" autocapitalize="off"
-									data-bind="textInput: value">
-							</div>
-						</div>
-						<a href="#" class="btn fontastic" data-bind="visible: !readOnly(), click: addUrl">✚</a>
-					</div>
-				</div>
-				<div class="control-group" data-bind="visible: null != note()">
-					<label class="fontastic iconsize24" data-i18n="[title]CONTACTS/ADD_MENU_NOTE">🖉</label>
-					<div class="property-line">
-						<span data-bind="text: note"></span>
+-->
+				<input type="radio" name="contacttabs" id="tab-contact-business">
+				<label for="tab-contact-business"
+					role="tab"
+					aria-selected="false"
+					aria-controls="panel3"
+					tabindex="0"
+					data-i18n="CONTACTS/TAB_BUSINESS"></label>
+				<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
+					<div class="control-group">
+						<label data-i18n="CONTACTS/LABEL_ORGANIZATION"></label>
+						<span data-bind="text: org"></span>
 						<input type="text"
 							autocomplete="off" autocorrect="off" autocapitalize="off"
-							data-bind="textInput: note">
+							data-bind="textInput: org">
+					</div>
+					<div class="control-group">
+						<label data-i18n="CONTACTS/LABEL_DEPARTMENT"></label>
+						<span data-bind="text: department"></span>
+						<input type="text"
+							autocomplete="off" autocorrect="off" autocapitalize="off"
+							data-bind="textInput: department">
+					</div>
+					<div class="control-group">
+						<label data-i18n="CONTACTS/LABEL_TITLE"></label>
+						<span data-bind="text: title"></span>
+						<input type="text"
+							autocomplete="off" autocorrect="off" autocapitalize="off"
+							data-bind="textInput: title">
 					</div>
 				</div>
+
+				<input type="radio" name="contacttabs" id="tab-contact-crypto">
+				<label for="tab-contact-crypto"
+					role="tab"
+					aria-selected="false"
+					aria-controls="panel4"
+					tabindex="0"
+					data-i18n="CONTACTS/TAB_CRYPTO"></label>
+				<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
+					<div class="control-group">
+						<label data-i18n="OPENPGP/LABEL_SIGN"></label>
+						<select name="x-crypto[signpref]" data-bind="value: signpref">
+							<option value="Ask" data-i18n="CONTACTS/ASK"></option>
+							<option value="Never" data-i18n="CONTACTS/NEVER"></option>
+							<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
+							<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
+						</select>
+					</div>
+					<div class="control-group">
+						<label data-i18n="OPENPGP/LABEL_ENCRYPT"></label>
+						<select name="x-crypto[encryptpref]" data-bind="value: encryptpref">
+							<option value="Ask" data-i18n="CONTACTS/ASK"></option>
+							<option value="Never" data-i18n="CONTACTS/NEVER"></option>
+							<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
+							<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
+						</select>
+					</div>
+				</div>
+				<!-- /ko -->
+			</div>
+		</form>
+		<div class="b-view-content-toolbar btn-toolbar" data-bind="i18nUpdate: contact">
+			<!-- ko with: contact -->
+			<div class="btn-group">
+				<button class="btn button-save-contact" data-bind="visible: !readOnly(), command: $root.saveCommand">
+					<i data-bind="css: {'icon-ok': !$root.isSaving(), 'icon-spinner': $root.isSaving()}"></i>
+					<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: !id()"></span>
+					<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: id"></span>
+				</button>
+			</div>
+			<div class="btn-group dropdown" data-bind="visible: !readOnly(), registerBootstrapDropdown: true">
+				<a id="button-add-prop-dropdown-id" href="#" class="btn dropdown-toggle" data-i18n="CONTACTS/ADD_MENU_LABEL"></a>
+				<menu class="dropdown-menu right-edge" style="text-align: left" role="menu" aria-labelledby="button-add-prop-dropdown-id">
+					<li role="presentation" data-bind="visible: null == nickname()">
+						<a href="#" data-bind="click: addNickname">
+							<i class="icon-none"></i>
+							<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
+						</a>
+					</li>
+					<li role="presentation">
+						<a href="#" data-bind="click: addEmail">
+							<i class="fontastic">@</i>
+							<span data-i18n="GLOBAL/EMAIL"></span>
+						</a>
+					</li>
+					<li role="presentation">
+						<a href="#" data-bind="click: addTel">
+							<i class="fontastic">📞</i>
+							<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
+						</a>
+					</li>
+					<li role="presentation">
+						<a href="#" data-bind="click: addUrl">
+							<i class="fontastic">🌍</i>
+							<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
+						</a>
+					</li>
+					<li role="presentation" data-bind="visible: null == note()">
+						<a href="#" data-bind="click: addNote">
+							<i class="fontastic">🖉</i>
+							<span data-i18n="CONTACTS/ADD_MENU_NOTE"></span>
+						</a>
+					</li>
+<!--
+					<li class="dividerbar" role="presentation">
+						<a href="#" data-bind="click: addNewAddress">
+							<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
+						</a>
+					</li>-->
+				</menu>
 			</div>
 <!--
-			<input type="radio" name="contacttabs" id="tab-contact-locations">
-			<label for="tab-contact-locations"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel2"
-				tabindex="0"
-				data-i18n="CONTACTS/TAB_LOCATIONS"></label>
-			<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
-				<div data-bind="foreach: adr">
-					<div class="control-group">
-						<div data-bind="text: type"></div>
-						<div data-bind="text: street"></div>
-						<div data-bind="text: street_ext"></div>
-						<div data-bind="text: locality"></div>
-						<div data-bind="text: region"></div>
-						<div data-bind="text: postcode"></div>
-						<div data-bind="text: pobox"></div>
-						<div data-bind="text: country"></div>
-						<div data-bind="text: preferred"></div>
-					</div>
-				</div>
-			</div>
+			<div class="read-only-sign fontastic iconsize24" data-bind="visible: readOnly" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
 -->
-			<input type="radio" name="contacttabs" id="tab-contact-business">
-			<label for="tab-contact-business"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel3"
-				tabindex="0"
-				data-i18n="CONTACTS/TAB_BUSINESS"></label>
-			<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
-				<div class="control-group">
-					<label data-i18n="CONTACTS/LABEL_ORGANIZATION"></label>
-					<span data-bind="text: org"></span>
-					<input type="text"
-						autocomplete="off" autocorrect="off" autocapitalize="off"
-						data-bind="textInput: org">
-				</div>
-				<div class="control-group">
-					<label data-i18n="CONTACTS/LABEL_DEPARTMENT"></label>
-					<span data-bind="text: department"></span>
-					<input type="text"
-						autocomplete="off" autocorrect="off" autocapitalize="off"
-						data-bind="textInput: department">
-				</div>
-				<div class="control-group">
-					<label data-i18n="CONTACTS/LABEL_TITLE"></label>
-					<span data-bind="text: title"></span>
-					<input type="text"
-						autocomplete="off" autocorrect="off" autocapitalize="off"
-						data-bind="textInput: title">
-				</div>
-			</div>
-
-			<input type="radio" name="contacttabs" id="tab-contact-crypto">
-			<label for="tab-contact-crypto"
-				role="tab"
-				aria-selected="false"
-				aria-controls="panel4"
-				tabindex="0"
-				data-i18n="CONTACTS/TAB_CRYPTO"></label>
-			<div class="form-horizontal tab-content" role="tabpanel" aria-hidden="false">
-				<div class="control-group">
-					<label data-i18n="OPENPGP/LABEL_SIGN"></label>
-					<select name="x-crypto[signpref]" data-bind="value: signpref">
-						<option value="Ask" data-i18n="CONTACTS/ASK"></option>
-						<option value="Never" data-i18n="CONTACTS/NEVER"></option>
-						<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
-						<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
-					</select>
-				</div>
-				<div class="control-group">
-					<label data-i18n="OPENPGP/LABEL_ENCRYPT"></label>
-					<select name="x-crypto[encryptpref]" data-bind="value: encryptpref">
-						<option value="Ask" data-i18n="CONTACTS/ASK"></option>
-						<option value="Never" data-i18n="CONTACTS/NEVER"></option>
-						<option value="Always" data-i18n="CONTACTS/ALWAYS"></option>
-						<option value="IfPossible" data-i18n="CONTACTS/ALWAYS_IF_POSSIBLE"></option>
-					</select>
-				</div>
-			</div>
 			<!-- /ko -->
 		</div>
-	</form>
-	<div class="b-view-content-toolbar btn-toolbar" data-bind="i18nUpdate: contact">
-		<!-- ko with: contact -->
-		<div class="btn-group">
-			<button class="btn button-save-contact" data-bind="visible: !readOnly(), command: $root.saveCommand">
-				<i data-bind="css: {'icon-ok': !$root.isSaving(), 'icon-spinner': $root.isSaving()}"></i>
-				<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: !id()"></span>
-				<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: id"></span>
-			</button>
-		</div>
-		<div class="btn-group dropdown" data-bind="visible: !readOnly(), registerBootstrapDropdown: true">
-			<a id="button-add-prop-dropdown-id" href="#" class="btn dropdown-toggle" data-i18n="CONTACTS/ADD_MENU_LABEL"></a>
-			<menu class="dropdown-menu right-edge" style="text-align: left" role="menu" aria-labelledby="button-add-prop-dropdown-id">
-				<li role="presentation" data-bind="visible: null == nickname()">
-					<a href="#" data-bind="click: addNickname">
-						<i class="icon-none"></i>
-						<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
-					</a>
-				</li>
-				<li role="presentation">
-					<a href="#" data-bind="click: addEmail">
-						<i class="fontastic">@</i>
-						<span data-i18n="GLOBAL/EMAIL"></span>
-					</a>
-				</li>
-				<li role="presentation">
-					<a href="#" data-bind="click: addTel">
-						<i class="fontastic">📞</i>
-						<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
-					</a>
-				</li>
-				<li role="presentation">
-					<a href="#" data-bind="click: addUrl">
-						<i class="fontastic">🌍</i>
-						<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
-					</a>
-				</li>
-				<li role="presentation" data-bind="visible: null == note()">
-					<a href="#" data-bind="click: addNote">
-						<i class="fontastic">🖉</i>
-						<span data-i18n="CONTACTS/ADD_MENU_NOTE"></span>
-					</a>
-				</li>
-<!--
-				<li class="dividerbar" role="presentation">
-					<a href="#" data-bind="click: addNewAddress">
-						<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
-					</a>
-				</li>-->
-			</menu>
-		</div>
-<!--
-		<div class="read-only-sign fontastic iconsize24" data-bind="visible: readOnly" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
--->
-		<!-- /ko -->
 	</div>
 </div>