From 624f4db40dcfb3b482e583421f1c8e9251d88ca3 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Mon, 27 Jan 2020 20:37:11 +0100
Subject: [PATCH] Work on MessageComposer
---
.../assets/vue/components/MessageComposer.vue | 113 +++++++++++-------
.../assets/vue/components/MessageContent.vue | 74 +++++++++---
2 files changed, 131 insertions(+), 56 deletions(-)
diff --git a/apimail/static/apimail/assets/vue/components/MessageComposer.vue b/apimail/static/apimail/assets/vue/components/MessageComposer.vue
index 1a4125eeb..e18fe33f2 100644
--- a/apimail/static/apimail/assets/vue/components/MessageComposer.vue
+++ b/apimail/static/apimail/assets/vue/components/MessageComposer.vue
@@ -2,40 +2,46 @@
<div>
<h1>Compose email message</h1>
<b-form>
- <b-form-group
- id="from_account"
- label="From:"
- label-for="input-from-account"
- class="mb-4"
- >
- <b-form-input
- id="input-from-account"
- v-model="form.from_account"
- type="email"
- required
- >
- </b-form-input>
- </b-form-group>
- <b-form-group
- id="to-recipient"
- label="To:"
- label-for="input-to-recipient"
- class="mb-4"
- >
- <b-form-input
- id="input-to-recipient"
- v-model="form.torecipient"
- type="email"
- required
- placeholder="Enter main recipient's email"
- >
- </b-form-input>
- </b-form-group>
+ <b-row>
+ <b-col class="col-lg-6">
+ <b-form-group
+ id="from_account"
+ label="From:"
+ label-for="input-from-account"
+ class="mb-4"
+ >
+ <b-form-input
+ id="input-from-account"
+ v-model="form.from_account"
+ type="email"
+ required
+ >
+ </b-form-input>
+ </b-form-group>
+ </b-col>
+ <b-col class="col-lg-6">
+ <b-form-group
+ id="to-recipient"
+ label="To:"
+ label-for="input-to-recipient"
+ class="mb-4"
+ >
+ <b-form-input
+ id="input-to-recipient"
+ v-model="form.torecipient"
+ type="email"
+ required
+ placeholder="Enter main recipient's email"
+ >
+ </b-form-input>
+ </b-form-group>
+ </b-col>
+ </b-row>
<b-form-group
id="cc"
label="cc:"
label-for="input-cc"
- class="mb-4"
+ class="mb-2"
>
<b-form-input
id="input-cc"
@@ -86,7 +92,10 @@
</b-col>
<b-col class="col-lg-6">
<h3>Preview:</h3>
- <span v-html="sanitized_body_html"></span>
+ <span
+ v-html="sanitized_body_html"
+ class="white-space-pre-wrap"
+ ></span>
</b-col>
</b-row>
<b-button type="savedraft" variant="warning">Save draft</b-button>
@@ -102,7 +111,11 @@
originalmessage: {
type: Object,
required: false,
- }
+ },
+ action: {
+ type: String,
+ required: true,
+ },
},
data () {
return {
@@ -125,15 +138,35 @@
mounted () {
if (this.originalmessage) {
this.form.from_account = this.originalmessage.data.To
- this.form.torecipient = this.originalmessage.data.sender
- this.form.cc = this.originalmessage.data.recipients
- this.form.subject = 'Re: ' + this.originalmessage.data.subject
- this.form.body = ('\n\n<blockquote>\nOn '
- + this.originalmessage.datetimestamp
- + ', ' + this.originalmessage.data.from + ' wrote:\n'
- + this.originalmessage.data["body-plain"]
- + '\n</blockquote>')
+ this.form.body = ('\n\n<blockquote>\n')
+ if (this.action == 'reply') {
+ this.form.torecipient = this.originalmessage.data.sender
+ this.form.cc = this.originalmessage.data.recipients
+ this.form.subject = 'Re: ' + this.originalmessage.data.subject
+ this.form.body += ('On ' + this.originalmessage.datetimestamp +
+ ', ' + this.originalmessage.data.from +
+ ' wrote:\n\n')
+ }
+ if (this.action == 'forward') {
+ this.form.subject = 'Fwd: ' + this.originalmessage.data.subject
+ this.form.body += ('Begin forwarded message:\n\n' +
+ 'From: ' + this.originalmessage.data.sender +
+ '\nSubject: ' + this.originalmessage.subject +
+ '\nDate: ' + this.originalmessage.datetimestamp +
+ '\nTo: ' + this.originalmessage.data.To +
+ '\n\n')
+ }
+ this.form.body += (this.originalmessage.data["body-plain"] +
+ '\n</blockquote>')
}
}
}
</script>
+
+<style scoped>
+
+ .white-space-pre-wrap {
+ white-space: pre-wrap;
+ }
+
+</style>
diff --git a/apimail/static/apimail/assets/vue/components/MessageContent.vue b/apimail/static/apimail/assets/vue/components/MessageContent.vue
index 74732f4e6..08429da4e 100644
--- a/apimail/static/apimail/assets/vue/components/MessageContent.vue
+++ b/apimail/static/apimail/assets/vue/components/MessageContent.vue
@@ -1,23 +1,65 @@
<template>
<div>
- <b-card header-tag="header" footer-tag="footer" class="overflow-x-auto">
+ <b-card
+ border-variant="primary"
+ class="overflow-x-auto"
+ header-tag="header"
+ footer-tag="footer"
+ >
<template v-slot:header>
- <b-button v-b-modal.modal-reply>Reply</b-button>
- <b-modal
- id="modal-reply"
- size="xl"
- title="Reply"
- hide-header-close
- no-close-on-escape
- no-close-on-backdrop
- >
- <message-composer :originalmessage="message"></message-composer>
- <template v-slot:modal-footer="{ cancel, }">
- <b-button size="sm" variant="danger" @click="cancel()">
- Cancel
+
+ <ul class="list-inline m-2">
+ <li class="list-inline-item">
+ <b-button
+ v-b-modal.modal-reply
+ variant="primary"
+ >
+ Reply
+ </b-button>
+ <b-modal
+ id="modal-reply"
+ size="xl"
+ title="Reply"
+ hide-header-close
+ no-close-on-escape
+ no-close-on-backdrop
+ >
+ <message-composer :originalmessage="message" action="reply"></message-composer>
+ <template v-slot:modal-footer="{ cancel, }">
+ <b-button size="sm" variant="danger" @click="cancel()">
+ Cancel
+ </b-button>
+ </template>
+ </b-modal>
+ </li>
+ <li class="list-inline-item">
+ <b-button
+ v-b-modal.modal-forward
+ variant="dark"
+ text-variant="white"
+ >
+ Forward
</b-button>
- </template>
- </b-modal>
+ <b-modal
+ id="modal-forward"
+ size="xl"
+ title="Forward"
+ hide-header-close
+ no-close-on-escape
+ no-close-on-backdrop
+ >
+ <message-composer :originalmessage="message" action="forward"></message-composer>
+ <template v-slot:modal-footer="{ cancel, }">
+ <b-button variant="danger" @click="cancel()">
+ Cancel
+ </b-button>
+ </template>
+ </b-modal>
+ </li>
+ <li class="list-inline-item">
+ </li>
+ </ul>
+ <hr>
<div class="text-dark">
<b-row>
<b-col class="col-lg-8">
--
GitLab