nodebb-theme-persona 11.3.23 → 11.3.27

package/less/chats.less

@@ -27,27 +27,16 @@
 	[component="chat/nav-wrapper"] {
 		flex: 1;
 		flex-direction: column;
-		box-shadow: 0 3px 9px rgba(0,0,0,.5);
-
+		padding: 0px 15px;
 		.chats-list {
 			flex: 1;
 			overflow-y: auto;
 			margin-bottom: 0;
-			height: ~"calc(100% - 3em)";
+			height: ~"calc(100% - 5em)";
 		}
 
 		.chat-search {
-			background-color: @panel-default-heading-bg;
-			border-bottom: 1px solid @gray-dark;
-
-			input {
-				background-color: @gray-dark;
-				color: @gray-lighter;
-				border-radius: 0;
-				border: none;
-				height: ~"calc(3em - 2px)";
-			}
-
+			padding-bottom: 15px;
 			ul {
 				width: 100%;
 			}
@@ -57,7 +46,6 @@
 			padding: 0;
 			overflow-x: hidden;
 			overflow-y: auto;
-			border-top: 1px solid @gray-lighter;
 
 			li {
 				position: relative;
@@ -69,8 +57,7 @@
 				border-left: 1px solid;
 				border-right: 1px solid;
 				border-bottom: 1px solid;
-				border-color: #eee;
-				background: #fff;
+				border-color: @gray-lighter;
 
 				i {
 					position: relative;
@@ -91,7 +78,7 @@
 
 	[component="chat/main-wrapper"] {
 		flex: 3;
-
+		padding-bottom: 15px;
 		.alert {
 			margin: 1em;
 		}
@@ -109,9 +96,7 @@
 
 	[component="chat/header"] {
 		padding: @panel-heading-padding;
-		background-color: @gray-dark;
-		border-bottom: none;
-		color: @gray-lighter;
+		border-bottom: 1px solid @modal-header-border-color;
 
 		span {
 			font-weight: 500;
@@ -119,13 +104,11 @@
 
 		.close {
 			margin-left: 0.5em;
-			color: @gray-lighter;
 		}
 
 		.members {
 			a {
 				font-weight: 600;
-				color: @gray-lighter;
 			}
 		}
 

package/less/search.less

@@ -78,6 +78,13 @@
 	}
 }
 
+@media (max-width: @screen-xs-max) {
+	.quick-search-container {
+		left: 0px;
+		right: 0px;
+	}
+}
+
 .quick-search-results, .search-results {
 	.post-info {
 		font-size: 12px;

package/less/topic.less

@@ -370,6 +370,7 @@
 	}
 
 	.quick-reply {
+		position: relative;
 		.icon {
 			position: relative;
 			border-radius: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "11.3.23",
+  "version": "11.3.27",
   "nbbpm": {
     "compatibility": "^1.18.0"
   },

package/public/modules/quickreply.js

@@ -1,8 +1,8 @@
 'use strict';
 
 define('persona/quickreply', [
-	'components', 'composer/autocomplete', 'api', 'alerts',
-], function (components, autocomplete, api, alerts) {
+	'components', 'composer/autocomplete', 'api', 'alerts', 'uploadHelpers',
+], function (components, autocomplete, api, alerts, uploadHelpers) {
 	var QuickReply = {};
 
 	QuickReply.init = function () {
@@ -27,6 +27,22 @@ define('persona/quickreply', [
 		// data.element.textcomplete(data.strategies, data.options);
 		// $('.textcomplete-wrapper').css('height', '100%').find('textarea').css('height', '100%');
 
+
+		uploadHelpers.init({
+			dragDropAreaEl: $('[component="topic/quickreply/container"] .quickreply-message'),
+			pasteEl: element,
+			uploadFormEl: $('[component="topic/quickreply/upload"]'),
+			inputEl: element,
+			route: '/api/post/upload',
+			callback: function (uploads) {
+				let text = element.val();
+				uploads.forEach((upload) => {
+					text = text + (text ? '\n' : '') + (upload.isImage ? '!' : '') + `[${upload.filename}](${upload.url})`;
+				});
+				element.val(text);
+			},
+		});
+
 		var ready = true;
 		components.get('topic/quickreply/button').on('click', function (e) {
 			e.preventDefault();

package/public/persona.js

@@ -36,6 +36,7 @@ $(document).ready(function () {
 			offset -= 70;
 		}
 
+		offset = Math.max(0, offset);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
 	}
 
@@ -192,7 +193,7 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['pulling', 'storage', 'alerts'], function (Pulling, Storage, alerts) {
+		require(['pulling', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
 			if (!Pulling) {
 				return;
 			}
@@ -354,12 +355,22 @@ $(document).ready(function () {
 
 				searchButton.addClass('hidden');
 				searchInputEl.removeClass('hidden').focus();
-				searchInputEl.off('blur').on('blur', function () {
-					searchInputEl.addClass('hidden');
-					searchButton.removeClass('hidden');
-				});
 				return false;
 			});
+			searchInputEl.on('blur', function () {
+				searchInputEl.addClass('hidden');
+				searchButton.removeClass('hidden');
+			});
+			search.enableQuickSearch({
+				searchElements: {
+					inputEl: searchInputEl,
+					resultEl: $('.navbar-header .navbar-search .quick-search-container'),
+				},
+				searchOptions: {
+					in: config.searchDefaultInQuick,
+				},
+			});
+
 
 			// add a checkbox in the user settings page
 			// so users can swap the sides the menus appear on

package/templates/chat.tpl

@@ -21,8 +21,12 @@
 					<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="1"></textarea>
 					<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 					<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+					<form component="chat/upload" method="post" enctype="multipart/form-data">
+						<input type="file" name="files[]" multiple class="hidden"/>
+					</form>
 				</div>
 			</div>
+			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 	</div>
 </div>

package/templates/chats.tpl

@@ -1,7 +1,7 @@
 <div class="chats-full">
 	<div component="chat/nav-wrapper" data-loaded="<!-- IF roomId -->1<!-- ELSE -->0<!-- END -->">
 		<div class="chat-search dropdown">
-			<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" data-toggle="dropdown" />
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-toggle="dropdown" />
 			<ul component="chat/search/list" class="dropdown-menu"></ul>
 		</div>
 		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
@@ -13,4 +13,5 @@
 	<div component="chat/main-wrapper">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
+	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 </div>

package/templates/partials/chats/message-window.tpl

@@ -1,8 +1,8 @@
 <!-- IF roomId -->
 <div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
 	<div component="chat/header">
-		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
 		<button type="button" class="close" aria-label="Close" data-action="close"><span aria-hidden="true">&times;</span></button>
+		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
 
 		<!-- IMPORT partials/chats/options.tpl -->
 		<span class="members">
@@ -20,6 +20,9 @@
 		<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
 		<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
 		<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+		<form component="chat/upload" method="post" enctype="multipart/form-data">
+			<input type="file" name="files[]" multiple class="hidden"/>
+		</form>
 	</div>
 </div>
 <!-- ELSE -->

package/templates/partials/menu.tpl

@@ -13,11 +13,14 @@
 				{{{ if config.searchEnabled }}}
 				<div class="navbar-search visible-xs pull-right">
 					<form action="{config.relative_path}/search" method="GET">
-						<button type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
+						<button type="button" class="btn btn-link"><i class="fa fa-lg fa-fw fa-search" title="[[global:header.search]]"></i></button>
 						<input autocomplete="off" type="text" class="form-control hidden" name="term" placeholder="[[global:search]]"/>
 						<button class="btn btn-primary hidden" type="submit"></button>
 						<input type="text" class="hidden" name="in" value="{config.searchDefaultInQuick}" />
 					</form>
+					<div class="quick-search-container hidden">
+						<div class="quick-search-results-container"></div>
+					</div>
 				</div>
 				{{{ end }}}
 

package/templates/partials/slideout-menu.tpl

@@ -1,5 +1,4 @@
 <section class="menu-section" data-section="navigation">
-	<h3 class="menu-section-title">[[global:header.navigation]]</h3>
 	<ul class="menu-section-list"></ul>
 </section>
 

package/templates/partials/topic/quickreply.tpl

@@ -1,5 +1,5 @@
 <!-- IF privileges.topics:reply -->
-<div class="clearfix quick-reply">
+<div component="topic/quickreply/container" class="clearfix quick-reply">
 	<div class="icon pull-left hidden-xs">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
 			{buildAvatar(loggedInUser, "46", true, "", "user/picture")}
@@ -13,8 +13,13 @@
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
 		<div class="quickreply-message">
 			<textarea name="content" component="topic/quickreply/text" class="form-control" rows="5"></textarea>
+			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
 		<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">[[topic:post-quick-reply]]</button>
 	</form>
+	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
+		<input type="file" name="files[]" multiple class="hidden"/>
+	</form>
+
 </div>
 <!-- ENDIF privileges.topics:reply -->