nodebb-plugin-composer-default 10.2.18 → 10.2.20

package/library.js

@@ -219,6 +219,7 @@ plugin.filterComposerBuild = async function (hookData) {
 			isAdminOrMod: isAdmin || isMod,
 			save_id: save_id,
 			privileges: globalPrivileges,
+			'composer:showHelpTab': meta.config['composer:showHelpTab'] === 1,
 		},
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-composer-default",
-  "version": "10.2.18",
+  "version": "10.2.20",
   "description": "Default composer for NodeBB",
   "main": "library.js",
   "repository": {

package/static/scss/composer.scss

@@ -1,7 +1,7 @@
 .composer {
 	user-select: none;
-	background-color: $body-bg;
-	color: $body-color;
+	background-color: var(--bs-body-bg);
+	color: var(--bs-body-color);
 	z-index: $zindex-dropdown;
 	visibility: hidden;
 	padding: 0;
@@ -356,3 +356,27 @@
 @import './page-compose';
 @import './textcomplete';
 
+
+.skin-noskin, .skin-cosmo, .skin-flatly,
+.skin-journal, .skin-litera, .skin-minty, .skin-pulse,
+.skin-sandstone, .skin-sketchy, .skin-spacelab, .skin-united {
+	.composer {
+		color: var(--bs-secondary) !important;
+		background-color: var(--bs-light) !important;
+	}
+}
+
+.skin-cerulean, .skin-lumen, .skin-lux, .skin-morph,
+.skin-simplex, .skin-yeti, .skin-zephyr {
+	.composer {
+		color: var(--bs-body) !important;
+		background-color: var(--bs-light) !important;
+	}
+}
+
+@include color-mode(dark) {
+	.skin-noskin .composer {
+		color: var(--bs-secondary)!important;
+		background-color: var(--bs-body-bg)!important;
+	}
+}

package/static/scss/page-compose.scss

@@ -1,20 +1,23 @@
-html,
-body.page-compose,
-.page-compose #content,
-.page-compose #panel {
-	height: 100%;
-}
-
-body.page-compose {
-	padding-bottom: 0 !important;
-}
-
 .page-compose .composer {
-	height: 100%;
 	z-index: initial;
 	position: static;
+	[data-action="hide"] {
+		display: none;
+	}
 }
 
 .zen-mode .page-compose .composer {
 	position: absolute;
-}
+}
+.page-compose {
+	&.skin-noskin, &.skin-cosmo, &.skin-flatly,
+	&.skin-journal, &.skin-litera, &.skin-minty, &.skin-pulse,
+	&.skin-sandstone, &.skin-sketchy, &.skin-spacelab, &.skin-united,
+	&.skin-cerulean, &.skin-lumen, &.skin-lux, &.skin-morph,
+	&.skin-simplex, &.skin-yeti, &.skin-zephyr	{
+		.composer {
+			color: var(--bs-body-color) !important;
+			background-color: var(--bs-body-bg) !important;
+		}
+	}
+}

package/static/templates/compose.tpl

@@ -1,5 +1,5 @@
-<div component="composer" class="composer{{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}"{{{ if !disabled }}} style="visibility: inherit;"{{{ end }}}>
-	<div class="composer-container">
+<div component="composer" class="composer pb-3 h-100 {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}"{{{ if !disabled }}} style="visibility: inherit;"{{{ end }}}>
+	<div class="composer-container d-flex flex-column gap-1 h-100">
 		<form id="compose-form" method="post">
 			{{{ if pid }}}
 			<input type="hidden" name="pid" value="{pid}" />

package/static/templates/partials/composer-write-preview.tpl

@@ -5,6 +5,6 @@
 		<textarea class="write shadow-none rounded-1 w-100 form-control" tabindex="4" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
 	</div>
 	<div class="preview-container d-none d-md-flex w-50">
-		<div class="preview card card-body bg-light rounded-1 overflow-auto"></div>
+		<div class="preview p-3 border w-100 rounded-1 overflow-auto"></div>
 	</div>
 </div>