move history button on the same line as others in the footer, change …

…icon, clarify footer style Signed-off-by: Julien Veyssier <[email protected]>
nextcloud · Feb 27, 2024 · 24b8d2e · 24b8d2e
1 parent 6a78aff
commit 24b8d2e
Showing 1 changed file with 43 additions and 43 deletions.
diff --git a/src/components/AssistantTextProcessingForm.vue b/src/components/AssistantTextProcessingForm.vue
@@ -59,35 +59,43 @@
 			</NcNoteCard>
 		</div>
 		<div class="footer">
-			<NcButton
-				v-if="showSubmit"
-				:type="submitButtonType"
-				class="submit-button"
-				:disabled="!canSubmit"
-				:title="t('assistant', 'Run a task')"
-				@click="onSyncSubmit">
-				{{ syncSubmitButtonLabel }}
-				<template #icon>
-					<NcLoadingIcon v-if="loading" />
-					<CreationIcon v-else />
-				</template>
-			</NcButton>
-			<NcButton
-				v-if="hasOutput"
-				type="primary"
-				class="copy-button"
-				:title="t('assistant', 'Copy output')"
-				@click="onCopy">
-				{{ t('assistant', 'Copy') }}
+			<NcButton class="history-button"
+				:type="showHistory ? 'secondary' : 'tertiary'"
+				:aria-label="showHistory ? t('assistant', 'Hide previous tasks') : t('assistant', 'Show previous tasks')"
+				@click="showHistory = !showHistory">
 				<template #icon>
-					<ClipboardCheckOutlineIcon v-if="copied" />
-					<ContentCopyIcon v-else />
+					<HistoryIcon />
 				</template>
+				{{ t('assistant', 'Previous tasks') }}
 			</NcButton>
-			<div v-if="hasOutput"
-				class="action-buttons">
+			<div class="footer--action-buttons">
+				<NcButton
+					v-if="showSubmit"
+					:type="submitButtonType"
+					class="submit-button"
+					:disabled="!canSubmit"
+					:title="t('assistant', 'Run a task')"
+					@click="onSyncSubmit">
+					{{ syncSubmitButtonLabel }}
+					<template #icon>
+						<NcLoadingIcon v-if="loading" />
+						<CreationIcon v-else />
+					</template>
+				</NcButton>
+				<NcButton
+					v-if="hasOutput"
+					type="primary"
+					class="copy-button"
+					:title="t('assistant', 'Copy output')"
+					@click="onCopy">
+					{{ t('assistant', 'Copy') }}
+					<template #icon>
+						<ClipboardCheckOutlineIcon v-if="copied" />
+						<ContentCopyIcon v-else />
+					</template>
+				</NcButton>
 				<NcButton
-					v-for="(b, i) in actionButtons"
+					v-for="(b, i) in actionButtonsToShow"
 					:key="i"
 					:type="b.type ?? 'secondary'"
 					:title="b.title"
@@ -100,16 +108,6 @@
 			</div>
 		</div>
 		<div class="history">
-			<NcButton class="advanced-button"
-				type="tertiary"
-				:aria-label="t('assistant', 'Show/hide previous tasks')"
-				@click="showHistory = !showHistory">
-				<template #icon>
-					<ChevronDownIcon v-if="showHistory" />
-					<ChevronRightIcon v-else />
-				</template>
-				{{ t('assistant', 'Previous tasks') }}
-			</NcButton>
 			<TaskList v-if="showHistory"
 				class="history--list"
 				:task-type="mySelectedTaskTypeId"
@@ -123,8 +121,7 @@
 import ContentCopyIcon from 'vue-material-design-icons/ContentCopy.vue'
 import ClipboardCheckOutlineIcon from 'vue-material-design-icons/ClipboardCheckOutline.vue'
 import CreationIcon from 'vue-material-design-icons/Creation.vue'
-import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
-import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
+import HistoryIcon from 'vue-material-design-icons/History.vue'
 
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -160,8 +157,7 @@ export default {
 		CreationIcon,
 		ContentCopyIcon,
 		ClipboardCheckOutlineIcon,
-		ChevronDownIcon,
-		ChevronRightIcon,
+		HistoryIcon,
 		NcNoteCard,
 		AssistantFormInputs,
 	},
@@ -260,6 +256,9 @@ export default {
 			}
 			return this.myOutput.trim()
 		},
+		actionButtonsToShow() {
+			return this.hasOutput ? this.actionButtons : []
+		},
 	},
 	watch: {
 		output(newVal) {
@@ -406,10 +405,11 @@ export default {
 	.footer {
 		width: 100%;
 		display: flex;
-		flex-wrap: wrap;
-		justify-content: end;
-		gap: 4px;
-		.action-buttons {
+		.history-button {
+			height: 44px;
+		}
+		&--action-buttons {
+			flex-grow: 1;
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: end;