diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 88524a99684..562f2cc246f 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -185,6 +185,8 @@ export default { top: 0; width: var(--avatar-size); height: var(--avatar-size); + max-height: var(--avatar-size); + max-width: var(--avatar-size); line-height: var(--avatar-size); font-size: calc(var(--avatar-size) / 2); border-radius: 50%; diff --git a/src/components/ConversationSettings/BasicInfo.vue b/src/components/ConversationSettings/BasicInfo.vue index 6282c633597..565283233ba 100644 --- a/src/components/ConversationSettings/BasicInfo.vue +++ b/src/components/ConversationSettings/BasicInfo.vue @@ -30,6 +30,7 @@ :loading="isNameLoading" :placeholder="t('spreed', 'Enter a name for this conversation')" :edit-button-aria-label="t('spreed', 'Edit conversation name')" + :max-length="CONVERSATION.MAX_NAME_LENGTH" @submit-text="handleUpdateName" @update:editing="handleEditName" /> <template v-if="!isOneToOne"> @@ -42,6 +43,7 @@ :loading="isDescriptionLoading" :edit-button-aria-label="t('spreed', 'Edit conversation description')" :placeholder="t('spreed', 'Enter a description for this conversation')" + :max-length="CONVERSATION.MAX_DESCRIPTION_LENGTH" use-markdown @submit-text="handleUpdateDescription" @update:editing="handleEditDescription" /> @@ -91,7 +93,10 @@ export default { }, setup() { - return { supportsAvatar } + return { + supportsAvatar, + CONVERSATION, + } }, data() { diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 2f4e8a446ea..aaae14d1b3a 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -37,12 +37,20 @@ v-model="conversationName" :placeholder="t('spreed', 'Enter a name for this conversation')" :label="t('spreed', 'Name')" + :error="!!nameErrorLabel" label-visible @keydown.enter="handleEnter" /> + <span v-if="nameErrorLabel" class="new-group-conversation__error"> + {{ nameErrorLabel }} + </span> <NcTextField v-model="conversationDescription" :placeholder="t('spreed', 'Enter a description for this conversation')" :label="t('spreed', 'Description')" + :error="!!descriptionErrorLabel" label-visible /> + <span v-if="descriptionErrorLabel" class="new-group-conversation__error"> + {{ descriptionErrorLabel }} + </span> <template v-if="supportsAvatar"> <label class="avatar-editor__label"> @@ -259,9 +267,20 @@ export default { // Controls the disabled/enabled state of the first page's button. disabled() { return this.conversationNameTrimmed === '' || (this.passwordProtect && this.password === '') + || this.conversationNameTrimmed.length > CONVERSATION.MAX_NAME_LENGTH + || this.conversationDescription.length > CONVERSATION.MAX_DESCRIPTION_LENGTH }, - selectedParticipants() { - return this.$store.getters.selectedParticipants + nameErrorLabel() { + if (this.conversationNameTrimmed.length <= CONVERSATION.MAX_NAME_LENGTH) { + return + } + return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_NAME_LENGTH }) + }, + descriptionErrorLabel() { + if (this.conversationDescription.length <= CONVERSATION.MAX_DESCRIPTION_LENGTH) { + return + } + return t('spreed', 'Maximum length exceeded ({maxlength} characters)', { maxlength: CONVERSATION.MAX_DESCRIPTION_LENGTH }) }, }, @@ -526,6 +545,10 @@ export default { &__button { margin-left: auto; } + + &__error { + color: var(--color-error); + } } :deep(.modal-wrapper .modal-container) { diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue index 2d27d262cee..557ba4c5140 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue @@ -181,10 +181,13 @@ export default { }, watch: { - sharedItemsIdentifier() { - if (this.token && this.active && this.isSidebarOpen) { - this.sharedItemsStore.getSharedItemsOverview(this.token) - } + sharedItemsIdentifier: { + immediate: true, + handler() { + if (this.token && this.active && this.isSidebarOpen) { + this.sharedItemsStore.getSharedItemsOverview(this.token) + } + }, }, }, diff --git a/src/constants.js b/src/constants.js index 4e0fa1d15ca..88e3086781c 100644 --- a/src/constants.js +++ b/src/constants.js @@ -81,6 +81,9 @@ export const CONVERSATION = { STATUS_ASSISTANCE_RESET: 0, STATUS_ASSISTANCE_REQUESTED: 2, }, + + MAX_NAME_LENGTH: 255, + MAX_DESCRIPTION_LENGTH: 500, } export const ATTENDEE = { ACTOR_TYPE: {