diff options
Diffstat (limited to 'apps/settings/src/components/PersonalInfo/ProfileSection')
4 files changed, 64 insertions, 141 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue index 1ee3bc0e149..3deb5340751 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -1,23 +1,6 @@ <!-- - - @copyright 2021 Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> @@ -25,15 +8,13 @@ href="#profile-visibility" v-on="$listeners"> <ChevronDownIcon class="anchor-icon" - decorative - title="" :size="22" /> {{ t('settings', 'Edit your Profile visibility') }} </a> </template> <script> -import ChevronDownIcon from 'vue-material-design-icons/ChevronDown' +import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue' export default { name: 'EditProfileAnchorLink', @@ -71,26 +52,28 @@ html { a { display: block; height: 44px; - width: 290px; + width: min(100%, 290px); + overflow: hidden; + text-overflow: ellipsis; line-height: 44px; padding: 0 16px; margin: 14px auto; border-radius: var(--border-radius-pill); - opacity: 0.4; + color: var(--color-text-maxcontrast); background-color: transparent; .anchor-icon { display: inline-block; vertical-align: middle; margin-top: 6px; - margin-right: 8px; + margin-inline-end: 8px; } &:hover, &:focus, &:active { - opacity: 0.8; - background-color: rgba(127, 127, 127, .25); + color: var(--color-main-text); + background-color: var(--color-background-dark); } &.disabled { diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue index d7e78915c5d..6eb7cf8c34c 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileCheckbox.vue @@ -1,49 +1,34 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <div class="checkbox-container"> - <input id="enable-profile" - class="checkbox" - type="checkbox" - :checked="profileEnabled" - @change="onEnableProfileChange"> - <label for="enable-profile"> - {{ t('settings', 'Enable Profile') }} - </label> + <NcCheckboxRadioSwitch type="switch" + :checked.sync="isProfileEnabled" + :loading="loading" + @update:checked="saveEnableProfile"> + {{ t('settings', 'Enable profile') }} + </NcCheckboxRadioSwitch> </div> </template> <script> -import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' -import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService' -import { validateBoolean } from '../../../utils/validate' -import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants' +import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js' +import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import { handleError } from '../../../utils/handlers.ts' export default { name: 'ProfileCheckbox', + components: { + NcCheckboxRadioSwitch, + }, + props: { profileEnabled: { type: Boolean, @@ -53,25 +38,18 @@ export default { data() { return { - initialProfileEnabled: this.profileEnabled, + isProfileEnabled: this.profileEnabled, + loading: false, } }, methods: { - async onEnableProfileChange(e) { - const isEnabled = e.target.checked - this.$emit('update:profile-enabled', isEnabled) - - if (validateBoolean(isEnabled)) { - await this.updateEnableProfile(isEnabled) - } - }, - - async updateEnableProfile(isEnabled) { + async saveEnableProfile() { + this.loading = true try { - const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED, isEnabled) + const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED, this.isProfileEnabled) this.handleResponse({ - isEnabled, + isProfileEnabled: this.isProfileEnabled, status: responseData.ocs?.meta?.status, }) } catch (e) { @@ -82,19 +60,14 @@ export default { } }, - handleResponse({ isEnabled, status, errorMessage, error }) { + handleResponse({ isProfileEnabled, status, errorMessage, error }) { if (status === 'ok') { - // Ensure that local state reflects server state - this.initialProfileEnabled = isEnabled - emit('settings:profile-enabled:updated', isEnabled) + emit('settings:profile-enabled:updated', isProfileEnabled) } else { - showError(errorMessage) - this.logger.error(errorMessage, error) + handleError(error, errorMessage) } + this.loading = false }, }, } </script> - -<style lang="scss" scoped> -</style> diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index ef12d511fb9..47894f64f34 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -1,30 +1,13 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <a class="preview-card" :class="{ disabled }" :href="profilePageLink"> - <Avatar class="preview-card__avatar" + <NcAvatar class="preview-card__avatar" :user="userId" :size="48" :show-user-status="true" @@ -44,13 +27,13 @@ import { getCurrentUser } from '@nextcloud/auth' import { generateUrl } from '@nextcloud/router' -import Avatar from '@nextcloud/vue/dist/Components/Avatar' +import NcAvatar from '@nextcloud/vue/components/NcAvatar' export default { name: 'ProfilePreviewCard', components: { - Avatar, + NcAvatar, }, props: { @@ -95,7 +78,7 @@ export default { display: flex; flex-direction: column; position: relative; - width: 290px; + width: min(100%, 290px); height: 116px; margin: 14px auto; border-radius: var(--border-radius-large); @@ -121,7 +104,7 @@ export default { box-shadow: 0 0 3px var(--color-box-shadow); & *, - &::v-deep * { + &:deep(*) { cursor: default; } } @@ -130,7 +113,7 @@ export default { // Override Avatar component position to fix positioning on rerender position: absolute !important; top: 40px; - left: 18px; + inset-inline-start: 18px; z-index: 1; &:not(.avatardiv--unknown) { @@ -145,10 +128,10 @@ export default { span { position: absolute; - left: 78px; + inset-inline-start: 78px; overflow: hidden; text-overflow: ellipsis; - word-break: break-all; + overflow-wrap: anywhere; @supports (-webkit-line-clamp: 2) { display: -webkit-box; @@ -161,15 +144,15 @@ export default { &__header { height: 70px; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; - background-color: var(--color-primary); - background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); + background-color: var(--color-primary-element); span { bottom: 0; - color: var(--color-primary-text); + color: var(--color-primary-element-text); font-size: 18px; font-weight: bold; - margin: 0 4px 8px 0; + margin-block: 0 8px; + margin-inline: 0 4px; } } @@ -181,7 +164,8 @@ export default { color: var(--color-text-maxcontrast); font-size: 14px; font-weight: normal; - margin: 4px 4px 0 0; + margin-block: 4px 0; + margin-inline: 0 4px; line-height: 1.3; } } diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue index 46048e96c0e..22c03f72697 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue @@ -1,28 +1,11 @@ <!-- - - @copyright 2021, Christopher Ng <chrng8@gmail.com> - - - - @author Christopher Ng <chrng8@gmail.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later --> <template> <section> - <HeaderBar :account-property="accountProperty" /> + <HeaderBar :is-heading="true" :readable="propertyReadable" /> <ProfileCheckbox :profile-enabled.sync="profileEnabled" /> @@ -39,16 +22,16 @@ import { loadState } from '@nextcloud/initial-state' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import EditProfileAnchorLink from './EditProfileAnchorLink' -import HeaderBar from '../shared/HeaderBar' -import ProfileCheckbox from './ProfileCheckbox' -import ProfilePreviewCard from './ProfilePreviewCard' +import EditProfileAnchorLink from './EditProfileAnchorLink.vue' +import HeaderBar from '../shared/HeaderBar.vue' +import ProfileCheckbox from './ProfileCheckbox.vue' +import ProfilePreviewCard from './ProfilePreviewCard.vue' -import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants' +import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants.js' const { - organisationMap: { primaryOrganisation: { value: organisation } }, - displayNameMap: { primaryDisplayName: { value: displayName } }, + organisation: { value: organisation }, + displayName: { value: displayName }, profileEnabled, userId, } = loadState('settings', 'personalInfoParameters', {}) @@ -65,7 +48,7 @@ export default { data() { return { - accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED, + propertyReadable: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED, organisation, displayName, profileEnabled, @@ -99,7 +82,7 @@ export default { section { padding: 10px 10px; - &::v-deep button:disabled { + &:deep(button:disabled) { cursor: default; } } |