Move add-contact and add-group buttons back to menu.

css/contacts.css

@@ -106,20 +106,21 @@
 	z-index: 100;
 }
 #grouplist .oc-addnew-init {
-	padding: 0 12px;
+	padding: 0 31px;
 }
 #grouplist .add-contact:before {
+	position: absolute;
 	content: '+';
 	font-weight: bold;
-	font-size: 180%;
+	font-size: 160%;
-	padding-right: 2px;
+	left: 12px;
+}
+#grouplist .add-contact {
+	padding: 0 31px;
 }
 #grouplist > li {
 	height: 44px;
 }
-#grouplist .open {
-	margin-top: 5px;
-}
 
 .hidden-on-load {
 	display: none;

css/jquery.ocaddnew.css

@@ -1,37 +1,86 @@
-/**
+
- * ownCloud - Add new jQuery plugin
+.oc-addnew {
- *
+        display: block !important;
- * @author Bernhard Posselt, Thomas Tanghus
+        padding: 0 !important;
- * @copyright 2012 Bernhard Posselt nukeawhale@gmail.com
+}
- *
+.oc-addnew li:first-child {
- * This library is free software; you can redistribute it and/or
+        display: block;
- * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+}
- * License as published by the Free Software Foundation; either
+.oc-addnew li:not(:first-child) {
- * version 3 of the License, or any later version.
+        display: none;
- *
+}
- * This library is distributed in the hope that it will be useful,
+.oc-addnew.open li:first-child {
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
+        display: none;
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+}
- * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+.oc-addnew.open li:not(:first-child) {
- *
+        display: block;
- * You should have received a copy of the GNU Affero General Public
+}
- * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+.oc-addnew > li {
- *
+}
- */
+.oc-addnew > li > a.oc-addnew-init {
+}
+.oc-addnew > li > a.oc-addnew-init:before {
+		position: absolute;
+        content: '+';
+        font-weight: bold;
+        font-size: 160%;
+		left: 12px;
+}
 
 .oc-addnew input[type=text] {
-	width: 200px;
+        width: 198px !important;
-	margin: 0;
+        margin-top: 5px;
-	border-width: 0;
+        margin-left: 6px;
-	height: 34px;
+        height: 30px !important;
 }
+
+.oc-addnew select {
+        width: 133px;
+        margin-top: 1px !important;
+        height: 30px;
+        background-color: #eee;
+}
+
+.oc-addnew input,
+.oc-addnew select {
+        margin: 0 0 5px 0;
+        display: inline-block;
+        float: left;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+}
+
 .oc-addnew button {
-	height: 34px;
+        margin: 5px 0;
-	margin: 0;
+        display: inline-block;
-	border-width: 0;
+        float: left;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        height: 34px !important;
 }
-.oc-addnew button:hover {
+
-	height: 34px;
+.oc-addnew .action-button {
-	margin: 0;
+        width: 30px;
-	border-width: 0;
+        background-position: center;
+        background-repeat: no-repeat;        
+}
+
+.oc-addnew .back-button {
+        border-radius: 0;
+        background-image: url('%webroot%/core/img/actions/delete.svg');
+}
+
+.oc-addnew .new-button {
+        border-radius: 0;
+        background-image: url('%webroot%/core/img/add.svg');
+        border-top-right-radius: 5px; 
+        border-bottom-right-radius: 5px; 
+}
+
+.oc-addnew .create-button {
+        border-radius: 0;
+        background-image: url('%appswebroot%/contacts/img/checkmark-gray.svg');
+        border-top-right-radius: 5px; 
+        border-bottom-right-radius: 5px; 
 }

js/app.js

@@ -287,12 +287,11 @@ OC.Contacts = OC.Contacts || {
 		this.$navigation = $('#app-navigation');
 		//this.$header = $('#contactsheader');
 		this.$groupList = $('#grouplist');
-		this.$controls = $('#controls');
 		this.$contactList = $('#contactlist');
 		this.$contactListHeader = $('#contactsHeader');
 		this.$sortOrder = this.$contactListHeader.find('.action.sort');
 		this.$sortOrder.val(contacts_sortby||'fn');
-		this.$headeractions = this.$controls.find('.contact-actions');
+		this.$headeractions = this.$groupList.find('.contact-actions');
 		this.$toggleAll = this.$contactListHeader.find('.toggle');
 		this.$groups = this.$contactListHeader.find('.groups');
 		this.$ninjahelp = $('#ninjahelp');
@@ -1003,7 +1002,6 @@ OC.Contacts = OC.Contacts || {
 
 		var addContact = function() {
 			console.log('add');
-			self.$toggleAll.hide();
 			if(self.currentid) {
 				if(self.currentid === 'new') {
 					return;
@@ -1043,7 +1041,7 @@ OC.Contacts = OC.Contacts || {
 			addContact();
 		});
 
-		this.$controls.on('click keydown', '.add-contact', function(event) {
+		this.$groupList.on('click keydown', '.add-contact', function(event) {
 			if(wrongKey(event)) {
 				return;
 			}

js/groups.js

@@ -48,7 +48,7 @@ OC.Contacts = OC.Contacts || {};
 				}
 			}
 		});
-		var $addInput = $('#controls').find('.add-group');
+		var $addInput = this.$groupList.find('.add-group');
 		$addInput.addnew({
 			addText: t('core', 'Add'),
 			ok: function(event, name) {

templates/contacts.php

@@ -2,12 +2,6 @@
 	<!--
 	<div id="controls">
 		<div class="actions creatable hidden-on-load">
-			<div class="button new">
-				<a class="add-contact"><?php p($l->t('New Contact')); ?></a>
-			</div>
-			<div class="button new">
-				<input class="add-group hidden" type="text" tabindex="0" autofocus placeholder="<?php p($l->t('Group name')); ?>" title="<?php p($l->t('New Group')); ?>" />
-			</div>
 			<div class="button contact-actions">
 				<a class="delete svg action text permanent"><?php p($l->t('Delete')); ?></a>
 			</div>
@@ -27,7 +21,15 @@
 	-->
 	
 	<div id="app-navigation" class="loading">
-		<ul id="grouplist">
+		<ul id="grouplist" class="hidden-on-load">
+			<li class="special">
+				<a role="button" class="add-contact">
+				  <?php p($l->t('New contact')); ?>
+				</a>
+			</li>
+			<li class="special">
+				<input class="add-group hidden" type="text" tabindex="0" autofocus placeholder="<?php p($l->t('Group name')); ?>" title="<?php p($l->t('New group')); ?>" />
+			</li>
 		</ul>
 		<div id="app-settings">
 			<div id="app-settings-header">