diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListEditable.vue b/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListEditable.vue
index 5a3f3abb69d52e99a6734f82a86ed3d38a1e46d0..9707c43e344823e6cb648d9455cbda864d0128cf 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListEditable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListEditable.vue
@@ -8,13 +8,12 @@
>
</b-form-file>
<div v-if="newAttachment">
- <b-button
- class="m-1 p-1"
- variant="secondary"
+ <button
+ class="btn btn-secondary m-1 p-1"
@click="addNewAttachment"
>
Upload this attachment and add it to your message
- </b-button>
+ </button>
</div>
</b-col>
<b-col class="col-lg-6">
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListItem.vue b/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListItem.vue
index 365d8bfd4a776fb9968beb6014e7edb36b280365..34c1e22f4840d02f0cb6031b3b029a0e4051b7a6 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListItem.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/AttachmentListItem.vue
@@ -2,11 +2,14 @@
<li>
<a :href="attachment.file" target="_blank">{{ attachment.data.name }}</a>
 ({{ content_type }}, {{ attachment.data.size }} bytes)
- <b-button class="bg-danger p-1" size="sm" @click.stop="$emit('remove')">
+ <button
+ class="btn btn-sm btn-danger bg-danger p-1"
+ @click.stop="$emit('remove')"
+ >
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
- </b-button>
+ </button>
</li>
</template>
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/EmailListItem.vue b/scipost_django/apimail/static/apimail/assets/vue/components/EmailListItem.vue
index 388a7a51cbee4f3f3488980e1552516161593d3f..6ea4512a8ac36feaa687cb6b01cc3d3725fbc5c9 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/EmailListItem.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/EmailListItem.vue
@@ -1,9 +1,11 @@
<template>
<li>
{{ email }} 
- <b-button class="bg-danger px-1 py-0 text-white" size="sm" @click.stop="$emit('remove')">
+ <button
+ class="btn btn-sm btn-danger px-1 py-0"
+ @click.stop="$emit('remove')">
X
- </b-button>
+ </button>
</li>
</template>
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue b/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
index d8b8a27f69716917692ef3ed50b2b09a2be133c4..1e5f09f542f85f600d0d640c95ff44e6b0f09613 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
@@ -575,11 +575,13 @@ export default {
},
mounted () {
this.fetchCurrentAccounts()
- if (this.accountSelected) {
+ },
+ watch: {
+ accountSelected: function () {
this.form.from_account = this.accountSelected.pk
this.form.headers_added['Reply-To'] = this.accountSelected.email
- }
- if (this.draftmessage) {
+ },
+ draftmessage: function () {
this.currentdraft_uuid = this.draftmessage.uuid
this.form.from_account = this.draftmessage.from_account
this.form.to_recipient = this.draftmessage.to_recipient
@@ -588,8 +590,10 @@ export default {
this.form.subject = this.draftmessage.subject
this.form.body_html = this.draftmessage.body_html
this.form.attachments = this.draftmessage.attachment_files
- }
- else if (this.originalmessage) {
+
+ this.editor.setContent(this.form.body_html)
+ },
+ originalmessage: function () {
this.form.body_html = ('<br><br><blockquote>')
this.form.headers_added['In-Reply-To'] = this.originalmessage.data['Message-Id']
if (this.originalmessage.data['References']) {
@@ -605,17 +609,17 @@ export default {
this.form.cc_recipients = this.originalmessage.data.recipients.split(',')
this.form.subject = 'Re: ' + this.originalmessage.data.subject
this.form.body_html += ('<p>On ' + this.originalmessage.datetimestamp +
- ', ' + this.originalmessage.data.from +
- ' wrote:</p>')
+ ', ' + this.originalmessage.data.from +
+ ' wrote:</p>')
}
if (this.action == 'forward') {
this.form.subject = 'Fwd: ' + this.originalmessage.data.subject
this.form.body_html += ('<p>Begin forwarded message:' +
- '<br>From: ' + this.originalmessage.data.sender +
- '<br>Subject: ' + this.originalmessage.subject +
- '<br>Date: ' + this.originalmessage.datetimestamp +
- '<br>To: ' + this.originalmessage.data.To +
- '</p>')
+ '<br>From: ' + this.originalmessage.data.sender +
+ '<br>Subject: ' + this.originalmessage.subject +
+ '<br>Date: ' + this.originalmessage.datetimestamp +
+ '<br>To: ' + this.originalmessage.data.To +
+ '</p>')
this.form.attachments = this.originalmessage.attachment_files
}
if (this.originalmessage.data.hasOwnProperty("body-html")) {
@@ -625,14 +629,9 @@ export default {
this.form.body_html += (this.$sanitize(this.originalmessage.data["body-plain"]))
}
this.form.body_html += '</blockquote>'
- }
- else {
- // Fill with a couple of blank lines to debug prosemirror
- this.form.body_html = '<br><br>'
- }
- this.editor.setContent(this.form.body_html)
- },
- watch: {
+
+ this.editor.setContent(this.form.body_html)
+ },
"form.to_recipient": function () {
this.emailValidationHasRun = false
this.allEmailsValid = false
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue b/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
index a04c65f70d0e890428522a64119a20ff34a45ebe..4e14cf1de55075d72100e59a81ef7124e96232a7 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
@@ -10,104 +10,150 @@
<ul class="list-inline m-2">
<li class="list-inline-item">
- <b-button
- v-b-modal="'modal-reply-' + message.uuid"
- variant="primary"
+ <button
+ type="button"
+ class="btn btn-primary"
+ data-bs-toggle="modal"
+ :data-bs-target="'#modal-reply-' + message.uuid"
>
Reply
- </b-button>
- <b-modal
+ </button>
+ <div
+ class="modal fade"
:id="'modal-reply-' + message.uuid"
- size="xl"
- title="Reply"
- hide-header-close
- no-close-on-escape
- no-close-on-backdrop
>
- <message-composer
- :originalmessage="message"
- action="reply"
- :accountSelected="accountSelected"
- ></message-composer>
- <template v-slot:modal-footer="{ close, }">
- <b-button size="sm" variant="danger" @click="close()">
- Close
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Reply
+ </h1>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close">
+ </button>
+ </div>
+ <div class="modal-body">
+ <message-composer
+ :originalmessage="message"
+ action="reply"
+ :accountSelected="accountSelected"
+ ></message-composer>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Discard/Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</li>
<li class="list-inline-item">
- <b-button
- v-b-modal="'modal-forward-' + message.uuid"
- variant="dark"
- text-variant="white"
+ <button
+ type="button"
+ class="btn btn-dark"
+ data-bs-toggle="modal"
+ :data-bs-target="'#modal-forward-' + message.uuid"
>
Forward
- </b-button>
- <b-modal
+ </button>
+ <div
+ class="modal fade"
:id="'modal-forward-' + message.uuid"
- size="xl"
- title="Forward"
- hide-header-close
- no-close-on-escape
- no-close-on-backdrop
>
- <message-composer
- :originalmessage="message"
- action="forward"
- :accountSelected="accountSelected"
- ></message-composer>
- <template v-slot:modal-footer="{ close, }">
- <b-button variant="danger" @click="close()">
- Close
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Forward
+ </h1>
+ </div>
+ <div class="modal-body">
+ <message-composer
+ :originalmessage="message"
+ action="forward"
+ :accountSelected="accountSelected"
+ ></message-composer>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</li>
<li class="list-inline-item float-right">
<ul class="list-inline">
<li class="list-inline-item m-0" v-for="tag in message.tags">
- <b-button
- size="sm"
- class="p-1"
+ <button
+ type="button"
+ class="btn btn-sm p-1"
@click.shift="tagMessage(message, tag, 'remove')"
:style="'background-color: ' + tag.bg_color"
>
<small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </b-button>
+ </button>
</li>
<li class="list-inline-item float-right mx-2">
- <b-button
- size="sm"
- v-b-modal="'modal-tags' + message.uuid"
- variant="secondary"
+ <button
+ type="button"
+ class="btn btn-sm btn-secondary"
+ data-bs-toggle="modal"
+ :data-bs-target="'#modal-tags' + message.uuid"
>
Add tag
- </b-button>
+ </button>
<br><small class="text-muted">Shift-click on tag to remove it</small>
- <b-modal
+ <div
+ class="modal fade"
:id="'modal-tags' + message.uuid"
- hide-header-close
>
- Add tag(s):
- <ul class="list-unstyled">
- <li v-for="tag in tags" class="m-1">
- <b-button
- size="sm"
- class="p-1"
- @click="tagMessage(message, tag, 'add')"
- :style="'background-color: ' + tag.bg_color"
- >
- <small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </b-button>
- </li>
- </ul>
- <template v-slot:modal-footer="{ close, }">
- <b-button size="sm" variant="success" @click="close()">
- Done
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Add tag(s):
+ </h1>
+ </div>
+ <div class="modal-body">
+ <ul class="list-unstyled">
+ <li v-for="tag in tags" class="m-1">
+ <button
+ type="button"
+ class="btn btn-sm p-1"
+ @click="tagMessage(message, tag, 'add')"
+ :style="'background-color: ' + tag.bg_color"
+ >
+ <small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
+ </button>
+ </li>
+ </ul>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</li>
</ul>
</li>
@@ -125,32 +171,48 @@
Recipients: {{ message.data.recipients }}
</b-col>
<b-col class="col-lg-2">
- <b-button
- v-b-modal="'message-events-modal' + message.uuid"
- variant="secondary"
+ <button
+ type="button"
+ class="btn btn-secondary"
+ data-bs-toggle="modal"
+ :data-bs-target="'#message-events-modal' + message.uuid"
>
<small>View all events</small>
- </b-button>
- <b-modal
+ </button>
+ <div
+ class="modal fade"
:id="'message-events-modal' + message.uuid"
- centered
- hide-header-close
>
- <ul class="list-unstyled">
- <li v-for="event in message.event_set">
- <small>
- {{ event.data.timestamp|toDatestring }} {{ event.data.event }}
- <span v-if="event.data.recipient"> 
- [{{ event.data.recipient }}]</span>
- </small>
- </li>
- </ul>
- <template v-slot:modal-footer="{ close, }">
- <b-button size="sm" variant="info" @click="close()">
- Close
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Events
+ </h1>
+ </div>
+ <div class="modal-body">
+ <ul class="list-unstyled">
+ <li v-for="event in message.event_set">
+ <small>
+ {{ event.data.timestamp|toDatestring }} {{ event.data.event }}
+ <span v-if="event.data.recipient"> 
+ [{{ event.data.recipient }}]</span>
+ </small>
+ </li>
+ </ul>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</b-col>
</b-row>
</div>
@@ -169,12 +231,20 @@
</li>
</ul>
</div>
- <b-button v-b-toggle="'message-json' + message.uuid" class="mt-2 px-2 py-0">
+ <button
+ type="button"
+ class="btn mt-2 px-2 py-0"
+ data-bs-toggle="collapse"
+ :data-bs-target="'#message-json' + message.uuid"
+ >
<small>View message JSON</small>
- </b-button>
- <b-collapse :id="'message-json' + message.uuid" class="m-2">
+ </button>
+ <div
+ class="collapse m-2"
+ :id="'message-json' + message.uuid"
+ >
{{ message }}
- </b-collapse>
+ </div>
</div>
</template>
</b-card>
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
index e5fe79f281058e3186dbe6f54f8097b3b42b070e..cc9776208f4d5ab3f5e1a367c3f344a44ada366b 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
@@ -2,84 +2,102 @@
<template>
<div>
<div v-if="currentSendingAccesses && currentSendingAccesses.length > 0" class="mb-4">
- <b-button-toolbar aria-label="apimail button toolbar">
- <b-button-group class="mx-1">
- <b-button
- v-b-modal.modal-newdraft
- variant="primary"
+ <div class="btn-toolbar" role="toolbar" aria-label="apimail button toolbar">
+ <div class="btn-group mx-1">
+ <button
+ type="button"
+ class="btn btn-primary"
+ data-bs-toggle="modal"
+ data-bs-target="#modal-newdraft"
>
New message
- </b-button>
- </b-button-group>
- <b-button-group class="mx-1">
- <b-button
- @click="showManageTagsModal"
- variant="primary"
+ </button>
+ </div>
+ <div class="btn-group mx-1">
+ <button
+ type="button"
+ class="btn btn-primary"
+ data-bs-toggle="modal"
+ data-bs-target="#modal-manage-tags"
>
Manage your tags
- </b-button>
- </b-button-group>
- </b-button-toolbar>
- <b-modal
+ </button>
+ </div>
+ </div>
+ <div
+ class="modal fade"
id="modal-newdraft"
- size="xl"
- title="New message"
- hide-header-close
- no-close-on-escape
- no-close-on-backdrop
>
- <message-composer
- :accountSelected="accountSelected"
- >
- </message-composer>
- <template v-slot:modal-header="{ close, }">
- <h1>Compose a new email message</h1>
- <b-button variant="danger" class="px-2 py-1" @click="close()">
- Discard/Close
- </b-button>
- </template>
- <template v-slot:modal-footer="{ close, }">
- <b-button variant="danger" class="px-2 py-1" @click="close()">
- Discard/Close
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Compose a new email message
+ </h1>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close">
+ </button>
+ </div>
+ <div class="modal-body">
+ <message-composer
+ :accountSelected="accountSelected"
+ >
+ </message-composer>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Discard/Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <b-modal
- id="modal-resumedraft"
- size="xl"
- title="Rework draft"
- hide-header-close
- no-close-on-escape
- no-close-on-backdrop
- >
- <message-composer :draftmessage="draftMessageSelected"></message-composer>
- <template v-slot:modal-header="{ close, }">
- <h1>Message draft</h1>
- <b-button variant="danger" class="px-2 py-1" @click="close()">
- Discard/Close
- </b-button>
- </template>
- <template v-slot:modal-footer="{ close, }">
- <b-button variant="danger" class="px-2 py-1" @click="close()">
- Discard/Close
- </b-button>
- </template>
- </b-modal>
-
- <b-modal
+ <div
+ class="modal fade"
id="modal-manage-tags"
- title="Manage your Tags"
- hide-header-close
>
- <tag-list-editable :tags="tags" @fetchtags="fetchTags"></tag-list-editable>
- <template v-slot:modal-footer="{ close, }">
- <b-button size="sm" variant="danger" @click="close()">
- Done
- </b-button>
- </template>
- </b-modal>
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Manage your Tags
+ </h1>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close">
+ </button>
+ </div>
+ <div class="modal-body">
+ <tag-list-editable
+ :tags="tags"
+ @fetchtags="fetchTags"
+ >
+ </tag-list-editable>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Discard/Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
<div v-if="draftMessages && draftMessages.length > 0" class="m-2 mb-4">
@@ -94,32 +112,69 @@
</tr>
<tr
v-for="draftmsg in draftMessages"
+ :key="draftmsg.uuid"
>
<td>{{ draftmsg.from_email }}</td>
<td>{{ draftmsg.to_recipient }}</td>
<td>{{ draftmsg.subject }}</td>
<td>{{ draftmsg.status }}</td>
<td>
- <b-button
+ <button
+ type="button"
+ class="btn btn-sm btn-warning"
@click="showReworkDraftModal(draftmsg)"
- size="sm"
- class="text-white"
- variant="warning"
>
Rework draft
- </b-button>
- <b-button
+ </button>
+ <button
+ type="button"
+ class="btn btn-sm btn-danger"
@click="deleteDraft(draftmsg.uuid)"
- size="sm"
- variant="danger"
>
Delete
- </b-button>
+ </button>
</td>
</tr>
</table>
</div>
+ <div
+ class="modal fade"
+ id="modal-resumedraft"
+ >
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Message draft
+ </h1>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close">
+ </button>
+ </div>
+ <div class="modal-body">
+ <message-composer
+ :draftmessage="draftMessageSelected"
+ >
+ </message-composer>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Discard/Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
<div v-if="queuedMessages && queuedMessages.length > 0" class="m-2 mb-4">
<h2>Messages in sending queue</h2>
<table class="table">
@@ -161,9 +216,9 @@
</tr>
<tr
v-for="access in accesses"
- v-bind:class="{'highlight': isSelected(access.account.email)}"
- v-on:click="accountSelected = access.account"
- v-on:change=""
+ :class="{'highlight': isSelected(access.account.email)}"
+ @click="accountSelected = access.account"
+ @change=""
class="p-2 m-0"
>
<td>{{ access.account.name }}</td>
@@ -191,7 +246,9 @@
Refresh now
</b-badge>
<div v-if="loadError">
- <small class="bg-danger text-white mx-2 my-1 p-1">A network problem occurred on {{ lastFetched }}</small>
+ <small class="bg-danger text-white mx-2 my-1 p-1">
+ A network problem occurred on {{ lastFetched }}
+ </small>
</div>
</b-col>
<b-col class="col-lg-6">
@@ -286,22 +343,28 @@
>
<b-form-checkbox-group>
<b-form-checkbox v-model="tagsRequired" v-for="tag in tags" :value="tag.pk" :key="tag.pk">
- <b-button size="sm" class="p-1" :style="'background-color: ' + tag.bg_color">
- <small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </b-button>
+ <button
+ type="button"
+ class="btn btn-sm p-1"
+ :style="'background-color: ' + tag.bg_color"
+ >
+ <small :style="'color: ' + tag.text_color">
+ {{ tag.label }}
+ </small>
+ </button>
</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
</b-col>
<b-col class="col-lg-2">
- <b-button
- size="sm"
- class="pb-2"
- @click="showManageTagsModal"
- variant="primary"
+ <button
+ type="button"
+ class="btn btn-sm btn-primary pb-2"
+ data-bs-toggle="modal"
+ data-bs-target="#modal-manage-tags"
>
<small>Manage your tags</small>
- </b-button>
+ </button>
</b-col>
</b-row>
<hr class="hr-lightweight mt-1 mb-2">
@@ -318,7 +381,12 @@
>
</b-form-input>
<b-input-group-append>
- <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
+ <button
+ :disabled="!filter"
+ @click="filter = ''"
+ >
+ Clear
+ </button>
</b-input-group-append>
</b-input-group>
</b-form-group>
@@ -349,9 +417,13 @@
<b-row class="mt-2 p-2">
<b-col class="my-auto"><h2 class="my-0 px-2">Thread focusing is active</h2></b-col>
<b-col class="mx-auto">
- <b-button class="text-white float-right" variant="warning" @click="unfocusThread()">
+ <button
+ type="button"
+ class="btn btn-warning text-white float-right"
+ @click="unfocusThread()"
+ >
<strong>Turn off</strong>
- </b-button>
+ </button>
</b-col>
</b-row>
</div>
@@ -404,13 +476,13 @@
<template v-slot:cell(tags)="row">
<ul class="list-inline">
<li class="list-inline-item m-0" v-for="tag in row.item.tags">
- <b-button
- size="sm"
- class="p-1"
+ <button
+ type="button"
+ class="btn btn-sm p-1"
:style="'background-color: ' + tag.bg_color"
>
<small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </b-button>
+ </button>
</li>
</ul>
</template>
@@ -419,7 +491,12 @@
<b-row class="mb-0">
<b-col class="col-lg-4">
<div class="text-center">
- <b-button size="sm" variant="info" class="p-2">{{ totalRows }} messages</b-button>
+ <button
+ type="button"
+ class="btn btn-sm btn-info p-2"
+ >
+ {{ totalRows }} messages
+ </button>
</div>
</b-col>
<b-col class="col-lg-4">
@@ -464,17 +541,26 @@
>
<template v-slot:title>
{{ tabbedMessages.length - index }}
- <b-button v-if="!threadOf" size="sm" variant="light" class="float-right ms-2 p-0" @click="closeTab(message.uuid)">
+ <button
+ v-if="!threadOf"
+ type="button"
+ class="btn btn-sm btn-light float-right ms-2 p-0"
+ @click="closeTab(message.uuid)"
+ >
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
- </b-button>
+ </button>
<br>
</template>
<div v-if="!threadOf">
- <b-button class="m-2" size="sm" variant="primary" @click="focusOnThread(message.uuid)">
+ <button
+ type="button"
+ class="btn btn-sm btn-primary m-2"
+ @click="focusOnThread(message.uuid)"
+ >
Focus on this message's thread
- </b-button>
+ </button>
</div>
<message-content
:message="message"
@@ -490,6 +576,7 @@
<script>
+import { Modal } from 'bootstrap'
import Cookies from 'js-cookie'
//import MessageContent from './MessageContent.vue'
@@ -565,6 +652,7 @@ export default {
tabsKey: 0,
tags: null,
tagsRequired: [],
+ resumeDraftModal: null
}
},
methods: {
@@ -598,12 +686,12 @@ export default {
.then(data => this.queuedMessages = data.results)
.catch(error => console.error(error))
},
- showManageTagsModal () {
- this.$bvModal.show('modal-manage-tags')
- },
+ // showManageTagsModal () {
+ // this.$bvModal.show('modal-manage-tags')
+ // },
showReworkDraftModal (draftmsg) {
this.draftMessageSelected = draftmsg
- this.$bvModal.show('modal-resumedraft')
+ this.resumeDraftModal.show()
},
deleteDraft (uuid) {
if (confirm("Are you sure you want to delete this draft?")) {
@@ -739,15 +827,20 @@ export default {
this.fetchTags()
this.fetchDrafts()
this.fetchQueued()
- this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
- if (bvEvent.componentId === 'modal-newdraft' ||
- bvEvent.componentId === 'modal-resumedraft' ||
- bvEvent.componentId === 'modal-reply' ||
- bvEvent.componentId === 'modal-forward') {
- this.fetchDrafts()
- }
- })
+
+ // To move to non-BootstrapVue JS
+ // this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
+ // if (bvEvent.componentId === 'modal-newdraft' ||
+ // bvEvent.componentId === 'modal-resumedraft' ||
+ // bvEvent.componentId === 'modal-reply' ||
+ // bvEvent.componentId === 'modal-forward') {
+ // this.fetchDrafts()
+ // }
+ // })
this.refreshInterval = setInterval(this.refreshMessages, this.refreshMinutes * 60000)
+
+ this.resumeDraftModal = new Modal(document.getElementById('modal-resumedraft'))
+
},
beforeDestroy() {
clearInterval(this.refreshInterval)
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/TagListEditable.vue b/scipost_django/apimail/static/apimail/assets/vue/components/TagListEditable.vue
index a66ea8bf3a1b5d950c8a324113abbdb145cad1f6..55ca33bb51622a5890cdd59118f7a1586464d2fc 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/TagListEditable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/TagListEditable.vue
@@ -4,18 +4,20 @@
<table class="table">
<tr v-for="tag in tags" class="mb-4">
<td>
- <b-button
- size="sm"
- class="p-1"
+ <button
+ class="btn btn-sm p-1"
:style="'background-color: ' + tag.bg_color"
>
<small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </b-button>
+ </button>
</td>
<td>
- <b-button class="float-right bg-danger text-white px-1 py-0" @click.stop="deleteTag(tag.pk)">
+ <button
+ class="float-right bg-danger text-white px-1 py-0"
+ @click.stop="deleteTag(tag.pk)"
+ >
<small>Delete</small>
- </b-button>
+ </button>
</td>
</tr>
</table>
@@ -70,13 +72,12 @@
</b-form-input>
</b-form-group>
</b-form>
- <b-button
- variant="success"
- class="text-white"
+ <button
+ class="btn btn-success text-white"
@click.stop.prevent="createNewTag"
>
Create new Tag
- </b-button>
+ </button>
</div>
</template>
diff --git a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
index 435164aa7d0c7464027250da3452ed61aa994989..e6f4bf5eccacc44b34aea78b97cb9a82f2e24b7d 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
+++ b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
@@ -40,10 +40,6 @@ Vue.component('b-row', BRow)
Vue.component('b-col', BCol)
// Badges
Vue.component('b-badge', BBadge)
-// Buttons
-Vue.component('b-button', BButton)
-Vue.component('b-button-toolbar', BButtonToolbar)
-Vue.component('b-button-group', BButtonGroup)
// Cards
Vue.use(CardPlugin)
// Collapse
@@ -59,8 +55,6 @@ Vue.component('b-form-select', BFormSelect)
// Input
Vue.component('b-input-group', BInputGroup)
Vue.component('b-input-group-append', BInputGroupAppend)
-// Modals
-Vue.use(ModalPlugin)
// Pagination
Vue.component('b-pagination', BPagination)
// Tables