Textareas now autoresize their height.
I added the monospaced.elastic library from bower, as it already implements everything we need for the textarea resize. Then I applied it to several of the textareas throughout the application. In a few cases I had to add a small timeout trigger to force a recalculation of the text area, because the initial size check was performed while the element in question was hidden which confuses browsers. Change-Id: I368096c93f61142df472573e84bac2d13b4647f0
This commit is contained in:
parent
db10f3c933
commit
52da495399
@ -10,7 +10,8 @@
|
|||||||
"bootstrap": "3.1.1",
|
"bootstrap": "3.1.1",
|
||||||
"angular-ui-router": "0.2.8-bowratic-tedium",
|
"angular-ui-router": "0.2.8-bowratic-tedium",
|
||||||
"angular-bootstrap": "0.10.0",
|
"angular-bootstrap": "0.10.0",
|
||||||
"angular-local-storage": "0.0.1"
|
"angular-local-storage": "0.0.1",
|
||||||
|
"angular-elastic": "2.3.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"angular-mocks": "1.2.13",
|
"angular-mocks": "1.2.13",
|
||||||
|
@ -28,8 +28,8 @@
|
|||||||
* seconds. 3 is preferable.
|
* seconds. 3 is preferable.
|
||||||
*/
|
*/
|
||||||
angular.module('sb.projects').controller('ProjectDetailController',
|
angular.module('sb.projects').controller('ProjectDetailController',
|
||||||
function ($scope, $state, $stateParams, Project, Story, Session,
|
function ($scope, $rootScope, $state, $stateParams, Project, Story,
|
||||||
isSuperuser) {
|
Session, isSuperuser) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Parse the ID
|
// Parse the ID
|
||||||
@ -115,6 +115,13 @@ angular.module('sb.projects').controller('ProjectDetailController',
|
|||||||
$scope.toggleEditMode = function () {
|
$scope.toggleEditMode = function () {
|
||||||
if (isSuperuser) {
|
if (isSuperuser) {
|
||||||
$scope.showEditForm = !$scope.showEditForm;
|
$scope.showEditForm = !$scope.showEditForm;
|
||||||
|
|
||||||
|
// Deferred timeout request for a re-rendering of elastic
|
||||||
|
// text fields, since the size calculation breaks when
|
||||||
|
// visible: false
|
||||||
|
setTimeout(function () {
|
||||||
|
$rootScope.$broadcast('elastic:adjust');
|
||||||
|
}, 1);
|
||||||
} else {
|
} else {
|
||||||
$scope.showEditForm = false;
|
$scope.showEditForm = false;
|
||||||
}
|
}
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
* Story detail & manipulation controller.
|
* Story detail & manipulation controller.
|
||||||
*/
|
*/
|
||||||
angular.module('sb.story').controller('StoryDetailController',
|
angular.module('sb.story').controller('StoryDetailController',
|
||||||
function ($log, $scope, $state, $stateParams, $modal, Story,
|
function ($log, $rootScope, $scope, $state, $stateParams, $modal, Story,
|
||||||
Session, User, Preference) {
|
Session, User, Preference) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
@ -74,6 +74,13 @@ angular.module('sb.story').controller('StoryDetailController',
|
|||||||
$scope.toggleEditMode = function () {
|
$scope.toggleEditMode = function () {
|
||||||
if (Session.isLoggedIn()) {
|
if (Session.isLoggedIn()) {
|
||||||
$scope.showEditForm = !$scope.showEditForm;
|
$scope.showEditForm = !$scope.showEditForm;
|
||||||
|
|
||||||
|
// Deferred timeout request for a re-rendering of elastic
|
||||||
|
// text fields, since the size calculation breaks when
|
||||||
|
// visible: false
|
||||||
|
setTimeout(function () {
|
||||||
|
$rootScope.$broadcast('elastic:adjust');
|
||||||
|
}, 1);
|
||||||
} else {
|
} else {
|
||||||
$scope.showEditForm = false;
|
$scope.showEditForm = false;
|
||||||
}
|
}
|
||||||
|
@ -24,9 +24,10 @@
|
|||||||
*/
|
*/
|
||||||
angular.module('storyboard',
|
angular.module('storyboard',
|
||||||
[ 'sb.services', 'sb.templates', 'sb.dashboard', 'sb.pages', 'sb.projects',
|
[ 'sb.services', 'sb.templates', 'sb.dashboard', 'sb.pages', 'sb.projects',
|
||||||
'sb.auth', 'sb.story', 'sb.profile', 'ui.router', 'ui.bootstrap'])
|
'sb.auth', 'sb.story', 'sb.profile', 'ui.router', 'ui.bootstrap',
|
||||||
|
'monospaced.elastic'])
|
||||||
.config(function ($provide, $urlRouterProvider, $locationProvider,
|
.config(function ($provide, $urlRouterProvider, $locationProvider,
|
||||||
$httpProvider) {
|
$httpProvider, msdElasticConfig) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// Default URL hashbang route
|
// Default URL hashbang route
|
||||||
@ -38,6 +39,9 @@ angular.module('storyboard',
|
|||||||
// Attach common request headers out of courtesy to the API
|
// Attach common request headers out of courtesy to the API
|
||||||
$httpProvider.defaults.headers.common['X-Client'] = 'Storyboard';
|
$httpProvider.defaults.headers.common['X-Client'] = 'Storyboard';
|
||||||
|
|
||||||
|
// Globally set an additional amount of whitespace to the end of our
|
||||||
|
// textarea elastic resizing.
|
||||||
|
msdElasticConfig.append = '\n';
|
||||||
})
|
})
|
||||||
.run(function ($log, $rootScope, $state) {
|
.run(function ($log, $rootScope, $state) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -73,6 +73,7 @@
|
|||||||
<textarea placeholder="Enter a project description here"
|
<textarea placeholder="Enter a project description here"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
rows="3"
|
rows="3"
|
||||||
|
msd-elastic
|
||||||
required
|
required
|
||||||
ng-disabled="isUpdating"
|
ng-disabled="isUpdating"
|
||||||
ng-model="project.description">
|
ng-model="project.description">
|
||||||
|
@ -47,6 +47,7 @@
|
|||||||
<textarea id="description"
|
<textarea id="description"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
ng-model="newProject.description"
|
ng-model="newProject.description"
|
||||||
|
msd-elastic
|
||||||
required
|
required
|
||||||
placeholder="A brief project description">
|
placeholder="A brief project description">
|
||||||
</textarea>
|
</textarea>
|
||||||
|
@ -97,6 +97,7 @@
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<textarea placeholder="Enter a story description here"
|
<textarea placeholder="Enter a story description here"
|
||||||
class="form-control context-edit"
|
class="form-control context-edit"
|
||||||
|
msd-elastic
|
||||||
rows="3"
|
rows="3"
|
||||||
required
|
required
|
||||||
ng-disabled="isUpdating"
|
ng-disabled="isUpdating"
|
||||||
@ -205,6 +206,7 @@
|
|||||||
<textarea id="comment"
|
<textarea id="comment"
|
||||||
placeholder="Enter your comment here"
|
placeholder="Enter your comment here"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
|
msd-elastic
|
||||||
rows="3"
|
rows="3"
|
||||||
required
|
required
|
||||||
ng-disabled="isSavingComment"
|
ng-disabled="isSavingComment"
|
||||||
|
@ -32,6 +32,7 @@
|
|||||||
<textarea id="description"
|
<textarea id="description"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
ng-model="story.description"
|
ng-model="story.description"
|
||||||
|
msd-elastic
|
||||||
required
|
required
|
||||||
placeholder="A brief story description">
|
placeholder="A brief story description">
|
||||||
</textarea>
|
</textarea>
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
<!-- build:js(bower_components) js/libs.js -->
|
<!-- build:js(bower_components) js/libs.js -->
|
||||||
<script src="jquery/jquery.js"></script>
|
<script src="jquery/jquery.js"></script>
|
||||||
<script src="angular/angular.js"></script>
|
<script src="angular/angular.js"></script>
|
||||||
|
<script src="angular-elastic/elastic.js"></script>
|
||||||
<script src="angular-bootstrap/ui-bootstrap.js"></script>
|
<script src="angular-bootstrap/ui-bootstrap.js"></script>
|
||||||
<script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
|
<script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
|
||||||
<script src="angular-ui-router/release/angular-ui-router.js"></script>
|
<script src="angular-ui-router/release/angular-ui-router.js"></script>
|
||||||
|
Loading…
Reference in New Issue
Block a user