From 9da4216694af3d718c16ccfa7d0dca12d5c039c6 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Tue, 22 Jun 2021 15:25:36 +0200
Subject: [PATCH] Remove b-form-group, -input and related
---
.../assets/vue/components/MessageComposer.vue | 101 +++---
.../assets/vue/components/MessagesTable.vue | 302 ++++++++++--------
2 files changed, 222 insertions(+), 181 deletions(-)
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 80022f30f..90261d6fc 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessageComposer.vue
@@ -105,77 +105,72 @@
</div>
</div>
<hr>
- <b-form>
+ <form>
<div class="row">
<div class="col col-lg-6">
- <b-form-group
- id="from_account"
- label="From:"
- label-for="input-from-account"
- >
- <b-form-select
- id="input-from-account"
+ <div class="input-group mb-3">
+ <span class="input-group-text">From</span>
+ <select
v-model="form.from_account"
- :options="from_account_accesses"
- type="int"
- value-field="account.pk"
- text-field="account.email"
+ class="form-select"
>
- </b-form-select>
- </b-form-group>
+ <option
+ v-for="access in from_account_accesses"
+ :key="access.account.pk"
+ :value="access.account.pk"
+ >
+ {{ access.account.email }}
+ </option>
+ </select>
+ </div>
</div>
<div class="col col-lg-6">
- <b-form-group
- id="to-recipient"
- label="To:"
- label-for="input-to-recipient"
- >
+ <div class="input-group mb-3">
+ <span class="input-group-text">To</span>
<ul v-if="form.to_recipient">
<li>{{ form.to_recipient }}</li>
</ul>
- <select-from-address-book @selected="onToRecipientSelected"></select-from-address-book>
- </b-form-group>
+ <select-from-address-book
+ @selected="onToRecipientSelected">
+ </select-from-address-book>
+ </div>
</div>
</div>
<div class="row">
<div class="col col-lg-6">
- <b-form-group
- id="cc"
- label="cc:"
- >
- <email-list-editable :emails="form.cc_recipients" keyword="cc"></email-list-editable>
- </b-form-group>
+ <div class="input-group mb-3">
+ <span class="input-group-text">CC</span>
+ <email-list-editable
+ :emails="form.cc_recipients"
+ keyword="cc"
+ >
+ </email-list-editable>
+ </div>
</div>
<div class="col col-lg-6">
- <b-form-group
- id="bcc"
- label="bcc:"
- >
- <email-list-editable :emails="form.bcc_recipients" keyword="bcc"></email-list-editable>
- </b-form-group>
+ <div class="input-group mb-3">
+ <span class="input-group-text">BCC</span>
+ <email-list-editable
+ :emails="form.bcc_recipients"
+ keyword="bcc"
+ >
+ </email-list-editable>
+ </div>
</div>
</div>
- <b-form-group
- id="attachments"
- label="Attachments:"
- class="mb-4"
- >
- <attachment-list-editable
- :attachments="form.attachments">
- </attachment-list-editable>
- </b-form-group>
- <b-form-group
- id="subject"
- label="Subject:"
- label-for="input-subject"
- class="mb-4"
- >
- <b-form-input
- id="input-subject"
+ </form>
+ <form>
+ <attachment-list-editable
+ :attachments="form.attachments">
+ </attachment-list-editable>
+ <div class="input-group mb-3">
+ <span class="input-group-text">Subject</span>
+ <input
+ type="text"
+ class="form-control"
v-model="form.subject"
>
- </b-form-input>
- </b-form-group>
+ </div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar">
@@ -335,7 +330,7 @@
</div>
</editor-menu-bar>
<editor-content class="editor__content m-1 p-1" :editor="editor" />
- </b-form>
+ </form>
</div>
</template>
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 f3ce2a535..c2a0448ce 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
@@ -248,84 +248,110 @@
</div>
</div>
<div class="col col-lg-6">
- <b-form-group
- label="Refresh interval: "
- label-cols-sm="6"
- label-align-sm="right"
- label-size="sm"
- >
- <b-form-radio-group
- v-model="refreshMinutes"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="refreshMinutesOptions"
- class="float-center"
- >
- mins
- </b-form-radio-group>
- </b-form-group>
+ <div class="row">
+ <div class="col">
+ Refresh interval:
+ </div>
+ <div class="col">
+ <div
+ v-for="refreshOption in refreshMinutesOptions"
+ class="form-check form-check-inline"
+ >
+ <input
+ class="form-check-input"
+ type="radio"
+ name="refreshMinutesRadio"
+ v-model="refreshMinutes"
+ :value="refreshOption"
+ :id="'refreshOption' + refreshOption"
+ >
+ <label
+ class="form-check-label"
+ for="'refreshOption' + refreshOption"
+ >
+ {{ refreshOption }}
+ </label>
+ </div>
+ </div>
+ <div class="col">
+ minutes
+ </div>
+ </div>
</div>
</div>
<hr class="hr-lightweight mt-1 mb-2">
<div class="row mb-0">
- <div class="col col-lg-1">
- <strong>Restrict:</strong>
- </div>
- <div class="col
- col-lg-4">
- <b-form-group
- label="Last: "
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
+ <div class="col col-lg-4">
+ <div>
+ <strong>Last:</strong>
+ </div>
+ <div
+ v-for="timePeriodOption in timePeriodOptions"
+ class="form-check form-check-inline"
>
- <b-form-radio-group
+ <input
+ class="form-check-input"
+ type="radio"
+ name="timePeriodRadio"
v-model="timePeriod"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="timePeriodOptions"
+ :value="timePeriodOption.value"
+ :id="'timePeriodOption' + timePeriodOption.value"
+ >
+ <label
+ class="form-check-label"
+ for="'timePeriodOption' + timePeriodOption.value"
>
- </b-form-radio-group>
- </b-form-group>
+ {{ timePeriodOption.text }}
+ </label>
+ </div>
</div>
<div class="col col-lg-4">
- <b-form-group
- label="Status:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
+ <div>
+ <strong>Status:</strong>
+ </div>
+ <div
+ v-for="readStatusOption in readStatusOptions"
+ class="form-check form-check-inline"
>
- <b-form-radio-group
+ <input
+ class="form-check-input"
+ type="radio"
+ name="readStatusRadio"
v-model="readStatus"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="readStatusOptions"
+ :value="readStatusOption.value"
+ :id="'readStatusOption' + readStatusOption.value"
+ >
+ <label
+ class="form-check-label"
+ for="'readStatusOption' + readStatusOption.value"
>
- </b-form-radio-group>
- </b-form-group>
+ {{ readStatusOption.text }}
+ </label>
+ </div>
</div>
- <div class="col col-lg-3">
- <b-form-group
- label="Flow:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
+ <div class="col col-lg-4">
+ <div>
+ <strong>Flow:</strong>
+ </div>
+ <div
+ v-for="flowDirectionOption in flowDirectionOptions"
+ class="form-check form-check-inline"
>
- <b-form-radio-group
+ <input
+ class="form-check-input"
+ type="radio"
+ name="flowDirectionRadio"
v-model="flowDirection"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="flowDirectionOptions"
+ :value="flowDirectionOption.value"
+ :id="'flowDirectionOption' + flowDirectionOption.value"
>
- </b-form-radio-group>
- </b-form-group>
+ <label
+ class="form-check-label"
+ for="'flowDirectionOption' + flowDirectionOption.value"
+ >
+ {{ flowDirectionOption.text }}
+ </label>
+ </div>
</div>
</div>
<hr class="hr-lightweight mt-1 mb-2">
@@ -334,24 +360,27 @@
<strong>Tags:</strong>
</div>
<div class="col col-lg-9">
- <b-form-group
- label-align-sm="right"
- label-size="sm"
+ <div
+ v-for="tag in tags"
+ class="form-check form-check-inline"
>
- <b-form-checkbox-group>
- <b-form-checkbox v-model="tagsRequired" v-for="tag in tags" :value="tag.pk" :key="tag.pk">
- <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>
+ <input
+ class="form-check-input"
+ type="checkbox"
+ v-model="tagsRequired"
+ :value="tag.pk"
+ :key="tag.pk"
+ >
+ <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>
+ </div>
</div>
<div class="col col-lg-2">
<button
@@ -367,46 +396,43 @@
<hr class="hr-lightweight mt-1 mb-2">
<div class="row mb-0">
<div class="col col-lg-6">
- <b-form-group>
- <b-input-group size="sm">
- <b-form-input
- v-model="filter"
- debounce="250"
- type="search"
- id="filterInput"
- placeholder="Type to filter"
- >
- </b-form-input>
- <b-input-group-append>
- <button
- :disabled="!filter"
- @click="filter = ''"
- >
- Clear
- </button>
- </b-input-group-append>
- </b-input-group>
- </b-form-group>
+ <div class="input-group mb-3">
+ <input
+ type="text"
+ class="form-control"
+ v-model="filter"
+ placeholder="Type to filter"
+ >
+ <button
+ :disabled="!filter"
+ @click="filter = ''"
+ >
+ Clear
+ </button>
+ </div>
</div>
<div class="col col-lg-6 mb-0">
- <b-form-group
- description="Leave all unchecked to filter on all fields"
- class="mb-0"
+ <div
+ v-for="filterOnOption in filterOnOptions"
+ class="form-check form-check-inline"
>
- <b-form-checkbox-group
+ <input
+ class="form-check-input"
+ type="checkbox"
v-model="filterOn"
- buttons
- button-variant="outline-primary"
- class="mt-1 mb-0"
- size="sm"
+ :value="filterOnOption.value"
+ id="'filterOnOption' + filterOnOption.value"
>
- <b-form-checkbox value="from">From</b-form-checkbox>
- <b-form-checkbox value="recipients">Recipients</b-form-checkbox>
- <b-form-checkbox value="subject">Subject</b-form-checkbox>
- <b-form-checkbox value="body">Body</b-form-checkbox>
- <b-form-checkbox value="attachment">Attachments</b-form-checkbox>
- </b-form-checkbox-group>
- </b-form-group>
+ <label
+ class="form-check-label"
+ for="'filterOnOption' + filterOnOption.value"
+ >
+ {{ filterOnOption.text }}
+ </label>
+ </div>
+ <div>
+ Leave all unchecked to filter on all fields
+ </div>
</div>
</div>
</div>
@@ -493,25 +519,38 @@
</div>
</div>
<div class="col col-lg-4">
- <b-form-input
- v-model="currentPage"
- >
- </b-form-input>
+ <div class="input-group mb-3">
+ <span class="input-group-text">Page</span>
+ <input
+ type="text"
+ class="form-control"
+ v-model="currentPage"
+ >
+ </div>
</div>
<div class="col col-lg-4">
- <b-form-group
- label="Per page:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
+ <div>
+ <strong>Per page:</strong>
+ </div>
+ <div
+ v-for="perPageOption in perPageOptions"
+ class="form-check form-check-inline"
>
- <b-form-radio-group
+ <input
+ class="form-check-input"
+ type="radio"
+ name="perPageRadio"
v-model="perPage"
- :options="perPageOptions"
- class="float-center"
+ :value="perPageOption"
+ :id="'perPageOption' + perPageOption"
+ >
+ <label
+ class="form-check-label"
+ for="'perPageOption' + perPageOption"
>
- </b-form-radio-group>
- </b-form-group>
+ {{ perPageOption }}
+ </label>
+ </div>
</div>
</div>
</div>
@@ -623,6 +662,13 @@ export default {
loadError: false,
filter: null,
filterOn: [],
+ filterOnOptions: [
+ { text: 'From', value: 'from'},
+ { text: 'Recipients', value: 'recipients'},
+ { text: 'Subject', value: 'subject'},
+ { text: 'Body', value: 'body'},
+ { text: 'Attachment', value: 'attachment'},
+ ],
threadOf: null,
timePeriod: 'any',
timePeriodOptions: [
--
GitLab