Skip to content

👌 IMPROVE: put composer attachment buttons into three dot menu #2226

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

Merged
merged 2 commits into from
Nov 12, 2019
Merged

👌 IMPROVE: put composer attachment buttons into three dot menu #2226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef103eb
👌 IMPROVE: put composer attachment buttons into three dot menu
violoncelloCH Nov 9, 2019
149536a
👌 IMPROVE: use local event bus instead of component ref to pass event…
violoncelloCH Nov 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions src/components/Composer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,17 +123,26 @@
></TextEditor>
</div>
<div class="composer-actions">
<ComposerAttachments v-model="attachments" @upload="onAttachmentsUploading" />
<ComposerAttachments v-model="attachments" :bus="bus" @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
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -198,8 +207,8 @@ export default {
name: 'Composer',
components: {
Actions,
ActionButton,
ActionCheckbox,
ActionText,
ComposerAttachments,
Loading,
Multiselect,
Expand Down Expand Up @@ -269,6 +278,7 @@ export default {
selectCc: this.cc,
selectBcc: this.bcc,
editorPlainText: this.isPlainText,
bus: new Vue(),
}
},
computed: {
Expand Down Expand Up @@ -348,6 +358,12 @@ export default {
onInputChanged() {
this.saveDraftDebounced(this.getMessageData())
},
onAddLocalAttachment() {
this.bus.$emit('onAddLocalAttachment')
},
onAddCloudAttachment() {
this.bus.$emit('onAddCloudAttachment')
},
onAutocomplete(term) {
if (term === undefined || term === '') {
return
Expand Down
33 changes: 21 additions & 12 deletions src/components/ComposerAttachments.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -62,6 +55,10 @@ export default {
type: Array,
required: true,
},
bus: {
type: Object,
required: true,
},
},
data() {
return {
Expand All @@ -80,6 +77,10 @@ export default {
return ((uploaded / total) * 100).toFixed(1)
},
},
created() {
this.bus.$on('onAddLocalAttachment', this.onAddLocalAttachment)
this.bus.$on('onAddCloudAttachment', this.onAddCloudAttachment)
},
methods: {
onAddLocalAttachment() {
this.$refs.localAttachments.click()
Expand Down Expand Up @@ -177,4 +178,12 @@ button {
border: 1px solid #e9322d;
background: #e9322d;
}

.attachments-upload-progress {
display: flex;
}

.attachments-upload-progress > div {
padding-left: 3px;
}
</style>