Streamline Settings

Signed-off-by: szaimen <szaimen@e.mail.de>
This commit is contained in:
szaimen 2021-07-22 22:15:27 +02:00
parent 7ec9046f14
commit 435ba0ad80
5 changed files with 140 additions and 87 deletions

View File

@ -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

View File

@ -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') }}
<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>
<!-- delete addressbook -->
<ActionButton v-if="hasMultipleAddressbooks"
:icon="deleteAddressbookLoading ? 'icon-loading-small' : 'icon-delete'"
@click="confirmDeletion">
{{ t('contacts', 'Delete') }}
</ActionButton>
<ActionInput v-else
ref="renameInput"
:disabled="renameLoading"
:icon="renameLoading ? 'icon-loading-small' : 'icon-rename'"
:value="addressbook.displayName"
@submit="updateAddressbookName" />
</Actions>
<!-- 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>
<!-- 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>

View File

@ -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>

View File

@ -22,6 +22,7 @@
<template>
<div class="sort-contacts">
<div class="icon-category-organization settings-line__icon"></div>
<Multiselect
id="sort-by"
:value="orderKeyOption"

View File

@ -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"