Merge pull request #438 from nextcloud/list-to-css-guidelines

Fit contacts list to guidelines

9 files changed, 47 insertions, 172 deletions

diff --git a/css/_app-content-list.scss b/css/_app-content-list.scss
deleted file mode 100644
index 3ab1c03b..00000000
--- a/css/_app-content-list.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-/* app content list & detail view */
-/* TO BE MOVED TO CORE apps.css ONCE STANDARDIZED ACROSS APPS */
-/* DO NOT MAKE ANY CHANGES SPECIFIC TO CONTACTS HERE! */
-
-.app-content-list {
-	width: 30%;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	border-right: 1px solid nc-darken($color-main-background, 8%);
-}
-
-.app-content-detail {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 70%;
-	height: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
-.app-content-list-button {
-	display: block;
-	margin: 10px auto;
-	padding: 10px;
-}
-
-.app-content-list-item {
-	position: relative;
-	height: 68px;
-	border-top: 1px solid nc-darken($color-main-background, 8%);
-	cursor: pointer;
-	padding-left: 7px;
-}
-
-.app-content-list-item:hover,
-.app-content-list-item:focus,
-.app-content-list-item.active {
-	background-color: nc-darken($color-main-background, 6%);
-}
-
-.app-content-list-item-link {
-	display: block;
-	height: 100%;
-}
-
-.app-content-list-item-icon {
-	position: absolute;
-	display: inline-block;
-	left: 6px;
-	top: 14px;
-}
-
-.app-content-list-item-star {
-	position: absolute;
-	display: none; /* change to inline-block when we implement it */
-	left: 16px;
-	top: 28px;
-	padding: 20px;
-	background-size: 16px;
-	z-index: 100;
-}
-
-.app-content-list-item-line-one,
-.app-content-list-item-line-two {
-	position: absolute;
-	display: inline-block;
-	width: 100%;
-	padding: 12px;
-	padding-left: 50px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.app-content-list-item-line-one.no-line-two {
-	padding-top: 24px;
-	padding-bottom: 24px;
-}
-
-.app-content-list-item-line-two {
-	top: 25px;
-	opacity: .5;
-}
-
-#app-navigation-toggle-back {
-	display: none;
-}
-
-/* Mobile width < 768px */
-@media only screen and (max-width: 768px) {
-
-	/* full width for message list on mobile */
-	.app-content-list {
-		width: 100%;
-		background: $color-main-background;
-		position: relative;
-		z-index: 100;
-	}
-
-	/* overlay message detail on top of message list */
-	.app-content-detail {
-		background: $color-main-background;
-		width: 100%;
-		left: 0;
-		height: 100%;
-		top: 0;
-		box-shadow: 0 0 100px rgba(100, 100, 100, .9);
-		position: absolute;
-	}
-
-	#app-navigation-toggle.showdetails {
-		transform: translate(-50px, 0);
-	}
-
-	#app-navigation-toggle-back {
-		position: fixed;
-		display: inline-block !important;
-		top: 45px;
-		left: 0;
-		width: 44px;
-		height: 44px;
-		z-index: 149;
-		background-color: rgba(255, 255, 255, .7);
-		cursor: pointer;
-		opacity: .6;
-		transform: rotate(90deg);
-	}
-
-	/* end of media query */
-}
diff --git a/css/_contactlist.scss b/css/_contactlist.scss
index 0d935920..b2e1369b 100644
--- a/css/_contactlist.scss
+++ b/css/_contactlist.scss
@@ -45,8 +45,29 @@ contactlist .tooltip {
 	background-image: url('../img/group.svg');
 }
 
+/* Mobile width < 768px */
 @media only screen and (max-width: 768px) {
 	.contacts-list:not(.mobile-show) {
 		display: none;
 	}
+
+	#app-navigation-toggle.showdetails {
+		transform: translate(-50px, 0);
+	}
+
+	#app-navigation-toggle-back {
+		position: fixed;
+		display: inline-block !important;
+		top: 45px;
+		left: 0;
+		width: 44px;
+		height: 44px;
+		z-index: 149;
+		background-color: rgba(255, 255, 255, .7);
+		cursor: pointer;
+		opacity: .6;
+		transform: rotate(90deg);
+	}
+
+	/* end of media query */
 }
diff --git a/css/_settings.scss b/css/_settings.scss
index 4a75f8b2..9e9e1fca 100644
--- a/css/_settings.scss
+++ b/css/_settings.scss
@@ -257,7 +257,6 @@ contactimport input[type='search']::-webkit-search-cancel-button {
 	display: flex;
 	justify-content: center;
 	align-items: start;
-	padding-top: 30vh;
 	background: $color-main-background;
 	z-index: 500;
 }
diff --git a/css/style.scss b/css/style.scss
index 1fb6e5e9..3a8e2313 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,4 +1,3 @@
-@import "app-content-list";
 @import "details";
 @import "contactlist";
 @import "navigation";
diff --git a/js/components/contact/contact_controller.js b/js/components/contact/contact_controller.js
index ab8d3ca7..eb14f842 100644
--- a/js/components/contact/contact_controller.js
+++ b/js/components/contact/contact_controller.js
@@ -6,12 +6,6 @@ angular.module('contactsApp')
 		errorMessage : t('contacts', 'This card is corrupted and has been fixed. Please check the data and trigger a save to make the changes permanent.'),
 	};
 
-	ctrl.openContact = function() {
-		$route.updateParams({
-			gid: $routeParams.gid,
-			uid: ctrl.contact.uid()});
-	};
-
 	ctrl.getName = function() {
 		// If lastName equals to firstName then none of them is set
 		if (ctrl.contact.lastName() === ctrl.contact.firstName()) {
diff --git a/templates/contact.html b/templates/contact.html
index ac528cdb..a342de0d 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -1,8 +1,5 @@
-<a class="app-content-list-item-link" ng-click="ctrl.openContact()">
-    <img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="{{ctrl.contact.photo()}}" />
-    <div class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()===undefined" ng-style="{'background-color': (ctrl.contact.uid() | contactColor) }">{{ ctrl.contact.displayName() | firstCharacter }}</div>
-    <div class="app-content-list-item-star icon-star" data-starred="false"></div>
-    <div class="app-content-list-item-failed icon-error" tooltip-placement="auto left" ng-if="ctrl.contact.failedProps.length>0" uib-tooltip="{{ ctrl.t.errorMessage }}"></div>
-    <div class="app-content-list-item-line-one" ng-class="{'no-line-two':!ctrl.contact.email()}">{{ ctrl.getName() | newContact }}</div>
-    <div class="app-content-list-item-line-two">{{ctrl.contact.email()}}</div>
-</a>
+<img class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()!==undefined" data-ng-src="{{ctrl.contact.photo()}}" />
+<div class="app-content-list-item-icon contact__icon" ng-show="ctrl.contact.photo()===undefined" ng-style="{'background-color': (ctrl.contact.uid() | contactColor) }">{{ ctrl.contact.displayName() | firstCharacter }}</div>
+<div class="app-content-list-item-failed icon-error" tooltip-placement="auto left" ng-if="ctrl.contact.failedProps.length>0" uib-tooltip="{{ ctrl.t.errorMessage }}"></div>
+<div class="app-content-list-item-line-one">{{ ctrl.getName() | newContact }}</div>
+<div class="app-content-list-item-line-two" ng-if="ctrl.contact.email()">{{ctrl.contact.email()}}</div>
diff --git a/templates/contactList.html b/templates/contactList.html
index 1cac2f0d..9cc7c55f 100644
--- a/templates/contactList.html
+++ b/templates/contactList.html
@@ -1,14 +1,12 @@
-<div class="contacts-list" ng-class="{loading: ctrl.loading, 'mobile-show': ctrl.show}">
-        <div class="app-content-list-item"
-			 ng-repeat="contact in ctrl.filteredContacts = (ctrl.contactList | contactGroupFilter:ctrl.routeParams.gid | localeOrderBy:ctrl.sortBy | filter:query | limitTo:ctrl.limitTo) as filtered track by contact.uid()"
-			 contact data="contact"
-			 ng-click="setSelected(contact.uid())"
-			 ng-class="{active: contact.uid() === ctrl.getSelectedId()}">
-	</div>
-	<div ng-show="!ctrl.filteredContacts.length && !ctrl.loading && ctrl.searchTerm !== ''">
-	        <div id="emptycontent" class="emptycontent-search">
-		        <div class="icon-search"></div>
-			<h2>{{ctrl.t.emptySearch}}</h2>
-		</div>
+<a class="app-content-list-item"
+   ng-repeat="contact in ctrl.filteredContacts = (ctrl.contactList | contactGroupFilter:ctrl.routeParams.gid | localeOrderBy:ctrl.sortBy | filter:query | limitTo:ctrl.limitTo ) as filtered track by contact.uid()"
+   contact data="contact"
+   href="#/{{ctrl.routeParams.gid}}/{{contact.uid()}}"
+   ng-class="{active: contact.uid() === ctrl.getSelectedId()}">
+</a>
+<div ng-show="!ctrl.filteredContacts.length && !ctrl.loading && ctrl.searchTerm !== ''">
+        <div id="emptycontent" class="emptycontent-search">
+	        <div class="icon-search"></div>
+		<h2>{{ctrl.t.emptySearch}}</h2>
 	</div>
 </div>
diff --git a/templates/importScreen.html b/templates/importScreen.html
index bcfb79f9..a4e5f8fd 100644
--- a/templates/importScreen.html
+++ b/templates/importScreen.html
@@ -1,9 +1,7 @@
-<div id="importscreen-wrapper" ng-show="ctrl.importing">
-	<div id="importscreen-content">
-		<span class="icon-upload"></span>
-		<h3 id="importscreen-title">{{ctrl.t.importingTo}} {{ctrl.selectedAddressBook}}</h3>
-		<progress id="importscreen-progress" max="100" value="{{ctrl.importPercent}}"></progress>
-		<span id="importscreen-user">{{ctrl.importedUser}}</span>
-		<span id="importscreen-percent">{{ctrl.importPercent}} %</span>
-	</div>
+<div id="importscreen-content" class="emptycontent">
+	<span class="icon-upload"></span>
+	<h3 id="importscreen-title">{{ctrl.t.importingTo}} {{ctrl.selectedAddressBook}}</h3>
+	<progress id="importscreen-progress" max="100" value="{{ctrl.importPercent}}"></progress>
+	<span id="importscreen-user">{{ctrl.importedUser}}</span>
+	<span id="importscreen-percent">{{ctrl.importPercent}} %</span>
 </div>
diff --git a/templates/main.php b/templates/main.php
index c16c7367..c00cdcf9 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -47,10 +47,11 @@ style('contacts', 'vendor/ui-select/select.min');
 	</div>
 
 	<div id="app-content">
-		<div class="app-content-list">
-			<contactlist></contactlist>
+		<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>
-		<div class="app-content-detail" ng-view></div>
-		<importscreen class="emptycontent"></importscreen>
 	</div>
 </div>