feat: update layout of translate dialog

Signed-off-by: Luka Trovic <[email protected]>

src/components/Menu/MenuBar.vue

@@ -247,9 +247,15 @@ export default {
 		},
 		showTranslate() {
 			const { from, to } = this.$editor.view.state.selection
-			const selectedText = this.$editor.view.state.doc.textBetween(from, to, ' ')
+			let selectedText = this.$editor.view.state.doc.textBetween(from, to, ' ')
+
+			if (!selectedText.trim().length) {
+				this.$editor.commands.selectAll()
+				selectedText = this.$editor.view.state.doc.textContent
+			}
+
 			console.debug('translation click', this.$editor.view.state.selection, selectedText)
-			this.displayTranslate = selectedText.trim().length ? selectedText : this.$editor.view.state.doc.textContent
+			this.displayTranslate = selectedText ?? ''
 		},
 		hideTranslate() {
 			this.displayTranslate = false

src/components/Modal/Translate.vue

@@ -23,7 +23,7 @@
 	<NcModal size="large" @close="$emit('close')">
 		<div class="translate-dialog">
 			<h2>{{ t('text', 'Translate') }}</h2>
-			<em>{{ t('text', 'To translate individual parts of the text, select it before using the translate function.') }}</em>
+			<em>{{ t('text', 'You can translate parts of the document by selecting the text before using the translate function.') }}</em>
 			<div class="wrapper">
 				<div class="col">
 					<div class="language-selector">
@@ -32,9 +32,14 @@
 							input-id="fromLanguage"
 							:placeholder="t('text', 'Select language')"
 							:options="fromLanguages"
+							:disabled="disableFromLanguageSelect"
 							:append-to-body="false" />
 					</div>
-					<textarea v-model="input" />
+					<textarea ref="input"
+						v-model="input"
+						autofocus="true"
+						@input="autosize"
+						@focus="onInputFocus" />
 				</div>
 				<div class="col">
 					<div class="language-selector">
@@ -46,7 +51,10 @@
 							:disabled="!fromLanguage"
 							:append-to-body="false" />
 					</div>
-					<textarea v-model="result" readonly :class="{'icon-loading': loading }" />
+					<textarea ref="result"
+						v-model="result"
+						readonly
+						:class="{'icon-loading': loading }" />
 				</div>
 			</div>
 			<div class="translate-actions">
@@ -103,6 +111,7 @@ export default {
 			canDetect: loadState('text', 'translation_can_detect'),
 			loading: false,
 			error: null,
+			disableFromLanguageSelect: true,
 		}
 	},
 	computed: {
@@ -181,6 +190,16 @@ export default {
 		async contentReplace() {
 			this.$emit('replace-content', this.result)
 		},
+		autosize() {
+			this.$refs.input.style.height = 'auto'
+			const height = this.$refs.input.scrollHeight
+			this.$refs.input.style.height = height + 'px'
+			this.$refs.result.style.height = height + 'px'
+		},
+		onInputFocus() {
+			this.disableFromLanguageSelect = false
+			this.autosize()
+		},
 	},
 }
 </script>
@@ -192,7 +211,14 @@ export default {
 	.wrapper {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-column-gap: 10px;
+		grid-column-gap: 16px;
+		margin-top: calc(var(--default-grid-baseline) * 6);
+
+		.language-selector {
+			font-weight: bold;
+			flex-wrap: wrap;
+			gap: var(--default-grid-baseline);
+		}
 
 		.col {
 			grid-row: 1/2;
@@ -204,7 +230,10 @@ textarea {
 	display: block;
 	width: 100%;
 	margin-bottom: 12px;
-
+	height: auto;
+	resize: none;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .language-selector {