Merge branch 'vue' into vue-cdav-lib

7 files changed, 22 insertions, 8 deletions

diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index ac8374aa..289efe3a 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -22,10 +22,11 @@
 
 <template>
 	<!-- If not in the rfcProps then we don't want to display it -->
-	<component v-if="propModel && propType !== 'unknown'" :is="componentInstance" :select-type.sync="selectType"
-		:prop-model="propModel" :value.sync="value" :is-first-property="isFirstProperty"
-		:property="property" :is-last-property="isLastProperty" :class="{'property--last': isLastProperty}"
-		:contact="contact" @delete="deleteProp" />
+	<component v-if="propModel && propType !== 'unknown'"
+		:is="componentInstance" :select-type.sync="selectType" :prop-model="propModel"
+		:value.sync="value" :is-first-property="isFirstProperty" :property="property"
+		:is-last-property="isLastProperty" :class="{'property--last': isLastProperty}" :contact="contact"
+		@delete="deleteProp" />
 </template>
 
 <script>
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index bc903273..db312bcd 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -23,7 +23,8 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" />
+		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index dcbf080f..6804c9e5 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -23,7 +23,8 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" />
+		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 21e28dc2..a6469f00 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -23,7 +23,8 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" />
+		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+			:info="propModel.info" />
 
 		<div class="property__row">
 
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 9cf499c4..d5488bab 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -23,7 +23,8 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" />
+		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+			:info="propModel.info" />
 
 		<div class="property__row">
 			<!-- type selector -->
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index 360e813a..f60eaf36 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -24,6 +24,8 @@
 	<h3 class="property__title property__row">
 		<div :class="icon" class="property__label property__title--icon" />
 		{{ readableName }}
+		<!-- display tooltip with hint if available -->
+		<div v-tooltip.right="info" v-if="info" class="icon-details" />
 	</h3>
 </template>
 
@@ -41,6 +43,11 @@ export default {
 			type: String,
 			default: '',
 			required: true
+		},
+		info: {
+			type: String,
+			default: '',
+			required: false
 		}
 	}
 }
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index f1a5e083..8b4a6731 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -185,6 +185,7 @@ const properties = {
 	relationship: {
 		readableName: t('contacts', 'Relationship'),
 		force: 'select',
+		icon: 'icon-group',
 		info: t(
 			'contacts',
 			'Specify a relationship between you and the entity represented by this vCard.'
@@ -207,6 +208,7 @@ const properties = {
 	related: {
 		multiple: true,
 		readableName: t('contacts', 'Related'),
+		icon: 'icon-group',
 		info: t(
 			'contacts',
 			'Specify a relationship between another entity and the entity represented by this vCard.'