Update template and css

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 74 insertions, 8 deletions

diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
new file mode 100644
index 00000000..8a611d37
--- /dev/null
+++ b/src/components/Properties/PropertyActions.vue
@@ -0,0 +1,58 @@
+<!--
+  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<Actions class="property__actions">
+		<ActionButton icon="icon-delete" @click="deleteProperty">
+			{{ t('contacts', 'Delete') }}
+		</ActionButton>
+		<ActionButton v-for="(action, index) in actions" :key="index"
+			:icon="action.icon" @click="action.action">
+			{{ action.text }}
+		</ActionButton>
+	</Actions>
+</template>
+
+<script>
+import { ActionButton } from 'nextcloud-vue'
+
+export default {
+	name: 'PropertyActions',
+
+	components: {
+		ActionButton
+	},
+
+	props: {
+		actions: {
+			type: Array,
+			default: () => []
+		}
+	},
+
+	methods: {
+		deleteProperty() {
+			this.$emit('delete')
+		}
+	}
+}
+</script>
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 7f003aa9..4700615f 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -44,7 +44,7 @@
 			</div>
 
 			<!-- props actions -->
-			<action :actions="actions" class="property__actions" />
+			<PropertyActions :actions="actions" @delete="deleteProperty" />
 
 			<!-- Real input where the picker shows -->
 			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
@@ -63,13 +63,15 @@ import { VCardTime } from 'ical.js'
 
 import PropertyMixin from 'Mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
+import PropertyActions from './PropertyActions'
 
 export default {
 	name: 'PropertyDateTime',
 
 	components: {
 		DatetimePicker,
-		PropertyTitle
+		PropertyTitle,
+		PropertyActions
 	},
 
 	mixins: [PropertyMixin],
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 48d65bf8..d14e83e4 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -50,7 +50,7 @@
 				class="property__value" type="text" @input="updateValue">
 
 			<!-- props actions -->
-			<action :actions="actions" class="property__actions" />
+			<PropertyActions :actions="actions" @delete="deleteProperty" />
 		</div>
 
 		<!-- force order based on model -->
@@ -79,12 +79,14 @@
 <script>
 import PropertyMixin from 'Mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
+import PropertyActions from './PropertyActions'
 
 export default {
 	name: 'PropertyText',
 
 	components: {
-		PropertyTitle
+		PropertyTitle,
+		PropertyActions
 	},
 
 	mixins: [PropertyMixin],
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 47be44ec..559aebc8 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -38,7 +38,7 @@
 			</div>
 
 			<!-- props actions -->
-			<action :actions="actions" class="property__actions" />
+			<PropertyActions :actions="actions" @delete="deleteProperty" />
 
 			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
 				:disabled="isSingleOption || isReadOnly" class="property__value" track-by="id"
@@ -50,12 +50,14 @@
 <script>
 import PropertyMixin from 'Mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
+import PropertyActions from './PropertyActions'
 
 export default {
 	name: 'PropertySelect',
 
 	components: {
-		PropertyTitle
+		PropertyTitle,
+		PropertyActions
 	},
 
 	mixins: [PropertyMixin],
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 48745571..8ccaf969 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -60,7 +60,7 @@
 				target="_blank" />
 
 			<!-- props actions -->
-			<action :actions="actions" class="property__actions" />
+			<PropertyActions :actions="actions" @delete="deleteProperty" />
 		</div>
 	</div>
 </template>
@@ -69,12 +69,14 @@
 import debounce from 'debounce'
 import PropertyMixin from 'Mixins/PropertyMixin'
 import PropertyTitle from './PropertyTitle'
+import PropertyActions from './PropertyActions'
 
 export default {
 	name: 'PropertyText',
 
 	components: {
-		PropertyTitle
+		PropertyTitle,
+		PropertyActions
 	},
 
 	mixins: [PropertyMixin],