remove delete buttons and other actions if contact is not readable

5 files changed, 31 insertions, 6 deletions

diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index ba6dcac4..8dbf2785 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -22,6 +22,7 @@
 $property-label-min-width: 60px;
 $property-label-max-width: 2 * $property-label-min-width;
 $property-value-max-width: 250px;
+$property-ext-padding-right: 8px;
 
 .property {
 	position: relative;
@@ -170,7 +171,7 @@ $property-value-max-width: 250px;
 	&__ext {
 		position: absolute;
 		// 8px padding + actions
-		right: 44px + 8px;
+		right: 44px + $property-ext-padding-right;
 		opacity: 0;
 		&:hover,
 		&:focus,
@@ -179,6 +180,10 @@ $property-value-max-width: 250px;
 		}
 	}
 
+	.no-move {
+		right: $property-ext-padding-right;
+	}
+
 	// Delete property button + actions
 	&__actions {
 		z-index: 10;
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 168458c2..03144509 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -52,7 +52,9 @@
 			</div>
 
 			<!-- Real input where the picker shows -->
-			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()"
+			<DatetimePicker
+				v-if="!isReadOnly"
+				:value="vcardTimeLocalValue.toJSDate()"
 				:minute-step="10"
 				:lang="lang"
 				:clearable="false"
@@ -64,8 +66,17 @@
 				confirm
 				@confirm="debounceUpdateValue" />
 
+			<input v-else
+				:readonly="true"
+				:value="formatDateTime()"
+				class="property__value">
+
 			<!-- props actions -->
-			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
+			<PropertyActions
+				v-if="!isReadOnly"
+				:actions="actions"
+				:property-component="this"
+				@delete="deleteProperty" />
 		</div>
 	</div>
 </template>
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index efa09c5c..cd4107e9 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -64,6 +64,7 @@
 
 			<!-- props actions -->
 			<PropertyActions class="property__actions--floating"
+				v-if="!isReadOnly"
 				:actions="actions"
 				:property-component="this"
 				@delete="deleteProperty" />
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index a2c5989d..1ddd6893 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -49,7 +49,11 @@
 				@input="updateValue" />
 
 			<!-- props actions -->
-			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
+			<PropertyActions
+				v-if="!isReadOnly"
+				:actions="actions"
+				:property-component="this"
+				@delete="deleteProperty" />
 		</div>
 	</div>
 </template>
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 089c47da..c668a09f 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -77,11 +77,15 @@
 			<!-- external link -->
 			<a v-if="haveExtHandler"
 				:href="externalHandler"
-				class="property__ext icon-external"
+				:class="{'property__ext': true, 'icon-external': true, 'no-move': isReadOnly}"
 				target="_blank" />
 
 			<!-- props actions -->
-			<PropertyActions :actions="actions" :property-component="this" @delete="deleteProperty" />
+			<PropertyActions
+				v-if="!isReadOnly"
+				:actions="actions"
+				:property-component="this"
+				@delete="deleteProperty" />
 		</div>
 	</div>
 </template>