Enable multiline question while create new request (RocketChat#185)

Enable multiline question while create new request Travis failed inexplicably. Integration-tested locally with success
redlink-gmbh · Mar 27, 2018 · 8dc185c · 8dc185c
1 parent 9fa2f4f
commit 8dc185c
Show file tree

Hide file tree

Showing 7 changed files with 961 additions and 66 deletions.
diff --git a/...ssets/stylesheets/helpRequestContext.less → ...quest/assets/stylesheets/helpRequest.less b/...ssets/stylesheets/helpRequestContext.less → ...quest/assets/stylesheets/helpRequest.less
@@ -47,3 +47,33 @@
 		}
 	}
 }
+
+.create-channel__inputs {
+	.rc-input__textarea {
+		width: 100%;
+
+	    height: 45px;
+
+	    padding: 0.75rem 1rem 0.75rem 2.75rem;
+
+		color: var(--input-text-color);
+
+		border-width: var(--input-border-width);
+
+		border-color: var(--input-border-color);
+
+		border-radius: var(--input-border-radius);
+
+	    background-color: transparent;
+
+		font: inherit;
+
+		resize: none;
+
+		max-height: 250px;
+
+		&::placeholder {
+	  		color: var(--input-placeholder-color);
+		}
+  	}
+}
diff --git a/packages/assistify-help-request/client/views/creationDialog/AssistifyCreateRequest.html b/packages/assistify-help-request/client/views/creationDialog/AssistifyCreateRequest.html
@@ -59,19 +59,24 @@ <h1 class="create-channel__title">{{_ "Requests"}}</h1>
 						<div class="rc-input__icon">
 							{{> icon block="rc-input__icon-svg" icon="send"}}
 						</div>
-						<input name="first_question" type="text" class="rc-input__element" id="first_question"
-							   placeholder={{_ "New_request_first_question"}} autocomplete="off">
+						<textarea name="first_question" class="help-request-context rc-input__textarea autogrow-short" placeholder="{{_ 'New_request_first_question'}}" maxlength="{{maxMessageLength}}"
+								  id="first_question"  rows="1"></textarea>
 					</div>
 				</label>
 			</div>
 			<div class="rc-input">
 				<input class="rc-button rc-button--primary js-save-request" type="submit" data-button="create"
 					   value="{{_ "Create"}}" {{createIsDisabled}}>
 			</div>
+
 		</div>
+
 	</form>
+
 </template>
 
+
+
 <template name="AssistifyCreateRequestAutocomplete">
 	<li class="rc-popup-list__item">
 		<span class="rc-popup-list__item-name">{{{modifier item.name}}}</span>

diff --git a/packages/assistify-help-request/client/views/creationDialog/AssistifyCreateRequest.js b/packages/assistify-help-request/client/views/creationDialog/AssistifyCreateRequest.js
@@ -68,6 +68,9 @@ Template.AssistifyCreateRequest.helpers({
 	titleError() {
 		const instance = Template.instance();
 		return instance.titleError.get();
+	},
+	maxMessageLength() {
+		return RocketChat.settings.get('Message_MaxAllowedSize');
 	}
 });
 
@@ -142,7 +145,10 @@ Template.AssistifyCreateRequest.onRendered(function() {
 	const instance = this;
 	const expertiseElement = this.find('input[name="expertise"]');
 	const titleElement = this.find('input[name="request_title"]');
-	const questionElement = this.find('input[name="first_question"]');
+	const questionElement = this.find('[name="first_question"]');
+
+	//Bind autogrow property to 'First Question' element
+	questionElement.textarea = this.$('.rc-input__textarea').autogrow();
 
 	instance.ac.element = expertiseElement;
 	instance.ac.$element = $(instance.ac.element);

diff --git a/packages/assistify-help-request/config.js b/packages/assistify-help-request/config.js
@@ -37,6 +37,6 @@ Meteor.startup(() => {
 	_createExpertsChannel();
 
 	RocketChat.theme.addPackageAsset(() => {
-		return Assets.getText('assets/stylesheets/helpRequestContext.less');
+		return Assets.getText('assets/stylesheets/helpRequest.less');
 	});
 });
diff --git a/packages/assistify-help-request/package.js b/packages/assistify-help-request/package.js
@@ -88,7 +88,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/hooks/openAiTab.js', 'client');
 
 	//Assets
-	api.addAssets('assets/stylesheets/helpRequestContext.less', 'server'); //has to be done on the server, it exposes the completed css to the client
+	api.addAssets('assets/stylesheets/helpRequest.less', 'server'); //has to be done on the server, it exposes the completed css to the client
 	api.addFiles('client/public/stylesheets/help-request.css', 'client');
 
 	//global UI modifications