1
0
mirror of https://github.com/axllent/mailpit.git synced 2025-01-16 02:47:11 +02:00

UI: Add previous/next message links

This commit is contained in:
Ralph Slooten 2022-09-03 22:46:38 +12:00
parent bf4d5fbc6b
commit e6a5fceedd

View File

@ -22,6 +22,8 @@ export default {
isConnected: false, isConnected: false,
scrollInPlace: false, scrollInPlace: false,
message: false, message: false,
messagePrev: false,
messageNext: false,
notificationsSupported: false, notificationsSupported: false,
notificationsEnabled: false, notificationsEnabled: false,
selected: [] selected: []
@ -169,6 +171,21 @@ export default {
} }
self.message = d; self.message = d;
// generate the prev/next links based on current message list
self.messagePrev = false;
self.messageNext = false;
let found = false;
for (let i in self.items) {
if (self.items[i].ID == self.message.ID) {
found = true;
} else if (found && !self.messageNext) {
self.messageNext = self.items[i].ID;
break;
} else {
self.messagePrev = self.items[i].ID;
}
}
}); });
}, },
@ -416,6 +433,12 @@ export default {
<button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread"> <button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread">
<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span> <i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
</button> </button>
<a class="btn btn-outline-secondary float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext" title="View next message">
<i class="bi bi-caret-right-fill"></i>
</a>
<a class="btn btn-outline-secondary ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'" :href="'#'+messagePrev" title="View previous message">
<i class="bi bi-caret-left-fill"></i>
</a>
<a :href="'api/' + message.ID + '/source?dl=1'" class="btn btn-outline-secondary me-2 float-end" title="Download message"> <a :href="'api/' + message.ID + '/source?dl=1'" class="btn btn-outline-secondary me-2 float-end" title="Download message">
<i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span> <i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span>
</a> </a>
@ -459,11 +482,10 @@ export default {
<small> <small>
<b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{ formatNumber(total) }}</b> <b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{ formatNumber(total) }}</b>
</small> </small>
<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev" <button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev" v-if="!searching" :title="'View previous '+limit+' messages'">
v-if="!searching">
<i class="bi bi-caret-left-fill"></i> <i class="bi bi-caret-left-fill"></i>
</button> </button>
<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching"> <button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching" :title="'View next '+limit+' messages'">
<i class="bi bi-caret-right-fill"></i> <i class="bi bi-caret-right-fill"></i>
</button> </button>
</span> </span>