Streamline Settings
Signed-off-by: szaimen <szaimen@e.mail.de>
This commit is contained in:
parent
7ec9046f14
commit
435ba0ad80
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
|
||||
<template>
|
||||
<div class="sort-contacts">
|
||||
<div class="icon-category-organization settings-line__icon"></div>
|
||||
<Multiselect
|
||||
id="sort-by"
|
||||
:value="orderKeyOption"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue