Fix/various design

css/contacts.scss

@@ -28,7 +28,6 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
 
 // components
 @import 'SettingsSection';
-@import 'Settings/SettingsAddressbook';
 @import 'Settings/SettingsAddressbookShares';
 @import 'Settings/SettingsAddressbookSharee';
 @import 'ContactsListItem';

package.json

@@ -33,7 +33,7 @@
 		"stylelint:fix": "stylelint src --fix"
 	},
 	"dependencies": {
-		"@mattkrick/sanitize-svg": "^0.2.1",
+		"@mattkrick/sanitize-svg": "^0.3.0",
 		"@nextcloud/auth": "^1.3.0",
 		"@nextcloud/axios": "^1.4.0",
 		"@nextcloud/dialogs": "^2.0.1",

src/components/ContactDetails/ContactDetailsAvatar.vue

@@ -236,8 +236,7 @@ export default {
 							if (e.target.result.indexOf('image/svg') > -1) {
 								const imageSvg = atob(imageBase64)
 								const cleanSvg = await sanitizeSVG(imageSvg)
-								// TODO: replace haveUnsafeSvgEvents with https://github.com/mattkrick/sanitize-svg/pull/2
-								if (!cleanSvg || self.haveUnsafeSvgEvents(imageSvg)) {
+								if (!cleanSvg) {
 									throw new Error('Unsafe svg image', imageSvg)
 								}
 							}
@@ -262,21 +261,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Does the provided svg have unsafe js events
-		 * @param {string} svgText the svg as string
-		 * @returns {boolean}
-		 */
-		haveUnsafeSvgEvents(svgText) {
-			const div = window.document.createElement('div')
-			div.innerHTML = svgText
-
-			const svgEl = div.firstElementChild
-			const attributes = [].slice.call(svgEl.attributes) || []
-			const events = attributes.filter(attr => attr.name.indexOf('on') === 0)
-			return events.length !== 0
-		},
-
 		/**
 		 * Reset image pciker input
 		 */

src/components/EntityPicker/EntityBubble.vue

@@ -93,8 +93,6 @@ export default {
 }
 
 .entity-picker__bubble {
-	// Add space between bubbles
-	margin-right: 4px;
 	display: flex;
 
 	&-delete {
@@ -111,5 +109,4 @@ export default {
 		}
 	}
 }
-
 </style>

src/components/EntityPicker/EntityPicker.vue

@@ -291,7 +291,7 @@ export default {
 
 // Dialog variables
 $dialog-margin: 20px;
-$dialog-width: 300px;
+$dialog-width: 320px;
 $dialog-height: 480px;
 $entity-spacing: 4px;
 
@@ -317,10 +317,11 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 	the margin applied to the content is added to the total modal width,
 	so here we subtract it to the width and height of the content.
 	*/
-	width: $dialog-width - $dialog-margin * 2;
-	height: $dialog-height - $dialog-margin * 2;
+	width: $dialog-width;
+	max-width: 100vw;
+	height: $dialog-height;
+	max-height: calc(100vh - #{$dialog-margin} * 2 - 10px);
 	margin: $dialog-margin;
-	max-height: calc(100vh - $dialog-margin * 2 - 10px);
 
 	&__search {
 		position: relative;
@@ -329,10 +330,10 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 		&-input {
 			width: 100%;
 			height: $clickable-area - $entity-spacing !important;
+			margin: $entity-spacing 0;
 			padding-left: $clickable-area;
 			font-size: 16px;
 			line-height: $clickable-area - $entity-spacing;
-			margin: $entity-spacing 0;
 		}
 		&-icon {
 			position: absolute;
@@ -345,19 +346,26 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 		display: flex;
 		overflow-y: auto;
 		align-content: flex-start;
+		justify-content: space-between;
 		flex: 1 0 auto;
 		flex-wrap: wrap;
 		// half a line height to know there is more lines
 		max-height: 6.5em;
 		padding: $entity-spacing 0;
 		border-bottom: 1px solid var(--color-background-darker);
 		background: var(--color-main-background);
+
+		// Allows 2 per line
+		.entity-picker__bubble {
+			flex: 0 1 50%;
+			max-width: calc(50% - #{$entity-spacing});
+		}
 	}
 
 	&__options {
-		margin: $entity-spacing 0;
 		overflow-y: auto;
 		flex: 1 1 100%;
+		margin: $entity-spacing 0;
 	}
 
 	&__navigation {
@@ -367,12 +375,16 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 		flex: 0 0;
 		justify-content: space-between;
 		// Same as above
-		width: $dialog-width - $dialog-margin * 2;
+		width: 100%;
 		box-shadow: 0 -10px 5px var(--color-main-background);
 		&__button-right {
 			margin-left: auto;
 		}
 	}
+
+	&::v-deep &__bubble  {
+		margin-bottom: $entity-spacing;
+	}
 }
 
 // Properly center Entity Picker empty content

src/components/ProcessingScreen.vue

@@ -1,5 +1,5 @@
 <template>
-	<EmptyContent class="processing-screen__wrapper" icon="icon-contacts">
+	<EmptyContent class="processing-screen__wrapper" icon="icon-contacts-dark">
 		<slot />
 		<template #desc>
 			<div class="processing-screen__progress">
@@ -62,6 +62,7 @@ export default {
 	&__desc {
 		display: inline-flex;
 		align-items: center;
+		width: 100%;
 		margin-top: 22px;
 		color: var(--color-text-maxcontrast);
 

src/components/Settings/SettingsAddressbook.vue

@@ -23,7 +23,7 @@
 <template>
 	<li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook">
 		<!-- addressbook name -->
-		<span class="addressbook__name">
+		<span class="addressbook__name" :title="addressbook.displayName">
 			{{ addressbook.displayName }}
 		</span>
 
@@ -278,3 +278,48 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.addressbook {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	> .addressbook__name {
+		+ a,
+		+ div {
+			// put actions at the end
+			margin-left: auto;
+		}
+	}
+
+	&__name {
+		display: block;
+		flex: 0 1 auto;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	&__share,
+	&__menu .icon-more {
+		width: 44px;
+		height: 44px;
+		opacity: .5;
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: .7;
+		}
+	}
+	&__share {
+		&--shared {
+			opacity: .7;
+		}
+	}
+	&--disabled &__name {
+		opacity: .5;
+	}
+}
+</style>

src/components/Settings/SettingsImportContacts.vue

@@ -196,12 +196,14 @@ export default {
 
 			const file = event.target.files[0]
 			const reader = new FileReader()
-			const selectedAddressbook = this.selectedAddressbook
+
+			const addressbook = this.selectedAddressbook
+			this.$store.dispatch('setAddressbook', addressbook.displayName)
 
 			const self = this
 			reader.onload = function(e) {
 				self.isOpened = false
-				self.$store.dispatch('importContactsIntoAddressbook', { vcf: reader.result, addressbook: selectedAddressbook })
+				self.$store.dispatch('importContactsIntoAddressbook', { vcf: reader.result, addressbook })
 
 				// reset input
 				event.target.value = ''
@@ -223,11 +225,12 @@ export default {
 					cancelToken: source.token,
 				})
 
+				const addressbook = this.selectedAddressbook
 				this.$store.dispatch('changeStage', 'parsing')
-				this.$store.dispatch('setAddressbook', this.selectedAddressbook.displayName)
+				this.$store.dispatch('setAddressbook', addressbook.displayName)
 
 				if (file.data) {
-					await this.$store.dispatch('importContactsIntoAddressbook', { vcf: file.data, addressbook: this.selectedAddressbook })
+					await this.$store.dispatch('importContactsIntoAddressbook', { vcf: file.data, addressbook })
 				}
 			} catch (error) {
 				console.error('Something wrong happened while processing local file', error)

src/services/parseVcf.js

@@ -28,7 +28,12 @@ export default function parseVcf(data = '', addressbook) {
 	const vCards = data.match(regexp)
 
 	if (!vCards) {
-		console.error('Error during the parsing of the following vcf file: ', data)
+		console.error('Error during the parsing of the following vcf file', data)
+		return []
+	}
+
+	if (!addressbook) {
+		console.error('Invalid addressbook', addressbook)
 		return []
 	}
 

src/store/addressbooks.js

@@ -407,6 +407,7 @@ const actions = {
 
 		// create the array of requests to send
 		contacts.map(async contact => {
+			console.info(contact)
 
 			// Get vcard string
 			try {