opensourcemirror
/
nextcloud-contacts
mirror of https://github.com/nextcloud/contacts.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Upgrade to Nextcloud vue 8.0.0 

Signed-off-by: greta <gretadoci@gmail.com>
This commit is contained in:
greta 2023-11-08 16:42:13 +01:00
parent 1611f5effc
commit bf0908152c
21 changed files with 1526 additions and 1032 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2429
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -52,7 +52,7 @@
"@nextcloud/paths": "^2.1.0",
"@nextcloud/router": "^2.2.0",
"@nextcloud/sharing": "^0.1.0",
"@nextcloud/vue": "^7.12.6",
"@nextcloud/vue": "^8.0.0",
"b64-to-blob": "^1.2.19",
"camelcase": "^8.0.0",
"d3": "^7.8.5",
@ -65,7 +65,7 @@
"qr-image": "^3.2.0",
"string-natural-compare": "^3.0.1",
"uuid": "^9.0.0",
"vue": "~2.6.14",
"vue": "~2.7.15",
"vue-click-outside": "^1.1.0",
"vue-cropperjs": "^4.2.0",
"vue-material-design-icons": "^5.2.0",
@ -89,7 +89,6 @@
"@nextcloud/typings": "^1.7.0",
"@nextcloud/webpack-vue-config": "^5.2.0",
"@types/jest": "^29.5.3",
"@vue/composition-api": "^1.7.2",
"@vue/vue2-jest": "^29.2.5",
"babel-jest": "^29.6.2",
"eslint-import-resolver-typescript": "^3.6.0",
@ -101,7 +100,7 @@
"ts-jest": "^29.1.1",
"ts-loader": "^9.5.0",
"typescript": "^5.1.6",
"vue-template-compiler": "~2.6"
"vue-template-compiler": "~2.7"
},
"browserslist": [
"extends @nextcloud/browserslist-config"

11
src/components/AppContent/CircleContent.vue
View File

@ -22,7 +22,7 @@
<template>
<AppContent v-if="!circle">
<EmptyContent :title="t('contacts', 'Please select a circle')">
<EmptyContent :name="t('contacts', 'Please select a circle')">
<template #icon>
<IconCircles :size="20" />
</template>
@ -30,7 +30,7 @@
</AppContent>
<AppContent v-else-if="loading">
<EmptyContent :title="t('contacts', 'Loading circle …')">
<EmptyContent class="empty-content" :name="t('contacts', 'Loading circle …')">
<template #icon>
<IconLoading :size="20" />
</template>
@ -50,13 +50,13 @@
<!-- not a member -->
<template v-if="!circle.isMember">
<!-- Pending request validation -->
<EmptyContent v-if="circle.isPendingMember" :title="t('contacts', 'Your request to join this circle is pending approval')">
<EmptyContent v-if="circle.isPendingMember" :name="t('contacts', 'Your request to join this circle is pending approval')">
<template #icon>
<IconLoading :size="20" />
</template>
</EmptyContent>
<EmptyContent v-else :title="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
<EmptyContent v-else :name="t('contacts', 'You are not a member of {circle}', { circle: circle.displayName})">
<template #icon>
<IconCircles :size="20" />
</template>
@ -176,4 +176,7 @@ button {
margin-right: 10px;
}
}
.empty-content {
height: 100%;
}
</style>

11
src/components/AppContent/ContactsContent.vue
View File

@ -22,7 +22,7 @@
<template>
<AppContent v-if="loading">
<EmptyContent :title="t('contacts', 'Loading contacts …')">
<EmptyContent class="empty-content" :name="t('contacts', 'Loading contacts …')">
<template #icon>
<IconLoading :size="20" />
</template>
@ -30,7 +30,7 @@
</AppContent>
<AppContent v-else-if="isEmptyGroup && !isRealGroup">
<EmptyContent :title="t('contacts', 'There are no contacts yet')">
<EmptyContent class="empty-content" :name="t('contacts', 'There are no contacts yet')">
<template #icon>
<IconContact :size="20" />
</template>
@ -43,7 +43,7 @@
</AppContent>
<AppContent v-else-if="isEmptyGroup && isRealGroup">
<EmptyContent :title=" t('contacts', 'There are no contacts in this group')">
<EmptyContent class="empty-content" :name=" t('contacts', 'There are no contacts in this group')">
<template #icon>
<IconContact :size="20" />
</template>
@ -192,3 +192,8 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.empty-content {
height: 100%;
}
</style>

2
src/components/AppNavigation/CircleNavigationItem.vue
View File

@ -21,7 +21,7 @@
-->
<template>
<AppNavigationItem :key="circle.key"
:title="circle.displayName"
:name="circle.displayName"
:to="circle.router">
<template #icon>
<AccountStar v-if="circle.isOwner" :size="20" />

7
src/components/AppNavigation/ContactsSettings.vue
View File

@ -22,10 +22,10 @@
<template>
<AppSettingsDialog id="app-settings-dialog"
:title="t('contacts', 'Contacts settings')"
:name="t('contacts', 'Contacts settings')"
:show-navigation="true"
:open.sync="showSettings">
<AppSettingsSection id="general-settings" :title="t('contacts', 'General settings')">
<AppSettingsSection id="general-settings" :name="t('contacts', 'General settings')">
<CheckboxRadioSwitch :checked="enableSocialSync"
:loading="enableSocialSyncLoading"
:disabled="enableSocialSyncLoading"
@ -40,7 +40,7 @@
</CheckboxRadioSwitch>
<SettingsSortContacts class="contacts-settings-modal__form__row" />
</AppSettingsSection>
<AppSettingsSection id="address-books" :title="t('contacts', 'Address books')">
<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
<div class="contacts-settings-modal__form">
<div class="contacts-settings-modal__form__row">
<ul id="addressbook-list" class="addressbook-list">
@ -150,6 +150,7 @@ export default {
.app-settings-section {
margin-bottom: 45px;
padding: 25px 25px 0 25px;
}
.social-sync__checkbox, .settings-new-addressbook {

2
src/components/AppNavigation/GroupNavigationItem.vue
View File

@ -22,7 +22,7 @@
<template>
<AppNavigationItem :key="group.key"
:to="group.router"
:title="group.name">
:name="group.name">
<template #icon>
<IconContact :size="20" />
</template>

16
src/components/AppNavigation/RootNavigation.vue
View File

@ -34,7 +34,7 @@
<template #list>
<!-- All contacts group -->
<AppNavigationItem id="everyone"
:title="GROUP_ALL_CONTACTS"
:name="GROUP_ALL_CONTACTS"
:to="{
name: 'group',
params: { selectedGroup: GROUP_ALL_CONTACTS },
@ -52,7 +52,7 @@
<!-- Organization chart -->
<AppNavigationItem v-if="existChart"
id="chart"
:title="CHART_ALL_CONTACTS"
:name="CHART_ALL_CONTACTS"
:to="{
name: 'chart',
params: { selectedChart: GROUP_ALL_CONTACTS },
@ -62,7 +62,7 @@
<!-- Not grouped group -->
<AppNavigationItem v-if="ungroupedContacts.length > 0"
id="notgrouped"
:title="GROUP_NO_GROUP_CONTACTS"
:name="GROUP_NO_GROUP_CONTACTS"
:to="{
name: 'group',
params: { selectedGroup: GROUP_NO_GROUP_CONTACTS },
@ -80,7 +80,7 @@
<!-- Recently contacted group -->
<AppNavigationItem v-if="isContactsInteractionEnabled && recentlyContactedContacts && recentlyContactedContacts.contacts.length > 0"
id="recentlycontacted"
:title="GROUP_RECENTLY_CONTACTED"
:name="GROUP_RECENTLY_CONTACTED"
:to="{
name: 'group',
params: { selectedGroup: GROUP_RECENTLY_CONTACTED },
@ -98,7 +98,7 @@
<AppNavigationCaption id="newgroup"
:force-menu="true"
:menu-open.sync="isNewGroupMenuOpen"
:title="t('contacts', 'Contact groups')"
:name="t('contacts', 'Contact groups')"
@click.prevent.stop="toggleNewGroupMenu">
<template #actionsTriggerIcon>
<IconAdd :size="20" />
@ -125,14 +125,14 @@
<template v-if="isCirclesEnabled">
<!-- Toggle groups ellipsis -->
<AppNavigationItem v-if="groupsMenu.length > ELLIPSIS_COUNT"
:title="collapseGroupsTitle"
:name="collapseGroupsTitle"
class="app-navigation__collapse"
icon=""
@click="onToggleGroups" />
<!-- New circle button caption and modal -->
<AppNavigationCaption id="newcircle"
:title="t('contacts', 'Circles')">
:name="t('contacts', 'Circles')">
<template #actions>
<NcActionButton @click="toggleNewCircleModal">
<template #icon>
@ -155,7 +155,7 @@
<!-- Toggle circles ellipsis -->
<AppNavigationItem v-if="circlesMenu.length > ELLIPSIS_COUNT"
:title="collapseCirclesTitle"
:name="collapseCirclesTitle"
class="app-navigation__collapse"
icon=""
@click="onToggleCircles" />

2
src/components/AppNavigation/Settings/SettingsAddressbook.vue
View File

@ -44,7 +44,7 @@
<Button v-if="!addressbook.readOnly"
v-tooltip.top="sharedWithTooltip"
:class="{'addressbook__share--shared': hasShares}"
:title="sharedWithTooltip"
:name="sharedWithTooltip"
href="#"
class="addressbook__share"
@click="toggleShare">

2
src/components/AppNavigation/Settings/SettingsImportContacts.vue
View File

@ -32,7 +32,7 @@
<Modal v-if="isOpened"
ref="modal"
class="import-contact__modal"
:title="t('contacts', 'Import contacts')"
:name="t('contacts', 'Import contacts')"
@close="toggleModal">
<section class="import-contact__modal-addressbook">
<h2>{{ t('contacts', 'Import contacts') }}</h2>

21
src/components/ContactDetails.vue
View File

@ -25,7 +25,8 @@
<AppContentDetails>
<!-- nothing selected or contact not found -->
<EmptyContent v-if="!contact"
:title="t('contacts', 'No contact selected')"
class="empty-content"
:name="t('contacts', 'No contact selected')"
:description="t('contacts', 'Select a contact on the list to begin')">
<template #icon>
<IconContact :size="20" />
@ -188,7 +189,7 @@
id="qrcode-modal"
size="small"
:clear-view-delay="-1"
:title="contact.displayName"
:name="contact.displayName"
:close-button-contained="false"
@close="closeQrModal">
<img :src="`data:image/svg+xml;base64,${qrcode}`"
@ -201,10 +202,11 @@
<Modal v-if="showPickAddressbookModal"
id="pick-addressbook-modal"
:clear-view-delay="-1"
:title="t('contacts', 'Pick an address book')"
:name="t('contacts', 'Pick an address book')"
@close="closePickAddressbookModal">
<NcSelect ref="pickAddressbook"
v-model="pickedAddressbook"
class="address-book"
:allow-empty="false"
:options="copyableAddressbooksOptions"
:placeholder="t('contacts', 'Select address book')"
@ -253,12 +255,12 @@
</Actions>
<NcButton v-if="isTalkEnabled && isInSystemAddressBook"
:aria-label="(t('contacts', 'Go to talk conversation'))"
:title="(t('contacts', 'Go to talk conversation'))"
:name="(t('contacts', 'Go to talk conversation'))"
class="icon-talk"
:href="callUrl" />
<NcButton v-if="profilePageLink"
:aria-label="(t('contacts','View profile'))"
:title="(t('contacts','View profile'))"
:name="(t('contacts','View profile'))"
:href="profilePageLink">
<template #icon>
<IconAccount :size="20" />
@ -1026,7 +1028,7 @@ section.contact-details {
}
}
::v-deep .v-select.select {
min-width: 0 !important;
min-width: 0;
flex: 1 auto;
.vs__actions {
display: none;
@ -1057,5 +1059,10 @@ section.contact-details {
background-color: var(--color-primary-element-light-hover) !important;
}
.address-book {
min-width: 260px !important;
}
.empty-content {
height: 100%;
}
</style>

2
src/components/ContactDetails/ContactDetailsAddNewProp.vue
View File

@ -31,7 +31,7 @@
<Actions menu-align="right"
event=""
type="secondary"
:menu-title="t('contacts', 'Add more info')"
:menu-name="t('contacts', 'Add more info')"
@click.native.prevent>
<template #icon>
<IconAdd :size="20" />

3
src/components/ContactsList.vue
View File

@ -180,7 +180,8 @@ export default {
// Search field
.search-contacts-field {
padding: 5px 10px 5px 40px;
padding: 5px 10px 5px 50px;
margin-top: 4px;
> input {
width: 100%;

2
src/components/ContactsList/ContactsListItem.vue
View File

@ -2,7 +2,7 @@
<ListItem :id="id"
:key="source.key"
class="list-item-style envelope"
:title="source.displayName"
:name="source.displayName"
:to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
<!-- @slot Icon slot -->

6
src/components/EntityPicker/EntityPicker.vue
View File

@ -36,7 +36,7 @@
</div>
<!-- Loading -->
<EmptyContent v-if="loading" :title="t('contacts', 'Loading …')">
<EmptyContent v-if="loading" :name="t('contacts', 'Loading …')">
<template #icon>
<IconLoading :size="20" />
</template>
@ -55,7 +55,7 @@
</transition-group>
<!-- No recommendations -->
<EmptyContent v-if="dataSet.length === 0" :title="t('contacts', 'Search for people to add')">
<EmptyContent v-if="dataSet.length === 0" :name="t('contacts', 'Search for people to add')">
<template #icon>
<IconSearch :size="20" />
</template>
@ -70,7 +70,7 @@
:estimate-size="44"
:extra-props="{ selection: selectionSet, onClick }" />
<EmptyContent v-else-if="searchQuery" :title="t('contacts', 'No results')">
<EmptyContent v-else-if="searchQuery" :name="t('contacts', 'No results')">
<template #icon>
<IconSearch :size="20" />
</template>

9
src/components/MemberList.vue
View File

@ -23,21 +23,21 @@
<template>
<AppContentList v-if="!hasMembers" class="members-list">
<template v-if="loading">
<EmptyContent :title="t('contacts', 'Loading members list …')">
<EmptyContent class="empty-content" :name="t('contacts', 'Loading members list …')">
<template #icon>
<IconLoading :size="20" />
</template>
</EmptyContent>
</template>
<template v-else-if="!circle.isMember">
<EmptyContent :title="t('contacts', 'The list of members is only visible to members of this circle')">
<EmptyContent class="empty-content" :name="t('contacts', 'The list of members is only visible to members of this circle')">
<template #icon>
<IconContact :size="20" />
</template>
</EmptyContent>
</template>
<template v-else>
<EmptyContent :title="t('contacts', 'You currently have no access to the member list')">
<EmptyContent class="empty-content" :name="t('contacts', 'You currently have no access to the member list')">
<template #icon>
<IconContact :size="20" />
</template>
@ -339,4 +339,7 @@ export default {
margin: auto;
}
}
.empty-content {
height: 100%;
}
</style>

4
src/components/MembersList/MembersListItem.vue
View File

@ -30,8 +30,8 @@
:key="source.singleId"
:avatar-size="44"
:is-no-user="!source.isUser"
:subtitle="levelName"
:title="source.displayName"
:subname="levelName"
:name="source.displayName"
:user="source.userId"
class="members-list__item">
<!-- Accept invite -->

8
src/components/OrgChart.vue
View File

@ -4,14 +4,14 @@
<h3>
{{ t('contacts', 'Chart') }}:
</h3>
<Multiselect v-model="chart"
<NcSelect v-model="chart"
class="chart-selection"
:disabled="data.length === 1"
:options="charts"
:allow-empty="false"
:searchable="false"
:placeholder="placeholder"
track-by="id"
input-id="select-chart-input"
label="label"
@input="chartChanged" />
</div>
@ -23,7 +23,7 @@
import * as d3 from 'd3'
import ChartTemplate from './ChartTemplate.vue'
import { getLocale } from '@nextcloud/l10n'
import { NcMultiselect as Multiselect } from '@nextcloud/vue'
import { NcSelect } from '@nextcloud/vue'
import { OrgChart } from 'd3-org-chart'
import router from './../router/index.js'
import Vue from 'vue'
@ -31,7 +31,7 @@ import Vue from 'vue'
export default {
name: 'OrgChart',
components: {
Multiselect,
NcSelect,
},
props: {
data: {

2
src/components/ProcessingScreen.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<EmptyContent :description="desc"
:title="title"
:name="title"
class="processing-screen__wrapper">
<template #icon>
<IconContact :size="20" />

6
src/components/Properties/PropertyDateTime.vue
View File

@ -58,7 +58,7 @@
<div class="property__value">
<!-- Real input where the picker shows -->
<DatetimePicker v-if="!isReadOnly"
<DateTimePicker v-if="!isReadOnly"
:value="vcardTimeLocalValue.toJSDate()"
:minute-step="10"
:lang="lang"
@ -89,7 +89,7 @@
import debounce from 'debounce'
import moment from 'moment'
import {
NcDatetimePicker as DatetimePicker,
NcDateTimePicker as DateTimePicker,
NcSelect,
} from '@nextcloud/vue'
import { getLocale } from '@nextcloud/l10n'
@ -104,7 +104,7 @@ export default {
components: {
NcSelect,
DatetimePicker,
DateTimePicker,
PropertyTitle,
PropertyActions,
},

6
webpack.config.js
View File

@ -20,6 +20,10 @@ webpackConfig.module.rules.push({
webpackConfig.resolve.extensions = ['.js', '.vue', '.ts', '.tsx']
webpackConfig.resolve.fallback = {"fs": false}
webpackConfig.resolve.fallback = { fs: false }
webpackConfig.resolve.alias = {
vue$: 'vue/dist/vue.esm.js',
}
module.exports = webpackConfig