nodebb-plugin-composer-default 10.0.1 → 10.0.3
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.
- package/package.json +1 -1
- package/static/lib/composer/tags.js +1 -1
- package/static/lib/composer.js +0 -4
- package/static/scss/composer.scss +15 -45
- package/static/scss/medium.scss +2 -2
- package/static/scss/textcomplete.scss +6 -4
- package/static/templates/compose.tpl +7 -25
- package/static/templates/composer.tpl +9 -25
- package/static/templates/partials/composer-tags.tpl +17 -0
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@ define('composer/tags', ['alerts'], function (alerts) {
|
|
|
17
17
|
maxTags = ajaxify.data.hasOwnProperty('maxTags') ? ajaxify.data.maxTags : config.maximumTagsPerTopic;
|
|
18
18
|
|
|
19
19
|
tagEl.tagsinput({
|
|
20
|
-
tagClass: 'badge bg-info',
|
|
20
|
+
tagClass: 'badge bg-info rounded-1',
|
|
21
21
|
confirmKeys: [13, 44],
|
|
22
22
|
trimValue: true,
|
|
23
23
|
});
|
package/static/lib/composer.js
CHANGED
|
@@ -529,10 +529,6 @@ define('composer', [
|
|
|
529
529
|
|
|
530
530
|
submitBtns.removeAttr('tabindex');
|
|
531
531
|
mobileSubmitBtn.attr('tabindex', parseInt(idx, 10) + 1);
|
|
532
|
-
|
|
533
|
-
$('.category-name-container').on('click', function () {
|
|
534
|
-
$('.category-selector').toggleClass('open');
|
|
535
|
-
});
|
|
536
532
|
}
|
|
537
533
|
|
|
538
534
|
$(window).trigger('action:composer.loaded', {
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
.composer {
|
|
2
2
|
@include no-select;
|
|
3
3
|
|
|
4
|
+
background-color: $body-bg;
|
|
5
|
+
color: $body-color;
|
|
4
6
|
z-index: $zindex-modal;
|
|
5
|
-
|
|
6
|
-
background: #fff;
|
|
7
7
|
visibility: hidden;
|
|
8
|
-
|
|
9
8
|
padding: 0;
|
|
10
|
-
|
|
11
9
|
position: fixed;
|
|
12
10
|
bottom: 0;
|
|
13
11
|
top: 0;
|
|
@@ -50,7 +48,7 @@
|
|
|
50
48
|
|
|
51
49
|
.title-container {
|
|
52
50
|
display: flex;
|
|
53
|
-
border-bottom: 1px solid
|
|
51
|
+
border-bottom: 1px solid $border-color;
|
|
54
52
|
margin: 0;
|
|
55
53
|
|
|
56
54
|
> div[data-component="composer/title"] {
|
|
@@ -62,6 +60,8 @@
|
|
|
62
60
|
}
|
|
63
61
|
|
|
64
62
|
.title, .handle {
|
|
63
|
+
background: transparent;
|
|
64
|
+
color: $body-color;
|
|
65
65
|
display: block;
|
|
66
66
|
margin: 0;
|
|
67
67
|
padding: 8px;
|
|
@@ -128,10 +128,6 @@
|
|
|
128
128
|
.formatting-bar {
|
|
129
129
|
margin: 0;
|
|
130
130
|
|
|
131
|
-
span {
|
|
132
|
-
color: #000;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
131
|
.spacer {
|
|
136
132
|
&:before {
|
|
137
133
|
content: ' | ';
|
|
@@ -151,18 +147,18 @@
|
|
|
151
147
|
display: inline-block;
|
|
152
148
|
padding: 10px 15px;
|
|
153
149
|
cursor: pointer;
|
|
154
|
-
color: #333;
|
|
155
150
|
position: relative;
|
|
156
151
|
|
|
157
152
|
&:focus, &:hover {
|
|
158
153
|
outline: none;
|
|
159
|
-
|
|
154
|
+
color: $dropdown-link-hover-color;
|
|
155
|
+
background-color: $dropdown-link-hover-bg;
|
|
160
156
|
}
|
|
161
157
|
|
|
162
158
|
&[data-format="thumbs"][data-count]:after {
|
|
163
159
|
content: attr(data-count);
|
|
164
160
|
background: $info;
|
|
165
|
-
color: white;
|
|
161
|
+
color: $white;
|
|
166
162
|
font-weight: 600;
|
|
167
163
|
position: absolute;
|
|
168
164
|
top: 5px;
|
|
@@ -184,7 +180,6 @@
|
|
|
184
180
|
.write-container, .preview-container {
|
|
185
181
|
display: flex;
|
|
186
182
|
flex: 1;
|
|
187
|
-
margin: 0 15px;
|
|
188
183
|
position: relative;
|
|
189
184
|
|
|
190
185
|
.help-text {
|
|
@@ -193,7 +188,6 @@
|
|
|
193
188
|
right: 35px;
|
|
194
189
|
top: 8px;
|
|
195
190
|
font-size: 10px;
|
|
196
|
-
color: #999;
|
|
197
191
|
z-index: 1;
|
|
198
192
|
}
|
|
199
193
|
}
|
|
@@ -207,7 +201,6 @@
|
|
|
207
201
|
.preview-container {
|
|
208
202
|
word-wrap: break-word;
|
|
209
203
|
max-width: 50%;
|
|
210
|
-
max-width: calc(50% - 30px);
|
|
211
204
|
}
|
|
212
205
|
|
|
213
206
|
.write, .preview {
|
|
@@ -222,8 +215,8 @@
|
|
|
222
215
|
|
|
223
216
|
.write {
|
|
224
217
|
border: none;
|
|
225
|
-
border-top: 1px solid
|
|
226
|
-
border-bottom: 1px solid
|
|
218
|
+
border-top: 1px solid $border-color;
|
|
219
|
+
border-bottom: 1px solid $border-color;
|
|
227
220
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
|
228
221
|
}
|
|
229
222
|
|
|
@@ -263,6 +256,7 @@
|
|
|
263
256
|
}
|
|
264
257
|
}
|
|
265
258
|
.bootstrap-tagsinput {
|
|
259
|
+
background: transparent;
|
|
266
260
|
flex-grow: 1;
|
|
267
261
|
border: 0;
|
|
268
262
|
padding: 4px 6px;
|
|
@@ -271,6 +265,10 @@
|
|
|
271
265
|
overflow: auto;
|
|
272
266
|
|
|
273
267
|
input {
|
|
268
|
+
&::placeholder{
|
|
269
|
+
color: $body-color;
|
|
270
|
+
}
|
|
271
|
+
color: $body-color;
|
|
274
272
|
font-size: 16px;
|
|
275
273
|
width: 50%;
|
|
276
274
|
height: 28px;
|
|
@@ -284,34 +282,6 @@
|
|
|
284
282
|
}
|
|
285
283
|
}
|
|
286
284
|
|
|
287
|
-
.category-selector {
|
|
288
|
-
display: block;
|
|
289
|
-
visibility: hidden;
|
|
290
|
-
|
|
291
|
-
position: fixed;
|
|
292
|
-
left: 0;
|
|
293
|
-
right: 0;
|
|
294
|
-
bottom: 0;
|
|
295
|
-
|
|
296
|
-
margin: 0;
|
|
297
|
-
padding: 0 5px;
|
|
298
|
-
max-height: calc(100% - 86px);
|
|
299
|
-
|
|
300
|
-
background: #fff;
|
|
301
|
-
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
|
|
302
|
-
overflow: auto;
|
|
303
|
-
-webkit-overflow-scrolling: touch;
|
|
304
|
-
transform: translate3d(0, 350px, 0);
|
|
305
|
-
transition: transform 0.3s, visibility 0s 0.3s;
|
|
306
|
-
z-index: 2;
|
|
307
|
-
|
|
308
|
-
&.open {
|
|
309
|
-
transform: none;
|
|
310
|
-
visibility: visible;
|
|
311
|
-
transition-delay: 0s;
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
|
|
315
285
|
.resizer {
|
|
316
286
|
display: none;
|
|
317
287
|
position: absolute;
|
package/static/scss/medium.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.textcomplete-dropdown {
|
|
2
|
-
border: 1px solid
|
|
3
|
-
background-color:
|
|
2
|
+
border: 1px solid $border-color;
|
|
3
|
+
background-color: $body-bg;
|
|
4
|
+
color: $body-color;
|
|
4
5
|
list-style: none;
|
|
5
6
|
padding: 0;
|
|
6
7
|
margin: 0;
|
|
@@ -10,7 +11,7 @@
|
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.textcomplete-footer, .textcomplete-item {
|
|
13
|
-
border-top: 1px solid
|
|
14
|
+
border-top: 1px solid $border-color;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
.textcomplete-item {
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
cursor: pointer;
|
|
19
20
|
|
|
20
21
|
&:hover, &.active {
|
|
21
|
-
|
|
22
|
+
color: $dropdown-link-hover-color;
|
|
23
|
+
background-color: $dropdown-link-hover-bg;
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
}
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
<!-- ENDIF isTopicOrMain -->
|
|
27
27
|
<!-- IF showHandleInput -->
|
|
28
28
|
<div class="col-sm-3 col-md-12">
|
|
29
|
-
<input class="handle form-control" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
|
|
29
|
+
<input class="handle form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
|
|
30
30
|
</div>
|
|
31
31
|
<!-- ENDIF showHandleInput -->
|
|
32
32
|
<div class="<!-- IF isTopic -->col-lg-9<!-- ELSE -->col-lg-12<!-- ENDIF isTopic --> col-md-12">
|
|
33
33
|
<!-- IF isTopicOrMain -->
|
|
34
|
-
<input name="title" form="compose-form" class="title form-control" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
|
|
34
|
+
<input name="title" form="compose-form" class="title form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
|
|
35
35
|
<!-- ELSE -->
|
|
36
|
-
<span class="title">[[topic:composer.replying_to, "{topicTitle}"]]</span>
|
|
36
|
+
<span class="title h-100">[[topic:composer.replying_to, "{topicTitle}"]]</span>
|
|
37
37
|
<!-- ENDIF isTopicOrMain -->
|
|
38
|
-
<div id="quick-search-container" class="quick-search-container hidden">
|
|
38
|
+
<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
|
|
39
39
|
<div class="quick-search-results-container"></div>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
@@ -87,14 +87,14 @@
|
|
|
87
87
|
|
|
88
88
|
<div class="row write-preview-container">
|
|
89
89
|
<div class="col-md-6 col-sm-12 write-container">
|
|
90
|
-
<div class="help-text">
|
|
90
|
+
<div class="help-text text-muted">
|
|
91
91
|
[[modules:composer.compose]] <span class="help hidden"><i class="fa fa-question-circle"></i></span>
|
|
92
92
|
<span class="toggle-preview hide">[[modules:composer.show_preview]]</span>
|
|
93
93
|
</div>
|
|
94
94
|
<textarea name="content" form="compose-form" class="write" tabindex="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
|
|
95
95
|
</div>
|
|
96
96
|
<div class="col-md-6 hidden-sm hidden-xs preview-container">
|
|
97
|
-
<div class="help-text">
|
|
97
|
+
<div class="help-text text-muted">
|
|
98
98
|
<span class="toggle-preview">[[modules:composer.hide_preview]]</span>
|
|
99
99
|
</div>
|
|
100
100
|
<div class="preview well"></div>
|
|
@@ -102,25 +102,7 @@
|
|
|
102
102
|
</div>
|
|
103
103
|
|
|
104
104
|
<!-- IF isTopicOrMain -->
|
|
105
|
-
|
|
106
|
-
<div class="tags-container d-flex {{{ if tagWhitelist.length }}}haswhitelist{{{ end }}}">
|
|
107
|
-
<div class="btn-group dropup <!-- IF !tagWhitelist.length -->hidden<!-- ENDIF !tagWhitelist.length -->" component="composer/tag/dropdown">
|
|
108
|
-
<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
|
|
109
|
-
<span class="visible-sm-inline visible-md-inline visible-lg-inline"><i class="fa fa-tags"></i></span>
|
|
110
|
-
<span class="caret"></span>
|
|
111
|
-
</button>
|
|
112
|
-
|
|
113
|
-
<ul class="dropdown-menu">
|
|
114
|
-
<!-- BEGIN tagWhitelist -->
|
|
115
|
-
<li data-tag="{@value}"><a class="dropdown-item" href="#">{@value}</a></li>
|
|
116
|
-
<!-- END tagWhitelist -->
|
|
117
|
-
</ul>
|
|
118
|
-
</div>
|
|
119
|
-
<input class="tags" type="text" class="form-control" placeholder="[[tags:enter_tags_here, {minimumTagLength}, {maximumTagLength}]]" tabindex="5"/>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
105
|
+
<!-- IMPORT partials/composer-tags.tpl -->
|
|
122
106
|
<!-- ENDIF isTopicOrMain -->
|
|
123
|
-
|
|
124
|
-
|
|
125
107
|
</div>
|
|
126
108
|
</div>
|
|
@@ -30,16 +30,16 @@
|
|
|
30
30
|
|
|
31
31
|
<!-- IF showHandleInput -->
|
|
32
32
|
<div data-component="composer/handle">
|
|
33
|
-
<input class="handle form-control" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
|
|
33
|
+
<input class="handle form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
|
|
34
34
|
</div>
|
|
35
35
|
<!-- ENDIF showHandleInput -->
|
|
36
36
|
<div data-component="composer/title">
|
|
37
37
|
<!-- IF isTopicOrMain -->
|
|
38
|
-
<input class="title form-control" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{title}"/>
|
|
38
|
+
<input class="title form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{title}"/>
|
|
39
39
|
<!-- ELSE -->
|
|
40
|
-
<span class="title
|
|
40
|
+
<span class="title h-100">[[topic:composer.replying_to, "{title}"]]</span>
|
|
41
41
|
<!-- ENDIF isTopicOrMain -->
|
|
42
|
-
<div id="quick-search-container" class="quick-search-container hidden">
|
|
42
|
+
<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
|
|
43
43
|
<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
|
|
44
44
|
<div class="quick-search-results-container"></div>
|
|
45
45
|
</div>
|
|
@@ -97,16 +97,16 @@
|
|
|
97
97
|
</div>
|
|
98
98
|
|
|
99
99
|
<div class="write-preview-container">
|
|
100
|
-
<div class="write-container">
|
|
101
|
-
<div class="help-text">
|
|
100
|
+
<div class="write-container me-1">
|
|
101
|
+
<div class="help-text text-muted">
|
|
102
102
|
<span class="help hidden">[[modules:composer.compose]] <i class="fa fa-question-circle"></i></span>
|
|
103
103
|
<span class="toggle-preview hide">[[modules:composer.show_preview]]</span>
|
|
104
104
|
</div>
|
|
105
105
|
<div class="float-end draft-icon hidden-md hidden-lg"></div>
|
|
106
106
|
<textarea class="write" tabindex="4" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
|
|
107
107
|
</div>
|
|
108
|
-
<div class="hidden-sm hidden-xs preview-container">
|
|
109
|
-
<div class="help-text">
|
|
108
|
+
<div class="hidden-sm hidden-xs preview-container ms-1">
|
|
109
|
+
<div class="help-text text-muted">
|
|
110
110
|
<span class="toggle-preview">[[modules:composer.hide_preview]]</span>
|
|
111
111
|
</div>
|
|
112
112
|
<div class="preview card card-body bg-light"></div>
|
|
@@ -114,23 +114,7 @@
|
|
|
114
114
|
</div>
|
|
115
115
|
|
|
116
116
|
<!-- IF isTopicOrMain -->
|
|
117
|
-
|
|
118
|
-
<div class="tags-container d-flex {{{ if tagWhitelist.length }}}haswhitelist{{{ end }}}">
|
|
119
|
-
<div class="btn-group dropup <!-- IF !tagWhitelist.length -->hidden<!-- ENDIF !tagWhitelist.length -->" component="composer/tag/dropdown">
|
|
120
|
-
<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
|
|
121
|
-
<span class="visible-sm-inline visible-md-inline visible-lg-inline"><i class="fa fa-tags"></i></span>
|
|
122
|
-
[[tags:select_tags]]
|
|
123
|
-
</button>
|
|
124
|
-
|
|
125
|
-
<ul class="dropdown-menu">
|
|
126
|
-
<!-- BEGIN tagWhitelist -->
|
|
127
|
-
<li data-tag="{@value}"><a class="dropdown-item" href="#">{@value}</a></li>
|
|
128
|
-
<!-- END tagWhitelist -->
|
|
129
|
-
</ul>
|
|
130
|
-
</div>
|
|
131
|
-
<input class="tags" type="text" class="" placeholder="[[tags:enter_tags_here, {minimumTagLength}, {maximumTagLength}]]" tabindex="5" />
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
117
|
+
<!-- IMPORT partials/composer-tags.tpl -->
|
|
134
118
|
<!-- ENDIF isTopicOrMain -->
|
|
135
119
|
|
|
136
120
|
<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<div class="tag-row">
|
|
2
|
+
<div class="tags-container d-flex align-items-center {{{ if tagWhitelist.length }}}haswhitelist{{{ end }}}">
|
|
3
|
+
<div class="btn-group dropup me-2 {{{ if !tagWhitelist.length }}}hidden{{{ end }}}" component="composer/tag/dropdown">
|
|
4
|
+
<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
|
|
5
|
+
<span class="visible-sm-inline visible-md-inline visible-lg-inline"><i class="fa fa-tags"></i></span>
|
|
6
|
+
[[tags:select_tags]]
|
|
7
|
+
</button>
|
|
8
|
+
|
|
9
|
+
<ul class="dropdown-menu">
|
|
10
|
+
<!-- BEGIN tagWhitelist -->
|
|
11
|
+
<li data-tag="{@value}"><a class="dropdown-item" href="#">{@value}</a></li>
|
|
12
|
+
<!-- END tagWhitelist -->
|
|
13
|
+
</ul>
|
|
14
|
+
</div>
|
|
15
|
+
<input class="tags" type="text" class="" placeholder="[[tags:enter_tags_here, {minimumTagLength}, {maximumTagLength}]]" tabindex="5" />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|