Settings section cleanup

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

5 files changed, 52 insertions, 34 deletions

diff --git a/.travis.yml b/.travis.yml
index 86d38e93..25b6e682 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,3 +8,4 @@ script:
 - npm run build
 - npm run lint
 - npm run stylelint
+- npm run test
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss
index c4989001..03cc55bf 100644
--- a/css/SettingsSection.scss
+++ b/css/SettingsSection.scss
@@ -39,12 +39,14 @@
 		width: 120px;
 		margin-left: 5px;
 	}
-	input#sort-by, .multiselect__single {
+	input#sort-by,
+	.multiselect__single {
 		padding: 6px 12px;
 		min-height: 34px;
 		text-align: center;
-		background: url(/core/css/../img/actions/triangle-s.svg) no-repeat right 4px center;
-		background-color: inherit;
+		background-repeat: no-repeat;
+		background-position: right 4px center;
+		@include icon-color('triangle-s', 'actions', $color-black, 1, true);
 		outline: 0;
 		padding-right: 24px !important;
 	}
@@ -54,22 +56,21 @@
 .import-contact {
 	display: flex;
 	flex-direction: column;
-	.multiselect-label {
+	&__multiselect-label {
 		width: 100%;
-		padding: 6px 12px 6px 34px;
+		padding: 6px 12px;
+		padding-left: 34px;
 		margin: 0;
 		border-radius: var(--border-radius) var(--border-radius) 0 0;
-		background: url(/core/css/../img/actions/upload.svg) no-repeat left 9px center;
-		background-color: #f7f7f7;
+		background-position: left 9px center;
 		z-index: 2;
+		&--no-select {
+			border-radius: var(--border-radius);
+		}
 	}
-	.multiselect-vue {
+	&__multiselect.multiselect {
 		width: 100%;
 		margin: 0;
-	}
-	.multiselect-vue .multiselect__tags {
-		border: 1px solid var(--color-border-dark);
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
 		margin-top: -1px;
 	}
 }
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 0d50248a..b85fc5aa 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -275,7 +275,7 @@ export default {
 		 */
 		addressbooksOptions() {
 			return this.addressbooks
-				.filter(addressbook => !addressbook.readOnly)
+				.filter(addressbook => !addressbook.readOnly && addressbook.enabled)
 				.map(addressbook => {
 					return {
 						id: addressbook.id,
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 6f2e3e42..c365445f 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -38,8 +38,8 @@
 			<button :title="t('contacts', 'Delete')" class="property__delete icon-delete" @click="deleteProperty" />
 
 			<multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')"
-				class="multiselect-vue property__value" track-by="id" label="name"
-				@input="updateValue" />
+				:disabled="isSingleOption" class="multiselect-vue property__value" track-by="id"
+				label="name" @input="updateValue" />
 		</div>
 	</div>
 </template>
@@ -97,6 +97,10 @@ export default {
 			// length is one & add one space at the end
 			return hasTitle + 1 + isLast
 		},
+		// is there only one option available
+		isSingleOption() {
+			return this.propModel.options.length <= 1
+		},
 
 		// matching value to the options we provide
 		matchedOptions: {
diff --git a/src/components/Settings/SettingsImportContacts.vue b/src/components/Settings/SettingsImportContacts.vue
index 8b43191b..da600275 100644
--- a/src/components/Settings/SettingsImportContacts.vue
+++ b/src/components/Settings/SettingsImportContacts.vue
@@ -22,18 +22,24 @@
 
 <template>
 	<div class="import-contact">
-		<input id="contact-import" type="file" class="hidden-visually"
-			@change="processFile">
-		<label id="upload" for="contact-import" class="button multiselect-label icon-upload no-select">
-			{{ t('contacts', 'Import into') }}
-		</label>
-		<multiselect
-			v-model="selectedAddressbook"
-			:options="options"
-			:disabled="isSingleAddressbook"
-			:placeholder="t('contacts', 'Contacts')"
-			label="displayName"
-			class="multiselect-vue" />
+		<template v-if="!isNoAddressbookAvailable">
+			<input id="contact-import" type="file" class="hidden-visually"
+				@change="processFile">
+			<label id="upload" for="contact-import" class="button import-contact__multiselect-label icon-upload">
+				{{ t('contacts', 'Import into') }}
+			</label>
+			<multiselect
+				v-model="selectedAddressbook"
+				:options="options"
+				:disabled="isSingleAddressbook"
+				:placeholder="t('contacts', 'Contacts')"
+				label="displayName"
+				class="multiselect-vue import-contact__multiselect" />
+		</template>
+		<button v-else id="upload" for="contact-import"
+			class="button import-contact__multiselect-label import-contact__multiselect--no-select icon-error">
+			{{ t('contacts', 'Importing is disabled because there are no address books available') }}
+		</button>
 	</div>
 </template>
 
@@ -60,12 +66,15 @@ export default {
 			return this.$store.getters.getAddressbooks
 		},
 		options() {
-			return this.addressbooks.map(addressbook => {
-				return {
-					id: addressbook.id,
-					displayName: addressbook.displayName
+			return this.addressbooks
+				.filter(addressbook => !addressbook.readOnly && addressbook.enabled)
+				.map(addressbook => {
+					return {
+						id: addressbook.id,
+						displayName: addressbook.displayName
+					}
 				}
-			})
+				)
 		},
 		importState() {
 			return this.$store.getters.getImportState
@@ -82,9 +91,12 @@ export default {
 				this.importDestination = value
 			}
 		},
-		// disable multiselect when there is at most one address book
+		// disable multiselect when there is only one address book
 		isSingleAddressbook() {
-			return this.addressbooks.length <= 1
+			return this.options.length === 1
+		},
+		isNoAddressbookAvailable() {
+			return this.options.length < 1
 		}
 	},
 	methods: {