fixup! Add quick actions for contacts

Signed-off-by: greta <[email protected]>

src/components/ContactDetails.vue

@@ -219,10 +219,12 @@
 
 			<!-- contact details loading -->
 			<IconLoading v-if="loadingData" :size="20" class="contact-details" />
-			<!-- contact details -->
+			<!-- quick actions -->
 			<div v-else-if="!loadingData" class="contact-details-wrapper">
 				<div v-if="!editMode" class="quick-actions">
-					<Actions v-if="emailAddressProperties">
+					<Actions v-if="emailAddressProperties"
+						type="secondary"
+						:menu-name="(t('contacts', 'Mail'))">
 						<template #icon>
 							<IconMail :size="20" />
 						</template>
@@ -235,7 +237,8 @@
 							{{ emailAddress }}
 						</ActionLink>
 					</Actions>
-					<Actions v-if="phoneNumberProperties">
+					<Actions v-if="phoneNumberProperties"
+						:menu-name="(t('contacts', 'Phone'))">
 						<template #icon>
 							<IconCall :size="20" />
 						</template>
@@ -248,17 +251,22 @@
 							{{ phoneNumber }}
 						</ActionLink>
 					</Actions>
-					<NcButton v-if="isTalkEnabled && isInSystemAddressBook"
-						class="icon-talk"
-						:href="callUrl" />
-
+					<Actions>
+						<ActionButton v-if="isTalkEnabled && isInSystemAddressBook"
+							class="icon-talk"
+							:href="callUrl">
+							{{ (t('contacts', 'Talk')) }}
+						</ActionButton>
+					</Actions>
 					<NcButton v-if="profilePageLink"
 						:href="profilePageLink">
 						<template #icon>
 							<IconAccount :size="20" />
 						</template>
+						{{ (t('contacts', 'Profile')) }}
 					</NcButton>
 				</div>
+				<!-- contact details -->
 				<section class="contact-details">
 					<!-- properties iteration -->
 					<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
@@ -277,27 +285,28 @@
 							:is-read-only="isReadOnly" />
 					</div>
 				</section>
-			</div>
-			<!-- addressbook change select - no last property because class is not applied here,
+
+				<!-- addressbook change select - no last property because class is not applied here,
 					empty property because this is a required prop on regular property-select. But since
 					we are hijacking this... (this is supposed to be used with a ICAL.property, but to avoid code
 					duplication, we created a fake propModel and property with our own options here) -->
-			<PropertySelect :prop-model="addressbookModel"
-				:options="addressbooksOptions"
-				:value.sync="addressbook"
-				:is-first-property="true"
-				:is-last-property="true"
-				:property="{}"
-				:hide-actions="true"
-				:is-read-only="isReadOnly"
-				class="property--addressbooks property--last" />
-
-			<!-- Groups always visible -->
-			<PropertyGroups :prop-model="groupsModel"
-				:value.sync="localContact.groups"
-				:contact="contact"
-				:is-read-only="isReadOnly"
-				class="property--groups property--last" />
+				<PropertySelect :prop-model="addressbookModel"
+					:options="addressbooksOptions"
+					:value.sync="addressbook"
+					:is-first-property="true"
+					:is-last-property="true"
+					:property="{}"
+					:hide-actions="true"
+					:is-read-only="isReadOnly"
+					class="property--addressbooks property--last" />
+
+				<!-- Groups always visible -->
+				<PropertyGroups :prop-model="groupsModel"
+					:value.sync="localContact.groups"
+					:contact="contact"
+					:is-read-only="isReadOnly"
+					class="property--groups property--last" />
+			</div>
 			<!-- new property select -->
 			<AddNewProp v-if="!isReadOnly"
 				:bus="bus"
@@ -974,7 +983,7 @@ export default {
 <style lang="scss" scoped>
 // List of all properties
 .contact-details-wrapper {
-	display: block;
+	display: inline;
 	align-items: flex-start;
 	padding: 50px 0 20px;
 	gap: 15px;
@@ -994,11 +1003,13 @@ section.contact-details {
 	flex: 1 0 auto;
 	gap: 15px;
 	float: right;
+	margin-right: 100px;
+	margin-top: 40px;
 
 }
 	@media only screen and (max-width: 600px) {
 		.quick-actions {
-			margin-right:103px;
+			float: left;
 			margin-top: -44px;
 		}
 	}