Merge pull request #193 from nextcloud/tel-link

Added tel/mail link to tel/mail field

5 files changed, 36 insertions, 8 deletions

diff --git a/css/public/style.css b/css/public/style.css
index a48ee65f..f5764886 100644
--- a/css/public/style.css
+++ b/css/public/style.css
@@ -262,13 +262,23 @@ detailsitem .icon-delete {
 	opacity: .2;
 }
 
-detailsitem .url-link {
+detailsitem .item-action {
 	position: absolute;
-	padding: 8px 10px;
-	margin-left: -30px;
+	padding: 8px 5px;
 	opacity: .5;
 	top: 2px;
-	right: 33px;
+	right: 30px;
+}
+
+detailsitem .item-action ~ input {
+	padding-right: 30px;
+	text-overflow: ellipsis;
+}
+
+detailsitem .item-action i {
+	display: block;
+	height: 20px;
+	width: 20px;
 }
 
 detailsitem.details-item-adr .icon-delete, detailsitem.details-item-n .icon-delete {
@@ -334,7 +344,7 @@ ul.addressBook-share-list li .utils {
 /* override core apps css */
 #app-navigation ul.addressBookList > li span.utils {
 	position: relative;
-	padding: 0; 
+	padding: 0;
 	flex-shrink: 0;
 	height: 20px;
 }
diff --git a/js/services/vCardProperties.js b/js/services/vCardProperties.js
index 11e9c145..4da3fc35 100644
--- a/js/services/vCardProperties.js
+++ b/js/services/vCardProperties.js
@@ -77,7 +77,7 @@ angular.module('contactsApp')
 		email: {
 			multiple: true,
 			readableName: t('contacts', 'Email'),
-			template: 'text',
+			template: 'email',
 			defaultValue: {
 				value:'',
 				meta:{type:['HOME']}
@@ -107,7 +107,7 @@ angular.module('contactsApp')
 			readableName: t('contacts', 'Phone'),
 			template: 'tel',
 			defaultValue: {
-				value:[''],
+				value:'',
 				meta:{type:['HOME,VOICE']}
 			},
 			options: [
diff --git a/templates/detailItems/email.html b/templates/detailItems/email.html
new file mode 100644
index 00000000..d297bf9d
--- /dev/null
+++ b/templates/detailItems/email.html
@@ -0,0 +1,13 @@
+<select ng-model="ctrl.type" ng-model-options="{ debounce: 500 }" ng-change="ctrl.changeType(ctrl.type)">
+    <option ng-repeat="option in ctrl.availableOptions" value="{{option.id}}">{{option.name}}</option>
+</select>
+<a ng-if="ctrl.data.value.length" class="item-action" href="mailto:{{ctrl.data.value}}">
+    <i class="icon-mail"></i>
+</a>
+<input type="email" id="details-{{ctrl.name}}-{{ctrl.index}}" name="email"
+       ng-model="ctrl.data.value" email-model ng-model-options="{ debounce: 500 }"
+       ng-change="ctrl.model.updateContact()" value=""
+       placeholder="{{ctrl.meta.readableName}}"
+       focus-expression="$parent.ctrl.focus === ctrl.name"
+/>
+<button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
diff --git a/templates/detailItems/tel.html b/templates/detailItems/tel.html
index fa886f38..340d90cc 100644
--- a/templates/detailItems/tel.html
+++ b/templates/detailItems/tel.html
@@ -1,6 +1,9 @@
 <select ng-model="ctrl.type" ng-model-options="{ debounce: 500 }" ng-change="ctrl.changeType(ctrl.type)">
     <option ng-repeat="option in ctrl.availableOptions" value="{{option.id}}">{{option.name}}</option>
 </select>
+<a ng-if="ctrl.data.value.length" class="item-action" href="tel:{{ctrl.data.value}}">
+    <i class="icon-comment"></i>
+</a>
 <input type="tel" id="details-{{ctrl.name}}-{{ctrl.index}}" name="phone"
        ng-model="ctrl.data.value" tel-model ng-model-options="{ debounce: 500 }"
        ng-change="ctrl.model.updateContact()" value=""
diff --git a/templates/detailItems/url.html b/templates/detailItems/url.html
index 4d8e783a..e3bf47f0 100644
--- a/templates/detailItems/url.html
+++ b/templates/detailItems/url.html
@@ -1,4 +1,7 @@
 <label for="details-{{ctrl.name}}-{{ctrl.index}}">{{ctrl.meta.readableName}}</label>
+<a ng-if="ctrl.data.value.length" class="item-action" target="_blank" href="{{ctrl.data.value}}">
+	<i class="icon-external"></i>
+</a>
 <input type="url" id="details-{{ctrl.name}}-{{ctrl.index}}" name="{{ctrl.name}}"
 	   ng-model="ctrl.data.value" ng-model-options="{ debounce: 500, allowInvalid: true }"
 	   ng-change="ctrl.model.updateContact()" value=""
@@ -6,4 +9,3 @@
 	   focus-expression="$parent.ctrl.focus === ctrl.name"
 />
 <button ng-click="ctrl.deleteField()" class="icon-delete" title="{{ctrl.t.delete}}"></button>
-<a ng-if="ctrl.data.value.length" class="url-link" target="_blank" href="{{ctrl.data.value}}">↗</a>