go/mailpit
1
0
Fork 0
mirror of https://github.com/axllent/mailpit.git synced 2025-08-15 20:13:16 +02:00
Code Issues Releases Activity

Merge branch 'feature/ui-tweaks' into develop

Browse Source
This commit is contained in:
Ralph Slooten
2022-08-07 10:14:40 +12:00
parent d9f1f88107 61e15e4155
commit 29c7295d16
5 changed files with 123 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
server/api.go
View File

@@ -218,6 +218,22 @@ func apiUnreadOne(w http.ResponseWriter, r *http.Request) {
_, _ = w.Write([]byte("ok"))
}
// Mark single message as unread
func apiMarkAllRead(w http.ResponseWriter, r *http.Request) {
vars := mux.Vars(r)
mailbox := vars["mailbox"]
err := storage.MarkAllRead(mailbox)
if err != nil {
httpError(w, err.Error())
return
}
w.Header().Add("Content-Type", "text/plain")
_, _ = w.Write([]byte("ok"))
}
// Websocket to broadcast changes
func apiWebsocket(w http.ResponseWriter, r *http.Request) {
websockets.ServeWs(websockets.MessageHub, w, r)

1
server/server.go
View File

@@ -39,6 +39,7 @@ func Listen() {
r.HandleFunc("/api/{mailbox}/search", middleWareFunc(apiSearchMailbox))
r.HandleFunc("/api/{mailbox}/delete", middleWareFunc(apiDeleteAll))
r.HandleFunc("/api/{mailbox}/events", apiWebsocket)
r.HandleFunc("/api/{mailbox}/read", apiMarkAllRead)
r.HandleFunc("/api/{mailbox}/{id}/source", middleWareFunc(apiDownloadSource))
r.HandleFunc("/api/{mailbox}/{id}/part/{partID}", middleWareFunc(apiDownloadAttachment))
r.HandleFunc("/api/{mailbox}/{id}/delete", middleWareFunc(apiDeleteOne))

71
server/ui-src/App.vue
View File

@@ -99,6 +99,13 @@ export default {
this.loadMessages();
},
resetSearch: function(e) {
e.preventDefault();
this.search = '';
this.scrollInPlace = true;
this.loadMessages();
},
reloadMessages: function() {
this.search = "";
this.start = 0;
@@ -198,6 +205,16 @@ export default {
});
},
markAllRead: function() {
let self = this;
let uri = 'api/' + self.mailbox + '/read'
self.get(uri, false, function(response) {
window.location.hash = "";
self.scrollInPlace = true;
self.loadMessages();
});
},
// websocket connect
connect: function () {
let wsproto = location.protocol == 'https:' ? 'wss' : 'ws';
@@ -210,12 +227,14 @@ export default {
}
// new messages
if (response.Type == "new" && response.Data) {
if (self.start < 1) {
if (!self.searching) {
if (!self.searching) {
if (self.start < 1) {
self.items.unshift(response.Data);
if (self.items.length > self.limit) {
self.items.pop();
}
} else {
self.start++;
}
}
self.total++;
@@ -299,7 +318,7 @@ export default {
</script>
<template>
<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light">
<div class="navbar navbar-expand-lg navbar-light row flex-shrink-0 bg-light shadow-sm">
<div class="col-lg-2 col-md-3 col-auto">
<a class="navbar-brand" href="#" v-on:click="reloadMessages">
<img src="mailpit.svg" alt="Mailpit">
@@ -325,7 +344,10 @@ export default {
<div class="col col-md-9 col-lg-5" v-if="!message && total">
<form v-on:submit="doSearch">
<div class="input-group">
<input type="text" class="form-control" v-model.trim="search" placeholder="Search mailbox">
<div class="d-flex bg-white border rounded-start flex-fill position-relative">
<input type="text" class="form-control border-0" v-model.trim="search" placeholder="Search mailbox">
<span class="btn btn-link position-absolute end-0 text-muted" v-if="search" v-on:click="resetSearch"><i class="bi bi-x-circle"></i></span>
</div>
<button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
</div>
</form>
@@ -358,15 +380,15 @@ export default {
<div class="row flex-fill" style="min-height:0">
<div class="d-none d-md-block col-lg-2 col-md-3 mh-100 position-relative" style="overflow-y: auto;">
<ul class="list-unstyled mt-3 mb-5">
<li v-if="isConnected" title="Messages will auto-load">
<li v-if="isConnected" title="Messages will auto-load" class="mb-2">
<i class="bi bi-power text-success"></i>
Connected
</li>
<li v-else title="You need to manually refresh your mailbox">
<li v-else title="You need to manually refresh your mailbox" class="mb-3">
<i class="bi bi-power text-danger"></i>
Disconnected
</li>
<li class="mt-3">
<li class="mb-5">
<a class="position-relative ps-0" href="#" v-on:click="reloadMessages">
<i class="bi bi-envelope me-1" v-if="isConnected"></i>
<i class="bi bi-arrow-clockwise me-1" v-else></i>
@@ -376,20 +398,26 @@ export default {
</span>
</a>
</li>
<li class="mt-3">
<a v-if="total" href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
<li class="my-3" v-if="unread">
<a href="#" data-bs-toggle="modal" data-bs-target="#MarkAllReadModal">
<i class="bi bi-check2-square"></i>
Mark all read
</a>
</li>
<li class="my-3" v-if="total">
<a href="#" data-bs-toggle="modal" data-bs-target="#DeleteAllModal">
<i class="bi bi-trash-fill me-1 text-danger"></i>
Delete all
</a>
</li>
<li class="mt-3" v-if="notificationsSupported && !notificationsEnabled">
<li class="my-3" v-if="notificationsSupported && !notificationsEnabled">
<a href="#" data-bs-toggle="modal" data-bs-target="#EnableNotificationsModal" title="Enable browser notifications">
<i class="bi bi-bell"></i>
Enable alerts
</a>
</li>
<li class="mt-5 position-fixed bottom-0">
<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white py-2">
<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white my-3">
<i class="bi bi-github"></i>
GitHub
</a>
@@ -433,7 +461,7 @@ export default {
</div>
</a>
</div>
<div v-else class="text-muted py-3">No messages</div>
<div v-else class="text-muted my-3">No messages</div>
</div>
<Message v-if="message" :message="message" :mailbox="mailbox"></Message>
@@ -466,6 +494,25 @@ export default {
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="MarkAllReadModal" tabindex="-1" aria-labelledby="MarkAllReadModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MarkAllReadModalLabel">Mark all messages as read?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This will mark {{ formatNumber(unread) }} message<span v-if="unread > 1">s</span> as read.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" v-on:click="markAllRead">Confirm</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="EnableNotificationsModal" tabindex="-1" aria-labelledby="EnableNotificationsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">

19
server/ui-src/assets/styles.scss
View File

@@ -1,16 +1,18 @@
// @import "../../../node_modules/bootstrap-icons"; ///scss/root";
@import "bootstrap";
[v-cloak] {
display: none !important;
}
.navbar-brand {
color: #2d4a5d;
.navbar {
z-index: 99;
img {
width: 40px;
.navbar-brand {
color: #2d4a5d;
img {
width: 40px;
}
}
}
@@ -25,7 +27,6 @@
}
.message.read:not(.active) {
// background: $gray-100;
color: $gray-500;
}
@@ -52,3 +53,7 @@
vertical-align: top;
}
}
.list-group-item:first-child {
border-top: 0;
}

35
storage/database.go
View File

@@ -574,3 +574,38 @@ func DeleteAllMessages(mailbox string) error {
return nil
}
// MarkAllRead will mark every unread message in a mailbox as read
func MarkAllRead(mailbox string) error {
mailbox = sanitizeMailboxName(mailbox)
totalStart := time.Now()
q, err := db.FindAll(clover.NewQuery(mailbox).
Where(clover.Field("Read").IsFalse()))
if err != nil {
return err
}
total := len(q)
updates := make(map[string]interface{})
updates["Read"] = true
for _, m := range q {
if err := db.UpdateById(mailbox, m.ObjectId(), updates); err != nil {
logger.Log().Error(err)
return err
}
}
if err := statsRefresh(mailbox); err != nil {
return err
}
elapsed := time.Since(totalStart)
logger.Log().Debugf("[db] marked %d messages in %s as read in %s", total, mailbox, elapsed)
return nil
}