j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

Snapshot: alpha-2026-9

Browse source
This commit is contained in:
j3d1 2026-09-02 21:40:28 +02:00
parent 9acf5a97e2
commit f34a1d01ae
241 changed files with 85546 additions and 2409 deletions
Download patch file Download diff file Expand all files Collapse all files

131
frontend/src/components/Messages.vue Normal file
View file

@ -0,0 +1,131 @@
<template>
<li class="nav-item dropdown">
<a class="nav-icon dropdown-toggle" href="#" @click="toggleDropdown">
<div class="position-relative">
<b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
</div>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" id="messagesDropdown">
<div class="dropdown-menu-header">
<div class="position-relative">
4 New Messages
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item">
<div class="row g-0 align-items-center">
<div class="col-3">
<img src="/assets/img/avatars/avatar-5.png"
class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">
</div>
<div class="col-9 pl-2">
<div class="text-dark">Vanessa Tucker</div>
<div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
tortor.
</div>
<div class="text-muted small mt-1">15m ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="row g-0 align-items-center">
<div class="col-3">
<img src="/assets/img/avatars/avatar-2.png"
class="avatar img-fluid rounded-circle" alt="William Harris">
</div>
<div class="col-9 pl-2">
<div class="text-dark">William Harris</div>
<div class="text-muted small mt-1">Curabitur ligula sapien euismod
vitae.
</div>
<div class="text-muted small mt-1">2h ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="row g-0 align-items-center">
<div class="col-3">
<img src="/assets/img/avatars/avatar-4.png"
class="avatar img-fluid rounded-circle" alt="Christina Mason">
</div>
<div class="col-9 pl-2">
<div class="text-dark">Christina Mason</div>
<div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
</div>
<div class="text-muted small mt-1">4h ago</div>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="row g-0 align-items-center">
<div class="col-3">
<img src="/assets/img/avatars/avatar-3.png"
class="avatar img-fluid rounded-circle" alt="Sharon Lessman">
</div>
<div class="col-9 pl-2">
<div class="text-dark">Sharon Lessman</div>
<div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
posuere ac,
mattis non.
</div>
<div class="text-muted small mt-1">5h ago</div>
</div>
</div>
</a>
</div>
<div class="dropdown-menu-footer">
<a href="#" class="text-muted">Show all messages</a>
</div>
</div>
</li>
</template>
<script>
import * as BIcons from "bootstrap-icons-vue";
export default {
name: "Messages",
components: {
...BIcons
},
props: {
messages: {
type: Array,
default: () => []
}
},
computed: {
top_messages() {
return this.messages.slice(0, 4);
}
},
methods: {
toggleDropdown() {
closeAllDropdowns();
document.getElementById("messagesDropdown").classList.toggle("show");
}
}
}
</script>
<style scoped>
.nav-flag::after, .nav-icon::after {
display: none !important;
}
.nav-flag .feather, .nav-flag svg, .nav-icon .feather, .nav-icon svg {
width: 20px;
height: 20px;
}
.nav-flag, .nav-icon {
padding: .1rem .8rem;
display: block;
font-size: 1.5rem;
color: #6c757d;
transition: background .1s ease-in-out,color .1s ease-in-out;
line-height: 1.4;
}
</style>