opendev/storyboard-webclient
Code Issues Proposed changes

Textareas now autoresize their height.

Browse Source 
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:
Michael Krotscheck 2014-05-08 16:49:10 -07:00
parent db10f3c933
commit 52da495399
9 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
bower.json
View File

@ -1,19 +1,20 @@
{
"name": "storyboard-webclient",
"version": "0.0.1",
"dependencies": {
"jquery": "2.0.3",
"font-awesome": "4.0",
"angular": "1.2.13",
"angular-resource": "1.2.13",
"angular-sanitize": "1.2.13",
"bootstrap": "3.1.1",
"angular-ui-router": "0.2.8-bowratic-tedium",
"angular-bootstrap": "0.10.0",
"angular-local-storage": "0.0.1"
},
"devDependencies": {
"angular-mocks": "1.2.13",
"angular-scenario": "1.2.13"
}
"name": "storyboard-webclient",
"version": "0.0.1",
"dependencies": {
"jquery": "2.0.3",
"font-awesome": "4.0",
"angular": "1.2.13",
"angular-resource": "1.2.13",
"angular-sanitize": "1.2.13",
"bootstrap": "3.1.1",
"angular-ui-router": "0.2.8-bowratic-tedium",
"angular-bootstrap": "0.10.0",
"angular-local-storage": "0.0.1",
"angular-elastic": "2.3.2"
},
"devDependencies": {
"angular-mocks": "1.2.13",
"angular-scenario": "1.2.13"
}
}

11
src/app/projects/controllers/project_detail_controller.js
View File

@ -28,8 +28,8 @@
* seconds. 3 is preferable.
*/
angular.module('sb.projects').controller('ProjectDetailController',
function ($scope, $state, $stateParams, Project, Story, Session,
isSuperuser) {
function ($scope, $rootScope, $state, $stateParams, Project, Story,
Session, isSuperuser) {
'use strict';
// Parse the ID
@ -115,6 +115,13 @@ angular.module('sb.projects').controller('ProjectDetailController',
$scope.toggleEditMode = function () {
if (isSuperuser) {
$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 {
$scope.showEditForm = false;
}

9
src/app/stories/controllers/story_detail_controller.js
View File

@ -18,7 +18,7 @@
* Story detail & manipulation controller.
*/
angular.module('sb.story').controller('StoryDetailController',
function ($log, $scope, $state, $stateParams, $modal, Story,
function ($log, $rootScope, $scope, $state, $stateParams, $modal, Story,
Session, User, Preference) {
'use strict';
@ -74,6 +74,13 @@ angular.module('sb.story').controller('StoryDetailController',
$scope.toggleEditMode = function () {
if (Session.isLoggedIn()) {
$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 {
$scope.showEditForm = false;
}

8
src/app/storyboard/module.js
View File

@ -24,9 +24,10 @@
*/
angular.module('storyboard',
[ '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,
$httpProvider) {
$httpProvider, msdElasticConfig) {
'use strict';
// Default URL hashbang route
@ -38,6 +39,9 @@ angular.module('storyboard',
// Attach common request headers out of courtesy to the API
$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) {
'use strict';

1
src/app/templates/project/detail.html
View File

@ -73,6 +73,7 @@
<textarea placeholder="Enter a project description here"
class="form-control"
rows="3"
msd-elastic
required
ng-disabled="isUpdating"
ng-model="project.description">

1
src/app/templates/project/new.html
View File

@ -47,6 +47,7 @@
<textarea id="description"
class="form-control"
ng-model="newProject.description"
msd-elastic
required
placeholder="A brief project description">
</textarea>

2
src/app/templates/story/detail.html
View File

@ -97,6 +97,7 @@
<div class="form-group">
<textarea placeholder="Enter a story description here"
class="form-control context-edit"
msd-elastic
rows="3"
required
ng-disabled="isUpdating"
@ -205,6 +206,7 @@
<textarea id="comment"
placeholder="Enter your comment here"
class="form-control"
msd-elastic
rows="3"
required
ng-disabled="isSavingComment"

1
src/app/templates/story/new.html
View File

@ -32,6 +32,7 @@
<textarea id="description"
class="form-control"
ng-model="story.description"
msd-elastic
required
placeholder="A brief story description">
</textarea>

1
src/index.html
View File

@ -30,6 +30,7 @@
<!-- build:js(bower_components) js/libs.js -->
<script src="jquery/jquery.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-tpls.js"></script>
<script src="angular-ui-router/release/angular-ui-router.js"></script>