Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add chat widget areas, closes #12375

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2024-02-28 11:41:18 -05:00
parent 1ed4d76363
commit 53b3c5d669
3 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
install/package.json
View File

@@ -103,7 +103,7 @@
"nodebb-plugin-ntfy": "1.7.3", "nodebb-plugin-ntfy": "1.7.3",
"nodebb-plugin-spam-be-gone": "2.2.1", "nodebb-plugin-spam-be-gone": "2.2.1",
"nodebb-rewards-essentials": "1.0.0", "nodebb-rewards-essentials": "1.0.0",
"nodebb-theme-harmony": "1.2.31", "nodebb-theme-harmony": "1.2.32",
"nodebb-theme-lavender": "7.1.7", "nodebb-theme-lavender": "7.1.7",
"nodebb-theme-peace": "2.2.1", "nodebb-theme-peace": "2.2.1",
"nodebb-theme-persona": "13.3.10", "nodebb-theme-persona": "13.3.10",

95
src/views/chats.tpl
View File

@@ -1,54 +1,63 @@
<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3"> <div class="row h-100">
<div component="chat/nav-wrapper" class="flex-shrink-0 d-flex flex-column h-100 gap-1" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}"> <div class="h-100 {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
<div class="chats-full d-flex gap-1 h-100 mt-3 mt-md-0 py-md-3">
<div component="chat/nav-wrapper" class="flex-shrink-0 d-flex flex-column h-100 gap-1" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
<div> <div>
<button component="chat/create" class="btn btn-primary btn-sm w-100">[[modules:chat.create-room]]</button> <button component="chat/create" class="btn btn-primary btn-sm w-100">[[modules:chat.create-room]]</button>
</div> </div>
{{{ if publicRooms.length }}} {{{ if publicRooms.length }}}
<hr class="my-1"> <hr class="my-1">
<div class="d-flex flex-column gap-1"> <div class="d-flex flex-column gap-1">
<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start"> <div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms" <button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms"
onclick="$(this).find('i').toggleClass('fa-rotate-180');"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button> onclick="$(this).find('i').toggleClass('fa-rotate-180');"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
<label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label> <label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
</div> </div>
<div id="public-rooms" component="chat/public" class="collapse show"> <div id="public-rooms" component="chat/public" class="collapse show">
<div class="d-flex gap-1 flex-column"> <div class="d-flex gap-1 flex-column">
{{{ each publicRooms }}} {{{ each publicRooms }}}
<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}"> <div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
<div class="d-flex gap-1 align-items-center"><i class="fa {./icon} text-muted"></i> {./roomName} <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div></div> <div class="d-flex gap-1 align-items-center"><i class="fa {./icon} text-muted"></i> {./roomName} <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div></div>
<div> <div>
<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div> <div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
</div>
</div>
{{{ end }}}
</div> </div>
</div> </div>
</div>
{{{ end }}}
<hr class="my-1">
<div class="d-flex flex-column gap-1 overflow-auto">
{{{ if publicRooms.length }}}
<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
onclick="$(this).find('i').toggleClass('fa-rotate-180')"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
<label class="text-sm text-muted lh-1">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
</div>
{{{ end }}} {{{ end }}}
<div id="private-rooms" component="chat/recent" class="chats-list overflow-auto mb-0 pe-1 pb-5 pb-lg-0 collapse show" data-nextstart="{nextStart}">
{{{ each rooms }}}
<!-- IMPORT partials/chats/recent_room.tpl -->
{{{ end }}}
</div>
</div> </div>
</div> </div>
<div component="chat/main-wrapper" class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" style="min-width: 0;" data-roomid="{roomId}">
<!-- IMPORT partials/chats/message-window.tpl -->
</div>
<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
</div> </div>
</div>
<div data-widget-area="sidebar" class="h-100 col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
{{{ each widgets.sidebar }}}
{{widgets.sidebar.html}}
{{{ end }}} {{{ end }}}
<hr class="my-1">
<div class="d-flex flex-column gap-1 overflow-auto">
{{{ if publicRooms.length }}}
<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
onclick="$(this).find('i').toggleClass('fa-rotate-180')"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
<label class="text-sm text-muted lh-1">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
</div>
{{{ end }}}
<div id="private-rooms" component="chat/recent" class="chats-list overflow-auto mb-0 pe-1 pb-5 pb-lg-0 collapse show" data-nextstart="{nextStart}">
{{{each rooms}}}
<!-- IMPORT partials/chats/recent_room.tpl -->
{{{end}}}
</div>
</div>
</div> </div>
<div component="chat/main-wrapper" class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" style="min-width: 0;" data-roomid="{roomId}"> </div>
<!-- IMPORT partials/chats/message-window.tpl -->
</div>
<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
</div>

3
src/widgets/index.js
View File

@@ -196,6 +196,9 @@ widgets.getAvailableAreas = async function () {
{ name: 'Group Page (Left)', template: 'groups/details.tpl', location: 'left' }, { name: 'Group Page (Left)', template: 'groups/details.tpl', location: 'left' },
{ name: 'Group Page (Right)', template: 'groups/details.tpl', location: 'right' }, { name: 'Group Page (Right)', template: 'groups/details.tpl', location: 'right' },
{ name: 'Chat Header', template: 'chats.tpl', location: 'header' },
{ name: 'Chat Sidebar', template: 'chats.tpl', location: 'sidebar' },
]; ];
return await plugins.hooks.fire('filter:widgets.getAreas', defaultAreas); return await plugins.hooks.fire('filter:widgets.getAreas', defaultAreas);