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 c7584db06bfadbb7c8ab93bd531aba8320e5e7d7..d8b8a27f69716917692ef3ed50b2b09a2be133c4 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
@@ -3,44 +3,36 @@
<div class="row">
<div class="col-lg-6">
<template v-if="!markReadySuccessful">
- <b-button
- type="savedraft"
- class="text-white mx-1 px-2 py-1"
- variant="warning"
+ <button
+ class="btn btn-warning text-white mx-1 px-2 py-1"
@click.stop.prevent="saveMessage('draft')"
:disabled="saveDraftSuccessful"
>
Save draft
- </b-button>
+ </button>
<span v-if="!allEmailsValid">
- <b-button
- type="validateemails"
- class="text-white mx-1 px-2 py-1"
- variant="warning"
+ <button
+ class="btn btn-warning text-white mx-1 px-2 py-1"
@click.stop.prevent="validateAllEmails()"
:disabled="emailValidationHasRun || (!form.to_recipient && form.cc_recipients.length == 0 && form.bcc_recipients == 0)"
>
Validate emails
- </b-button>
+ </button>
</span>
<span v-else>
- <b-button
- type="validateemails"
- class="text-white mx-1 px-2 py-1"
- variant="success"
+ <button
+ class="btn btn-success text-white mx-1 px-2 py-1"
>
All emails are validated
- </b-button>
+ </button>
</span>
- <b-button
- type="send"
- class="text-white px-2 py-1 mx-1 my-2"
- variant="primary"
+ <button
+ class="btn btn-primary text-white px-2 py-1 mx-1 my-2"
:disabled="!emailValidationHasRun || !allEmailsValid"
@click.stop.prevent="saveMessage('ready')"
>
Send
- </b-button>
+ </button>
</template>
<template v-if="markReadySuccessful">
<p class="m-2 p-2 bg-success text-white">
@@ -92,7 +84,7 @@
>
</b-form-input>
<b-input-group-append>
- <b-button type="submit" size="sm" variant="primary">Add</b-button>
+ <button type="submit" class="btn btn-sm btn-primary">Add</button>
</b-input-group-append>
</b-input-group>
<b-input-group>
@@ -187,144 +179,159 @@
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar">
- <b-button
- v-b-tooltip.hover title="boldface"
- :pressed.sync="isActive.bold()"
+ <button
+ data-bs-toggle="tooltip"
+ title="boldface"
+ :class="isActive.bold() ? 'active' : ''"
@click.stop.prevent="commands.bold"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-bold" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="italics"
- :pressed.sync="isActive.italic()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="italics"
+ :class="isActive.italic() ? 'active' : ''"
@click.stop.prevent="commands.italic"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-italic" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="strikethrough"
- :pressed.sync="isActive.strike()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="strikethrough"
+ :class="isActive.strike() ? 'active' : ''"
@click.stop.prevent="commands.strike"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-strikethrough" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.527 13.164c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5h3.45c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967zM6.602 6.5H5.167a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607 0 .31.083.581.27.814z"/>
<path fill-rule="evenodd" d="M15 8.5H1v-1h14v1z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="underline"
- :pressed.sync="isActive.underline()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="underline"
+ :class="isActive.underline() ? 'active' : ''"
@click.stop.prevent="commands.underline"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-type-underline" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136z"/>
<path fill-rule="evenodd" d="M12.5 15h-9v-1h9v1z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="inline code"
- :pressed.sync="isActive.code()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="inline code"
+ :class="isActive.code() ? 'active' : ''"
@click.stop.prevent="commands.code"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-code" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
</svg>
- </b-button>
- <b-button
- class="menubar__b-button"
- v-b-tooltip.hover title="paragraph"
- :pressed.sync="isActive.paragraph()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="paragraph"
+ :class="isActive.paragraph() ? 'active' : ''"
@click.stop.prevent="commands.paragraph"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-paragraph" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1h4.5a.5.5 0 0 1 0 1H11v12.5a.5.5 0 0 1-1 0V2H9v12.5a.5.5 0 0 1-1 0V1z"/>
<path d="M9 1v8H7a4 4 0 1 1 0-8h2z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="level 1 heading"
- :pressed.sync="isActive.heading({ level: 1 })"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="level 1 heading"
+ :class="isActive.heading({ level: 1 }) ? 'active' : ''"
@click.stop.prevent="commands.heading({ level: 1 })"
>
H1
- </b-button>
- <b-button
- v-b-tooltip.hover title="level 2 heading"
- :pressed.sync="isActive.heading({ level: 2 })"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="level 2 heading"
+ :class="isActive.heading({ level: 2 }) ? 'active' : ''"
@click.stop.prevent="commands.heading({ level: 2 })"
>
H2
- </b-button>
- <b-button
- v-b-tooltip.hover title="level 3 heading"
- :pressed.sync="isActive.heading({ level: 3 })"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="level 3 heading"
+ :class="isActive.heading({ level: 3 }) ? 'active' : ''"
@click.stop.prevent="commands.heading({ level: 3 })"
>
H3
- </b-button>
- <b-button
- v-b-tooltip.hover title="bulleted list"
- :pressed.sync="isActive.bullet_list()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="bulleted list"
+ :class="isActive.bullet_list() ? 'active' : ''"
@click.stop.prevent="commands.bullet_list"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-list-ul" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="numbered list"
- :pressed.sync="isActive.ordered_list()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="numbered list"
+ :class="isActive.ordered_list() ? 'active' : ''"
@click.stop.prevent="commands.ordered_list"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-list-ol" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
<path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="blockquote"
- :pressed.sync="isActive.blockquote()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="blockquote"
+ :class="isActive.blockquote() ? 'active' : ''"
@click.stop.prevent="commands.blockquote"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-blockquote-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm5 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
<path d="M3.734 6.352a6.586 6.586 0 0 0-.445.275 1.94 1.94 0 0 0-.346.299 1.38 1.38 0 0 0-.252.369c-.058.129-.1.295-.123.498h.282c.242 0 .431.06.568.182.14.117.21.29.21.521a.697.697 0 0 1-.187.463c-.12.14-.289.21-.503.21-.336 0-.577-.108-.721-.327C2.072 8.619 2 8.328 2 7.969c0-.254.055-.485.164-.692.11-.21.242-.398.398-.562.16-.168.33-.31.51-.428.18-.117.33-.213.451-.287l.211.352zm2.168 0a6.588 6.588 0 0 0-.445.275 1.94 1.94 0 0 0-.346.299c-.113.12-.199.246-.257.375a1.75 1.75 0 0 0-.118.492h.282c.242 0 .431.06.568.182.14.117.21.29.21.521a.697.697 0 0 1-.187.463c-.12.14-.289.21-.504.21-.335 0-.576-.108-.72-.327-.145-.223-.217-.514-.217-.873 0-.254.055-.485.164-.692.11-.21.242-.398.398-.562.16-.168.33-.31.51-.428.18-.117.33-.213.451-.287l.211.352z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="code block"
- :pressed.sync="isActive.code_block()"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="code block"
+ :class="isActive.code_block() ? 'active' : ''"
@click.stop.prevent="commands.code_block"
>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-code" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
</svg> block
- </b-button>
- <b-button
- v-b-tooltip.hover title="horizontal rule"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="horizontal rule"
@click.stop.prevent="commands.horizontal_rule">
hr
- </b-button>
- <b-button
- v-b-tooltip.hover title="undo"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="undo"
@click.stop.prevent="commands.undo">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-counterclockwise" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
</svg>
- </b-button>
- <b-button
- v-b-tooltip.hover title="redo"
+ </button>
+ <button
+ data-bs-toggle="tooltip"
+ title="redo"
@click.stop.prevent="commands.redo">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-clockwise" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
- </b-button>
+ </button>
</div>
</editor-menu-bar>
<editor-content class="editor__content m-1 p-1" :editor="editor" />
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 644b46ac9f227b51b7d86a38d053e6f37aeb0ec1..435164aa7d0c7464027250da3452ed61aa994989 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
+++ b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
@@ -69,8 +69,7 @@ Vue.use(TablePlugin)
Vue.use(TabsPlugin)
// Toggle
Vue.directive('b-toggle', VBToggle)
-// Tooltips
-Vue.directive('b-tooltip', VBTooltip)
+
// Style
//import 'bootstrap/dist/css/bootstrap.css';