nodebb-plugin-composer-default 10.3.19 → 10.3.21

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 (4) hide show
  1. package/package.json +1 -1
  2. package/static/lib/composer/categoryList.js +19 -21
  3. package/static/scss/composer.scss +32 -13
  4. package/static/templates/composer.tpl +12 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nodebb-plugin-composer-default",
3
- "version": "10.3.19",
3
+ "version": "10.3.21",
4
4
  "description": "Default composer for NodeBB",
5
5
  "main": "library.js",
6
6
  "repository": {
package/static/lib/composer/categoryList.js CHANGED
@@ -3,9 +3,10 @@
3
3
  define('composer/categoryList', [
4
4
  'categorySelector', 'taskbar', 'api',
5
5
  ], function (categorySelector, taskbar, api) {
6
- var categoryList = {};
6
+ const categoryList = {};
7
7
 
8
- var selector;
8
+ let selector;
9
+ let mobileSelector;
9
10
 
10
11
  categoryList.init = function (postContainer, postData) {
11
12
  var listContainer = postContainer.find('.category-list-container');
@@ -25,38 +26,35 @@ define('composer/categoryList', [
25
26
  onSelect: function (selectedCategory) {
26
27
  if (postData.hasOwnProperty('cid')) {
27
28
  changeCategory(postContainer, postData, selectedCategory);
29
+ mobileSelector.selectCategory(selectedCategory.cid, selectedCategory.categoryEl);
28
30
  }
29
31
  },
30
32
  });
31
33
  if (!selector) {
32
34
  return;
33
35
  }
36
+ // this is the mobile category selector
37
+ mobileSelector = categorySelector.init(
38
+ postContainer.find('.mobile-navbar [component="category-selector"]'), {
39
+ privilege: 'topics:create',
40
+ states: ['watching', 'tracking', 'notwatching', 'ignoring'],
41
+ onSelect: function (selectedCategory) {
42
+ if (postData.hasOwnProperty('cid')) {
43
+ changeCategory(postContainer, postData, selectedCategory);
44
+ selector.selectCategory(selectedCategory.cid, selectedCategory.categoryEl);
45
+ }
46
+ },
47
+ });
48
+
34
49
  if (postData.cid && postData.category) {
35
50
  selector.selectedCategory = { cid: postData.cid, name: postData.category.name };
51
+ mobileSelector.selectedCategory = { cid: postData.cid, name: postData.category.name };
36
52
  } else if (ajaxify.data.template.compose && ajaxify.data.selectedCategory) {
37
53
  // separate composer route
38
54
  selector.selectedCategory = { cid: ajaxify.data.cid, name: ajaxify.data.selectedCategory };
55
+ mobileSelector.selectedCategory = { cid: ajaxify.data.cid, name: ajaxify.data.selectedCategory };
39
56
  }
40
57
 
41
- // this is the mobile category selector
42
- postContainer.find('.category-name')
43
- .translateHtml(selector.selectedCategory ? selector.selectedCategory.name : '[[modules:composer.select-category]]')
44
- .on('click', function () {
45
- categorySelector.modal({
46
- privilege: 'topics:create',
47
- states: ['watching', 'tracking', 'notwatching', 'ignoring'],
48
- openOnLoad: true,
49
- showLinks: false,
50
- onSubmit: function (selectedCategory) {
51
- postContainer.find('.category-name').text(selectedCategory.name);
52
- selector.selectCategory(selectedCategory.cid);
53
- if (postData.hasOwnProperty('cid')) {
54
- changeCategory(postContainer, postData, selectedCategory);
55
- }
56
- },
57
- });
58
- });
59
-
60
58
  toggleDropDirection(postContainer);
61
59
  };
62
60
 
package/static/scss/composer.scss CHANGED
@@ -19,22 +19,41 @@
19
19
  flex-shrink: 0;
20
20
  }
21
21
 
22
- button {
23
- font-size: 20px;
22
+ // fix text-truncate in mobile
23
+ // these are not in selector-dropdown-content.tpl because they are only needed in the mobile composer and not in the category selector used in the topic list
24
+ .category-dropdown-container {
25
+ width: 100%;
26
+ > button {
27
+ width: 100%;
28
+ @include text-truncate;
29
+ text-align: start;
30
+ > [component="category-selector-selected"] {
31
+ width: 100%;
32
+ @include text-truncate;
33
+ > i:nth-child(1) {
34
+ flex-shrink: 0;
35
+ color: var(--bs-btn-color)!important;
36
+ }
37
+ > span:nth-child(2) { // show "Select category" text on mobile
38
+ display: inline!important;
39
+ }
40
+ > .category-item {
41
+ width: 100%;
42
+ @include text-truncate;
43
+ span:nth-child(1) {
44
+ flex-shrink: 0;
45
+ }
46
+ span:nth-child(2) {
47
+ display: block!important;
48
+ @include text-truncate;
49
+ }
50
+ }
51
+ }
52
+ }
24
53
  }
25
54
 
26
- display: flex;
27
-
28
- .category-name-container, .title {
29
- text-align: center;
30
- text-overflow: ellipsis;
31
- overflow: hidden;
32
- white-space: nowrap;
55
+ .title {
33
56
  flex-grow: 2;
34
- font-size: 16px;
35
- line-height: inherit;
36
- padding: 9px 5px;
37
- margin: 0;
38
57
  }
39
58
  }
40
59
 
package/static/templates/composer.tpl CHANGED
@@ -1,24 +1,25 @@
1
1
  <div component="composer" class="composer {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}">
2
2
  <div class="composer-container d-flex flex-column gap-1 h-100">
3
3
  <!-- mobile header -->
4
- <nav class="navbar fixed-top mobile-navbar hidden-md hidden-lg text-bg-primary flex-nowrap gap-1 px-1">
4
+ <nav class="navbar fixed-top mobile-navbar text-bg-primary d-flex d-md-none flex-nowrap gap-1 px-1">
5
5
  <div class="btn-group">
6
- <button class="btn btn-sm btn-primary composer-discard" data-action="discard" tabindex="-1"><i class="fa fa-fw fa-times"></i></button>
7
- <button class="btn btn-sm btn-primary composer-minimize" data-action="minimize" tabindex="-1"><i class="fa fa-fw fa-minus"></i></button>
6
+ <button class="btn btn-sm btn-primary composer-discard fs-5" data-action="discard" tabindex="-1"><i class="fa fa-fw fa-times"></i></button>
7
+ <button class="btn btn-sm btn-primary composer-minimize fs-5" data-action="minimize" tabindex="-1"><i class="fa fa-fw fa-minus"></i></button>
8
8
  </div>
9
9
  {{{ if isTopic }}}
10
- <div class="category-name-container">
11
- <span class="category-name"></span> <i class="fa fa-sort"></i>
10
+ <div class="flex-1" style="min-width: 0px;">
11
+ <!-- IMPORT partials/category/selector-dropdown-left.tpl -->
12
12
  </div>
13
13
  {{{ end }}}
14
14
  {{{ if !isTopicOrMain }}}
15
- <h4 class="title text-bg-primary">{titleLabel}</h4>
15
+ <h4 class="title text-center text-bg-primary text-truncate fs-6 mb-0 px-2">{titleLabel}</h4>
16
16
  {{{ end }}}
17
- <div class="display-scheduler p-2 {{{ if !canSchedule }}} hidden{{{ end }}}">
18
- <i class="fa fa-clock-o"></i>
19
- </div>
20
- <div class="btn-group">
21
- <button class="btn btn-sm btn-primary composer-submit" data-action="post" tabindex="-1"><i class="fa fa-fw fa-chevron-right"></i></button>
17
+
18
+ <div class="d-flex gap-1 flex-nowrap">
19
+ <button class="btn btn-sm btn-primary display-scheduler fs-5 {{{ if !canSchedule }}} hidden{{{ end }}}">
20
+ <i class="fa fa-fw fa-clock-o"></i>
21
+ </button>
22
+ <button class="btn btn-sm btn-primary composer-submit fs-5" data-action="post" tabindex="-1"><i class="fa fa-fw fa-chevron-right"></i></button>
22
23
  </div>
23
24
  </nav>
24
25
  <div class="p-2 d-flex flex-column gap-1 h-100">