nodebb-theme-persona 13.1.8 → 13.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +2 -2
  2. package/scss/chats.scss +28 -45
  3. package/scss/groups.scss +0 -11
  4. package/templates/chats.tpl +45 -16
  5. package/templates/partials/chats/message-window.tpl +25 -23
  6. package/templates/partials/chats/message.tpl +1 -1
  7. package/templates/partials/chats/options.tpl +50 -23
  8. package/templates/partials/chats/scroll-up-alert.tpl +3 -0
  9. package/templates/partials/chats/user-list.tpl +11 -0
  10. package/templates/partials/groups/memberlist.tpl +27 -25
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "nodebb-theme-persona",
3
- "version": "13.1.8",
3
+ "version": "13.2.0",
4
4
  "nbbpm": {
5
- "compatibility": "^3.0.0"
5
+ "compatibility": "^3.3.0"
6
6
  },
7
7
  "description": "Persona theme for NodeBB",
8
8
  "main": "library.js",
package/scss/chats.scss CHANGED
@@ -19,6 +19,18 @@
19
19
  }
20
20
  }
21
21
 
22
+ body.page-user-chats {
23
+ $calcHeight: calc(100vh - var(--panel-offset) - $spacer);
24
+ overflow: hidden;
25
+ height: 100%;
26
+ > #panel {
27
+ height: $calcHeight;
28
+ > .container {
29
+ height: $calcHeight;
30
+ }
31
+ }
32
+ }
33
+
22
34
  /* Styles common to both full chat and chat modal */
23
35
  .chats-full, .chat-modal {
24
36
  display: flex;
@@ -26,27 +38,10 @@
26
38
  height: calc(100vh - var(--panel-offset) - $spacer);
27
39
 
28
40
  [component="chat/nav-wrapper"] {
29
- flex: 1;
30
- flex-direction: column;
31
- padding: 0px 15px;
32
- .chats-list {
33
- flex: 1;
34
- overflow-y: auto;
35
- margin-bottom: 0;
36
- height: calc(100% - 5em);
41
+ width: 300px;
42
+ [component="chat/public/room"].unread {
43
+ font-weight: $font-weight-bold;
37
44
  }
38
-
39
- .chat-search {
40
- padding-bottom: 15px;
41
- ul {
42
- width: 100%;
43
- }
44
- }
45
- }
46
-
47
- [component="chat/main-wrapper"] {
48
- flex: 3;
49
- padding-bottom: 15px;
50
45
  }
51
46
 
52
47
  [component="chat/messages"] {
@@ -60,27 +55,9 @@
60
55
  }
61
56
 
62
57
  [component="chat/header"] {
63
- border-bottom: 1px solid $gray-200;
64
-
65
- span {
66
- font-weight: 500;
67
- }
68
-
69
58
  .close {
70
59
  margin-left: 0.5em;
71
60
  }
72
-
73
- .members {
74
- a {
75
- font-weight: 600;
76
- }
77
- }
78
-
79
- .dropdown {
80
- .avatar {
81
- margin-right: 0.5em;
82
- }
83
- }
84
61
  }
85
62
 
86
63
  .modal-header .dropdown {
@@ -141,6 +118,9 @@
141
118
  background: lighten($primary, 35%);
142
119
  border-bottom: 0;
143
120
  }
121
+ &.active {
122
+ background-color: $light;
123
+ }
144
124
 
145
125
  .teaser-content {
146
126
  font-size: 13px;
@@ -277,10 +257,6 @@
277
257
  .close {
278
258
  padding: 0.5em;
279
259
  }
280
-
281
- .users-tag-container span:only-of-type [data-role="remove"] {
282
- display: none;
283
- }
284
260
  }
285
261
 
286
262
  .modal-body {
@@ -292,6 +268,9 @@
292
268
  flex: 1;
293
269
  }
294
270
  }
271
+ [component="chat/user/list/btn"] {
272
+ display: none!important;
273
+ }
295
274
  }
296
275
 
297
276
  .expanded-chat, .chat-modal {
@@ -491,16 +470,20 @@
491
470
  }
492
471
 
493
472
  /* Mobile handling of chat page */
494
- @include media-breakpoint-down(sm) {
473
+ @include media-breakpoint-down(md) {
495
474
  .page-user-chats {
496
475
  padding-bottom: 0;
497
476
 
477
+ [component="chat/nav-wrapper"] {
478
+ width: 100%;
479
+ }
480
+
498
481
  [component="chat/nav-wrapper"][data-loaded="1"] {
499
- display: none;
482
+ display: none!important;
500
483
  }
501
484
 
502
485
  [component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
503
- display: none;
486
+ display: none!important;
504
487
  }
505
488
 
506
489
  [component="chat/messages"] {
package/scss/groups.scss CHANGED
@@ -96,17 +96,6 @@
96
96
  }
97
97
  }
98
98
 
99
- [component="groups/members"] {
100
- tbody {
101
- max-height: 500px;
102
- display:block;
103
- overflow-y: auto;
104
- .member-name {
105
- width: 100%;
106
- }
107
- }
108
- }
109
-
110
99
  h1 {
111
100
  overflow-wrap: break-word;
112
101
  margin-top: 0;
package/templates/chats.tpl CHANGED
@@ -1,22 +1,51 @@
1
- <div class="chats-full">
2
- <div component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
3
- <div class="chat-search dropdown">
4
- <input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
5
- <ul component="chat/search/list" class="dropdown-menu">
6
- <li component="chat/search/start-typing"><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
7
- <li component="chat/search/no-users" class="hidden"><a href="#" class="dropdown-item">[[users:no-users-found]]</a></li>
8
- {{{ each searchUsers }}}
9
- <li component="chat/search/user" data-uid="{./uid}"><a href="#" class="dropdown-item">{buildAvatar(@value, "24px", true)} {./username}<a></a></li>
10
- {{{ end }}}
1
+ <div class="chats-full d-flex gap-1 h-100 px-3">
2
+ <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 }}}">
3
+ <div>
4
+ <button component="chat/create" class="btn btn-primary btn-sm w-100">[[modules:chat.create-room]]</button>
5
+ </div>
6
+
7
+ {{{ if publicRooms.length }}}
8
+ <hr class="my-1">
9
+ <div class="d-flex flex-column gap-1">
10
+ <div class="d-flex gap-1 align-items-center">
11
+ <button class="btn btn-sm btn-light p-1" data-bs-toggle="collapse" data-bs-target="#public-rooms"
12
+ onclick="$(this).find('i').toggleClass('fa-chevron-right').toggleClass('fa-chevron-down');"><i class="fa fa-fw fa-chevron-down"></i></button>
13
+ <label class="text-sm text-muted">[[modules:chat.public-rooms]]</label>
14
+ </div>
15
+ <div id="public-rooms" component="chat/public" class="collapse show">
16
+ <div class="d-flex flex-column gap-1">
17
+ {{{ each publicRooms }}}
18
+ <div component="chat/public/room" class="btn btn-sm btn-light d-flex justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
19
+ <div># {./roomName}</div>
20
+ <div class="d-flex gap-1">
21
+ <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div>
22
+ <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>
23
+ </div>
24
+ </div>
25
+ {{{ end }}}
26
+ </div>
27
+ </div>
28
+ </div>
29
+ {{{ end }}}
30
+
31
+ <hr class="my-1">
32
+ <div class="d-flex flex-column gap-1 overflow-auto">
33
+ {{{ if publicRooms.length }}}
34
+ <div class="d-flex gap-1 align-items-center">
35
+ <button class="btn btn-sm btn-light p-1" data-bs-toggle="collapse" data-bs-target="#private-rooms"
36
+ onclick="$(this).find('i').toggleClass('fa-chevron-right').toggleClass('fa-chevron-down');"><i class="fa fa-fw fa-chevron-down"></i></button>
37
+ <label class="text-sm text-muted">[[modules:chat.private-rooms]]</label>
38
+ </div>
39
+ {{{ end }}}
40
+
41
+ <ul id="private-rooms" component="chat/recent" class="chats-list overflow-auto mb-0 list-unstyled collapse show" data-nextstart="{nextStart}">
42
+ {{{each rooms}}}
43
+ <!-- IMPORT partials/chats/recent_room.tpl -->
44
+ {{{end}}}
11
45
  </ul>
12
46
  </div>
13
- <ul component="chat/recent" class="chats-list list-unstyled" data-nextstart="{nextStart}">
14
- {{{each rooms}}}
15
- <!-- IMPORT partials/chats/recent_room.tpl -->
16
- {{{end}}}
17
- </ul>
18
47
  </div>
19
- <div component="chat/main-wrapper">
48
+ <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;">
20
49
  <!-- IMPORT partials/chats/message-window.tpl -->
21
50
  </div>
22
51
  <div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
package/templates/partials/chats/message-window.tpl CHANGED
@@ -1,27 +1,29 @@
1
- <!-- IF roomId -->
2
- <div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
3
- <div component="chat/header" class="d-flex align-items-center px-3">
4
- <span class="members flex-grow-1">
5
- [[modules:chat.chatting_with]]:
6
- {{{each users}}}
7
- <a href="{config.relative_path}/uid/{../uid}">{../username}</a><!-- IF !@last -->,<!-- END -->
8
- {{{end}}}
9
- </span>
1
+ <div class="d-flex flex-column h-100">
2
+ {{{ if !roomId }}}
3
+ <div class="d-flex flex-column align-items-center gap-3 p-5">
4
+ <i class="fa-solid fa-wind fs-2 text-muted"></i>
5
+ <span class="text-muted text-sm">[[modules:chat.no_active]]</span>
6
+ </div>
7
+ {{{ else }}}
8
+ <div component="chat/header" class="d-flex align-items-center px-md-3 gap-3">
9
+ <a href="#" data-action="close" role="button" class="flex-shrink-0 d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
10
+ <h5 class="members flex-grow-1 fw-semibold tracking-tight mb-0">
11
+ {{{ if ./roomName }}}# {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}
12
+ </h5>
10
13
 
11
- <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>
12
14
  <!-- IMPORT partials/chats/options.tpl -->
13
- <button type="button" class="btn-close" aria-hidden="true" aria-label="Close" data-action="close"></button>
14
15
  </div>
15
- <div class="position-relative">
16
- <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>
16
+ <hr class="my-1"/>
17
+ <div class="d-flex flex-grow-1 gap-1 overflow-auto" style="min-width: 0px;">
18
+ <div component="chat/messages" class="expanded-chat d-flex flex-column flex-grow-1" data-roomid="{roomId}" style="min-width: 0px;">
19
+ <!-- IMPORT partials/chats/scroll-up-alert.tpl -->
20
+ <ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
21
+ <!-- IMPORT partials/chats/messages.tpl -->
22
+ </ul>
23
+ <!-- IMPORT partials/chats/composer.tpl -->
24
+ </div>
25
+
26
+ <!-- IMPORT partials/chats/user-list.tpl -->
17
27
  </div>
18
- <ul class="chat-content">
19
- <!-- IMPORT partials/chats/messages.tpl -->
20
- </ul>
21
- <!-- IMPORT partials/chats/composer.tpl -->
22
- </div>
23
- <!-- ELSE -->
24
- <div class="alert alert-info me-3">
25
- [[modules:chat.no-messages]]
26
- </div>
27
- <!-- ENDIF roomId -->
28
+ {{{ end }}}
29
+ </div>
package/templates/partials/chats/message.tpl CHANGED
@@ -1,4 +1,4 @@
1
- <li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear<!-- IF ../deleted --> deleted<!-- END -->" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
1
+ <li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear<!-- IF ../deleted --> deleted<!-- END -->" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
2
2
  <div class="message-header">
3
3
  <a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "32px", true, "not-responsive")}</a>
4
4
  <span class="chat-user fw-bold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
package/templates/partials/chats/options.tpl CHANGED
@@ -1,24 +1,51 @@
1
- <div class="dropdown">
2
- <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>
3
- <ul class="dropdown-menu dropdown-menu-end" component="chat/controls">
4
- <li class="dropdown-header">[[modules:chat.options]]</li>
5
- <li>
6
- <a class="dropdown-item" href="#" data-action="members"><i class="fa fa-fw fa-cog"></i> [[modules:chat.manage-room]]</a>
7
- </li>
8
- <li>
9
- <a class="dropdown-item" href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
10
- </li>
11
- <li>
12
- <a class="dropdown-item" href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
13
- </li>
14
- <!-- IF users.length -->
15
- <li role="separator" class="dropdown-divider"></li>
16
- <li class="dropdown-header">[[modules:chat.in-room]]</li>
17
- {{{each users}}}
18
- <li>
19
- <a class="dropdown-item" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
20
- </li>
21
- {{{end}}}
22
- <!-- END -->
23
- </ul>
1
+ <div class="d-flex gap-1 align-items-stretch">
2
+ <div class="dropdown d-flex">
3
+ <button class="btn btn-sm btn-light" data-bs-toggle="dropdown" component="chat/controlsToggle">
4
+ <i class="fa fa-gear text-muted"></i>
5
+ </button>
6
+ <ul class="dropdown-menu dropdown-menu-end p-1 text-sm" component="chat/controls">
7
+ <li class="dropdown-header">[[modules:chat.options]]</li>
8
+ <li>
9
+ <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="members">
10
+ <i class="fa fa-fw text-muted fa-cog"></i> [[modules:chat.manage-room]]
11
+ </a>
12
+ </li>
13
+ {{{ if isOwner }}}
14
+ <li>
15
+ <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="rename">
16
+ <i class="fa fa-fw text-muted fa-edit"></i> [[modules:chat.rename-room]]
17
+ </a>
18
+ </li>
19
+ {{{ end }}}
20
+ <li>
21
+ <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="leave">
22
+ <i class="fa fa-fw text-muted fa-sign-out"></i> [[modules:chat.leave-room]]
23
+ </a>
24
+ </li>
25
+ {{{ if (public && isAdmin) }}}
26
+ <li>
27
+ <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" data-action="delete">
28
+ <i class="fa fa-fw text-danger fa-trash"></i> [[modules:chat.delete-room]]
29
+ </a>
30
+ </li>
31
+ {{{ end }}}
32
+ </ul>
33
+ </div>
34
+
35
+ {{{ if users.length }}}
36
+ <div component="chat/user/list/btn" class="btn btn-sm btn-light d-none d-lg-flex flex-nowrap gap-3 align-items-center" title="[[modules:chat.view-users-list]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
37
+ <div class="d-flex text-nowrap">
38
+ {{{ if ./users.0 }}}
39
+ <span style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./users.0.userslug}">{buildAvatar(./users.0, "24px", true)}</span>
40
+ {{{ end }}}
41
+ {{{ if ./users.1 }}}
42
+ <span style="width: 18px; z-index: 2;" class="text-decoration-none" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
43
+ {{{ end }}}
44
+ {{{ if ./users.2 }}}
45
+ <span style="width: 18px; z-index: 1;" class="text-decoration-none" href="{config.relative_path}/user/{./users.2.userslug}">{buildAvatar(./users.2, "24px", true)}</span>
46
+ {{{ end }}}
47
+ </div>
48
+ {./userCount}
49
+ </div>
50
+ {{{ end }}}
24
51
  </div>
package/templates/partials/chats/scroll-up-alert.tpl ADDED
@@ -0,0 +1,3 @@
1
+ <div class="position-relative">
2
+ <div component="chat/messages/scroll-up-alert" class="py-1 position-absolute start-50 translate-middle-x text-sm scroll-up-alert alert alert-info d-none d-md-block text-nowrap" role="button" style="z-index: 500;"><i class="fa fa-fw fa-arrow-down"></i> [[modules:chat.scroll-up-alert]]</div>
3
+ </div>
package/templates/partials/chats/user-list.tpl ADDED
@@ -0,0 +1,11 @@
1
+ <div component="chat/user/list" class="border-start hidden d-flex flex-column gap-1 p-1 overflow-auto" style="min-width:240px; width: 240px;">
2
+ {{{ each users }}}
3
+ <a data-index="{./index}" class="btn btn-sm btn-light d-flex justify-content-start align-items-center gap-2" href="{config.relative_path}/uid/{./uid}">
4
+ <div>{buildAvatar(users, "24px", true)}</div>
5
+ <div class="d-flex gap-1 flex-grow-1 text-nowrap text-truncate">
6
+ <span class="text-truncate">{./username}</span>
7
+ {{{ if ./isOwner }}}<span><i class="fa fa-star text-warning" data-bs-toggle="tooltip" title="[[modules:chat.owner]]"></i></span>{{{ end }}}
8
+ </div>
9
+ </a>
10
+ {{{ end }}}
11
+ </div>
package/templates/partials/groups/memberlist.tpl CHANGED
@@ -12,30 +12,32 @@
12
12
  </div>
13
13
  </div>
14
14
 
15
- <table component="groups/members" class="table table-striped table-hover" data-nextstart="{group.membersNextStart}">
16
- <tbody>
17
- {{{each group.members}}}
18
- <tr data-uid="{group.members.uid}" data-isowner="{{{ if group.members.isOwner }}}1{{{ else }}}0{{{ end }}}">
19
- <td class="p-2">
20
- <a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
21
- </td>
22
- <td class="member-name p-2">
23
- <a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
24
- <i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
15
+ <div component="groups/members" data-nextstart="{group.membersNextStart}" style="max-height: 500px; overflow: auto;">
16
+ <table class="table table-striped table-hover">
17
+ <tbody>
18
+ {{{each group.members}}}
19
+ <tr data-uid="{group.members.uid}" data-isowner="{{{ if group.members.isOwner }}}1{{{ else }}}0{{{ end }}}">
20
+ <td class="p-2">
21
+ <a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "24px", true)}</a>
22
+ </td>
23
+ <td class="member-name w-100 p-2">
24
+ <a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
25
+ <i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
25
26
 
26
- <!-- IF group.isOwner -->
27
- <div class="owner-controls btn-group float-end">
28
- <a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
29
- <i class="fa fa-star"></i>
30
- </a>
27
+ <!-- IF group.isOwner -->
28
+ <div class="owner-controls btn-group float-end">
29
+ <a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
30
+ <i class="fa fa-star"></i>
31
+ </a>
31
32
 
32
- <a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
33
- <i class="fa fa-ban"></i>
34
- </a>
35
- </div>
36
- <!-- ENDIF group.isOwner -->
37
- </td>
38
- </tr>
39
- {{{end}}}
40
- </tbody>
41
- </table>
33
+ <a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
34
+ <i class="fa fa-ban"></i>
35
+ </a>
36
+ </div>
37
+ <!-- ENDIF group.isOwner -->
38
+ </td>
39
+ </tr>
40
+ {{{end}}}
41
+ </tbody>
42
+ </table>
43
+ </div>