Search, structure and design fixes for 14

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

10 files changed, 43 insertions, 241 deletions

diff --git a/appinfo/info.xml b/appinfo/info.xml
index ee348c49..5b6fd4fa 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -11,7 +11,7 @@
 * 👥 **Sharing of Adressbooks!** You want to share your contacts with your friends or coworkers? No problem!
 * 🙈 **We’re not reinventing the wheel!** Based on the great and open SabreDAV library.
 	</description>
-	<version>2.1.5</version>
+	<version>2.1.6</version>
 	<licence>AGPL</licence>
 	<author>Alexander Weidinger</author>
 	<author>Jan-Christoph Borchardt</author>
@@ -29,7 +29,7 @@
 	<repository type="git">https://github.com/nextcloud/contacts.git</repository>
 	<screenshot>https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Contacts/contacts.png</screenshot>
 	<dependencies>
-		<nextcloud min-version="12" max-version="13" />
+		<nextcloud min-version="12" max-version="14" />
 	</dependencies>
 	<contactsmenu>
 		<provider>OCA\Contacts\ContactsMenu\Providers\DetailsProvider</provider>
diff --git a/css/_contactlist.scss b/css/_contactlist.scss
index 42159e0a..45070882 100644
--- a/css/_contactlist.scss
+++ b/css/_contactlist.scss
@@ -58,7 +58,7 @@ contactlist .tooltip {
 	#app-navigation-toggle-back {
 		position: fixed;
 		display: inline-block !important;
-		top: 45px;
+		top: $header-height;
 		left: 0;
 		width: 44px;
 		height: 44px;
@@ -72,174 +72,9 @@ contactlist .tooltip {
 	/* end of media query */
 }
 
-/* STABLE12 FIXES. TO BE DROPPED FOR MIN VERSION 13 */
-#app-content-wrapper {
-	display: flex;
-	position: relative;
-	align-items: start;
-	height: 100%;
-	width: 100%;
-	.app-content-list,
-	.app-content-detail {
-		min-height: 100%;
-		max-height: 100%;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-}
-
-.app-content-list {
-	border-right: 1px solid nc-darken($color-main-background, 8%);
-	display: flex;
-	flex-direction: column;
-	transition: transform 250ms ease-in-out;
-	min-width: 250px;
-	max-width: 350px;
-	flex: 2 2 300px;
-
-	/* Default item */
-	.app-content-list-item {
-		position: relative;
-		height: 68px;
-		border-top: 1px solid nc-darken($color-main-background, 8%);
-		cursor: pointer;
-		padding: 10px 7px;
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		flex: 0 0 auto;
-
-		/* Icon fixes */
-		&,
-		> .app-content-list-item-menu {
-			> [class^='icon-'],
-			> [class*=' icon-'] {
-				order: 4;
-				width: 24px;
-				height: 24px;
-				margin: -10px;
-				padding: 22px;
-				opacity: .3;
-				cursor: pointer;
-				&:hover, &:focus {
-					opacity: .7;
-				}
-				&[class^='icon-star'],
-				&[class*=' icon-star'] {
-					opacity: .7;
-					&:hover, &:focus {
-						opacity: 1;
-					}
-				}
-				&.icon-starred {
-					opacity: 1;
-				}
-			}
-		}
-
-		&:hover, &:focus,
-		&.active {
-			background-color: nc-darken($color-main-background, 6%);
-		}
-
-		.app-content-list-item-checkbox.checkbox + label,
-		.app-content-list-item-star {
-			position: absolute;
-			height: 40px;
-			width: 40px;
-			display: flex;
-			z-index: 50;
-			+ .app-content-list-item-icon {
-				opacity: .7;
-			}
-		}
-
-		.app-content-list-item-checkbox.checkbox + label {
-			top: 14px;
-			left: 7px;
-			&::before {
-				margin: 0;
-			}
-			/* Hide the star, priority to the checkbox */
-			~ .app-content-list-item-star {
-				display: none;
-			}
-		}
-
-		.app-content-list-item-star {
-			top: 10px;
-			left: 32px;
-			background-size: 16px;
-			height: 20px;
-			width: 20px;
-			margin: 0;
-			padding: 0;
-		}
-
-		.app-content-list-item-icon {
-			position: absolute;
-			display: inline-block;
-			height: 40px;
-			width: 40px;
-			line-height: 40px;
-			border-radius: 50%;
-			vertical-align: middle;
-			margin-right: 10px;
-			color: #fff;
-			text-align: center;
-			font-size: 1.5em;
-			text-transform: capitalize;
-			object-fit: cover;
-			user-select: none;
-			cursor: pointer;
-		}
-
-		.app-content-list-item-line-one,
-		.app-content-list-item-line-two {
-			display: block;
-			padding-left: 50px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			order: 1;
-			flex: 1 1 0;
-			padding-right: 10px;
-			cursor: pointer;
-		}
-
-		.app-content-list-item-line-two {
-			opacity: .5;
-			order: 3;
-			flex: 1 0 calc(100% - 24px);
-		}
-
-		.app-content-list-item-details {
-			order: 2;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			max-width: 100px;
-			opacity: .5;
-			font-size: 80%;
-			user-select: none;
-		}
-
-		.app-content-list-item-menu {
-			order: 4;
-			position: relative;
-			.popovermenu {
-				margin: 0;
-				right: -5px;
-			}
-		}
-	}
-}
 
 /* App content */
-.app-content-detail {
-	/* grow full width */
-	flex-grow: 1;
-
+.app-content-details {
 	#app-navigation-toggle-back {
 		display: none;
 	}
diff --git a/css/_details.scss b/css/_details.scss
index 777ea4a9..645802df 100644
--- a/css/_details.scss
+++ b/css/_details.scss
@@ -1,9 +1,3 @@
-.contact-details-wrapper {
-	position: relative;
-	background: $color-main-background;
-	min-height: 100%;
-}
-
 .wrapper-show {
 	z-index: 201;
 }
diff --git a/css/_navigation.scss b/css/_navigation.scss
deleted file mode 100644
index 4b95ba95..00000000
--- a/css/_navigation.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-#app-navigation {
-	position: relative;
-}
-
-#app-navigation > ul {
-	height: calc(100% - 68px);
-}
-
-#app-navigation .app-navigation-entry-utils .app-navigation-entry-utils-counter {
-	padding: 0 12px 0 0;
-}
-
-/* Contacts List */
-#new-contact-button {
-	margin: 14px auto; /* to have the same height than a contact */
-	width: calc(100% - 20px) !important;
-	text-align: left;
-	background-position: 10px center;
-	padding: 10px;
-	padding-left: 34px;
-	display: block;
-}
diff --git a/css/style.scss b/css/style.scss
index 0b0cb144..361a1824 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,5 +1,4 @@
 @import 'details';
 @import 'contactlist';
-@import 'navigation';
 @import 'settings';
 @import 'animations';
diff --git a/js/components/contactDetails/contactDetails_controller.js b/js/components/contactDetails/contactDetails_controller.js
index 7b273992..a5b1fdd0 100644
--- a/js/components/contactDetails/contactDetails_controller.js
+++ b/js/components/contactDetails/contactDetails_controller.js
@@ -56,6 +56,7 @@ angular.module('contactsApp')
 		if (typeof uid === 'undefined') {
 			ctrl.show = false;
 			$('#app-navigation-toggle').removeClass('showdetails');
+			$('.app-content-list').removeClass('showdetails');
 			return;
 		}
 		ctrl.loading = true;
@@ -68,6 +69,7 @@ angular.module('contactsApp')
 			ctrl.show = true;
 			ctrl.loading = false;
 			$('#app-navigation-toggle').addClass('showdetails');
+			$('.app-content-list').addClass('showdetails');
 
 			ctrl.addressBook = _.find(ctrl.addressBooks, function(book) {
 				return book.displayName === ctrl.contact.addressBookId;
diff --git a/js/contacts-inject-14.js b/js/contacts-inject-14.js
new file mode 100644
index 00000000..7d0e6951
--- /dev/null
+++ b/js/contacts-inject-14.js
@@ -0,0 +1 @@
+$('#content.app-contacts').attr('ng-app', 'contactsApp');
\ No newline at end of file
diff --git a/js/services/search_service.js b/js/services/search_service.js
index f12dd8a1..a7e6b669 100644
--- a/js/services/search_service.js
+++ b/js/services/search_service.js
@@ -1,5 +1,4 @@
-angular.module('contactsApp')
-.service('SearchService', function() {
+angular.module('contactsApp').service('SearchService', function() {
 	var searchTerm = '';
 
 	var observerCallbacks = [];
@@ -10,8 +9,8 @@ angular.module('contactsApp')
 
 	var notifyObservers = function(eventName) {
 		var ev = {
-			event:eventName,
-			searchTerm:searchTerm
+			event: eventName,
+			searchTerm: searchTerm
 		};
 		angular.forEach(observerCallbacks, function(callback) {
 			callback(ev);
@@ -33,25 +32,19 @@ angular.module('contactsApp')
 	};
 
 	this.cleanSearch = function() {
-		if (!_.isUndefined($('.searchbox'))) {
-			$('.searchbox')[0].reset();
-		}
 		searchTerm = '';
+		notifyObservers('changeSearch');
+	};
+
+	this.search = function(search) {
+		searchTerm = search;
+		notifyObservers('submitSearch');
 	};
 
 	if (!_.isUndefined(OC.Plugins)) {
 		OC.Plugins.register('OCA.Search', SearchProxy);
 		if (!_.isUndefined(OCA.Search)) {
-			OC.Search = new OCA.Search($('#searchbox'), $('#searchresults'));
-			$('#searchbox').show();
+			OC.Search = new OCA.Search(this.search, this.cleanSearch);
 		}
 	}
-
-	if (!_.isUndefined($('.searchbox'))) {
-		$('.searchbox')[0].addEventListener('keypress', function(e) {
-			if(e.keyCode === 13) {
-				notifyObservers('submitSearch');
-			}
-		});
-	}
 });
diff --git a/templates/main.php b/templates/main.php
index c00cdcf9..a0a242a4 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -9,6 +9,7 @@ script('contacts', 'vendor/ui-select/select');
 script('contacts', 'vendor/angular-click-outside/clickoutside.directive');
 script('contacts', 'vendor/ngclipboard/ngclipboard.min');
 
+script('contacts', 'contacts-inject-14');
 
 // DAV libraries
 script('contacts', 'dav/dav');
@@ -25,33 +26,30 @@ script('contacts', 'vendor/jquery-timepicker/jquery.timepicker');
 style('contacts', 'style');
 style('contacts', 'vendor/ui-select/select.min');
 ?>
-
-<div id="app" ng-app="contactsApp">
-	<div id="app-navigation">
-		<div id="importscreen-sidebar-block" class="icon-loading" ng-show="$root.importing"></div>
-		<newContactButton></newContactButton>
-		<ul groupList></ul>
-		<div id="app-settings">
-			<div id="app-settings-header">
-				<button class="settings-button"
-						data-apps-slide-toggle="#app-settings-content">
-					<?php p($l->t('Settings'));?>
-				</button>
-			</div>
-			<div id="app-settings-content">
-				<addressBookList class="settings-section"></addressBookList>
-				<contactImport class="settings-section"></contactImport>
-				<sortBy class="settings-section"></sortBy>
-			</div>
+<div id="app-navigation">
+	<div id="importscreen-sidebar-block" class="icon-loading" ng-show="$root.importing"></div>
+	<newContactButton></newContactButton>
+	<ul groupList></ul>
+	<div id="app-settings">
+		<div id="app-settings-header">
+			<button class="settings-button"
+					data-apps-slide-toggle="#app-settings-content">
+				<?php p($l->t('Settings'));?>
+			</button>
+		</div>
+		<div id="app-settings-content">
+			<addressBookList class="settings-section"></addressBookList>
+			<contactImport class="settings-section"></contactImport>
+			<sortBy class="settings-section"></sortBy>
 		</div>
 	</div>
+</div>
 
-	<div id="app-content">
-		<div id="app-content-wrapper">
-			<div class="app-content-list" contactlist>
-			</div>
-			<div class="app-content-detail" ng-view></div>
-			<importscreen id="importscreen-wrapper" ng-show="ctrl.importing"></importscreen>
+<div id="app-content">
+	<div id="app-content-wrapper">
+		<div class="app-content-list" contactlist>
 		</div>
+		<div class="app-content-details" ng-view></div>
+		<importscreen id="importscreen-wrapper" ng-show="ctrl.importing"></importscreen>
 	</div>
 </div>
diff --git a/templates/newContactButton.html b/templates/newContactButton.html
index 9ec3dbae..14b16745 100644
--- a/templates/newContactButton.html
+++ b/templates/newContactButton.html
@@ -1,2 +1,4 @@
-<button ng-show="!ctrl.loading && !ctrl.invalid" class="icon-add" id="new-contact-button"
-		type="button" name="button" ng-click="ctrl.createContact()">{{ctrl.t.addContact}}</button>
+<div class="app-navigation-new">
+	<button ng-show="!ctrl.loading && !ctrl.invalid" class="icon-add" id="new-contact-button"
+			type="button" name="button" ng-click="ctrl.createContact()">{{ctrl.t.addContact}}</button>
+</div>
\ No newline at end of file