Streamline Settings

Signed-off-by: szaimen <szaimen@e.mail.de>
nextcloud · Jul 26, 2021 · a0ecaa6 · a0ecaa6
1 parent 7ec9046
commit a0ecaa6
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 88 deletions.
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss
@@ -26,22 +26,50 @@
 	.settings-section {
 		display: flex;
 		align-items: center;
-		margin-top: 5px;
 	}
 }
 
+.new-addressbook-entry {
+	display: flex;
+	align-items: center;
+}
+
 #new-addressbook-form {
 	display: flex;
+	width: calc(100% - 44px);
 	input {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
 }
 
+.settings-addressbook-list {
+	display: flex;
+	li {
+		width: calc(100% - 44px);
+	}
+}
+
+.settings-line__icon {
+	width: 44px;
+	height: 44px;
+}
+
+.social-sync__list-entry {
+	label::before {
+		margin-left: 14px !important;
+		margin-right: 14px !important;
+	}
+	em {
+		margin-left: 44px !important;
+	}
+}
+
 // Sort Contacts
 .sort-contacts {
+	display: flex;
 	.multiselect {
-		width: 100%;
+		width: calc(100% - 44px);
 		margin: 0;
 		.multiselect__single {
 			padding-right: 24px !important;
@@ -56,7 +84,6 @@
 // Import contacts
 .import-contact {
 	display: flex;
-	flex-direction: column;
 	&__multiselect-label {
 		z-index: 2;
 		width: 100%;
@@ -74,6 +101,9 @@
 		margin: 0;
 		margin-top: -1px;
 	}
+	&__button-main {
+		width: calc(100% - 44px) !important;
+	}
 }
 
 // Add address book

diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue
@@ -21,75 +21,78 @@
   -
   -->
 <template>
-	<li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook">
-		<!-- addressbook name -->
-		<span class="addressbook__name" :title="addressbook.displayName">
-			{{ addressbook.displayName }}
-		</span>
+	<div class="settings-addressbook-list">
+		<div class="icon-group settings-line__icon"></div>
+		<li :class="{'addressbook--disabled': !addressbook.enabled}" class="addressbook">
+			<!-- addressbook name -->
+			<span class="addressbook__name" :title="addressbook.displayName">
+				{{ addressbook.displayName }}
+			</span>
 
-		<!-- sharing button -->
-		<a v-if="!addressbook.readOnly"
-			v-tooltip.top="sharedWithTooltip"
-			:class="{'addressbook__share--shared': hasShares}"
-			:title="sharedWithTooltip"
-			href="#"
-			class="addressbook__share icon-shared"
-			@click="toggleShare" />
+			<!-- sharing button -->
+			<a v-if="!addressbook.readOnly"
+				v-tooltip.top="sharedWithTooltip"
+				:class="{'addressbook__share--shared': hasShares}"
+				:title="sharedWithTooltip"
+				href="#"
+				class="addressbook__share icon-shared"
+				@click="toggleShare" />
 
-		<!-- popovermenu -->
-		<Actions class="addressbook__menu" menu-align="right">
-			<!-- copy addressbook link -->
-			<ActionLink
-				:href="addressbook.url"
-				:icon="copyLinkIcon"
-				@click.stop.prevent="copyToClipboard(addressbookUrl)">
-				{{ copyButtonText }}
-			</ActionLink>
+			<!-- popovermenu -->
+			<Actions class="addressbook__menu" menu-align="right">
+				<!-- copy addressbook link -->
+				<ActionLink
+					:href="addressbook.url"
+					:icon="copyLinkIcon"
+					@click.stop.prevent="copyToClipboard(addressbookUrl)">
+					{{ copyButtonText }}
+				</ActionLink>
 
-			<!-- download addressbook -->
-			<ActionLink
-				:href="addressbook.url + '?export'"
-				icon="icon-download">
-				{{ t('contacts', 'Download') }}
-			</ActionLink>
+				<!-- download addressbook -->
+				<ActionLink
+					:href="addressbook.url + '?export'"
+					icon="icon-download">
+					{{ t('contacts', 'Download') }}
+				</ActionLink>
 
-			<template v-if="!addressbook.readOnly">
-				<!-- rename addressbook -->
-				<ActionButton v-if="!editingName"
-					icon="icon-rename"
-					@click.stop.prevent="renameAddressbook">
-					{{ t('contacts', 'Rename') }}
-				</ActionButton>
-				<ActionInput v-else
-					ref="renameInput"
-					:disabled="renameLoading"
-					:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
-					:value="addressbook.displayName"
-					@submit="updateAddressbookName" />
+				<template v-if="!addressbook.readOnly">
+					<!-- rename addressbook -->
+					<ActionButton v-if="!editingName"
+						icon="icon-rename"
+						@click.stop.prevent="renameAddressbook">
+						{{ t('contacts', 'Rename') }}
+					</ActionButton>
+					<ActionInput v-else
+						ref="renameInput"
+						:disabled="renameLoading"
+						:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
+						:value="addressbook.displayName"
+						@submit="updateAddressbookName" />
 
-				<!-- enable/disable addressbook -->
-				<ActionCheckbox v-if="!toggleEnabledLoading"
-					:checked="enabled"
-					@change.stop.prevent="toggleAddressbookEnabled">
-					{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
-				</ActionCheckbox>
-				<ActionButton v-else
-					icon="icon-loading-small">
-					{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
-				</ActionButton>
-			</template>
+					<!-- enable/disable addressbook -->
+					<ActionCheckbox v-if="!toggleEnabledLoading"
+						:checked="enabled"
+						@change.stop.prevent="toggleAddressbookEnabled">
+						{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
+					</ActionCheckbox>
+					<ActionButton v-else
+						icon="icon-loading-small">
+						{{ enabled ? t('contacts', 'Enabled') : t('contacts', 'Disabled') }}
+					</ActionButton>
+				</template>
 
-			<!-- delete addressbook -->
-			<ActionButton v-if="hasMultipleAddressbooks"
-				:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
-				@click="confirmDeletion">
-				{{ t('contacts', 'Delete') }}
-			</ActionButton>
-		</Actions>
+				<!-- delete addressbook -->
+				<ActionButton v-if="hasMultipleAddressbooks"
+					:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
+					@click="confirmDeletion">
+					{{ t('contacts', 'Delete') }}
+				</ActionButton>
+			</Actions>
 
-		<!-- sharing input -->
-		<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
-	</li>
+			<!-- sharing input -->
+			<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
+		</li>
+	</div>
 </template>
 
 <script>

diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -22,9 +22,10 @@
 
 <template>
 	<div class="import-contact">
+		<div class="icon-upload settings-line__icon"></div>
 		<template v-if="!isNoAddressbookAvailable">
 			<button class="import-contact__button-main" @click="toggleModal">
-				<span class="icon-upload" />
+				<span class="no-icon" />
 				{{ t('contacts', 'Import contacts') }}
 			</button>
 			<Modal v-if="isOpened"

diff --git a/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue
@@ -21,27 +21,30 @@
 -->
 
 <template>
-	<form id="new-addressbook-form"
-		:disabled="loading"
-		:class="{'icon-loading-small': loading}"
-		name="new-addressbook-form"
-		class="new-addressbook"
-		@submit.prevent.stop="addAddressbook">
-		<input id="new-addressbook"
-			ref="addressbook"
-			v-model="displayName"
+	<div class="new-addressbook-entry">
+		<div class="icon-add settings-line__icon"></div>
+		<form id="new-addressbook-form"
 			:disabled="loading"
-			:placeholder="t('contacts', 'Address book name')"
-			:pattern="addressBookRegex"
-			class="new-addressbook-input"
-			type="text"
-			autocomplete="off"
-			autocorrect="off"
-			spellcheck="false"
-			minlength="1"
-			required>
-		<input class="icon-confirm" type="submit" value="">
-	</form>
+			:class="{'icon-loading-small': loading}"
+			name="new-addressbook-form"
+			class="new-addressbook"
+			@submit.prevent.stop="addAddressbook">
+			<input id="new-addressbook"
+				ref="addressbook"
+				v-model="displayName"
+				:disabled="loading"
+				:placeholder="t('contacts', 'Enter new address book name')"
+				:pattern="addressBookRegex"
+				class="new-addressbook-input"
+				type="text"
+				autocomplete="off"
+				autocorrect="off"
+				spellcheck="false"
+				minlength="1"
+				required>
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+	</div>
 </template>
 
 <script>

diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -21,7 +21,8 @@
 -->
 
 <template>
-	<div class="sort-contacts">
+	<div class="sort-contacts settings-line__icon">
+		<div class="icon-category-organization settings-line__icon"></div>
 		<Multiselect
 			id="sort-by"
 			:value="orderKeyOption"

diff --git a/src/components/AppNavigation/SettingsSection.vue b/src/components/AppNavigation/SettingsSection.vue
@@ -23,7 +23,7 @@
 
 <template>
 	<div>
-		<div v-if="allowSocialSync">
+		<div v-if="allowSocialSync" class="social-sync__list-entry">
 			<input
 				id="socialSyncToggle"
 				class="checkbox"