diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss index 0f01dff3e..f068cc0a9 100644 --- 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 index b3226733d..97f5a2afd 100644 --- 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 index b9481b175..4bfb9ef8c 100644 --- 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 index 2b4a764c7..2d7fc5e34 100644 --- 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 index 3b6961388..70459e454 100644 --- 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 index 93b50e14f..d315f6a88 100644 --- 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"