Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate chat messages #9512

Merged
merged 3 commits into from May 12, 2023
Merged

Translate chat messages #9512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8497bd7
create MessageTranslateDialog.vue, connect API
Antreesy May 12, 2023
8831435
request for languages from capabilities instead of store
Antreesy May 12, 2023
940d446
minor design updates and props renaming
Antreesy May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 17 additions & 2 deletions src/components/MessagesList/MessagesGroup/Message/Message.vue
View file
Open in desktop
Expand Up @@ -179,6 +179,7 @@ the main body of the message as well as a quote.
<div class="message-body__scroll">
<MessageButtonsBar v-if="showMessageButtonsBar"
ref="messageButtonsBar"
:is-translation-available="isTranslationAvailable"
:is-action-menu-open.sync="isActionMenuOpen"
:is-emoji-picker-open.sync="isEmojiPickerOpen"
:is-reactions-menu-open.sync="isReactionsMenuOpen"
Expand All @@ -193,9 +194,15 @@ the main body of the message as well as a quote.
:common-read-icon-tooltip="commonReadIconTooltip"
:show-sent-icon="showSentIcon"
:sent-icon-tooltip="sentIconTooltip"
@show-translate-dialog="isTranslateDialogOpen = true"
@delete="handleDelete" />
</div>

<MessageTranslateDialog v-if="isTranslateDialogOpen"
:message="message"
:rich-parameters="richParameters"
@close="isTranslateDialogOpen = false" />

<div v-if="isLastReadMessage"
v-observe-visibility="lastReadMessageVisibilityChanged">
<div class="new-message-marker">
Expand All @@ -214,6 +221,7 @@ import CheckAll from 'vue-material-design-icons/CheckAll.vue'
import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
import Reload from 'vue-material-design-icons/Reload.vue'

import { getCapabilities } from '@nextcloud/capabilities'
import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
import moment from '@nextcloud/moment'

Expand All @@ -225,6 +233,7 @@ import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
import Quote from '../../../Quote.vue'
import CallButton from '../../../TopBar/CallButton.vue'
import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
import MessageTranslateDialog from './MessageButtonsBar/MessageTranslateDialog.vue'
import Contact from './MessagePart/Contact.vue'
import DeckCard from './MessagePart/DeckCard.vue'
import DefaultParameter from './MessagePart/DefaultParameter.vue'
Expand All @@ -238,13 +247,16 @@ import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
import participant from '../../../../mixins/participant.js'
import { EventBus } from '../../../../services/EventBus.js'

const isTranslationAvailable = getCapabilities()?.spreed?.config?.chat?.translations?.length > 0

/**
* @property {object} scrollerBoundingClientRect provided by MessageList.vue
*/
export default {
name: 'Message',

components: {
MessageTranslateDialog,
CallButton,
MessageButtonsBar,
NcButton,
Expand Down Expand Up @@ -404,7 +416,7 @@ export default {

setup() {
const isInCall = useIsInCall()
return { isInCall }
return { isInCall, isTranslationAvailable }
},

data() {
Expand All @@ -422,6 +434,7 @@ export default {
isReactionsMenuOpen: false,
isForwarderOpen: false,
detailedReactionsLoading: false,
isTranslateDialogOpen: false,
}
},

Expand Down Expand Up @@ -580,7 +593,9 @@ export default {
},

showMessageButtonsBar() {
return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary && (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen || this.isReactionsMenuOpen || this.isForwarderOpen)
return !this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary
&& (this.isHovered || this.isActionMenuOpen || this.isEmojiPickerOpen || this.isFollowUpEmojiPickerOpen
|| this.isReactionsMenuOpen || this.isForwarderOpen || this.isTranslateDialogOpen)
},

isTemporaryUpload() {
Expand Down
18 changes: 17 additions & 1 deletion src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
View file
Open in desktop
Expand Up @@ -106,6 +106,15 @@
@click="action.callback(messageApiData)">
{{ action.label }}
</NcActionButton>
<NcActionButton v-if="isTranslationAvailable"
:close-after-click="true"
@click.stop="$emit('show-translate-dialog', true)"
@close="$emit('show-translate-dialog', false)">
<template #icon>
<Translate :size="16" />
</template>
{{ t('spreed', 'Translate') }}
</NcActionButton>
<template v-if="isDeleteable">
<NcActionSeparator />
<NcActionButton icon="icon-delete"
Expand Down Expand Up @@ -169,6 +178,7 @@ import File from 'vue-material-design-icons/File.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import Reply from 'vue-material-design-icons/Reply.vue'
import Share from 'vue-material-design-icons/Share.vue'
import Translate from 'vue-material-design-icons/Translate.vue'

import moment from '@nextcloud/moment'

Expand Down Expand Up @@ -211,6 +221,7 @@ export default {
Plus,
Reply,
Share,
Translate,
},

props: {
Expand Down Expand Up @@ -354,9 +365,14 @@ export default {
type: String,
required: true,
},

isTranslationAvailable: {
type: Boolean,
required: true,
},
Comment on lines +369 to +372
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the isTranslationAvailable always supposed to have value from capabilities?
If it is, maybe use capability instead of prop here? Or at least use capabilities as the default value. Then the long list of props to pass will be a little bit less 😀

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be done later, when we'll finally reach Message refactoring =)

},

emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen'],
emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen', 'show-translate-dialog'],

data() {
return {
Expand Down