👌 IMPROVE: put composer attachment buttons into three dot menu

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

Author: violoncelloCH

src/components/Composer.vue

@@ -123,17 +123,26 @@
 			></TextEditor>
 		</div>
 		<div class="composer-actions">
-			<ComposerAttachments v-model="attachments" @upload="onAttachmentsUploading" />
+			<ComposerAttachments ref="composerAttachments" v-model="attachments" @upload="onAttachmentsUploading" />
 			<div class="composer-actions-right">
 				<p class="composer-actions-draft">
 					<span v-if="savingDraft === true" id="draft-status">{{ t('mail', 'Saving draft …') }}</span>
 					<span v-else-if="savingDraft === false" id="draft-status">{{ t('mail', 'Draft saved') }}</span>
 				</p>
 				<Actions>
-					<ActionText icon="icon-info">{{ t('mail', 'Message options') }}</ActionText>
-					<ActionCheckbox :checked.sync="editorPlainText" :text="t('mail', 'Plain text')">{{
-						t('mail', 'Plain text')
-					}}</ActionCheckbox>
+					<ActionButton icon="icon-upload" @click="onAddLocalAttachment">{{
+						t('mail', 'Upload attachment')
+					}}</ActionButton>
+					<ActionButton icon="icon-folder" @click="onAddCloudAttachment">{{
+						t('mail', 'Add attachment from Files')
+					}}</ActionButton>
+					<ActionCheckbox
+						:checked="editorPlainText"
+						:text="t('mail', 'Plain text')"
+						@check="editorPlainText = true"
+						@uncheck="editorPlainText = false"
+						>{{ t('mail', 'Plain text') }}</ActionCheckbox
+					>
 				</Actions>
 				<div>
 					<input
@@ -169,8 +178,8 @@ import uniqBy from 'lodash/fp/uniqBy'
 import Autosize from 'vue-autosize'
 import debouncePromise from 'debounce-promise'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import {translate as t} from '@nextcloud/l10n'
 import Vue from 'vue'
@@ -198,8 +207,8 @@ export default {
 	name: 'Composer',
 	components: {
 		Actions,
+		ActionButton,
 		ActionCheckbox,
-		ActionText,
 		ComposerAttachments,
 		Loading,
 		Multiselect,
@@ -348,6 +357,12 @@ export default {
 		onInputChanged() {
 			this.saveDraftDebounced(this.getMessageData())
 		},
+		onAddLocalAttachment() {
+			this.$refs.composerAttachments.onAddLocalAttachment()
+		},
+		onAddCloudAttachment() {
+			this.$refs.composerAttachments.onAddCloudAttachment()
+		},
 		onAutocomplete(term) {
 			if (term === undefined || term === '') {
 				return

src/components/ComposerAttachments.vue

@@ -28,19 +28,12 @@
 				</div>
 				<div class="new-message-attachments-action svg icon-delete" @click="onDelete(attachment)"></div>
 			</li>
+			<li v-if="uploading" class="attachments-upload-progress">
+				<div :class="{'icon-loading-small': uploading}"></div>
+				<div>{{ uploading ? t('mail', 'Uploading {percent}% …', {percent: uploadProgress}) : '' }}</div>
+			</li>
 		</ul>
-		<button class="button" :disabled="uploading" @click="onAddLocalAttachment">
-			<span :class="{'icon-upload': !uploading, 'icon-loading-small': uploading}"></span>
-			{{
-				uploading
-					? t('mail', 'Uploading {percent}% …', {percent: uploadProgress})
-					: t('mail', 'Upload attachment')
-			}}
-		</button>
-		<button class="button" @click="onAddCloudAttachment">
-			<span class="icon-folder" />
-			{{ t('mail', 'Add attachment from Files') }}
-		</button>
+
 		<input ref="localAttachments" type="file" multiple style="display: none;" @change="onLocalAttachmentSelected" />
 	</div>
 </template>
@@ -177,4 +170,12 @@ button {
 	border: 1px solid #e9322d;
 	background: #e9322d;
 }
+
+.attachments-upload-progress {
+	display: flex;
+}
+
+.attachments-upload-progress > div {
+	padding-left: 3px;
+}
 </style>