make title, description and location autoresizing textareas

nextcloud · Dec 10, 2016 · 2e2e289 · 2e2e289
1 parent 4926429
commit 2e2e289
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/css/app/eventdialog.css b/css/app/eventdialog.css
@@ -120,6 +120,11 @@
 	width: 60px;
 }
 
+.events--textarea,
+.advanced--textarea {
+	resize: none;
+}
+
 .advanced .events--time {
 	width: 100%;
 }
@@ -164,11 +169,6 @@
 	width: 100%;
 }
 
-.advanced .advanced--fieldset textarea {
-	height: 4.5em;
-	resize: vertical;
-}
-
 .advanced .tabHeaders {
 	margin: 0 0 15px;
 	float: left;

diff --git a/js/.jshintrc b/js/.jshintrc
@@ -38,6 +38,7 @@
           "escapeHTML": true,
           "possible": true,
           "dav": true,
-          "hslToRgb": true
+          "hslToRgb": true,
+          "autosize": true
     }
 }
diff --git a/js/app/controllers/editorcontroller.js b/js/app/controllers/editorcontroller.js
@@ -26,8 +26,8 @@
  * Description: Takes care of anything inside the Events Modal.
  */
 
-app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletionService', '$window', '$uibModalInstance', 'vevent', 'simpleEvent', 'calendar', 'isNew', 'emailAddress',
-	function($scope, TimezoneService, AutoCompletionService, $window, $uibModalInstance, vevent, simpleEvent, calendar, isNew, emailAddress) {
+app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletionService', '$timeout', '$window', '$uibModalInstance', 'vevent', 'simpleEvent', 'calendar', 'isNew', 'emailAddress',
+	function($scope, TimezoneService, AutoCompletionService, $timeout, $window, $uibModalInstance, vevent, simpleEvent, calendar, isNew, emailAddress) {
 		'use strict';
 
 		$scope.properties = simpleEvent;
@@ -77,6 +77,14 @@ app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletion
 				$scope.properties.dtend.value = moment($scope.properties.dtend.value.subtract(1, 'days'));
 			}
 
+			autosize($('.advanced--textarea'));
+			autosize($('.events--textarea'));
+
+			$timeout(() => {
+				autosize.update($('.advanced--textarea'));
+				autosize.update($('.events--textarea'));
+			}, 50);
+
 			angular.forEach($scope.preEditingHooks, function(callback) {
 				callback();
 			});

diff --git a/templates/editor.popover.php b/templates/editor.popover.php
@@ -1,13 +1,14 @@
 <div>
 	<form class="events" ng-submit="save()">
 		<fieldset class="events--fieldset" ng-disabled="readOnly">
-			<input
-					class="events--input h2"
+			<textarea
+					rows="1"
+					class="events--input h2 events--textarea"
 					ng-model="properties.summary.value"
 					placeholder="<?php p($l->t('Title of the Event'));?>"
 					name="title" type="text"
 					autofocus="autofocus"
-			/>
+			></textarea>
 			<select
 					ng-model="calendar"
 					ng-change="selectedCalendarChanged()"

diff --git a/templates/editor.sidebar.php b/templates/editor.sidebar.php
@@ -3,12 +3,13 @@
 		<div class="sidebar-top">
 			<div class="advanced--container">
 				<fieldset class="advanced--fieldset" ng-disabled="readOnly">
-					<input
-							class="advanced--input h2"
+					<textarea
+							class="advanced--input h2 advanced--textarea"
 							ng-model="properties.summary.value"
 							placeholder="<?php p($l->t('Title of the Event'));?>"
 							name="title" type="text"
-							autofocus="autofocus"/>
+							rows="1"
+							autofocus="autofocus"></textarea>
 					<select
 							ng-model="calendar"
 							ng-change="selectedCalendarChanged()"
@@ -56,12 +57,12 @@ class="checkbox"
 				</fieldset>
 
 				<fieldset ng-show="eventsdetailsview" class="advanced--fieldset" ng-disabled="readOnly">
-					<textarea ng-model="properties.location.value" type="text" class="advanced--input"
+					<textarea ng-model="properties.location.value" type="text" class="advanced--input advanced--textarea" rows="1"
 							  placeholder="<?php p($l->t('Location'));?>" name="location"
 							  uib-typeahead="location.name for location in searchLocation($viewValue)" typeahead-show-hint="true" typeahead-min-length="3"
 							  typeahead-on-select="selectLocationFromTypeahead($item)"
 							  autocomplete="off" ></textarea>
-					<textarea ng-model="properties.description.value" type="text" class="advanced--input advanced--textarea"
+					<textarea ng-model="properties.description.value" type="text" class="advanced--input advanced--textarea" rows="1"
 							  placeholder="<?php p($l->t('Description'));?>" name="description"></textarea>
 					<select id="statusSelector"
 							ng-options="status.type as status.displayname for status in statusSelect"