diff options
5 files changed, 139 insertions, 86 deletions
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss index 0f01dff3..f91d95c8 100644 --- a/css/SettingsSection.scss +++ b/css/SettingsSection.scss @@ -22,26 +22,62 @@ */ // contacts settings section +.app-contacts #app-settings-content { + padding-left: 0px !important; +} + #app-settings-content { .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); + } + &__header { + padding-left: 44px; + color: var(--color-primary-element); + } +} + +.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; @@ -50,6 +86,9 @@ @include icon-color('triangle-s', 'actions', $color-black, 1, true); } + &__content-wrapper { + bottom: unset !important; + } } } @@ -74,6 +113,10 @@ margin: 0; margin-top: -1px; } + &__button-main { + margin-left: 10px; + width: calc(100% - 10px) !important; + } } // Add address book diff --git a/src/components/AppNavigation/Settings/SettingsAddressbook.vue b/src/components/AppNavigation/Settings/SettingsAddressbook.vue index b3226733..97f5a2af 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/SettingsNewAddressbook.vue b/src/components/AppNavigation/Settings/SettingsNewAddressbook.vue index 2b4a764c..797b29f2 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', 'Add new address book')" + :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 3b696138..e350aa9a 100644 --- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue +++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue @@ -22,6 +22,7 @@ <template> <div class="sort-contacts"> + <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 93b50e14..3939c5d9 100644 --- a/src/components/AppNavigation/SettingsSection.vue +++ b/src/components/AppNavigation/SettingsSection.vue @@ -23,7 +23,8 @@ <template> <div> - <div v-if="allowSocialSync"> + <SettingsSortContacts class="settings-section" /> + <div v-if="allowSocialSync" class="social-sync__list-entry"> <input id="socialSyncToggle" class="checkbox" @@ -33,11 +34,13 @@ <label for="socialSyncToggle">{{ t('contacts', 'Update avatars from social media') }}</label> <em for="socialSyncToggle">{{ t('contacts', '(refreshed once per week)') }}</em> </div> + <div class="settings-addressbook-list__header"> + <span>{{ t('contacts', 'Address books') }}</span> + </div> <ul id="addressbook-list"> <SettingsAddressbook v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" /> </ul> <SettingsNewAddressbook :addressbooks="addressbooks" /> - <SettingsSortContacts class="settings-section" /> <SettingsImportContacts :addressbooks="addressbooks" class="settings-section" @clicked="onClickImport" |