mirror of
https://hk.gh-proxy.com/https://github.com/NodeBB/nodebb-theme-harmony.git
synced 2025-10-03 05:01:05 +08:00
chat changes
This commit is contained in:
Barış Soner Uşaklı
parent
932992d41a
commit
74eac2cd05
16 changed files with 105 additions and 147 deletions
|
|
@ -26,6 +26,12 @@ $(document).ready(function () {
|
|||
width: $('#panel').width(),
|
||||
});
|
||||
});
|
||||
|
||||
hooks.on('filter:chat.openChat', function (hookData) {
|
||||
// disables chat modals & goes straight to chat page
|
||||
hookData.modal = false;
|
||||
return hookData;
|
||||
});
|
||||
});
|
||||
|
||||
function setupMobileMenu() {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,6 @@ body.page-user-chats {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Styles common to both full chat and chat modal */
|
||||
.chats-full, .chat-modal {
|
||||
height: calc(100vh - var(--panel-offset) - $spacer)!important;
|
||||
}
|
||||
|
||||
.expanded-chat, .chat-modal {
|
||||
// no taskbar so hide minimize button
|
||||
[data-action="minimize"] {
|
||||
|
|
@ -42,9 +37,11 @@ body.page-user-chats {
|
|||
}
|
||||
|
||||
/* Mobile handling of chat page */
|
||||
@include media-breakpoint-down(sm) {
|
||||
@include media-breakpoint-down(md) {
|
||||
.page-user-chats {
|
||||
padding-bottom: 0;
|
||||
.chats-full {
|
||||
padding-bottom: 8rem!important;
|
||||
}
|
||||
|
||||
[component="chat/nav-wrapper"][data-loaded="1"] {
|
||||
display: none!important;
|
||||
|
|
@ -53,20 +50,5 @@ body.page-user-chats {
|
|||
[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
[component="chat/messages"] {
|
||||
width: calc(100vw - $grid-gutter-width);
|
||||
}
|
||||
}
|
||||
|
||||
[data-action="pop-out"] {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile handling of chat modal */
|
||||
@include media-breakpoint-down(sm) {
|
||||
.chat-modal {
|
||||
z-index: $zindex-popover + 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -62,4 +62,16 @@ body {
|
|||
@include btn-ghost-base();
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@include btn-ghost-base();
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.btn-outline-sm {
|
||||
@include btn-ghost-base();
|
||||
border-color: $border-color;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header d-flex">
|
||||
<div class="fs-5 flex-grow-1" component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></div>
|
||||
<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
|
||||
<button type="button" class="btn btn-outline d-none d-md-flex" data-action="maximize">
|
||||
<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
|
||||
<span class="sr-only">[[modules:chat.maximize]]</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize">
|
||||
<button type="button" class="btn btn-outline d-none d-md-flex" data-action="minimize">
|
||||
<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
|
||||
<span class="sr-only">[[modules:chat.minimize]]</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
<div class="chats-full d-flex gap-1 vh-100 py-3">
|
||||
<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
|
||||
<div class="chat-search dropdown mb-2">
|
||||
<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
|
||||
<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" component="chat/search" data-bs-toggle="dropdown" />
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul component="chat/search/list" class="dropdown-menu">
|
||||
<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
|
||||
<hr class="text-muted opacity-25 my-1">
|
||||
<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}" style="width:300px;">
|
||||
{{{each rooms}}}
|
||||
<!-- IMPORT partials/chats/recent_room.tpl -->
|
||||
{{{end}}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!-- THIS FILE IS STILL PERSONA -->
|
||||
|
||||
<div id="taskbar" class="taskbar fixed-bottom">
|
||||
<div id="taskbar" class="taskbar fixed-bottom hidden">
|
||||
<div class="navbar-inner"><ul class="nav navbar-nav"></ul></div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div component="category/posts" class="ps-3">
|
||||
<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
|
||||
<p class="mb-0">
|
||||
<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
|
||||
<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
|
||||
<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
|
||||
<span class="timeago text-xs" title="{../timestampISO}"></span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<!-- THIS FILE IS STILL PERSONA -->
|
||||
|
||||
{{{ if config.loggedIn }}}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-bs-target="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
|
||||
</li>
|
||||
{{{ if !config.disableChat }}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" data-bs-target="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
|
||||
</li>
|
||||
{{{ end }}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" data-bs-target="#profile" data-bs-toggle="tab">
|
||||
{buildAvatar(user, "24px", true, "user-icon")}
|
||||
<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="profile">
|
||||
<section class="menu-section" data-section="profile">
|
||||
<ul class="menu-section-list dropdown-menu show text-bg-dark w-100 border-0" component="header/usercontrol"></ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="notifications">
|
||||
<section class="menu-section text-bg-dark" data-section="notifications">
|
||||
<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
|
||||
<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
|
||||
</section>
|
||||
</div>
|
||||
{{{ if !config.disableChat }}}
|
||||
<div class="tab-pane fade" id="chats">
|
||||
<section class="menu-section text-bg-dark" data-section="chats">
|
||||
<ul class="menu-section-list chat-list" component="chat/list">
|
||||
<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
{{{ end }}}
|
||||
|
|
@ -1,38 +1,7 @@
|
|||
{{{ if !rooms.length }}}
|
||||
<li class="text-center"><a href="#" class="text-reset">[[modules:chat.no_active]]</a></li>
|
||||
<li class="text-center p-2">[[modules:chat.no_active]]</li>
|
||||
{{{ end }}}
|
||||
|
||||
{{{ each rooms }}}
|
||||
<li class="{{{ if ./unread }}}unread{{{ end }}} dropdown-item rounded-1 p-2 d-flex gap-2 pointer" data-roomid="{./roomId}">
|
||||
<div class="main-avatar">
|
||||
{{{ if ./users.length }}}
|
||||
{{{ if ./groupChat}}}
|
||||
<div class="position-relative" style="width:32px; height:32px;">
|
||||
<a class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</a>
|
||||
<a class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</a>
|
||||
</div>
|
||||
{{{ else }}}
|
||||
<a href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</a>
|
||||
{{{ end }}}
|
||||
{{{ else }}}
|
||||
<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
|
||||
<div class="notification-chat-content d-flex flex-grow-1 flex-column w-100">
|
||||
<div class="room-name fw-semibold text-xs">
|
||||
{{{ if !./lastUser.uid }}}
|
||||
<span>[[modules:chat.no-users-in-room]]</span>
|
||||
{{{ else }}}
|
||||
{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
<div class="teaser-content text-sm line-clamp-3">
|
||||
<a href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</a>
|
||||
<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
|
||||
{./teaser.content}
|
||||
</div>
|
||||
<div class="teaser-timestamp notification-chat-controls text-muted text-xs">{./teaser.timeagoLong}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{{ end }}}
|
||||
<!-- IMPORT partials/chats/recent_room.tpl -->
|
||||
{{{ end }}}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- IF roomId -->
|
||||
<div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
|
||||
<div component="chat/header" class="d-flex align-items-center px-3">
|
||||
<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
|
||||
<span class="members flex-grow-1">
|
||||
[[modules:chat.chatting_with]]:
|
||||
{{{each users}}}
|
||||
|
|
@ -8,17 +8,16 @@
|
|||
{{{end}}}
|
||||
</span>
|
||||
|
||||
<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted" data-action="pop-out" aria-hidden="true" aria-label="Pop Out"><i class="fa fa-compress"></i></button>
|
||||
<!-- IMPORT partials/chats/options.tpl -->
|
||||
<button type="button" class="btn-close" aria-hidden="true" aria-label="Close" data-action="close"></button>
|
||||
</div>
|
||||
<hr class="text-muted opacity-25"/>
|
||||
<div class="position-relative">
|
||||
<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
|
||||
</div>
|
||||
<ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
|
||||
<!-- IMPORT partials/chats/messages.tpl -->
|
||||
</ul>
|
||||
<div component="chat/composer" class="d-flex">
|
||||
<div component="chat/composer" class="d-flex gap-1 border-top pt-2">
|
||||
<div class="flex-grow-1 position-relative">
|
||||
<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2" style="resize:none;"></textarea>
|
||||
<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<!-- THIS FILE IS STILL PERSONA -->
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-2 text-muted align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
|
||||
<button class="btn btn-outline align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" component="chat/controls">
|
||||
<li class="dropdown-header">[[modules:chat.options]]</li>
|
||||
<li>
|
||||
|
|
@ -13,14 +11,14 @@
|
|||
<li>
|
||||
<a class="dropdown-item" href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
|
||||
</li>
|
||||
<!-- IF users.length -->
|
||||
{{{ if users.length }}}
|
||||
<li role="separator" class="dropdown-divider"></li>
|
||||
<li class="dropdown-header">[[modules:chat.in-room]]</li>
|
||||
{{{each users}}}
|
||||
{{{ each users }}}
|
||||
<li>
|
||||
<a class="dropdown-item" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
|
||||
</li>
|
||||
{{{end}}}
|
||||
<!-- END -->
|
||||
{{{ end }}}
|
||||
{{{ end }}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,37 @@
|
|||
<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="{{{ if rooms.unread }}}unread{{{ end }}} card card-body p-1 mb-1 border-0 pointer">
|
||||
<div class="members">
|
||||
{{{ each rooms.users}}}
|
||||
{{{ if @first }}}
|
||||
<div class="main-avatar">
|
||||
<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
|
||||
<span component="chat/title">{{{ if rooms.roomName }}}{rooms.roomName}{{{ else }}}{rooms.usernames}{{{ end }}}</span>
|
||||
</div>
|
||||
{{{ else }}}
|
||||
<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
|
||||
{{{ end }}}
|
||||
{{{ end }}}
|
||||
{{{ if !./users.length}}}
|
||||
<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 24px;">?</span>
|
||||
{{{ if !rooms.lastUser.uid }}}
|
||||
<span class="text-muted">[[modules:chat.no-users-in-room]]</span>
|
||||
{{{ end }}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
</li>
|
||||
<a class="text-decoration-none text-reset" href="{config.relative_path}/me/chats/{./roomId}">
|
||||
<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if ./unread }}}unread{{{ end }}} btn-ghost-sm gap-2 justify-content-start align-items-start">
|
||||
<div class="main-avatar">
|
||||
{{{ if ./users.length }}}
|
||||
{{{ if ./groupChat}}}
|
||||
<div class="position-relative" style="width:32px; height:32px;">
|
||||
<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
|
||||
<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
|
||||
</div>
|
||||
{{{ else }}}
|
||||
<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
|
||||
{{{ end }}}
|
||||
{{{ else }}}
|
||||
<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-grow-1 flex-column w-100">
|
||||
<div class="room-name fw-semibold text-xs">
|
||||
{{{ if !./lastUser.uid }}}
|
||||
<span>[[modules:chat.no-users-in-room]]</span>
|
||||
{{{ else }}}
|
||||
{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
{{{ if ./teaser }}}
|
||||
<div class="teaser-content text-sm line-clamp-3 text-break">
|
||||
<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
|
||||
<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
|
||||
{./teaser.content}
|
||||
</div>
|
||||
<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
</li>
|
||||
</a>
|
||||
<hr class="text-muted opacity-25 my-1"/>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
{{{ if !notifications.length }}}
|
||||
<li class="no-notifs text-center"><a href="#" class="text-reset">[[notifications:no_notifs]]</a></li>
|
||||
<li class="no-notifs text-center p-2">[[notifications:no_notifs]]</li>
|
||||
{{{ end }}}
|
||||
|
||||
{{{ each notifications }}}
|
||||
<li class="{./readClass} mb-2" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
|
||||
<li class="{./readClass} mb-2 p-1" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
|
||||
<div class="d-flex gap-1 justify-content-between">
|
||||
<div>
|
||||
<a href="{./path}" class="notification-chat-content text-reset">
|
||||
<span class="text text-sm">{./bodyShort}</span>
|
||||
</a>
|
||||
<div class="text-xs text-muted">{./timeagoLong}</div>
|
||||
<div class="d-flex gap-2">
|
||||
{{{ if ./image }}}
|
||||
{{{ if ./from }}}
|
||||
<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
|
||||
{{{ end }}}
|
||||
{{{ else }}}
|
||||
<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
|
||||
{{{ end }}}
|
||||
<div class=" d-flex flex-column">
|
||||
<a href="{./path}" class="text-decoration-none notification-chat-content text-reset text text-sm">
|
||||
{./bodyShort}
|
||||
</a>
|
||||
<div class="text-xs text-muted">{./timeagoLong}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-chat-controls">
|
||||
{{{ if ./nid }}}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</a>
|
||||
<ul class="chats-dropdown dropdown-menu p-1 shadow">
|
||||
<li>
|
||||
<ul component="chat/list" class="chat-list chats-list list-unstyled p-2">
|
||||
<ul component="chat/list" class="chat-list chats-list list-unstyled p-0 pe-1">
|
||||
<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
|
||||
<div class="main-avatar">
|
||||
<div class="placeholder" style="width: 32px; height: 32px;"></div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<ul class="drafts-dropdown dropdown-menu p-1 shadow">
|
||||
<li>
|
||||
<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1">
|
||||
<li class="no-drafts text-center hidden p-3 text-sm text-muted">[[modules:composer.no-drafts]]</li>
|
||||
<li class="no-drafts text-center p-2">[[modules:composer.no-drafts]]</li>
|
||||
|
||||
{{{ each drafts }}}
|
||||
{{{ if !@first}}}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</a>
|
||||
<ul class="notifications-dropdown dropdown-menu p-2 shadow">
|
||||
<li>
|
||||
<ul component="notifications/list" class="notification-list list-unstyled p-2">
|
||||
<ul component="notifications/list" class="notification-list list-unstyled">
|
||||
<li class="mb-2 placeholder-wave">
|
||||
<div class="text-sm placeholder col-11"> </div>
|
||||
<div class="text-sm placeholder col-5"> </div><br />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
